Überschriften dienen dazu, den Inhalt einer Seite zu strukturieren. Je höher die Hierarchie (z.B. H1) desto wichtiger ist dieser und wird entsprechend auch so bei Suchmaschinen (z.B. Google) gewichtet. Grundsätzlich sollen nicht zu viele Hierarchien verwendet werden, da sonst die Übersichtlichkeit leidet. Die Titelhierarchien H1 bis H4 heben sich entsprechen gestalterisch voneinander ab (die Hierarchien H5 und H6 wurden nur pro Forma definiert).
Überschriften können auch verlinkt sein und werden dann in blau gesetzt.
Accessibility
Normalsehende Personen erkennen Titel und Struktur einer Seite anhand der Grösse und Auszeichnung der Schrift. Bei sehbehinderten Personen ist dies nicht so. Sie bzw. die Screenreader erhalten diese Informationen aus den h1 bis h6-Tags. Dieses sollten entsprechend zur Gewichtung und nicht zur graphischen Auszeichnung eingesetzt werden.
Am Anfang eines längeren Textes kann ein Lead platziert werden, der die wichtigsten Aspekte des Textes zusammenfasst. Er wird in einem fetten Schriftschnitt gesetzt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
mollis mauris enim. Morbi euismod magna ac lorem.
Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.</p>
<p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
mollis mauris enim. Morbi euismod magna ac lorem.</p>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.</p>
Die Schriftgrösse, Zeilenlänge und -abstände des Fliesstextes sind für optimale Lesbarkeit optimiert. Zitate werden kursiv gesetzt. Links im Textfluss werden mit einer Unterstreichung ausgezeichnet, sollten aber sparsam eingesetzt werden. Besser ist es, Links am Ende eines Absatzes zu platzieren.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.
<p>
Lorem ipsum dolor sit amet, <cite>consectetur adipisicing elit</cite>. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, <a href="#">architecto fugit eveniet</a>.
</p>
Listen werden verwendet, um Inhalte strukturiert darzustellen und dem Anwender einen schnellen Überblick über ein Thema zu ermöglichen.
Folgende Listen werden verwendet:
add title="External link" on external link for screen reader use
Links haben standardmässig die Textfarbe blau und sind nicht unterstrichen. Bei Mouseover werden die Links unterstrichen. Bereits geklickte Links werden violett.
In zwei Fällen wird von dieser Regel abgewichen:
Bei einem Link im Textfluss wird der verlinkte Text unterstrichen. Links in einem Navigations-Element (z.B. in der Globalnavigation) sind nicht blau, sondern grau. Aussehen und Verhalten dieser speziellen Links, wird in diesen Webrichtlinien an den entsprechenden Stellen separat beschrieben.
Mit den .icon-Klassen kann vor oder nach dem Link ein Icon hinzugefügt werden (Klasse.icon--external für externe Links).
Der zum Seitenanfang (Top-Link) ist das Gegenstück zum Anker-Link: Er bringt den Anwender von jeder Position in der aktuellen Seite wieder zurück zum Seitenanfang.
Der Link am Seitenende ist ein spezieller Top-Link. Jede Seite (mit Ausnahme der Startseite und der Seiten von Level 1) schliesst mit einem solchen Seitenende-Link ab. Er enthält einen Link zum Anfang der aktuellen Seite und das Datum der letzten Aktualisierung der Inhalte dieser Seite.
