HTML/Tutorials/HTML5/Seitenstrukturierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
10min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
Einstieg in HTML


Im vorliegenden Kapitel lernen Sie eine moderne Seitenstruktur mit den neuen HTML5-Elementen kennen.[1]

Früher wurde die Seitenstrukturierung durch div-Elemente, denen man spezielle ids oder Klassen gegeben hat, dargestellt. Auch wenn dies immer noch valider Code ist, gibt es gute Gründe, die vielen Vorteile von HTML5 zu nutzen.

  • Bei einer Vielzahl von div-Elementen (der so genannten Div-Suppe) fehlt gerade bei schließenden Tags die Übersicht.
  • Suchmaschinen erkennen die Bedeutung der HTML5-Elemente und werten den Inhalt besser aus.
  • Screenreader erkennen die Bedeutung der HTML5-Elemente und lesen den Inhalt flüssiger vor.
Empfehlung: Verwenden Sie die neuen HTML5-Elemente und verzichten Sie auf divs, wo es nur geht. So sparen Sie sich unnötige Klassen und id-Selektoren und sowohl ihr HTML-Markup als auch ihr CSS werden übersichtlicher!

Seitenkopf- und fuß[Bearbeiten]

header und footer[Bearbeiten]

Der body ist der sichtbare Bereich unserer Webseite. Die meisten Webpräsenzen haben oben einen Seitenkopf, den sogenannten header, der Logo, Titel und die Navigationselemente enthält.

HTML5-Seitenstruktur ansehen …
<!doctype html> <html lang="de"> <head> ... </head> <body> <header> <img src="logo.svg" alt="logo"> <p>Herzlich willkommen!</p> </header> <h1>Überschrift der Seite</h1> <footer> <a href="kontakt.html">Kontakt</a> <p>© 2014 by selfHTML</p> </footer> </body> </html>

Das header-Element gruppiert das Logo und eine Begrüßung. Zur besseren Veranschaulichung erhält das header-Element einen hellroten Hintergrund. Der Textabsatz wird größer dargestellt und erhält eine rote Textfarbe.

Beachten Sie: header mit nur einer Überschrift sind semantisch sinnlos. Sie blähen nur das Markup unnötig auf und sollten weggelassen werden.
Empfehlung: Verwenden Sie Überschriften nur da, wo sie auch angemessen sind. Überschriften führen zu einer Gliederung des Dokuments, deswegen ist "Herzlich willkommen!" im header keine Überschrift. Zum Hervorheben, z.B. durch die Schriftgröße, gibt es CSS Eigenschaften.


header mit Skiplink
<header>
	<a href="#main">Navigation überspringen</a>
	<img id="site-logo" src="logo.svg" alt="example dot com"/>
	<p id="claim">Wir stecken den Claim ab.</p>
	<nav></nav>
</header>


Weiterhin gibt es den footer, der Kontakt, Impressum, Copyright und evtl. die Sitemap enthält. Während allein schon der Name eine Position unterhalb des Inhalts suggeriert, ist es in Blogs und Forenpostings üblich, den footer rechts zu positionieren.

nav[Bearbeiten]

Die Haupt-Navigation wird durch ein nav-Element umschlossen, das aber auch für Unter-Navigationen verwendet werden kann.

nav-Element für Hauptmenü ansehen …
<body> <header> <img src="logo.svg" alt="logo"> <p>Herzlich willkommen!</p> </header> <nav> <ul> <li><a href="#link_1.html">Wiki</a></li> <li><a href="#link_2.html">Blog</a></li> <li><a href="#link_3.html">Forum</a></li> </ul> </nav>

<main>

...


Oben oder unten?

Während es früher oft empfohlen wurde, das Navigationsmenü unterhalb des Inhalts am Ende der Seite zu notieren und erst mit CSS oben zu positionieren, ist es heute üblich die Navigation unterhalb des header zu platzieren und Benutzern von Screenreadern bei umfangreichen Menüs einen Skip-Link zum Überspringen anzubieten.

Hauptinhalt[Bearbeiten]

Bisher wurde der Inhalt von HTML-Dokumenten vor allem über die verschiedenenen Überschriften h1 -h6 organisiert. In HTML5 gibt es für verschiedene Bereiche eigene Elemente mit eigener semantischer Bedeutung.

main[Bearbeiten]

Das main-Element enthält den (Haupt-)Inhalt einer Webseite. Dieser wurde bisher oft mit <div id="main"> oder <div id="content"> gekennzeichnet.

Das main-Element ansehen …
<!doctype html> <html lang="de"> <head> … </head> <body> <header> <p>Name unserer Seite</p> </header> <nav> … </nav> <main> <h1>Überschrift des Artikels</h1> <p>weiterer Inhalt</p> </main> </body> </html>

article oder section?[Bearbeiten]

HTML5-Seitenstruktur - Elemente für den Inhaltsbereich
<header> </header> <main> <article> <h1>Überschrift</h1> <p>Dies ist meine erste HTML5-Seite1</p> ... mehr Inhalt </article> <aside> <section> <h2>Kontakt</h2> <ul> <li><a href="link_1.html">Wiki</a></li> <li><a href="link_2.html">Blog</a></li> <li><a href="link_3.html">Forum</a></li> </ul> </section> <section> <h2>Weiterführende Links</h2> <ul> <li><a href="link_1.html">Wiki</a></li> <li><a href="link_2.html">Blog</a></li> <li><a href="link_3.html">Forum</a></li> </ul> </section> </aside> </main> <footer> </footer>

Bis jetzt waren die neuen HTML5-Elemente eine große Vereinfachung, aber für die Auszeichnung des Inhaltsbereichs gibt es nun gleich 3 Elemente:

  • main: der Hauptinhalt der Seite (das role-Attribut ist nicht mehr erforderlich)
  • article: ein in sich geschlossener Artikel, der Überschrift (und evtl. einige sections, einen eigenen header und footer) enthält.
  • section: Abschnitte wie ein Kapitel, ein ...

Besonders der Unterschied zwischen article und section ist oft Gegenstand heißer Diskussionen. Im Selfhtml-Blog gibt es einige Beispiele für mögliche Anwendungen (und gegenseitige Verschachtelungen) der beiden Elemente:


Empfehlung:
  • Verwenden Sie article, wenn der Inhalt in sich abgeschlossen ist
  • Verwenden Sie section, wenn es mehrere ähnliche Blöcke gibt ...
… und halten Sie sich nicht weiter an den haarfeinen Unterschieden zwischen den beiden Elementen auf.

Ansonsten ist es auch völlig legitim, gelegentlich ein div-Element zur Strukturierung ohne weitere semantische Bedeutung zu verwenden.

header für Seitenstrukturierungselemente[Bearbeiten]

Auch einzelne Teile einer Internetseite (aber nicht der footer) können ein header-Element besitzen.

Beispiel ansehen …
<body> <header> <h1>Man kann kein Buch aufschlagen, ohne daraus zu lernen.</h1> <p>Betrachtungen über den Sinn des Lesens</p> </header> <article> <header> <h2>Untersuchungen zur Mediennutzung von Jugendlichen</h2> <p>Eine Studie von Max Mustermann</p> <nav> <ul> <li><a href="">Alle Artikel von Max Mustermann</a></li> <li><a href="">Ähnliche Artikel</a></li> </ul> </nav> </header> <h3>Einleitende Überlegungen</h2> <p>Der Medienkonsum in Deutschland ist ... </p> </article> </body>
Der Kopf der Seite enthält einen header mit einer Überschrift h1 und einem Untertitel, der nicht als Überschrift, sondern als p-Element ausgezeichnet wird.
Auch der folgende article enthält einen header, der dazu noch einige Links enthält.

aside[Bearbeiten]

HTML5-Seitenstruktur
<header> <img src="logo.gif" alt="logo"> <h1>Titel</h1> </header> <h1>Überschrift</h1> <p>Dies ist meine erste HTML5-Seite1</p> ... mehr Inhalt <aside> <h2>Weiterführende Links</h2> <ul> <li><a href="link_1.html">Wiki</a></li> <li><a href="link_2.html">Blog</a></li> <li><a href="link_3.html">Forum</a></li> </ul> </aside> <footer> </footer>

Schon im Buchdruck gab es Seitenleisten und Randnotizen, die in HTML5 mit dem aside-Element dargestellt werden. Dabei ist es uns egal, ob diese Seitenleiste an der (rechten oder linken) Seite oder gar unten platziert ist, da dies später durch die CSS-Eigenschaften bestimmt wird. Wichtig ist nur, dass im aside-Block Informationen zum Inhalt der Webseite stehen, die aber nicht Teil des Inhalts der Webseite sind.

address[Bearbeiten]

Ein address-Element enthält Informationen, wie der Autor oder inhaltlich Verantwortliche einer Seite oder eines Abschnittes zu erreichen ist. Dies muss nicht zwangsläufig eine E-Mail- oder Postadresse sein, sondern kann auch einfach nur ein Link zu einer weiteren Seite mit Kontaktinformationen sein.

Beachten Sie: address-Elemente sind ausschließlich für die Bereitstellung von Kontaktdaten gedacht. Zum Auszeichnen beliebiger Adressen verwenden Sie herkömmliche Absätze.
  • HTML 2.0
  • XHTML 1.0
  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel zum address-Element</title> <style> body { margin: 2em; } article { border: 2px solid #abc; border-radius: .5em; padding: 1em; } footer { margin-top: 5em; border-top: 1px solid #abc; padding-top: 1em;} </style> </head> <body> <h1>selfhtml-blog</h1> <article> <h1>Blogbeitrag</h1> <p>Inhalt des Beitrages</p> <address> Autor: <a href="../autoren/mustermann.html">Max Mustermann</a> </address> </article> <footer> <address> © 1998-2013 SELFHTML <a href="http://selfhtml.org/impressum.html">Impressum</a> Software: Classic Forum 3.4 </address> </footer> </body> </html>
Abhängig von seinem Umfeld (seinen Elternelementen) enthält das address-Element verschiedene Kontaktinformationen. Das address-Element innerhalb des Artikels enthält einen weiterführenden Link auf eine Seite zum Ersteller des Beitrages, das im footer der Seite verlinkt auf ein Impressum.
Beachten Sie: address-Elemente dürfen keine die Seite strukturierenden Elemente wie etwa article, aside oder Überschriften enthalten. Elemente der Textstrukturierung wie beispielsweise Textabsätze oder Listen sind hingegen möglich.

Kontaktseite[Bearbeiten]

Besonderer Wert sollte auf gut lesbare und zugängliche Kontaktdaten gelegt werden. Im Forum wurde dazu von MrMurphy1 ein Beispiel veröffentlicht, das als Grundlage für dieses Kapitel dient.[2]

Zu einer benutzerfreundlichen Übersicht gehört, keine Abkürzungen zu verwenden. Außerdem sollten entweder jeder oder gar kein Block mit Überschriften versehen werden.

Adressen sollten immer vollständig angegeben werden, auch wenn sich einzelne Zeilen doppeln. So können sie jeweils in einem Rutsch markiert und zum Beispiel in eine Textverarbeitung übernommen werden. Es ist nicht benutzerfreundlich, wenn Daten zwar über die Zwischenablage übernommen werden können, dazu jedoch mehrmals hin- und hergeklickt werden muss.

klickbare Telefonnummer[Bearbeiten]

Telefonnummern müssen kein Text sein. Wenn Sie sie als Link auszeichnen, können Benutzer auf mobilen Geräten mit einem Klick den Wählvorgang einleiten.

Telefonnummer
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>
Beachten Sie: Fügen Sie immer das Pluszeichen und die internationale Vorwahl hinzu, vergessen Sie nicht, die führende Null der Ortsvorwahl zu entfernen.

Nach DIN 5008 sollen die Telefonnummern zwar außer nach der Vorwahl keine Leerstellen enthalten. Bei der Telefonnummer im Linktext können aber zur besseren Lesbarkeit trotzdem zusätzliche Leerzeichen eingefügt werden.

Fax-Nummern werden im allgemeinen nur abgelesen oder kopiert, deshalb sollten sie nur als Text ausgezeichnet werden.

E-Mail-Adresse[Bearbeiten]

Früher war es üblich Links auf eine E-Mail-Adresse mit mailto einzuleiten. Bei einem Klick auf den Link wird dann das Standard-Mailprgramm des Nutzers geöffnet.

Kontaktadressen
<p>
  Kontaktieren Sie uns per <a href="mailto:kontakt@example.com">Mail an kontakt@example.com</a> 
  oder mit nachfolgendem Formular:
</p>
<form >

Eine Alternative wäre ein Kontaktformular.

Das fertige Ergebnis[Bearbeiten]

Kontaktadressen ansehen …
  <h2>Kontakt</h2>
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd>089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>

      <dt>E-Mail Adresse</dt>
      <dd><a href="mailto:kontakt@example.com">kontakt@example.com</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Mit dem neuen Grid Layout ist auch die Positionierung der dl kein Problem mehr:

Kontaktadressen ansehen …
dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}
dl.grid dd {
  margin-bottom: 1em;
}

a[href^="tel"] { white-space: nowrap; }
Die Beschreibungsliste mit den Kontaktdaten wird mit display: grid zum Raster, das mit grid-template-columns zwei Spalten pro Reihe erhält. Auf eine feste Breitenangabe wird verzichtet, die zweite Spalte soll 100% des Inhalts betragen.
Über den Attributselektor a[href^="tel"] werden alle Links, die auf eine Telefonnummer verweisen, mit white-space: nowrap an einem Umbruch gehindert. So werden die Nummern immer in einer Zeile dargestellt.

Überschriften[Bearbeiten]

Überschriften dienen zur Strukturierung eines Dokuments und bringen die folgenden Inhalte auf einen Punkt. Sie sind das wichtigste Merkmal für den Leser, sich im Dokument zurechtzufinden.

Eine Überschrift wird durch eines der Elemente h1, h2, h3, h4, h5 oder h6 realisiert.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Hierarchien beachten[Bearbeiten]

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden.

Hierarchieebenen ansehen …
<h1>1 Überschrift</h1> <h2>1.1 Überschrift</h2> <h3>1.1.1 Überschrift</h3> <h4>1.1.1.1 Überschrift</h4> <h5>1.1.1.1.1 Überschrift</h5> <h6>1.1.1.1.1.1 Überschrift</h6>

<h[1-6]> leitet eine Überschrift ein. Die Zahl steht für die Überschriftenebene. 1 ist die höchste Ebene, 6 die niedrigste. Dahinter folgt der Text der Überschrift, im Beispiel eingeleitet durch eine Kapitel-Nummerierung, wie man sie aus Fachbüchern kennt. </h[1-6]> beendet die Überschrift und steht am Ende des Überschriftentextes.

Beachten Sie: Die Zahlen im einleitenden und abschließenden Tag müssen gleich sein.

Überschriften sind Blockelemente. Deshalb sind vor und nach Überschriften keine Absatzschaltungen (br) nötig.

Empfehlung: Sie sollten auf einer Seite maximal eine Überschrift der ersten Ebene einsetzen und dann den Abschnitten entsprechend ihrer Hierarchie eine Überschrift tieferer Ebene verpassen. Typischerweise reichen in einem Dokument Überschriften erster und zweiter Ordnung (h1 und h2) Sie bilden dort den Titel des Dokuments (h1) und eventuell nötige Zwischenüberschriften (h2) ab.

HTML soll aber auch anderes als die „Allerweltswebsite“ können, zum Beispiel auch technische Dokumentationen oder wissenschaftliche Abhandlungen. Dort sind auch tiefere Schachtelungen des Inhalts üblich, die nur mit mehr als nur zwei Überschriftenebenen abzubilden sind. HTML hält dafür sechs Ebenen – eben h1 bis h6 – vor, bei Microsoft Word beispielsweise gibt es 9 Gliederungsebenen.


Überschriften verschiedener Hierarchieebenen ansehen …
<h1>Überschriften</h1>

  <h2>Allgemeines</h2>

  <h2>Überschriften richtig einsetzen</h2>
     <h3>Hierarchien</h3>
     <p>Untertitel</p>
     <h3>Zitate und Hervorhebungen</h3>

  <h2>Überschriften mit CSS formatieren</h2>

  <aside>
    <h2>Quellen</h2>
      <h3>Siehe auch</h3>
        <h4>Referenzen</h4>     
      <h3>Weblinks</h3>
  </aside>

Das Beispiel enthält die Überschriften dieser Seite. Dabei sind sie von h1 für die Seitenüberschrift, h2 für die Kapitel bis hin zu h3 und h4 für Unterkapitel hierarchisch abgestuft.

Der inhaltliche Aufbau der Seite ist so sofort erkennbar. Es spielt keine Rolle, ob die Überschriften direkte Kindelemente von body sind oder innerhalb von Seitenstrukturierungselementen wie (hier) aside oder article bzw. section notiert werden.

Im Beispiel werden die Überschriften h1 - h4 mit CSS so formatiert, dass sie mit tieferer Hierarchie weiter eingerückt dargestellt werden. Zusätzlich wird die Farbe heller.

Beachten Sie: Sie sollten keine Lücken in der Hierarchie der Abschnitte und Unterabschnitte haben: Auf eine Überschrift der Ebene 2 folgt eine der Ebene 3, aber nicht eine der 4. oder 5. Ebene. Oft wird das falsch gemacht, weil die Schriftgröße der semantisch korrekten Überschrift nicht passend ist – vermeiden Sie dies, indem Sie Ihre Überschriften mittels CSS Ihren Anforderungen gemäß gestalten!

Praktische Verwendung[Bearbeiten]

Überschriften sollten kurz und aussagekräftig sein. Sie können auch über zwei Zeilen gehen, dabei ist jedoch zu beachten, dass auf kleineren Viewports mehr Zeilen entstehen.

Falls ein Inhaltsverzeichnis existiert, sollten die Einträge den Überschriften genau entsprechen.

Untertitel[Bearbeiten]

Nicht immer kann man von einer Überschrift auf den Inhalt des eigentlichen Textes schliessen, in solchen Fällen ist es sehr nützlich, im Untertitel (engl: subtitle, auch Unterüberschrift (engl: subline zu headline) noch zusätzliche Infos unterzubringen.

Verwenden Sie hier keine Überschrift tieferer Kategorie, sondern einen normalen Textabsatz:

Überschrift mit Untertitel
<header>
  <h1>Schreinerei Meier</h1>
  <p role="doc-subtitle">Ihr Partner für alles</p>
</header>

Innerhalb eines header-Elements befindet sich die h1-Überschrift und ein Untertitel. Dieser soll kleiner dargestellt werden. Da er aber kein Teil der Überschrift an sich ist, wird er in einem Absatz ausgezeichnet.

Damit der Absatz als Teil der Überschrift erkennbar ist, enthält er ein ARIA-role-Attribut.[3]

Zitate und Hervorhebungen[Bearbeiten]

Falls Sie einen Text hervorheben möchten, beispielsweise ihr Motto oder ein Zitat, überlegen Sie sich gut, ob es vom Sinn her die Überschrift des folgenden Abschnitts ist.

Empfehlung: Verwenden Sie alternativ passendere Elemente beispielsweise p oder blockquote und gestalten Sie diese wie gewünscht mithilfe von CSS.

Siehe auch

Weblinks[Bearbeiten]


So sieht das fertige Beispiel aus:[Bearbeiten]

Die gesamte Seite sieht nun so aus:

HTML5-Seite mit Grundstruktur ansehen …
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5-Seite mit Grundstruktur</title>
</head>

<body>
  <header>
    <img src="logo.gif" alt="logo">
    <h1>Titel</h1>
    <nav>
      <ul>
        <li><a href="#link_1.html">Startseite</a></li>
        <li><a href="#link_2.html">Unterseite 1</a></li>
        <li><a href="#link_3.html">Unterseite 2</a></li>    
        <li><a href="#link_4.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>CSS-basierte Layouts</h2>
      <h3>HTML-Struktur ohne CSS</h3>
      <p>Diese Seite enthält zunächst nur die Struktur und den Inhalt.
         Das Aussehen wird erst in folgenden Beispielen über CSS definiert.
      </p>
      <p>Dennoch ist diese Seite schon nutzbar und wird vom Browser
         entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.
      </p>
    </article>

    <aside>
      <h2>Weiterführende Links</h2>
      <ul>
        <li><a href="#link_1.html">Wiki</a></li>
        <li><a href="#link_2.html">Blog</a></li>
        <li><a href="#link_3.html">Forum</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <a href="#kontakt.html">Kontakt</a>
    <p>© 2014 by selfHTML</p>
  </footer>
</body>
</html>
Beachten Sie: Da die Internetexplorer 10 und 11 das main-Element nicht kennen, benötigen sie die zusätzliche CSS-Angabe main {display: block;}, um es richtig darzustellen.

Wie geht es weiter?[Bearbeiten]

Wahrscheinlich sind Sie jetzt ein bisschen enttäuscht, weil die neue HTML5-Seite noch gar nicht richtig aussieht.

Sie können diese Seitenstruktur aber durch CSS in jede beliebige Form bringen. Unter CSS/Tutorials finden Sie einige Tutorials, die ihnen die nächsten Schritte nahebringen:


Quellen[Bearbeiten]

  1. Fallback für ältere Internet Explorer
    Damit auch ältere Internet Explorer der Versionen 6-8 die neuen HTML5-Elemente darstellen konnten, wurde früher ein kurzes JavaScript eingebunden. Am einfachsten ist es, dieses nicht auf dem eigenen Server vorzuhalten, sondern direkt von einem CDN abzurufen. Dies hat überdies den Vorteil, dass es oft schon im Browser-Cache der Nutzer vorhanden ist. Der Aufruf erfolgt in einem Conditional Comment, der nur vom Internet Explorer kleiner als Version 9 (lt IE 9) verstanden wird. Alle anderen Browser ignorieren dies als reinen Kommentar.
    HTML5-Seitenstruktur
    <!doctype html>
    <html lang="de">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <![endif]-->
      <title>HTML5-Seite mit Grundstruktur</title>
    </head>
    

    Hinweis

    SelfHTML hatte in seinen Beispielen einen solchen html5shiv verwendet. Allerdings war der Anteil der Benutzer mit IE8 bereits im Januar 2016 mit 0.2% aller Benutzer so gering, dass ein weiterer Einsatz nicht mehr nötig ist.stat-counter.com: Statistiken der Browser-Versionen Der HTML5-shiv wurde deshalb am 10.01.2016 aus allen Beispielen entfernt.
  2. Selfhtml-Forum: Seiten-Element gestaltet von MrMurphy1 vom 20.11.2015
  3. css-tricks: HTML for Subheadings and Headings vom 14.08.2020