LearnViz CompSci
Home / Learn / Web Development / Semantic HTML

Beginner Topic 4 of 51 Web Development

Semantic HTML

Using tags that convey meaning such as header and article.

How it works

Semantic HTML uses elements that convey meaning rather than just appearance: header, nav, main, article, section, aside, footer, figure, time, button and headings in logical order. These give structure to browsers, search engines, assistive technologies and developers, enabling features like reader mode and landmark navigation. A button is naturally focusable and keyboard-operable, unlike a clickable div.

Step-by-step walkthrough

  1. Use tags that describe meaning, not only appearance.
  2. header holds the page intro.
  3. nav holds navigation links.
  4. main holds the unique content with article and section.
  5. footer closes the page, and screen readers and search engines benefit.

Where it is used

Accessible, SEO-friendly sites and maintainable layouts use semantic markup. Screen reader users jump between landmarks and headings to navigate pages quickly.

Common pitfall

Div soup, with generic divs and spans everywhere, loses meaning and requires extra ARIA and scripting to be accessible. Using headings for size instead of hierarchy breaks outlines. Misusing elements, such as tables for layout, causes problems. Choose the element by its meaning and style it with CSS.

Where it fits in the course

Semantic HTML is topic 4 of 51 in Web Development, rated Beginner. It follows HTML Forms. The next topic is CSS Basics.

Practice and explore

How to study this topic

  1. Read the explanation above and restate the definition in your own words.
  2. Open the interactive lesson and answer its mini quiz.
  3. Read the common pitfall, then write a short example that avoids it.
  4. Check your understanding in the Web Development quiz, and revisit the topic if you miss a question.

Frequently asked questions

What is Semantic HTML?
Using tags that convey meaning such as header and article. It belongs to Web Development and is a beginner-level topic.
Where do people use Semantic HTML?
Accessible, SEO-friendly sites and maintainable layouts use semantic markup.
What is the most common mistake with Semantic HTML?
Div soup, with generic divs and spans everywhere, loses meaning and requires extra ARIA and scripting to be accessible.
What should I learn before this topic?
Start with HTML Forms, the topic just before it in Web Development.
How can I practice it?
Answer the mini quiz in the interactive lesson, then take the Web Development quiz.
Is Semantic HTML hard to learn?
It is a Beginner topic, so it works as an entry point. If the terms are new, read the explanation twice and try the visualizer before the quiz.
How long does it take to learn Semantic HTML?
Most learners can read the explanation and finish the interactive lesson in under an hour. Fluency comes from applying the idea, so plan a few short practice sessions with the quiz.
Which topics are related to Semantic HTML?
HTML Forms, CSS Basics, HTML Basics are closely connected. The full list is in the related topics section of this page.
What should I study after Semantic HTML?
Continue with CSS Basics, the next topic in Web Development.

Related topics