Web Accessibility / Introduction to Web Accessibility
HTML Structure
This tutorial will provide an in-depth understanding of Semantic HTML. We will focus on how to structure your HTML code semantically to improve accessibility, SEO, and maintainabi…
Section overview
4 resourcesCovers the basics of web accessibility, its importance, and its impact on inclusive design.
1. Introduction
In this tutorial, we aim to provide a deep understanding of Semantic HTML. Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like <form>, <table>, and <article> clearly describe their content.
By the end of this tutorial, you will be able to structure your HTML code semantically, improving website accessibility, SEO, and maintainability.
Prerequisites
- Basic knowledge of HTML tags and attributes.
- A text editor (like Sublime Text, Atom, Visual Studio Code, etc.)
- A modern web browser for testing (like Chrome, Firefox, Safari, etc.)
2. Step-by-Step Guide
HTML documents are structured as a collection of nested HTML elements, each represented by a start tag and an end tag.
HTML Document Structure
At the root of your HTML document, you must have a <!DOCTYPE html> declaration followed by the <html> tag. Within the <html> tag, you'll have <head> and <body> tags. The <head> tag contains metadata, while the <body> tag contains the webpage’s content.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata goes here -->
</head>
<body>
<!-- Webpage content goes here -->
</body>
</html>
Semantic HTML Tags
Semantic tags provide meaning to the structure of the web content. Here are some semantic HTML5 tags:
<header>: This tag is used to contain introductory content or a set of navigational links.<nav>: This tag is used to define a set of navigation links.<main>: This tag is used for the dominant content of the<body>of a document.<article>: This tag specifies independent, self-contained content.<section>: This tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.<footer>: This tag defines a footer for a document or section.
3. Code Examples
Let's look at a simple example of semantic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
<main>
<article>
<h2>About Me</h2>
<p>This is where you can learn more about me.</p>
</article>
<section>
<h2>Contact Information</h2>
<p>Reach me via email at myemail@example.com.</p>
</section>
</main>
<footer>
<p>Copyright © 2022 My Site</p>
</footer>
</body>
</html>
This is a basic webpage with a header containing a title and navigation, a main content area with an article and a section, and a footer.
4. Summary
In this tutorial, we've covered the basics of structuring an HTML document semantically. We've learned the importance of semantic HTML and how it can lead to more accessible and maintainable web content. We've also seen a practical example of a semantically structured HTML document.
To continue learning, you might want to research more HTML5 tags and their uses. W3Schools and Mozilla Developer Network (MDN) are excellent resources for this.
5. Practice Exercises
- Create an HTML document with a header, main, and footer. Add a navigation bar in the header.
- Inside the main tag, create two sections. Each section should have a title and a paragraph.
- Inside the footer, add a copyright notice.
Here's a solution for the practice exercises:
<!DOCTYPE html>
<html>
<head>
<title>Practice Page</title>
</head>
<body>
<header>
<h1>Practice Page</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>This is the first section.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is the second section.</p>
</section>
</main>
<footer>
<p>Copyright © 2022 My Practice Page</p>
</footer>
</body>
</html>
This exercise should give you a good handle on structuring an HTML document. Keep practicing by adding more sections and experimenting with different semantic tags.
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