An HTML element is usually made up of an <opening> tag and a </closing>
tag, with the content between the two tags. An HTML element is made up of everything from the opening tag to the closing tag:
Structure of HTML elements
Opening Tag | Content | Closing Tag
-------- | ------------ | ---------
<div id="ez-toc-container" class="ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title" style="cursor:inherit">Table of Contents</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-1" href="#Document_Heading" >Document Heading</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-2" href="#Document_Heading-2" >Document Heading</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-3" href="#This_is_a_heading" >This is a heading</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#Document_Heading-3" >Document Heading</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#Document_Heading-4" >Document Heading</a></li></ul></li></ul></li></ul></nav></div>
<h1><span class="ez-toc-section" id="Document_Heading"></span> Document Heading <span class="ez-toc-section-end"></span></h1>
<br>, <hr>etc. have a different structure from the above. Since they do not have a closing tag, they are called empty tags.Nested HTML elements
HTML elements can be nested, meaning there can be elements within elements.
All HTML documents are made up of nested HTML elements.
The following HTML document is made up of 6 HTML elements:
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Element</title>
</head>
<body>
<h3><span class="ez-toc-section" id="Document_Heading-2"></span>Document Heading<span class="ez-toc-section-end"></span></h3>
<p>This is a paragraph.</p>
</body>
</html>
Output
This is a heading
This is a paragraph.
Example description
- The first line of the HTML document above
<!DOCTYPE html>refers to version 5 of HTML. - It
<html>starts with the opening tag and</html>ends with the closing tag. <head>The element contains additional information about the document<head>, such as the document title, document description, etc. It starts with the tag and</head>ends with the tag.<title>The element contains the title or name of the document<title>. It starts with the tag and</title>ends with the tag.- Here
<body>the element is the content element, that is,<body>the main part of the document.
<body>
<h3><span class="ez-toc-section" id="Document_Heading-3"></span>Document Heading<span class="ez-toc-section-end"></span></h3>
<p>This is a paragraph</p>
</body>
bodyPart Description:
It <body>started with the tag and </body>ended with the tag.
<h3>And <p>the two elements are content elements.
<h3>The element represents a heading .
<h3><span class="ez-toc-section" id="Document_Heading-4"></span>Document Heading<span class="ez-toc-section-end"></span></h3>
It starts with an opening tag and ends with a closing tag , and the content of this element is: Document heading.<h3></h3>
<p>An element represents a paragraph .
<p>This is a paragraph</p>
It <p>starts with an opening tag and </p>ends with a closing tag, and the content of this element is: This is a paragraph.
Always use closing tags!
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
</head>
<body>
<p>This is a paragraph
<p>This is another paragraph
</body>
</html>
Ouput
This is a paragraph
This is another paragraph
The above example works in all browsers, because the closing tag is considered optional in HTML5.
Always use lowercase letters!
HTML tags are not case sensitive. For example, <code> <P>and <p><code> have the same meaning.
Lowercase is not mandatory in HTML(5). However, the W3C recommends using lowercase, and strict documents like XHTML require lowercase.
