HTML Elements
An HTML element normally has a start tag and end tag, with between which the contents are inserted:
The HTML element consists of everything from the start tag to the end tag:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> |
Some of the HTML elements are left empty (have no content) and do not have an end tag, like the
element (which indicates a line break).
Nested HTML Elements
HTML elements can also be found to be nested (elements can contain elements).
All HTML documents has nested HTML elements in it.
This example given below contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself
Example Explained
The <html> element can be used to define the whole document.
It consists of a start tag <html> and an end tag </html>.
The element content is considered as another HTML element (the <body> element).
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body> element is used to define the document body.
It consists of a start tag <body> and an end tag </body>.
The element of the content consists of two other HTML elements (<h1> and <p>).
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <h1> element is used to define a heading.
It consists of a start tag <h1> and an end tag </h1>.
The element of the content is: My First Heading.
<h1>My First Heading</h1>
The <p> element is used to define a paragraph.
It consists of a start tag <p> and an end tag </p>.
The element of the content is: My first paragraph.
<p>My first paragraph.</p>
Do Not Forget the End Tag
Some of the HTML elements will also display correctly, even if you forget to include the end tag:
The example given above will work in all browsers, as the closing tag is considered to be an optional.
But, we suggest you to not rely on this.Because, it can also produce unexpected errors or results incase if you forget the end tag.
Empty HTML Elements
HTML elements which is having no content are called as empty elements.
<br> can be considered an empty element which does not have a closing tag (the <br> tag defines a line break).
Empty elements can also be "closed" while writing the opening tag like this: <br />.
HTML5 do not need empty elements to be closed. But if strict validation is needed, or need to have your document more readable by XML parsers, you must have to close all the HTML elements properly.
Use Lowercase Tags
HTML tags cannot be considered to be case sensitive: <P> means the same as <p>.
The HTML5 standard do not need lowercase tags, but NGO recommends to have lowercase in HTML, and demands lowercase for writing stricter document types like XHTML.
At NGO we are always using lowercase tags.