Vorteile von semantischem HTML in der Webentwicklung
Heutzutage müssen angehende Webentwickler sich mit einer immer größeren Anzahl von Technologien auseinandersetzen. Dank Komponentenbibliotheken, die sofort einsatzbereite Komponenten bieten, und der Illusion, dass Kurse, die nur wenige Monate dauern, ausreichen, um jeden zum Programmierer zu machen, bleiben die HTML-Kenntnisse des durchschnittlichen Programmierers oberflächlich.
Wenn du beim Lesen dieser Zeilen ein schlechtes Gewissen bekommst, fang jetzt mit dem Lernen an: dev/dom.html
Was ist semantisches HTML?
Semantisches HTML bezieht sich auf die Verwendung von HTML-Elementen, die dem Inhalt einer Webseite Bedeutung und Struktur verleihen. Anstatt generische Elemente oder `div`-Elemente ohne klare Semantik zu verwenden, sollten spezifische Elemente eingesetzt werden, die die Bedeutung des Inhalts widerspiegeln.
Die Verwendung von semantischem HTML bietet mehrere Vorteile. Erstens verbessert es die Barrierefreiheit von Websites für Menschen mit Behinderungen durch Hilfsmittel wie Screenreader, da es klare Informationen über die Struktur von Dokumenten liefert. Außerdem hilft es Suchmaschinen, den Inhalt der Seite besser zu verstehen, was die Indizierung und das Ranking in den Suchergebnissen erleichtert.
Hier sind einige Beispiele für semantische HTML-Elemente:
<header> | steht für eine Seiten- oder Abschnittsüberschrift. |
<nav> | steht für einen Navigationsbereich. |
<main> | steht für den Hauptinhalt einer Seite. |
<article> | steht für einen Artikel innerhalb einer Seite. |
<section> | steht für einen logischen oder thematischen Abschnitt einer Seite. |
<aside> | steht für Inhalte, die nicht zum Seiteninhalt gehören |
<footer> | steht für die Fußzeile einer Seite oder eines Abschnitts. |
<abbr> | Abkürzung |
<acronym> | Akronym |
<blockquote> | Langes Zitat |
<dfn> | Definition |
<address> | Angabe der Autoren des Dokuments |
<cite> | Zitierweise |
<button> | Schaltfläche |
<code> | Code-Referenz |
<tt> | Teletype-Text |
<del> | Gelöschter Text |
<ins> | Eingefügter Text |
<em> | Hervorhebung |
<strong> | Starke Hervorhebung |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> | Ü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 |
<hr> | Thematischer Umbruch |
<kbd> | Vom Benutzer einzugebender Text |
<pre> | Vorformatierter Text |
<q> | Kurzes Inline-Zitat |
<samp> | Beispielausgabe |
<sub> | Index |
<sup> | Hochstellung |
<var> | Variabler oder benutzerdefinierter Text |
Ein wichtiger Aspekt von semantischem HTML betrifft die korrekte Verwendung von Attributen. Beispielsweise sollte das alt sollte verwendet werden, um alternativen Text für Bilder bereitzustellen, damit Menschen mit Sehbehinderungen visuelle Inhalte verstehen können. Ebenso sollte das label sollte verwendet werden, um Eingabeelementen in Formularen eindeutige Beschriftungen zuzuordnen, was die Benutzerfreundlichkeit für Menschen mit kognitiven oder motorischen Einschränkungen verbessert.
Warum semantisches HTML verwenden?
Wir haben bereits einige Vorteile von semantischem HTML gesehen, doch es lohnt sich, diese noch einmal zu betonen:
- Barrierefreiheit: Semantisches HTML ist die Grundlage für die Barrierefreiheit im Web; es verbessert die Erfahrung von Nutzern, die das Web mit assistiver Technologie nutzen, erheblich. Das liegt daran, dass Screenreader und Browser den Code besser interpretieren können. Ich empfehle diesen ausgezeichneten Artikel: docs/Learn/Accessibility/HTML
- SEO: Es verbessert die SEO (Search Engine Optimization) einer Website, also die Suchmaschinenoptimierung, die darauf abzielt, die Besucherzahlen Ihrer Webseite zu steigern. Durch eine bessere SEO können Suchmaschinen den Inhalt Ihrer Website besser erkennen und die wichtigsten Inhalte angemessen gewichten. Eine weitere wichtige Ressource finden Sie unter diesem Link: schema.org
- Leicht verständlich: Semantisches HTML macht den Quellcode der Website auch für andere Webentwickler leichter lesbar. Eine praxisorientierte Ressource finden Sie hier: guides/semantic-html
Wie fange ich an, besseres Markup zu schreiben?
Das ist eine sehr gute Frage. Mein Rat ist: Nehmen Sie sich Ihr Markup vor und haben Sie Spaß beim Refactoring. Indem Sie Ihr Markup nach und nach korrigieren, wird das Schreiben von besserem Markup immer natürlicher.
Woher weiß ich, ob mein Markup gut geschrieben ist?
Glaubst du, dass du alle verbesserungsfähigen Stellen im Markup bereits optimiert hast? Diese spezielle Checkliste kann dir bei der Beantwortung dieser Frage helfen: topics/html-semantics-checklist