Web Development · Beginner level

Beginner level · Module 1: HTML for Structured Web Pages · Lesson 2 of 3

Semantic HTML Structure

Write a complete HTML document and use semantic elements and headings so browsers, search engines and assistive technology understand the content.

In this lesson you will

  • Write a valid HTML document
  • Choose semantic elements and a logical heading order

Key concepts

<!DOCTYPE html> and <head>semantic elements (header, nav, main, section, footer)heading levelslang attribute

The lesson

Every page starts with <!DOCTYPE html>, an <html lang="en"> element, a <head> with the character set, viewport and title, and a <body> with the content. The viewport meta tag is essential for pages to display correctly on phones.

Semantic elements describe meaning: <header>, <nav>, <main>, <section>, <article> and <footer>. Screen readers use them to let users jump around a page, and search engines use them to understand it. A page built only from <div> elements has no such meaning.

Use one <h1> for the page's main topic, then <h2> for sections and <h3> for subsections, without skipping levels. Choose headings by meaning, never to make text big — that is CSS's job.

Step by step

  1. Create index.html with the full document structure.
  2. Add header, nav, main with three sections, and footer.
  3. Give the page one h1 and logical h2/h3 headings.
  4. Check the page with the W3C validator.

Practice activity

Mark up the organisation profile from the practical activity with semantic elements and a correct heading outline.

Expected result: The validator reports no errors and the heading outline reads like a table of contents.

Check your understanding

  1. Why is the viewport meta tag important?

    Show answer

    It makes pages display at the correct width on mobile devices.

  2. Should headings be chosen by size or meaning?

    Show answer

    By meaning; size is controlled with CSS.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.