HTML5

Chapter 6 — Semantic HTML & SEO

📚 Chapter Overview

A good website is not just for humans; it's for search engines and screen readers too. In this chapter, you will learn how to use Semantic tags to give meaning to your code and improve your site's SEO (Search Engine Optimization).

Learning Objectives:

6.1 Semantic Tags

Part 1 — Definition

A semantic element clearly describes its meaning to both the browser and the developer. For example, a <div> tells the browser nothing about its content, but a <header> tells the browser exactly what it is. This is crucial for accessibility and search engine ranking.

Part 2 — Syntax

<header>...</header>
<nav>...</nav>
<main>
    <section>...</section>
    <article>...</article>
</main>
<footer>...</footer>

Part 3 — Example

Problem: Structure a blog post using semantic HTML.

index.html 
<article>
    <header>
        <h1>The Future of AI</h1>
        <p>Published on Aug 27, 2026</p>
    </header>
    <p>AI is changing the world...</p>
    <footer>
        <p>Written by John Doe</p>
    </footer>
</article>

Part 4 — Video

Video: Coming Soon

6.2 SEO Basics with Meta Tags

Part 1 — Definition

Metadata is data about data. In HTML, <meta> tags are placed in the <head> section and are used to provide information about the page description, keywords, and author to search engines.

Part 2 — Syntax

<meta name="description" content="Learn HTML5 with Intelle Learn.">
<meta name="keywords" content="HTML, CSS, Web Development">

Part 3 — Example

Problem: Optimize a page for social sharing.

index.html 
<meta property="og:title" content="My Portfolio">
<meta property="og:image" content="preview.jpg">

Observation: These are called Open Graph tags and are used by Facebook and LinkedIn to display rich links.

Part 4 — Video

Video: Coming Soon

🏆 Chapter Challenge

Challenge Objective

Refactor a plain "Div-soup" page into a Semantic masterwork.

Requirements

Step-by-Step Process

  1. Analyze the existing structure.
  2. Replace IDs like id="header" with the semantic <header> tag.
  3. Ensure the <main> tag contains the primary content.

Expected Deliverables

Solve in Editor