Know About Semantic Element
Published
•2 min read
What is Sematic Element?
An Element which clearly describe it's content by it's tag name is known as Semantic Element.
For example :- <Header> , <article> , <footer> , etc
It will be more clear when code will be provided.
Why do we need to use Semantic Element or Tag?
Improved readability and maintainability.
Enhanced accessibility.
Better Search Engine Optimization.
Some Semantic Tags are :
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Now I am providing Code using above Semantic Elements.
Hope so this will be helpful for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let's Start</title>
</head>
<body>
<header>
<h1>This is a Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Nav Link 1</a></li>
<li><a href="#">Nav Link 2</a></li>
<li><a href="#">Nav Link 3</a></li>
</ul>
</nav>
<main>
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
<section>
<h2>Section Title</h2>
<p>This is the content of the section.</p>
</section>
</main>
<aside>
<h2>Aside Content</h2>
<p>This is additional content placed in the aside.</p>
</aside>
<footer>
<p>This is the footer of the page.</p>
</footer>
<details>
<summary>Details</summary>
<p>This is more information that can be toggled.</p>
</details>
<figure>
<img src="pic1.jpg" width="200px" height="200px" alt="Example Image">
<figcaption>Caption for the image</figcaption>
</figure>
<mark>This is highlighted text using the mark element.</mark>
<time datetime="2023-12-04">December 4, 2023</time>
</body>
</html>
