Semantic, Void and Nested Elements
Understand HTML Semantic, Void, and Nested elements—how they enhance structure, accessibility, and proper markup practices in web development.
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>
On this page