Semantic HTML
Semantic HTML means using HTML tags that clearly describe their meaning both to the browser and to developers. This makes your web pages more accessible, SEO-friendly, and easier to maintain.
Here are some important semantic
elements and what they represent:
1.
<header>
- Represents the header section of a page or a
section.
- Usually contains site logos, navigation menus, or
headings.
Example:
<header>
<h1>My Website</h1>
<nav>
<!-- navigation links here -->
</nav>
</header>
2.
<footer>
- Represents the footer section of a page or a
section.
- Usually contains copyright info, contact links, or
disclaimers.
Example:
<footer>
<p>© 2025 Saqib Jahangir Blog. All
rights reserved.</p>
</footer>
3.
<main>
- Represents the main content of the document.
- There should be only one <main> per page.
- Helps screen readers know where the main content
starts.
Example:
html
CopyEdit
<main>
<article>
<h2>Introduction to Web Development</h2>
<p>Welcome to this beginner’s
guide...</p>
</article>
</main>
4.
<article>
- Represents a self-contained piece of content
like a blog post, news article, or forum post.
- It should make sense on its own.
Example:
<article>
<h2>What is HTML?</h2>
<p>HTML stands for HyperText Markup
Language...</p>
</article>
5.
<section>
- Represents a thematic grouping of content,
typically with a heading.
- Used to divide content into logical sections.
Example:
html
CopyEdit
<section>
<h3>Getting Started</h3>
<p>Here’s how to set up your first
project...</p>
</section>
6.
<nav>
- Represents a navigation block with links to
other pages or parts of the site.
- Helps users and search engines understand the navigation
structure.
Example:
html
CopyEdit
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Putting
It All Together
Here’s a simple webpage layout using
semantic tags:
<!DOCTYPE
html>
<html>
<head>
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>Saqib’s Web Dev Blog</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Welcome to Web Development</h2>
<section>
<h3>What is Web Development?</h3>
<p>Web development is the process
of creating websites...</p>
</section>
</article>
</main>
<footer>
<p>© 2025 Saqib Jahangir Blog. All
rights reserved.</p>
</footer>
</body>
</html>