An HTML element is everything from the start tag to the end tag. The content between the start tag and end tag is also part of the same element. So an HTML element is:
<tagname> content in between </tagname>
The start tag is alternatively called the opening tag, and the end tag is called the closing tag.
<title> This is a Title of The Page </title>
<h1>This is a Heading of the Page</h1>
<h2>This is a Sub Heading of the Page</h2>
<p>This is a paragraph</p>
<img src="chromelogo.png">
<a href="https://resultuniversity.com">Home Page</a>
<br>
<hr>
| Start Tag | Content | End Tag |
|---|---|---|
| <title> | This is a Title of The Page | </title> |
| <h1> | This is a Heading of the Page | </h1> |
| <h2> | This is a Sub Heading of the Page | </h2> |
| <p> | This is a paragraph | </p> |
| <img> | none | none |
| <a> | Home Page | </a> |
| <br> | none | none |
| <hr> | none | none |
So basically, an HTML document is a collection of HTML elements. i.e. Different HTML elements make an HTML document.
Empty elements are those elements that don't contain an end tag. Such Elements don't have contents too.
For example:
<hr> tag is used for a horizontal line. It does not have a closing tag, and it is contentless.
Similarly, <br> tag, which defines a line break, is also an empty element. There is no end tag or content for this element.
<img> tag is also an example of empty elements.
Empty elements are also referred to as void elements. Some books and references mention them as unpaired tags.
Some HTML elements can contain other HTML elements. Such elements are called nested elements.
You know, elements together make an HTML document. You have already seen some HTML elements are placed in between the other elements. So a nested element is:
<tagA> <tagB>Content of tagB</tagB> </tagA>
Here, note that all other elements like <body>, <h1>, and <p> are all placed inside the <html> element. Hence <html> element is also called the root element of an HTML document.
The start tag of <html> element is <html>.
The end tag of <html> is </html>.
Now see the code between opening <html> tag and closing <html> tag.
<html> and </html>
We notice <body> element is inside the <html> element. <body> element defines the document body.
The start tag of the <body> element is <body>.
The start tag of the <body> element is <body>.
<body> and </body>
The heading is defined with the <h1> element.
The start tag of the <h1> element is <h1>.
The content of the <h1> element is "Result University HTML Tutorial".
The end tag of the <h1> element is </h1>.
The <p> element defines a paragraph..
The start tag of the <p> element is <p>.
The content of the <p> element is "Welcome to Result University. Start Learning.".
The end tag of the <p> element is </p>.
Now you have understood how elements are nested inside HTML documents. Let's think about what would happen if we miss the end tag of an HTML element.
In the below example, we have deliberately missed the ending </p> tag of element <p>.
Click on 'try on editor' to view the result.
We see that content of the <p> element is displayed correctly in the browser as expected.
Though <p> element is displayed correctly, we should never miss the closing tag of an element. Avoiding end tags may encounter unexpected results.
So, always write closing tags for elements that end with ending tags.
HTML is not a case-sensitive language. That means tags and their attributes can be written in uppercase or lowercase letters.
It means <h1> is treated equally with <H1>. <P> and <p> are same.
After viewing the result of the above HTML code, we conclude that the browser treats tags equally, whether they are written in uppercase or lowercase.
Though uppercase letters are allowed, we advise using lowercase letters for the HTML tags. All examples on this website use lowercase letters for tag names.
| 1. HTML Tutorial |
| 2. Introduction to HTML |
| 3. Basic HTML Page |
| 4. HTML Editors |
| 5. Web Browser |
| 6. HTML History |
| 7. Basic HTML Tags |
| 8. HTML Elements |
| 9. HTML Attributes |
| 10. HTML Headings |
| 11. HTML Paragraphs |
| 12. HTML Text Formatting |
| 13. HTML Styles |
| 14. HTML Comment |
| 15. HTML Quotation |
| 16. HTML Colors |
| 17. HTML RGB Colors |
| 18. HTML HEX Colors |
| 19. HTML HSL Color |
| 20. HTML CSS |
| 21. HTML Links |
| 22. HTML Link Colors |
| 23. Link within Page |
| 24. HTML Images |
| 25. HTML Background Image |
| 26. HTML Image Map |
| 27. HTML Picture Element |
| 28. HTML Favicon |
| 29. HTML Table |
| 30. HTML Table Border |
| 31. HTML Table Size |