Ein wichtiges Prinzip im Webdesign ist die Idee, HTML-Elemente zu verwenden, um anzuzeigen, was sie tatsächlich sind, und nicht, wie sie standardmäßig im Browser angezeigt werden. Dies wird als Verwendung von semantischem HTML bezeichnet.

Was ist semantisches HTML?

Semantisches HTML oder semantisches Markup ist HTML, das der Webseite Bedeutung verleiht und nicht nur Präsentation. Zum Beispiel a

 -Tag gibt an, dass der eingeschlossene Text ein Absatz ist. Dies ist sowohl semantisch als auch präsentationsbezogen, da die Leute wissen, was Absätze sind und Browser wissen, wie sie angezeigt werden.

Auf der Kehrseite dieser Gleichung stehen Tags wie  und  sind nicht semantisch. Sie definieren nur, wie der Text aussehen soll (fett oder kursiv) und geben dem Markup keine zusätzliche Bedeutung.

Beispiele für semantische HTML-Tags sind:

• Header-Tags

   durch

Es gibt viele weitere semantische HTML-Tags, die Sie beim Erstellen einer standardkonformen Website verwenden können.

Warum Sie sich für Semantik interessieren sollten

Der Vorteil des Schreibens von semantischem HTML ergibt sich aus dem, was das treibende Ziel jeder Webseite sein sollte: der Wunsch zu kommunizieren. Indem Sie Ihrem Dokument semantische Tags hinzufügen, stellen Sie zusätzliche Informationen zu diesem Dokument bereit, die bei der Kommunikation helfen. Konkret machen semantische Tags dem Browser klar, was eine Seite und ihr Inhalt bedeuten. Diese Klarheit wird auch mit Suchmaschinen kommuniziert, um sicherzustellen, dass die richtigen Seiten für die richtigen Suchanfragen geliefert werden.

Semantische HTML-Tags liefern Informationen über den Inhalt dieser Tags, die über das Aussehen auf einer Seite hinausgehen. Text, der im. eingeschlossen ist  Tag wird vom Browser sofort als eine Art Programmiersprache erkannt. Anstatt zu versuchen, diesen Code zu rendern, versteht der Browser, dass Sie diesen Text als Beispiel für den Code für einen Artikel oder ein Online-Lernprogramm verwenden.

Die Verwendung semantischer Tags bietet Ihnen auch viele weitere Hooks zum Gestalten Ihrer Inhalte. Vielleicht möchten Sie heute, dass Ihre Codebeispiele im Standardbrowserstil angezeigt werden, aber morgen möchten Sie sie vielleicht mit einer grauen Hintergrundfarbe anzeigen; später möchten Sie vielleicht die genaue monospaced-Schriftfamilie definieren oder Schriftartenstapel für Ihre Proben zu verwenden. Sie können all diese Dinge leicht tun, indem Sie semantisches Markup und intelligent angewendetes CSS verwenden.

Semantische Tags richtig verwenden

Wenn Sie semantische Tags eher zur Bedeutungsvermittlung als zu Präsentationszwecken verwenden, achten Sie darauf, dass Sie sie nicht nur aufgrund ihrer allgemeinen Anzeigeeigenschaften falsch verwenden. Zu den am häufigsten missbrauchten semantischen Tags gehören:

• Blockzitat — Manche Leute benutzen die -Tag zum Einrücken von Text, der kein Zitat ist. Dies liegt daran, dass Blockquotes standardmäßig eingerückt sind. Wenn Sie einfach Text einrücken möchten, der kein Blockquote ist, verwenden Sie stattdessen CSS-Ränder.
• p — Einige Web-Editoren verwenden (ein geschütztes Leerzeichen in einem Absatz), um zusätzlichen Platz zwischen Seitenelementen hinzuzufügen, anstatt tatsächliche Absätze für den Text dieser Seite zu definieren. Wie im vorherigen Beispiel sollten Sie stattdessen die Stileigenschaft margin oder padding verwenden, um Platz hinzuzufügen.
• ul — Wie bei

  , umschließenden Text in a

   tag rückt diesen Text in den meisten Browsern ein. Dies ist sowohl semantisch inkorrektes als auch ungültiges HTML, denn nur
  •  Tags sind gültig innerhalb von a
    Etikett. Verwenden Sie erneut den Rand- oder Abstandsstil, um Text einzurücken.
  • h1, h2, h3, h4, h5 und h6 — Sie können Überschriften-Tags verwenden, um Schriften größer und fetter zu machen, aber wenn der Text keine Überschrift ist, verwenden Sie stattdessen die CSS-Eigenschaften font-weight und font-size.

  Durch die Verwendung von bedeutungsvollen HTML-Tags erstellen Sie Seiten, die mehr Informationen vermitteln als solche, die einfach alles umgeben

   Stichworte.

  Welche HTML-Tags sind semantisch?

  Obwohl fast jedes HTML4-Tag und alle HTML5 Tags haben semantische Bedeutungen, einige Tags sind in erster Linie semantisch.

  Zum Beispiel hat HTML5 die Bedeutung der  und  Tags semantisch sein. Das  Tag vermittelt keine zusätzliche Bedeutung; Stattdessen wird der markierte Text normalerweise fett dargestellt. Ebenso die  Tag vermittelt keine zusätzliche Bedeutung oder Betonung; Stattdessen wird Text definiert, der normalerweise kursiv dargestellt wird.

  Semantische HTML-Tags

  Abkürzung
  Akronym
  Langes Zitat
  Definition
  Adresse für Autor(en) des Dokuments
  Zitat
  Codereferenz
  Fernschreibtext
  Logische Aufteilung
  generischer Container im Inline-Stil
  Gelöschter Text
  Eingefügter Text
  Betonung
  Starke Betonung
  Überschrift der ersten Ebene
  Überschrift der zweiten Ebene
  Überschrift der dritten Ebene
  Überschrift der vierten Ebene
  Überschrift der fünften Ebene
  Überschrift der sechsten Ebene
  	Thematische Pause
  Vom Benutzer einzugebender Text
  Vorformatierter Text
  Kurzes Inline-Zitat
  Beispielausgabe
  Index
  Hochgestellt
  Variabler oder benutzerdefinierter Text