Was selbstverständlich klingt, ist bei Websites keineswegs immer selbstverständlich. Denn für nahezu jedes Element einer Website gibt es unterschiedliche Möglichkeiten, es technisch umzusetzen.
Semantisches HTML sorgt dafür, dass im Quellcode nicht nur steht, wie etwas dargestellt wird, sondern auch, welche Bedeutung es hat.
Das hilft Menschen mit assistiven Technologien, Suchmaschinen und zunehmend auch automatisierten Systemen dabei, eine Website besser zu verstehen.
Was bedeutet „semantisch"?
Semantik bedeutet vereinfacht gesagt: Bedeutung.
HTML stellt zahlreiche Elemente zur Verfügung, deren Bedeutung bereits eindeutig definiert ist.
Zum Beispiel:
<h1>TYPO3 Agentur Frankfurt</h1>
<nav>
...
</nav>
<main>
...
</main>
<footer>
...
</footer>
Ein Browser kann daraus erkennen:
<h1>ist die Hauptüberschrift der Seite,<nav>enthält eine Navigation,<main>enthält den Hauptinhalt und<footer>kennzeichnet den Fußbereich.
Diese Informationen sind unabhängig davon vorhanden, wie die einzelnen Bereiche später mit CSS gestaltet werden.
Eine Website kann gleich aussehen und trotzdem technisch völlig unterschiedlich sein
Das lässt sich besonders gut an einem Button zeigen.
Man könnte einen anklickbaren Bereich beispielsweise so programmieren:
<div class="button" onclick="openMenu()">
Menü
</div>
Mit CSS kann dieses Element problemlos wie ein Button aussehen.
Technisch ist es aber zunächst nur ein <div> – also ein allgemeiner Container ohne die Bedeutung „Schaltfläche".
Besser ist:
<button>Menü</button>
Für einen sehenden Besucher können beide Varianten nahezu identisch aussehen. Für den Browser besteht jedoch ein entscheidender Unterschied.
Bei der zweiten Variante ist eindeutig:
Das ist eine Schaltfläche.
Der Browser kennt außerdem bereits wichtige Eigenschaften eines Buttons, beispielsweise sein Verhalten bei der Tastaturbedienung.
