HTML in 1 Day: Chapter 8: Semantic HTML
By Shahin Mannan on
June 1, 2024
- Frontend Development
Understanding Semantic HTML
Semantic HTML elements clearly describe their meaning in a human- and machine-readable way. In this chapter, you’ll learn about semantic HTML elements and their importance for accessibility and SEO.
What is Semantic HTML?
Semantic HTML uses elements that provide meaning about the content they contain. This makes it easier for browsers and search engines to understand the structure and content of your web pages.
Common Semantic Elements
<header>: Represents the header of a section or page.<nav>: Contains navigation links.<section>: Defines a section of content.<article>: Represents a self-contained piece of content.<aside>: Contains content related to the main content.<footer>: Represents the footer of a section or page.<main>: Represents the main content of the document.
Examples:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Main Content</h2>
<article>
<h3>Article Title</h3>
<p>This is a self-contained piece of content.</p>
</article>
</section>
</main>
<aside>
<h2>Related Content</h2>
<p>Here is some related content.</p>
</aside>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
Benefits of Semantic HTML
- Improved Accessibility: Semantic elements help screen readers and other assistive technologies understand the structure and content of your web pages.
- Better SEO: Search engines can more easily index and understand your content, potentially improving your site's ranking.
- Cleaner Code: Semantic elements make your code more readable and maintainable.
Practical Exercise
- Create a New HTML File: Save it as
semantic.html. - Add Semantic Elements: Use
<header>,<nav>,<main>,<section>,<article>,<aside>, and<footer>to structure your content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Main Content</h2>
<article>
<h3>Article Title</h3>
<p>This is a self-contained piece of content.</p>
</article>
</section>
</main>
<aside>
<h2>Related Content</h2>
<p>Here is some related content.</p>
</aside>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
Save and open this file in your browser to see the semantic HTML elements in action.
Key Takeaways
- Semantic HTML elements describe the meaning of their content.
- Using semantic elements improves accessibility, SEO, and code readability.
- Common semantic elements include
<header>,<nav>,<section>,<article>,<aside>,<footer>, and<main>.
Next Steps
In the next chapter, we’ll explore new features introduced in HTML5, enhancing your web development skills with modern techniques and capabilities. Keep practicing to master the use of semantic HTML elements.
Please Sign In to post a comment.