HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
HTML Semantic Tags
HTML5 introduced semantic tags that add meaning to the structure of your web content. They make your HTML more descriptive for browsers, developers, and search engines alike.
What are Semantic Tags?
Semantic tags clearly describe the role or type of the content they contain. Rather than using generic <div> or <span>, these tags define purpose- for example, a navigation bar, articles, or footer.
Why use Semantic Tags?
- Improved structure: Easy to understand and maintain.
- Better accessibility: Help screen readers navigate your site.
- Boost SEO: Search engines can better index and rank your content.
- Cleaner code: Show intent and purpose for each section.
Common Semantic Tags & their Use
| Tag | Purpose |
|---|---|
<header> | Introductory section (logo, heading, nav) |
<nav> | Navigation links |
<main> | Main content area (1 per page) |
<section> | Group of related content or theme |
<article> | Independent, reusable piece of content (e.g. blog post, news article) |
<aside> | Side content like sidebars or tips |
<footer> | Page/footer info (copyright, links) |
<figure> | Container for images or diagrams |
<figcaption> | Caption for the figure |
<time> | Displays time or date values |
Basic Structure with <header> and <footer>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<footer>
<p>© 2025 My Website</p>
</footer>
Articles and Sections
<article>
<h2>How to Learn HTML</h2>
<section>
<p>HTML is the foundation of the web...</p>
</section>
</article>
Sidebar & Navigation
<aside>
<p>Tip: Practice every day for better results!</p>
</aside>
<nav>
<ul>
<li>Blog</li>
<li>Projects</li>
</ul>
</nav>
Figure with Caption
<figure>
<img decoding="async" src="image.jpg" alt="Laptop with code on screen">
<figcaption>A developer's workspace.</figcaption>
</figure>
Conclusion
Semantic tags give structure and meaning to your HTML. They are better for:
- Code readability
- Accessibility
- SEO
- Long-term maintenance
Using them properly is key to writing professional, modern HTML.