Module 6: Semantic HTML, Accessibility & SEO

Creating a website is more than just making it look good. In this module, you will learn how to write code that search engines love and that is accessible to all users, including those using assistive technologies.

1. Semantic HTML Elements

Before HTML5, developers primarily used <div> and <span> tags to structure everything. While valid, these tags are "meaningless" to computers. Semantic tags, however, describe their meaning to both the browser and the developer.

Core HTML5 Semantic Tags

<header>: Defines a header for a document or a section (often contains logos and navigation).
<nav>: Defines a set of navigation links.
<main>: Specifies the main, unique content of a document. A page should only have one main element.
<section>: Defines a thematic grouping of content, typically with a heading.
<article>: Defines independent, self-contained content (like a blog post, news story, or forum post) that could be distributed independently.
<aside>: Content aside from the content it is placed in (often used for sidebars, call-out boxes, or advertisements).
<footer>: Defines a footer for a document or section (often contains copyright, contact info, and legal links).

<body>
  <header>
    <nav>...Links...</nav>
  </header>
  
  <main>
    <article>
      <h1>Blog Post Title</h1>
      <p>Post content...</p>
    </article>
    
    <aside>
      <h3>Related Posts</h3>
    </aside>
  </main>
  
  <footer>
    <p>Copyright 2026</p>
  </footer>
</body>

2. Web Accessibility (A11y)

Accessibility ensures your website can be used by everyone, including people with visual, motor, auditory, or cognitive disabilities. Using semantic HTML (as seen above) is the first big step.

Alternative Text (Alt Text)

Always include descriptive alt attributes on images. Screen readers (used by blind users) read this text aloud.

<!-- Bad -->
<img src="graph.jpg" alt="graph">

<!-- Good -->
<img src="graph.jpg" alt="Bar chart showing a 20% increase in revenue for Q3">

Keyboard Navigation

Many users navigate the web using only a keyboard (specifically the Tab key). Ensure interactive elements (links, buttons, form inputs) are focusable and have a visible focus outline in your CSS.

ARIA Basics (Accessible Rich Internet Applications)

ARIA attributes can be added to HTML elements to provide extra context to screen readers when native HTML isn't enough (often used in complex, dynamic JavaScript applications).

<!-- Telling a screen reader that a div acts like a button -->
<div role="button" aria-pressed="false" tabindex="0">Click Me</div>

<!-- Providing a label for a button that only has an icon -->
<button aria-label="Close menu">X</button>

3. SEO Basics (Search Engine Optimization)

SEO is the practice of optimizing your website so that Google (and other search engines) rank it higher in search results. Clean HTML is the foundation of good SEO.

Meta Description and Keywords

Placed inside the <head>, the meta description is often displayed by Google beneath the blue link in search results. It should be an enticing summary of the page.

<meta name="description" content="Learn web development from scratch with our free, comprehensive HTML tutorial for beginners.">
<meta name="keywords" content="HTML, tutorial, web development, beginners">

Note: Search engines largely ignore the "keywords" meta tag today, but the "description" tag is crucial.

Heading Structure

Search engines use headings to understand the structure of your content. You should only use one <h1> per page, and ensure headings are nested logically (don't jump from h2 to h4).

Open Graph Tags

Open Graph (OG) tags control how your website looks when someone shares the link on social media (Facebook, Twitter, LinkedIn). They define the title, description, and thumbnail image that appears in the card preview.

<meta property="og:title" content="CodeCraft HTML Tutorial">
<meta property="og:description" content="Master HTML5 with our free guide.">
<meta property="og:image" content="https://www.codecraft.com/preview-image.jpg">
<meta property="og:url" content="https://www.codecraft.com/html.html">