Semantic Elements
Elements that clearly describe their meaning to the browser and the developer as well are semantic elements.
Some of the semantic elements in HTML are as follows:
<article><aside><details><figcaption><figure><form><footer><header><main><mark><nav><section><summary><time>
When appropriate, these elements should be used instead of non-semantic elements, such as <div> or <span>, to provide more meaning and structure to your HTML document.
Void Elements
Elements which does not have a closing tag because they do not have any content or child elements are void elements.
These elements are self-closing, i.e., they end with a forward slash / before the closing angle bracket >.
Some of the void elements in HTML are as follows:
<br><hr><img><input><link><meta><wbr>
Nested Elements
Elements that are placed inside other elements are nested elements.
The inner element is called a child element, and the outer element is called a parent element.
For example:
<div>
<h1>Heading</h1>
<p>Paragraph</p>
</div>In the above example, the <h1> and <p> elements are child elements of the <div> element.
Nested elements are commonly used in HTML to create more complex and structured layouts for web pages.
Some of the nested elements in HTML are as follows:
<div><span><ul><ol><h1><p>
👉 Next tutorial: HTML Block-level and Inline Elements