freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 8.1 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

What is semantic HTML?

Covered here

  • Semantic vs non-semantic elements
  • Who benefits from semantic HTML
  • When div and span are still right
  • Choosing the most meaningful element

Short answer

Semantic HTML means choosing tags that describe what content is, not just how it looks. A <button> is a button. A <nav> is navigation. A <div> means nothing at all. Meaningful tags help screen readers, search engines, browser features like reader mode, and the next person who edits your code.

Semantic vs generic

<!-- Non-semantic -->
<div class="button" onclick="order()">Order now</div>

<!-- Semantic -->
<button type="button" onclick="order()">Order now</button>

Both look the same with CSS. But the real button can be reached with the Tab key, pressed with Enter or Space, and is announced as button by screen readers. The div does none of that unless you rebuild it all by hand.

Who benefits

  • Screen reader users navigate by landmarks, headings, lists, and buttons.
  • Keyboard users get focus and activation for free on links, buttons, and form fields.
  • Search engines get clearer signals about the main content and structure.
  • Reader mode and translation tools find the article body more reliably.
  • Developers read the code faster.

When div and span are right

<div> (a block) and <span> (inline) are generic containers for styling. Use them when no other element fits, like a wrapper for a CSS grid. They are not bad. They are just a last choice.

Pick the most meaningful element

ContentUseNot
Clickable action<button><div onclick>
Goes to another page<a href><button>
Section title<h2><div class=“title”>
List of items<ul>Many <div>s
Date<time datetime><span>

A simple rule: links go somewhere, buttons do something.

Try it: swap divs for meaning

Replace each div with the most meaningful element: a heading, a list, a link, and a button.

Live preview

Quick quiz

1. What does semantic HTML focus on?
2. Which element is reachable with Tab by default?
3. Links vs buttons?
4. When is a div fine?

Common mistakes

  • Div soup. Pages built only from divs are hard to navigate.
  • Buttons as links or links as buttons. Each has different keyboard and screen reader behavior.
  • Picking tags by default style. Style comes from CSS, meaning from tags.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Semantic HTML
Using tags that describe content meaning.
<div>
A generic block container with no meaning.
<span>
A generic inline container with no meaning.
Landmark
A major page region screen readers can jump to.
<time>
Marks a date or time in a machine-readable way.

Questions beginners ask

Does semantic HTML help SEO?

It gives search engines clearer structure. Content quality still matters most.

Is semantic HTML the same as accessibility?

It is the foundation of accessibility, but not all of it.

What is ARIA?

ARIA attributes add meaning when HTML has no fitting element. The first rule of ARIA: use native HTML when you can.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.