Zum Hauptinhalt springen

Was ist semantisches HTML? Bedeutung, Tags und Beispiele

Semantisches HTML bedeutet, HTML-Elemente nach ihrer Bedeutung auszuwählen und nicht nach ihrem Aussehen.

Eine Überschrift wird zu <h2>, die Navigation zu <nav>, der Hauptinhalt zu <main>.

So verstehen nicht nur Deine Nutzer, sondern auch Browser, Screenreader und Suchmaschinen, was auf Deiner Seite steht.

Brauchst Du eine Auffrischung der HTML-Grundlagen? Dann schau gerne in meine Einführung in HTML für Anfänger rein.

Das Bild zeigt einen Vergleich zwischen nicht-semantischem und semantischem HTML. Auf der linken Seite, unter der Überschrift “Ohne Semantik”, wird der Aufbau einer Webseite ausschließlich mit generischen HTML-Tags wie <div> und <span> dargestellt. Die Struktur ist schwer verständlich, da keine beschreibenden Tags verwendet werden. Auf der rechten Seite, unter der Überschrift “Mit Semantik”, wird dieselbe Webseite mit semantischen HTML-Tags wie <header>, <nav>, <main>, <article>, <h2>, <figure>, <p>, <section>, <aside> und <footer> dargestellt. Diese Tags bieten eine klarere und besser verständliche Struktur, die sowohl für Menschen als auch für Maschinen einfacher zu interpretieren ist.

Was ist semantisches HTML?​

Semantisches HTML heißt, für jeden Inhalt das Element zu wählen, dessen Bedeutung zu diesem Inhalt passt. Welche Bedeutung ein Element hat, legt der HTML Living Standard der WHATWG fest:

Elemente, Attribute und Attributwerte in HTML haben durch diese Spezifikation festgelegte Bedeutungen (Semantik). So repräsentiert zum Beispiel das <ol>-Element eine geordnete Liste und das lang-Attribut die Sprache des Inhalts.

Quelle: HTML Living Standard: 3.2.1 Semantics (eigene Übersetzung)

Anstatt nur generische Container wie <div> und <span> zu benutzen, solltest Du spezifische Tags wie <article> oder <section> verwenden, um Deine Inhalte auszuzeichnen.

Diese Tags haben eine besondere Bedeutung und geben nicht nur Dir, sondern auch Suchmaschinen und Screenreadern einen besseren Kontext.

Dadurch wird Deine Webseite verständlicher und zugänglicher.

Aber pass auf, semantisches HTML ist nur ein Aspekt der sogenannten technischen SEO. Falls Du alles darüber wissen möchtest, schaue mal in meinem Leitfaden zur technischen SEO vorbei.

Vorteile von semantischem HTML​

Bessere Suchmaschinenoptimierung (SEO)​

Mit semantischem HTML wird Deine Website für Suchmaschinen verständlicher.

Warum?

Weil der HTML Living Standard Suchmaschinen sogar ausdrücklich nennt: Sie können Überschriften nutzen, um eine Seite effektiver zu indexieren oder aus den Suchergebnissen direkt auf Unterabschnitte zu verlinken.

Auch dieser Artikel taucht in der Google-Suche mit Links direkt zu einzelnen Abschnitten auf.

Erfahre, wie semantisches HTML bei der Suchmaschinenoptimierung hilft

Barrierefreiheit​

Ein Browser mit Sprachausgabe liest dieselbe Seite vor. Und weil er weiß, welche Teile Überschriften sind, kann er von Überschrift zu Überschrift springen.

Screenreader erkennen so etwa am <nav>-Element, dass es sich um die Navigation handelt.

Der Standard sagt es beim <div> ganz direkt: Passendere Elemente führen zu besserer Barrierefreiheit für die Leser.

Dadurch wird Deine Seite für Menschen mit Sehbehinderungen zugänglicher und benutzerfreundlicher.

Erfahre, wie semantisches HTML mit Barrierefreiheit hilft

Einfachere Wartung​

Semantische Tags machen Deinen HTML-Code übersichtlicher und leichter wartbar.

Entwickler können effizienter arbeiten und Änderungen schneller umsetzen.

Durch die klare Struktur, mit Tags wie <header>, <footer> und <aside> wird der Code verständlicher und weniger fehleranfällig. Auch das steht im Standard: Passendere Elemente als <div> sorgen für eine einfachere Wartbarkeit.

Bedeutung statt Darstellung​

HTML beschreibt die Bedeutung, nicht das Aussehen.

Deshalb funktioniert dieselbe Seite auf dem großen Bildschirm, auf dem Smartphone und in einem Browser mit Sprachausgabe, ohne dass Du am Markup etwas änderst. Das Aussehen regelst Du mit CSS.

Ein Element nur wegen seiner Optik auszuwählen, verbietet der Standard sogar ausdrücklich:

Autoren dürfen Elemente, Attribute oder Attributwerte nicht für andere Zwecke als ihren vorgesehenen semantischen Zweck verwenden, da dies Software daran hindert, die Seite korrekt zu verarbeiten.

Quelle: HTML Living Standard: 3.2.1 Semantics (eigene Übersetzung)

Semantisches HTML ist wie Intonation und Emotionen im Leben​

Hast Du jemals versucht, jemandem zuzuhören, der eine Geschichte so monoton erzählt, dass Du nicht wirklich verstehst, was er eigentlich meint?

Oft fällt es uns schwer, die Aussage richtig zu verstehen, ohne die Intonationen und Emotionen, die in der Sprache eine Schlüsselrolle spielen.

Wenn die Geschichten emotionslos sind, verlieren wir auch öfter einfach die Aufmerksamkeit beim Zuhören. Nehmen wir zum Beispiel den folgenden Satz, zunächst ganz ohne Betonung:

„Ich habe das Buch nicht gelesen.“

Intonation und Sprachtempo können die Bedeutung des Gesagten erheblich verändern, den Fokus auf verschiedene Aspekte der Situation lenken oder sogar den allgemeinen Ton des Gesprächs ändern.

Wenn man den Satz beispielsweise mit Betonung auf das Wort „Ich“ ausspricht, impliziert das, dass jemand anderes das Buch vielleicht gelesen hat, aber nicht der Sprecher.

„Ich habe das Buch nicht gelesen.“

Betont man „nicht“, legt das den Fokus darauf, dass es nicht der Fall ist, dass der Sprecher das Buch gelesen hat.

„Ich habe das Buch nicht gelesen.“

Wird das Wort „gelesen“ betont, könnte das bedeuten, dass der Sprecher vielleicht etwas anderes mit dem Buch gemacht hat, es zum Beispiel einfach durchgeblättert.

„Ich habe das Buch nicht gelesen.“

Da stellt sich die Frage: Wie verhält es sich im Web? Besteht eine Möglichkeit, den Sinn eines Satzes genau zu dokumentieren und alle Intonationen so zu übermitteln, wie sie beabsichtigt waren?

Genau hier kommt semantisches HTML ins Spiel.

Im HTML Living Standard gibt es dafür eigene Elemente. <em> steht für die Betonung, die den Sinn eines Satzes verändert. <strong> steht für Wichtigkeit, Ernst oder Dringlichkeit und verändert den Sinn nicht.

Beide beschreiben den Inhalt. Ein Werkzeug, um Keywords für SEO hervorzuheben, sind sie nicht.

Und der richtige Kontext sowie die richtigen Rollen sind unerlässlich für die Barrierefreiheit der Website, was wiederum die Zielgruppe der Website erweitert.

Beispiel der Anwendung von semantischen HTML-Tags​

Jetzt versuchen wir semantisches HTML so anzuwenden, dass das Wort „Ich“ betont wird, um die erste Bedeutung des Satzes Ich habe das Buch nicht gelesen zu kennzeichnen.

Dies kann mit dem Tag <em> erreicht werden. Wenn man im HTML Living Standard der WHATWG nachschlägt, findet man folgende Bedeutung dieses Tags:

Das <em>-Element repräsentiert die Betonung seines Inhalts. Der Grad der Betonung hängt von der Anzahl seiner <em>-Vorfahren ab.

Die Platzierung der Betonung verändert die Bedeutung des Satzes. Das Element ist damit ein integraler Bestandteil des Inhalts.

Quelle: HTML Living Standard: 4.5.2 The em element (eigene Übersetzung)

Wenn man also das Wort „Ich“ in ein <em>-Tag einbettet, ist die Betonung kein reines Gestaltungsmittel mehr, sondern Teil des Inhalts.

In HTML würde dies wie folgt aussehen:

<em>Ich</em> habe das Buch nicht gelesen.

Somit ist der Satz nun in seiner Bedeutung korrekt gekennzeichnet. Browser, Searchbots und Screenreader finden die Betonung jetzt im Code und nicht nur in der Optik.

Kontextualisierung mit semantischem HTML​

Ebenso spielt der Kontext eine entscheidende Rolle bei der Interpretation eines geschriebenen Satzes. Ist dieser Satz ein Teil einer Navigation?

Ist das eine Verlinkung?

Vielleicht ein Zitat oder ein normaler Satz?

Semantische HTML-Tags helfen Dir auch, diesen Aspekt klar zu definieren.

Du könntest zum Beispiel das <p>-Tag verwenden, um den Kontext dieses Satzes als einen Absatz anzugeben:

<p>
    <em>Ich</em> habe das Buch nicht gelesen.
</p>

Der Text klingt aber so, als hätte das jemand gesagt. Als wäre es ein Zitat von jemandem. Das können wir mit dem <q>-Tag noch zusätzlich kennzeichnen:

<p>
    Das Kind sagte <q><em>Ich</em> habe das Buch nicht gelesen</q>. Ich habe es aber anders in Erinnerung.
</p>

Die Anführungszeichen schreibst Du dabei nicht selbst: Laut Standard setzt sie der Browser bei <q> automatisch.

Und das war nur ein Beispiel der Anwendung von semantischen Tags. Der HTML Living Standard definiert über 100 Elemente, und jedes davon hat eine festgelegte Bedeutung. Damit kannst Du den Inhalt Deiner Website sehr präzise auszeichnen.

Wichtige semantische HTML-Tags​

Kopfbereich richtig kennzeichnen​

Das <header>-Tag markiert den Kopfbereich Deiner Webseite oder eines Abschnitts. Laut Standard steht es für einleitende oder navigierende Inhalte.

Hier kannst Du Logos, Navigation und Überschriften platzieren, um den Nutzern und Suchmaschinen den Start Deiner Seite klarzumachen.

Navigation deutlich markieren​

Das <nav>-Tag ist für die Hauptnavigation Deiner Webseite zuständig, also für die wichtigen Navigationsblöcke. Du kannst auch mehrere davon haben, zum Beispiel für das Hauptmenü und das Inhaltsverzeichnis eines Artikels.

Für die kurze Linkliste im Footer mit Impressum und Datenschutz braucht es laut Standard meist kein <nav>. Dafür reicht das <footer>-Element allein.

Ein Beispiel für die Verwendung des <nav>-Tags in HTML zur Navigation, das zeigt, wie Links zu verschiedenen Seiten der Website strukturiert werden.

Die Links (<a>-Tag) organisierst Du im <nav> meistens in einer ungeordneten Liste mit dem <ul>-Tag. Vorgeschrieben ist das aber nicht: <nav> darf auch Links im Fließtext enthalten.

Hauptinhalt mit <main> kennzeichnen​

Das <main>-Tag repräsentiert laut Standard den Hauptinhalt Deiner Seite. Header, Navigation und Footer gehören also nicht hinein.

Dabei gelten zwei Regeln aus dem Standard:

  • Pro Seite gibt es genau ein sichtbares <main>. Weitere sind nur mit dem Attribut hidden erlaubt.
  • <main> darf nur in <html>, <body>, <div>, einem <form> ohne zugänglichen Namen oder in eigenen Custom Elements stehen, also nicht in <article>, <section>, <aside>, <header>, <footer> oder <nav>.
<body>
    <header>…</header>
    <main>
        <article>…</article>
    </main>
    <footer>…</footer>
</body>

Eigenständiger Inhalt der Website darstellen​

Das <article>-Tag ist perfekt für eigenständige Inhalte, die man auch einzeln weitergeben könnte: einen Blogbeitrag, einen Forumsbeitrag, einen Kommentar oder ein Widget.

Dieses Tag signalisiert, dass der Inhalt auch außerhalb des Kontextes der Seite Sinn ergibt.

Ein Beispiel für die Verwendung des <article>-Tags in HTML, das ein eigenständiges Inhaltselement zeigt, das unabhängig vom Hauptinhalt der Website ist und ohne zusätzlichen Kontext verstanden werden kann.

Thematische Abschnitte im Content abtrennen​

Mit dem <section>-Tag kannst Du thematische Gruppen von Inhalten innerhalb einer Seite organisieren.

Dies ist besonders nützlich, um verschiedene Themen oder Kapitel übersichtlich darzustellen. In der Regel hat jede <section> eine eigene Überschrift.

Aber Vorsicht: <section> ist kein allgemeiner Container. Brauchst Du ein Element nur für CSS oder JavaScript, nimm <div>. Und lässt sich der Inhalt eigenständig weitergeben, passt <article> besser.

Zusätzliche Informationen auf der Website platzieren​

Das <aside>-Tag wird für Inhalte verwendet, die mit dem umgebenden Inhalt nur am Rande zusammenhängen, wie Sidebars oder ergänzende Informationen.

Diese Inhalte bieten zusätzlichen Kontext oder nützliche Links und lassen sich vom Hauptinhalt trennen.

Auch Werbebanner können in diesem Tag stehen. Für kurze Einschübe in Klammern im Fließtext ist <aside> aber nicht gedacht, denn die gehören zum Hauptinhalt.

Fußbereich in Abschnitte und Widgets einfügen​

Das <footer>-Tag markiert den unteren Bereich Deiner Seite oder eines Abschnitts oder eigenständigen Inhalts.

Hier kannst Du Angaben zum Autor, Copyright-Hinweise und Links zu verwandten Seiten unterbringen, um den Abschluss Deiner Seite zu gestalten.

Kontaktdaten mit <address> auszeichnen​

Das <address>-Tag enthält die Kontaktdaten für den nächsten übergeordneten <article> oder für die ganze Seite. Zum Beispiel die E-Mail-Adresse des Autors in einem <footer>.

Für beliebige Postanschriften ist <address> nicht gedacht. Die Adresse eines Restaurants im Text gehört laut Standard in ein normales <p>.

Grafiken mit Beschriftungen darstellen​

Die Tags <figure> und <figcaption> sind für in sich geschlossene Inhalte mit optionaler Beschriftung zuständig, auf die der Text als Ganzes verweist: Abbildungen, Diagramme, Codebeispiele oder Zitate.

Das Bild zeigt eine HTML-Seite mit zwei Darstellungen: links eine Website mit HTML5, rechts ohne HTML5. Ein blauer und ein roter Pfeil weisen auf den HTML-Code hin, der das <figure>- und <figcaption>-Tag nutzt.

Sie bieten eine logische Gruppierung für Inhalte und deren Erklärungen, was die Verständlichkeit und Struktur Deiner Seite verbessert. Die Zitate in diesem Artikel sind übrigens genau so ausgezeichnet.

Erfahre mehr darüber, wie Du mit semantischem HTML Deine Bilder optimieren kannst.

Datum und Uhrzeit mit <time> angeben​

Das <time>-Tag zeigt ein Datum oder eine Uhrzeit für Menschen an und liefert im Attribut datetime dieselbe Angabe maschinenlesbar mit.

<p>Zuletzt aktualisiert am <time datetime="2026-10-18">18. Oktober 2026</time></p>

So ist für Programme eindeutig, welches Datum gemeint ist, egal wie Du es im Text schreibst.

Überschriften <h1> bis <h6> richtig verschachteln​

Überschriften bilden die Gliederung Deiner Seite, und zwar in der Reihenfolge, in der sie im Code stehen. Browser mit Sprachausgabe springen darüber von Überschrift zu Überschrift, und Tools erstellen daraus ein Inhaltsverzeichnis.

Dabei gelten laut Standard zwei Regeln:

  • Mindestens eine Überschrift sollte die Ebene 1 haben, also ein <h1>.
  • Jede folgende Überschrift darf höchstens eine Ebene tiefer gehen. Auf ein <h1> darf ein <h2> folgen, aber nicht direkt ein <h3>.
<!-- Falsch: Sprung von h1 auf h3 -->
<h1>Äpfel</h1>
<section>
    <h3>Geschmack</h3>
</section>

<!-- Richtig -->
<h1>Äpfel</h1>
<section>
    <h2>Geschmack</h2>
</section>

Und brauchst Du unter einer Überschrift einen Untertitel oder Slogan, ist das keine zweite Überschrift. Dafür gibt es <hgroup> mit einem <p>:

<hgroup>
    <h1>Musnuss</h1>
    <p>Websites &amp; SEO für B2B</p>
</hgroup>

Text auszeichnen: <em>, <strong>, <b>, <i>, <mark> und <u>​

Gerade bei der Textauszeichnung werden die Tags oft nach ihrer Optik ausgewählt. Kursiv ist aber nicht gleich kursiv, und fett ist nicht gleich fett.

So legt der HTML Living Standard die Bedeutung fest:

TagBedeutung laut StandardBeispiel
<em>Betonung, die den Sinn des Satzes verändertIch habe das Buch nicht gelesen.
<strong>Wichtigkeit, Ernst oder Dringlichkeit, ohne den Sinn zu verändernAchtung: Das Formular wird gelöscht.
<b>Aufmerksamkeit ohne zusätzliche Wichtigkeit, etwa für SchlüsselwörterDie Hauptnavigation steht im <nav>.
<i>Andere Stimme oder Stimmung: Fachbegriff, fremdsprachiger Ausdruck, GedankeDer Living Standard wird laufend aktualisiert.
<mark>Markierung zum Nachschlagen, etwa ein Suchtreffer in einem ZitatEin Treffer im Text
<u>Sichtbare, nicht ausgesprochene Anmerkung, etwa ein RechtschreibfehlerDer Sehe ist voll von Fischen.
<dfn>Die Stelle, an der ein Begriff definiert wird<dfn>Semantisches HTML</dfn> heißt …
<abbr>Abkürzung, im Attribut title ausgeschriebenHTML

Zu <b> sagt der Standard: Es ist das letzte Mittel, wenn kein anderes Element passt. Für Überschriften gibt es <h1> bis <h6>, für Betonung <em>, für Wichtigkeit <strong> und für Markierungen <mark>.

Zitate richtig auszeichnen: <blockquote>, <q> und <cite>​

Für Zitate gibt es gleich drei Elemente:

  • <blockquote> für ein Zitat als eigener Block.
  • <q> für ein kurzes Zitat im Fließtext.
  • <cite> für den Titel eines Werks, also eines Buchs, Artikels oder Dokuments.

Die Quellenangabe gehört dabei außerhalb von <blockquote>, denn sie ist nicht Teil des Zitats. Am saubersten verbindest Du beides mit <figure> und <figcaption>:

<figure>
    <blockquote cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element">
        <p>Das em-Element repräsentiert die Betonung seines Inhalts.</p>
    </blockquote>
    <figcaption>
        Quelle: <cite>HTML Living Standard</cite>
    </figcaption>
</figure>

Und ein Personenname ist kein Werktitel. Der Name des Autors kommt deshalb nicht in <cite>, sondern steht einfach als Text in der <figcaption>.

Häufige Fehler bei der Anwendung von semantischen HTML-Tags​

Achte bei der Anwendung von semantischem HTML genau auf die Bedeutung der einzelnen Tags. Manchmal sorgt deren Bezeichnung für Verwirrung, und deren inkorrekte Nutzung könnte Dir mehr schaden als helfen.

Ein prägnantes Beispiel für die schädliche Nutzung eines semantischen HTML-Tags wäre das <u>-Tag, das häufig verwendet wird, um Text zu unterstreichen und die Aufmerksamkeit des Nutzers darauf zu lenken.

Diese Lampe ist nicht zum Leuchten gedacht.

Dennoch ist diese Nutzung falsch:

Das <u>-Element repräsentiert einen Textabschnitt mit einer nicht ausgesprochenen, aber explizit dargestellten nicht-textlichen Annotation, wie zum Beispiel die Kennzeichnung des Textes als Eigenname in chinesischem Text (ein chinesisches Eigennamenzeichen) oder die Kennzeichnung des Textes als falsch geschrieben.

Quelle: HTML Living Standard: 4.5.22 The u element (eigene Übersetzung)

Mit <u> hättest Du also nicht hervorgehoben, sondern den Text mit einer Anmerkung versehen, etwa als falsch geschrieben. Das wäre das genaue Gegenteil des Gewollten.

Für die Betonung ist <em> da, für Schlüsselwörter <b> oder <mark>. Und weil unterstrichener Text wie ein Link aussieht, rät der Standard ohnehin, <u> dort zu vermeiden, wo man es mit einem Link verwechseln könnte.

Also, ein korrektes Beispiel der Anwendung dieses Tags wäre:

Der Sehe ist voll von Fischen.

Abgesehen von reiner Falschnutzung gibt es Fälle, in denen die Tags „untergenutzt“ werden.

So könnte man zum Beispiel denken, dass das Tag <article> nur einen Artikel kennzeichnet, wie etwa in einem Blog-Beitrag.

Dennoch steht im HTML Living Standard Folgendes dazu:

Das <article>-Element repräsentiert eine vollständige oder eigenständige Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Website, die prinzipiell eigenständig verteilt oder wiederverwendet werden kann, z.B. in einer Syndikation.

Dies könnte ein Forumsbeitrag, ein Magazin- oder Zeitungsartikel, ein Blog-Eintrag, ein von Benutzern eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderes unabhängiges Inhaltselement sein.

Quelle: HTML Living Standard: 4.3.2 The article element (eigene Übersetzung)

So war die ursprüngliche Assoziation mit der Bedeutung des Tags falsch.

Denn mit diesem Tag können mehr Elemente auf der Seite gekennzeichnet werden, als nur ein Artikel.

Oder das <footer>-Tag wird öfter einfach nur zur Kennzeichnung des untersten Bereichs der Seite verwendet.

Doch dieses Tag kann mit allen Abschnitts-Elementen wie <article>, <aside>, <section> und sogar <nav> verwendet werden:

Das <footer>-Element repräsentiert eine Fußzeile für das nächstgelegene übergeordnete Abschnitts-Element oder für das <body>-Element, wenn kein solches übergeordnetes Element vorhanden ist.

Eine Fußzeile enthält typischerweise Informationen über den entsprechenden Abschnitt, wie zum Beispiel den Autor, Links zu verwandten Dokumenten, Copyright-Daten und Ähnliches.

Quelle: HTML Living Standard: 4.3.9 The footer element (eigene Übersetzung)

Diese Fehler sehe ich in der Praxis außerdem besonders oft:

  • <section> als reiner Styling-Container. Dafür ist <div> da.
  • Mehr als ein sichtbares <main> auf einer Seite.
  • Überschriftenebenen überspringen, etwa von <h1> direkt auf <h3>.
  • Die Quellenangabe innerhalb von <blockquote> und Personennamen in <cite>.
  • <strong> für Keywords, obwohl der Text gar nicht wichtiger ist als der Rest.
  • <address> für jede beliebige Postanschrift.

Also, achte einfach darauf, was im HTML Living Standard zu den jeweiligen Tags steht und versuche Dich nach den dort aufgelisteten Anwendungsbeispielen zu richten.

Dann bist Du auf der sicheren Seite.

Fazit​

Semantisches HTML ist nicht nur eine gute Praxis in der Webentwicklung, sondern eine Notwendigkeit für die Erstellung barrierefreier und suchoptimierter Websites.

Erfahre mehr darüber, wie semantisches HTML bei SEO hilft

Die Verwendung semantisch korrekter Elemente ermöglicht es Browsern, Suchmaschinen und assistiven Technologien wie VoiceOver, die Struktur und Bedeutung des Inhalts besser zu verstehen.

Erfahre, wie semantisches HTML hilft, Deine Website barrierefrei und BFSG-konform zu machen

Das verbessert die Zugänglichkeit der Website für Benutzer mit Behinderungen und hilft Suchmaschinen, die Seite zu indexieren.

Und falls Du sicherstellen willst, dass Deine Website optimal für Suchmaschinen gebaut und auch barrierefrei ist, buche gerne eine 1:1 Website Beratung bei mir.

Häufig gestellte Fragen​

Was sind semantische HTML-Tags?​

Semantische HTML-Tags sind Elemente, deren Bedeutung der HTML Living Standard festlegt und die damit den Zweck des Inhalts beschreiben. Beispiele sind <main>, <article>, <section>, <header>, <footer>, <nav> und <aside>.

Sie machen den HTML-Code für Menschen, Screenreader und Suchmaschinen leichter verständlich.

Ist <div> ein semantisches Element?​

Nein. Laut HTML Living Standard hat <div> überhaupt keine besondere Bedeutung, es repräsentiert nur seine Kindelemente.

Der Standard empfiehlt, <div> als letztes Mittel zu nutzen, wenn kein anderes Element passt. Für CSS-Hüllen und Skripte ist es aber genau richtig.

Was ist der Sinn der Semantik in HTML?​

Semantik sorgt dafür, dass der Code beschreibt, was ein Inhalt ist, und nicht nur, wie er aussieht. Dadurch funktioniert dieselbe Seite im Browser, auf dem Smartphone und mit Sprachausgabe.

Suchmaschinen können Überschriften nutzen, um die Seite effektiver zu indexieren, und Screenreader können zwischen den Abschnitten springen.

Außerdem ist semantisches HTML die Grundlage für eine barrierefreie Website, die das BFSG seit dem 28. Juni 2025 für viele Produkte und Dienstleistungen für Verbraucher verlangt.

Welche semantischen HTML-Tags gibt es?​

Im HTML Living Standard hat jedes der über 100 Elemente eine festgelegte Bedeutung. Für die Seitenstruktur sind das vor allem <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> und <address>.

Für den Text <h1> bis <h6>, <p>, <em>, <strong>, <time>, <abbr> und <q>. Für Gruppen <ul>, <ol>, <dl>, <figure> mit <figcaption> und <blockquote>.

Wie viele <main>-Elemente darf eine Seite haben?​

Genau ein sichtbares. Weitere <main>-Elemente sind nur mit dem Attribut hidden erlaubt.

<main> darf außerdem nicht in <article>, <section>, <aside>, <header>, <footer> oder <nav> stehen.

Was ist der Unterschied zwischen <section> und <div>?​

<section> ist ein thematischer Abschnitt, in der Regel mit eigener Überschrift, der im Inhaltsverzeichnis der Seite auftauchen würde. <div> hat keine Bedeutung und ist für Styling und Skripte gedacht.

Brauchst Du nur eine Hülle für CSS, nimm <div>.

Was ist der Unterschied zwischen <em> und <strong>?​

<em> steht für Betonung und verändert den Sinn eines Satzes. <strong> steht für Wichtigkeit, Ernst oder Dringlichkeit und verändert den Sinn nicht.

Für Schlüsselwörter, die nur auffallen sollen, ist keines von beiden gedacht. Dafür gibt es <b>.

Quellen​

Porträtfoto von Dmitry Dugarev

Beste Grüße

Dmitry Dugarev

Ich führe Barrierenlos℠, eine Beratung für barrierefreie WordPress-Websites, und arbeite an Semanticality™, FunnelCAD und DolmiDesk™. Hier schreibe ich über Barrierefreiheit, Web-Entwicklung und SEO.

Auf dieser Seite

Deine Privatsphäre

Wir nutzen notwendige Cookies, damit diese Website funktioniert. Mit Deiner Einwilligung messen wir zusätzlich, wie sie genutzt wird und ob unsere Kampagnen funktionieren. Details findest Du in unserer Datenschutzerklärung.