In this chapter, you will go through some HTML basic examples.
Don’t worry, if you find some tags you haven’t learned yet.
HTML Documents
The first condition of HTML documents is that all HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document begins with <html> tag and ends with </html>.
The visible part, of the HTML document which an user can see at his computer screen is between <body> and </body>.
HTML Basic Example
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings in HTML documents are defined with the <h1> to <h6> tags.
<h1> defines the most significant heading. <h6> defines the least significant heading:
Example
<h1>This is H1 heading 1</h1>
<h2>This is H2 heading 2</h2>
<h3>This is H3 heading 3</h3>
HTML Paragraphs
Paragraphs in HTML documents are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is Second paragraph.</p>
HTML Links
HTML links also called Hyperlinks are defined with the <a> tag:
Example
<a href=”https://foxtutorials.com”>This is a link</a>
The href attribute is use to specifiy link’s destination.
In a HTML document attributes are used to provide additional information about HTML elements.
You will learn more about attributes in coming chapters.
HTML Images
In HTML documents HTML images in are defined with the <img> tag.
The source file (src), width, height and alternative text (alt), are provided as attributes:
Example
<img src=”foxtutorials.jpg” alt=”FoxTutorials” width=”150″ height=”200″>
How to View HTML document Source?
You must have seen a Web page, but have you ever thought, how they made?”
View HTML Source Code:
To view the source code of the HTML document, Right-click in an HTML page and select “View Page Source” (in Chrome) or “View Page Source” (in Firefox) or “View Source” (in Edge), or similar in other browsers. This will open a window containing the raw HTML source code of the web page.
Inspect an HTML Element:
To see what elements are made up of (you will see both the HTML and the CSS) Right-click on an element (or a blank area), and choose “Inspect” or “Inspect Element”. Using inspect elements feature, you can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.