HTML documents are defined by HTML elements.
HTML element
| Start tag | Element content | End tag * | |
|---|---|---|---|
| <p> | This is a passage | </p> | |
| <a href="default.htm"> | This is a link | </a> | |
| <br> |
* Start tags are often referred to as the opening tag , and the end tag is often called closing tag .
HTML Element Syntax
- HTML elements with a start tag starting
- HTML elements with an end tag termination
- The content of the element is the content between the start tag and the end tag
- Some HTML elements have empty content
- The empty element is closed in the start tag (ending with the end of the tag)
- Most HTML elements can have properties
Note: You will learn more about the properties in the next chapter of this tutorial.
Nested HTML elements
HTML documents are made up of nested HTML elements.
HTML document instance
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The above example contains three HTML elements.
HTML instance parsing
The <p> element:
<p>This is my first paragraph.</p>
This <p> element defines a paragraph in the HTML document.
This element has a start tag <p> and an end tag </ p>. The
element content is: This is my first paragraph.
This element has a start tag <p> and an end tag </ p>. The
element content is: This is my first paragraph.
The <body> element:
<body>
<p>This is my first paragraph.</p>
</body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML document.
This element has a start tag <body> and an end tag </ body>.
The element content is another HTML element (p element).
This element has a start tag <body> and an end tag </ body>.
The element content is another HTML element (p element).
The <html> element:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The <html> element defines the entire HTML document.
This element has a start tag <html>, and an end tag </ html>. The
element content is another HTML element (body element).
This element has a start tag <html>, and an end tag </ html>. The
element content is another HTML element (body element).
Do not forget to end the label
Even if you forget to use the end tag, most browsers will display HTML correctly:
<p>This is a paragraph
<p>This is a paragraph
<p>This is a paragraph
The above example can also be displayed in the browser, because the closure of the label is optional.
But do not rely on this approach. Forgetting to use the end tag will produce unpredictable results or errors.
HTML empty element
HTML elements that do not have content are called empty elements. The empty element is closed in the start tag.
Is the empty element that does not close the label (the label defines the line feed).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding slashes to the start tag, such as <br />, is the right way to close empty elements, HTML, XHTML, and XML accept this way.
Even if it is valid in all browsers, using <br /> is actually more long-term protection.
HTML Tip: Use lowercase tags
HTML tags are case-insensitive: <P> is equivalent to <p>. Many sites use uppercase HTML tags.
Self School using lowercase tags because the World Wide Web Consortium (W3C) in HTML 4 are recommended to use lower case, and in the future (X) HTML version of the mandatory use lowercase.