Html5 Semantic

Semantic HTML5 elements such as <header> , <nav> , <main> , <article> , and <footer> describe the meaning of each region of a page, giving browsers, search engines, and screen readers a real document structure instead of anonymous <div> wrappers.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

", " with ", " with ", ], answer: 0, explanation: " wraps the illustration and provides a programmatically linked caption.", }, , ]; const faqItems = [ , , , , , , ]; const HTML5SemanticLesson = () => { const = useAuth(); const = useProgress('html-css'); useEffect(() => { document.title = "Advanced HTML5 Semantic Architecture | HTML & CSS Course | LearnCodingFast"; if (user) return () => ; }, [user, markLessonViewed]); return ( Courses / HTML & CSS / HTML5 Semantic Architecture Back to Course Lesson 16 • Advanced Track

By the end of this lesson you'll be able to replace generic div soup with meaningful HTML5 elements that give your page a real document outline — making it easier for search engines to index and for screen-reader users to navigate.

A web page is like a newspaper. It has a masthead at the top ( header ), a table of contents linking sections ( nav ), the main story area ( main ) full of individual articles ( article ), a sidebar of related snippets ( aside ), and the fine print at the bottom ( footer ).

Now imagine a newspaper printed entirely in one font, with no headlines, columns, or boxes — just an undifferentiated wall of text. That is what a page of nothing but div s looks like to a screen reader or a search engine: every box says "I am a box" and nothing more. Semantic elements are the headlines and column rules that let a machine read your page the way a person reads a paper.

A semantic element is a tag whose name describes the meaning of its content, not how it looks. Most of them render as a plain block box — visually identical to a div — but each one carries a built-in landmark role that browsers, search engines, and screen readers can act on. Here is the core set you will reach for on almost every page.

Run the worked example below. Notice that every landmark is just a labelled box — but a screen-reader user can jump straight to "main" or "navigation" because of those labels, something impossible with bare div s.

This is the pairing that trips everyone up. The deciding question is simple: would this content still make sense lifted out of the page and published on its own? If yes — a blog post, a news item, a product card, a comment — it is an article . If it is just one labelled part of a bigger whole — a chapter, a "Features" block, a tab panel — it is a section .

A second rule helps too: a section should always have a heading ( h2 – h6 ). If a chunk has no natural heading and is only there for layout, you probably want a plain div instead. They can also nest: an article can contain section s, and a section can contain article s.

Semantics are not only about page-level landmarks; smaller elements add meaning inside your content too:

"Div soup" is markup where every region is a div with a class — div class="header" , div class="nav" — that looks right but means nothing to a machine. The classes are for you ; the elements should be for everyone else . Swapping each wrapper for the matching landmark is usually a one-for-one rename, and it instantly gives you the document outline below.

The page below works visually but is pure div soup. Replace each labelled div with the matching semantic element. Fill in the blanks marked ___ , then run it and check the comments.

Finish this blog post so it uses content-level semantics: wrap it in an article , add a machine-readable date, highlight a key term, and caption the image. Fill in the blanks and verify against the comments.

Support is faded now — only an outline is given. Build a small but complete semantic page. Use the worked examples in sections 1 and 2 as your reference if you get stuck.

You can now architect pages with semantic HTML5 instead of div soup. The essentials:

Next up: Accessibility Deep Dive & ARIA , where you'll extend these landmarks with ARIA roles and attributes for richer, more dynamic interfaces.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary