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