Was ist semantisches HTML und warum sollten Sie es verwenden?

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

watch instagram stories

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
instagram story viewer