Semantische Auszeichnung
Semantisch bedeutet betreffend. In HTML sind damit Tags gemeint die angeben welche Funktion sie haben.
Zum Beispiel ist ein h1-Tag eine Überschrift und ein table-Tag eine Tabelle. Während das strong-Tag ebenfalls semantisch ist (Der Browser weiß das dieser Text wichtig ist),
ist der b-Tag nur für das Layout der Seite da. Sie sehen jedoch für den Anwender exat gleich aus.
Andere Tags sind für den Anwender überhaupt nicht sichtbar.
Der Anwender sieht nicht ob etwas in einem semantischen Tag steht oder nicht.
Der Browser kann es sehr wohl sehen, weiß so wo die Navigations-Leiste ist, was der Hauptteil ist, der Header und so weiter.
Das ist besonders interessant für Menschen mit einer Sehbehinderung. Sie können sich die Seite vorlesen lassen.
Die semantischen Tags helfen ihnen bei der Navigation.
Auch Suchmaschienen können die Seite besser einordnen. Sie erkennen was für eine Suche wichig ist und was sie vernachlässigen können.
Selbst das Layout kann davon profitieren wenn man die Tags mit css gezielt ansteuern und formatieren kann.
Den Body-Bereich strukturieren
So ist es möglich der Seite eine Struktur zu verpassen. Die passenden Tags hierfür sind:
<header> Es umschließt die Kopfzeile, die meist auf jeder Unterseite einheitlich ist. </header><nav> Zeigt den Bereich des Navigations-Menü. Auch dieses ist auf jeder Seite gleich. </nav>
<main> Hier steht der Hauptteil, der Inhalt der Seite. Es nimmt den meisten Platz der Seite ein. </main>
<footer> Die Fußzeile, meist ein Ort für Inpressum oder Kontaktdaten. </footer>
Den Main-Bereich strukturieren
Es gibt noch weitere semantische Tags, zum Beispiel <article> für einen unabhängigen und selbstständigen Inhalt,
wie Blogeinträge oder Post im Forum. Gibt es sehr viele dieser Inhalte können sie in größere Container zusammengefasst werden.
Mit dem Tag <section> wird die Seite allgemein in thematische Gruppen unterteilt (gegliedert), meist einschließend der Überschrift.
Für weiterführende Inhalte, mit eher geringer Bedeutung, dient das Tag <aside>. Dieser Inhalt ist oft auf der rechten Spalte der Seite zu finden.
Hier ein Beispiel wie der Hauptteil aufgebaut sein könnte:
<article>
<section> Kapitel 1 </section>
<section> Kapitel 2 </section>
<section> Kapitel 3 </section>
</article>
<aside>
Ergänzender Text
</aside>
</main>
Optische semantische Tags
Layout verändernde semantische Tags sind <em> und <strong>, die in einem früheren Kapitel schon erwähnt wurden. Genau so wie <h1> bis <h6>, oder <p> <br> und einige weitere Bekannte.
Neu ist der Tag <code>Der Text bekommt eine andere Schriftart, die ausschaut wie Quellcode.Sind die Zitate kürzer eignet sich <cite> Der Text wird kusiv geschrieben und erzeugt keinen Zeilenumbruch
Für längere Zitate gibt es den Tag <blockquote>
Dabei wird der Text links und rechts etwas eingerückt. Er erzeugt einen Zeilenumbruch. Die Darstellung kann von Browser zu Browser unterschiedlich sein