Skip to content
    Flow-alerta.cab

    Semantic HTML / Markup

    Web design & developmentSemantic HTMLSemantic award
    Editorially reviewed on: 2 sources
    Your reading view

    The short answer · 14 words

    In short

    Use of HTML elements according to their content meaning instead of pure optical design.

    Flow-alerta.cab (2026): Semantic HTML / Markup. https://flow-alerta.cab/en/glossar/semantic-markup. Editorially reviewed on: 09 October 2026.

    How much detail would you like?

    Practical

    Helpful for comprehensible structure, assistive technologies and maintainability; further examinations remain necessary.

    Possible example: An article page uses matching structure and heading elements; not every div container needs to be replaced.

    Possible application: Mark content structure with matching HTML elements and then check navigation, keyboard operation and assistive output. Rankings and complete accessibility are not guaranteed.

    At a glance

    Core
    Semantic markup uses HTML tags such as <header>, <nav>, <main>, <article>, <section> and correct heading hierarchies (h1–h6). This gives browsers, search engines and screen readers the logical meaning of the content.
    Use
    Helpful for comprehensible structure, assistive technologies and maintainability; further examinations remain necessary.
    Example
    Possible example: An article page uses matching structure and heading elements; not every div container needs to be replaced.
    Limits
    Excessive use of unsemantic <div> and <span> elements (div soup); choosing headings by font size instead of logical structure; misusing ARIA roles instead of native HTML.

    In context

    Accessibility

    Accessibility makes digital content usable for as many people as possible.

    Questions about this term

    Does semantic HTML guarantee better ranking or accessibility?

    No, it supports a meaningful structure; further requirements remain.

    Are div elements always wrong?

    No. Where a suitable semantic element is present, its meaning should be used.

    All details and background

    Semantic markup uses HTML tags such as <header>, <nav>, <main>, <article>, <section> and correct heading hierarchies (h1–h6). This gives browsers, search engines and screen readers the logical meaning of the content.

    ELI5 – Explained simply

    Like the labeling of moving boxes: Instead of just writing “box” on each box, you write “kitchen – glasses” on it, so that everyone immediately knows what’s inside.

    Why it matters in practice

    Helpful for comprehensible structure, assistive technologies and maintainability; further examinations remain necessary.

    Example

    Possible example: An article page uses matching structure and heading elements; not every div container needs to be replaced.

    Pitfalls and limits

    • Excessive use of unsemantic <div> and <span> elements (div soup); choosing headings by font size instead of logical structure; misusing ARIA roles instead of native HTML.

    Origin & history

    The current HTML Living Standard describes elements with content significance. Semantic marking is part of HTML and not only created by HTML5.

    Use in mid-sized companies

    • Possible application: Mark content structure with matching HTML elements and then check navigation, keyboard operation and assistive output. Rankings and complete accessibility are not guaranteed.

    Related terms

    Matching Flow-alerta service

    Websites & web applicationsWebsites & web applications

    Matching tool / use case

    View use casesPossible Use Case: Check the meaning of headings, navigation, and content areas and use appropriate native HTML elements.

    Sources

    Quellen geprüft am 09.10.2026. Redaktionelle Anwendungsbeispiele sind hypothetisch; kein Nachweis realer Kundenergebnisse.

    Editorially reviewed on:

    Next step

    Put knowledge into practice

    Discuss your projectView use cases