Lesson Outcomes

After completing this lesson, learners will be able to:

• Define semantic HTML.
• Explain the importance of organising content properly.
• Identify common semantic HTML elements.
• Understand how semantic elements improve accessibility and readability.
• Apply semantic structure in web pages.

Overview

Semantic HTML refers to the use of HTML elements that clearly describe their meaning and purpose.

Instead of using generic tags, semantic elements help define the structure of a webpage in a meaningful way.

Using semantic HTML helps:

• Improve readability of code
• Enhance accessibility
• Support search engines (SEO)
• Organise content logically

1. What is Semantic HTML?

Semantic HTML uses elements that clearly describe the role of the content they contain.

Examples include:

• <header> → Defines the header of a page
• <nav> → Defines navigation links
• <main> → Defines main content
• <section> → Defines a section of content
• <article> → Defines independent content
• <footer> → Defines the footer

These elements give meaning to the structure of a webpage.

2. Importance of Semantic HTML

Using semantic HTML is important because it:

• Makes code easier to understand
• Improves accessibility for screen readers
• Helps search engines understand content
• Improves website structure

Without semantic elements, web pages can be harder to read and interpret.

3. Common Semantic Elements

HTML provides several semantic elements.

3.1 <header>

• Represents the top section of a page
• May include:
  • Title
  • Logo
  • Navigation

3.2 <nav>

• Contains navigation links
• Used for menus

3.3 <main>

• Contains the main content
• Only one <main> per page

3.4 <section>

• Groups related content
• Used for different sections of a page

3.5 <article>

• Represents independent content
• Can stand alone

Examples:

• Blog posts
• News articles

3.6 <footer>

• Represents the bottom section of a page
• May include:
  • Contact information
  • Copyright details

4. Organising Content with Semantic Elements

Semantic elements help organise web pages clearly.

Example structure:

<header>
  <h1>My Website</h1>
</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<main>
  <section>
    <h2>Section Title</h2>
    <p>Content goes here.</p>
  </section>
</main>

<footer>
  <p>Copyright 2024</p>
</footer>

5. Benefits of Organised Content

Using semantic HTML provides several benefits:

• Easier to read and maintain code
• Better user experience
• Improved accessibility
• Clear content structure
• Better SEO performance

6. Semantic vs Non-Semantic Elements

Semantic Elements

• Clearly describe their purpose
• Example:
  • <header>
  • <footer>
  • <article>

Non-Semantic Elements

• Do not describe content meaning
• Example:
  • <div>
  • <span>

Key Difference

• Semantic elements provide meaning
• Non-semantic elements are generic

Key Notes

• Semantic HTML uses meaningful tags to structure content.
• Common semantic elements include <header>, <nav>, <main>, <section>, <article>, and <footer>.
• Semantic HTML improves readability and organisation.
• It enhances accessibility and search engine optimisation.
• Semantic elements provide meaning, while non-semantic elements are generic.
• Proper content organisation improves user experience.