Introduction to Web Accessibility - Web Accessibility Tutorials

HTML Structure

Tutorial 3 of 4

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 &copy; 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 &copy; 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.