Web Accessibility / Semantic HTML for Accessibility
Enhancing Content Structure with Semantic Tags
This tutorial will teach you how to structure your content effectively using semantic tags. You'll learn how to create a meaningful and accessible content structure with Semantic …
Section overview
5 resourcesDiscusses the importance of using semantic HTML to create accessible and meaningful content.
1. Introduction
This tutorial aims to enable you to structure your web content more effectively using semantic tags in HTML. By the end of this tutorial, you will have a solid understanding of how semantic HTML can lead to more readable and accessible code, and you'll be able to apply semantic HTML in your own projects.
Prerequisites: Basic knowledge of HTML and web development.
2. Step-by-Step Guide
Semantic HTML
Semantic HTML involves using HTML5 tags that provide meaning to the structure of the content on the web page. It makes the webpage more accessible and improves its SEO.
Examples of semantic tags include <header>, <footer>, <article>, <section>, <nav>, etc. These tags tell the browser and the developer about the type of content they contain.
Best Practices
- Always use semantic tags when possible.
- Avoid div-soup, i.e., don't use
<div>for everything. - Use
<nav>for navigation,<main>for the main content, and<footer>for the footer content.
3. Code Examples
Example: Basic Semantic Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<!-- This is where your header content (like a logo or a title) goes -->
</header>
<nav>
<!-- This is where your navigation links go -->
</nav>
<main>
<!-- This is where the main content of your webpage goes -->
</main>
<footer>
<!-- This is where your footer content goes -->
</footer>
</body>
</html>
Example: Nested Semantic Tags
<main>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>Article content goes here.</p>
<footer>
<p>Published on: date</p>
</footer>
</article>
</main>
In this example, we used <article>, <header>, <footer> tags within the <main> tag to structure the content of an article.
4. Summary
In this tutorial, we've covered the basics of semantic HTML, including what it is, why it's important, and how you can implement it in your web pages. We've also provided examples and best practices for you to follow.
The next step in your learning journey could be to explore more advanced HTML topics, or to learn about CSS and JavaScript to add style and interactivity to your web pages.
5. Practice Exercises
- Create a basic web page structure using semantic tags.
- Create a blog post structure using nested semantic tags.
Solutions
- Basic Web Page Structure:
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<main>
<p>This is where the main content of your webpage goes.</p>
</main>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
- Blog Post Structure:
<!DOCTYPE html>
<html>
<head>
<title>Blog Post</title>
</head>
<body>
<header>
<h1>Blog Title</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<main>
<article>
<header>
<h2>Post Title</h2>
</header>
<p>Post content goes here.</p>
<footer>
<p>Published on: date</p>
</footer>
</article>
</main>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
Remember to practice and experiment with different semantic tags to get a better understanding of how they work.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article