HTML/Tutorials/Seitenstrukturierung

In diesem Kapitel lernen Sie, wie Sie die Inhalte Ihrer Webseite gruppieren und gliedern können. Nichts ist schlimmer als eine mit Text überfrachtete und dadurch schwer lesbare Bleiwüste.^[1]

In einem ersten Schritt sollten Sie Ihren Text in Absätze teilen und mit Überschriften versehen. Webseiten enthalten neben dem eigentlichen Inhalt zusätzlich noch weitere Elemente. Diese Seitenstrukturierung wird im folgenden gezeigt:

Inhaltsverzeichnis

1 Absätze
- 1.1 Abstände und Trennlinien
  - 1.1.1 Thematischer Bruch mit hr
  - 1.1.2 Trennlinien mit CSS
- 1.2 Fehlerquelle: Blockelemente in Absätzen
2 Überschriften
- 2.1 Inhalt
  - 2.1.1 Untertitel
  - 2.1.2 Zitate und Hervorhebungen
3 Seitenstrukturierung
4 So sieht das fertige Beispiel aus:
5 Siehe auch
6 Weblinks

Absätze

Absätze dienen der Gliederung eines Textes. Sie werden in HTML mit dem p-Element (engl: paragraph) ausgezeichnet.

Beispiel ansehen …

<h1>Textabsätze definieren</h1> <p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p> <p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>

Das End-Tag </p> ist in HTML optional, d. h., es muss nicht zwingend angegeben werden. Es ist aber auch in HTML guter Stil das schließende </p>-Tag anzugeben. Das verdeutlicht zugleich auch die Bedeutung dieses Tags: Es umfasst einen Textblock – es steht nicht für den Zwischenraum zwischen zwei Absätzen.

Abstände und Trennlinien

Beachten Sie, dass es beim Erstellen von HTML-Dateien nicht genügt, im Editor einen harten Zeilenumbruch einzufügen. Browser ignorieren solche Umbrüche (siehe auch Leerzeichen, Tabulatoren und Zeilenumbrüche).

Abstände zwischen Absätzen werden in HTML oft fälschlicherweise durch einen leeren Absatz oder durch eine Aneinanderreihung mehrerer Zeilenumbrüche ( br) realisiert.

<p>Ein Absatz mit Inhalt</p>
<p>&nbsp;</p>
<p>Ein Absatz mit Abstand</p>

<p>Ein Absatz mit Inhalt</p>
<br>
<br>
<p>Ein Absatz mit Abstand</p>

<p style="margin-bottom:2em;">Ein Absatz mit Inhalt</p>
<p>Ein Absatz mit Abstand, der durch CSS festgelegt wurde.</p>

Empfehlung: Definieren Sie stattdessen den gewünschten Abstand mithilfe der CSS-Eigenschaft margin.

Thematischer Bruch mit hr

Das Element hr kennzeichnet einen thematischen Bruch. Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt, daher die Bezeichnung des Elements horizontal ruler, horizontales Lineal. In HTML5 bekommt das hr-Element die Bedeutung eines Themenwechsels auf Absatz-Ebene (paragraph-level thematic break).

Sichtbare Trennlinien dienen auch visuell der Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten.

hr-Elemente in HTML ansehen …

<p>Hier ist ein Abschnitt zu Ende.</p> <hr> <p>Und hier beginnt etwas Neues ohne eigene Überschrift.</p>

Beachten Sie: Ein hr-Element hat keinen Inhalt. Dies gilt für jede HTML-Variante.

Das hr-Element können Sie auch mit CSS gestalten:

Beispiel ansehen …

hr { 
    width: 95%; 
    height: 5px; 
    margin: 0 auto;
    color: blue;
    background: #dfac20;
}

<p>Hier ist ein Abschnitt zu Ende.</p>

<hr>

<p>Hier beginnt etwas Neues ohne eigene Überschrift.</p>

Das hr-Element erhält im Beispiel eine Breite von 95% und eine Höhe von 5 Pixeln.
Dabei nimmt die blaue Linie nur 1px ein, der Rest der festgelegten Höhe wird mit background: #dfac20; gelb gefärbt.

Trennlinien mit CSS

Sie können zur grafischen Gliederung zwischen einzelnen Teilen einer Adresse Trennlinien einfügen, indem Sie einem Element mit border: 0 0 1px 0; oder border-bottom einen unteren Rand geben.^[2]

Ein Rand lässt sich auch mit mehreren box-shadows setzen.

Beispiel ansehen …

  box-shadow: 2em 0px #eed inset, -2em 0px #eed inset, 0 -3px 0px 0 red inset;

Es ergibt sich ein roter unterer Rand, der links und rechts jeweils von 2em breiten Rahmen in der Hintergrundfarbe des Elements überlagert wird.

Fehlerquelle: Blockelemente in Absätzen

Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente wie z. B. Überschriften, Textabsätze oder Listen enthalten. Das bedeutet für HTML: Beim ersten Auftreten eines Tags, welches nicht mehr im aktuellen Textabsatz erlaubt ist (beispielsweise <ul> oder <table>), wird der Textabsatz vom Browser implizit (mit einem intern hinzugefügten </p>) geschlossen – ein eventuell später folgendes schließendes </p> steht dann ohne Start-Tag allein und ist ein Fehler.

Blockelemente in p-Elementen ansehen …

p {
  color: green;
}
div {
  color: red;
}

<p> 
  Dies ist ein Text 
  <div> mit einem div</div>
  und noch etwas Text.
</p>

Der Textabsatz wird unerklärlicherweise in 3 Blöcken dargestellt. Die Farbzuweisung für p wird nur im ersten Teil ausgeführt, aber nicht im letzten.

Hauptartikel: HTML & CSS mit dem Seiteninspektor untersuchen

Überschriften

Ü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.^[3]

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.

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 Block-Elemente. Deshalb sind vor und nach Überschriften keine Absatzschaltungen (br) nötig.

Ü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!

Inhalt

Eine Überschrift ist oft nicht nur das Erste, sondern auch das Einzige, was Besucher einer Webseite lesen. Im Webdesign ist die Überschrift noch wichtiger als im Print-Bereich, da Suchmaschinen den Inhalt der Überschriften für die Bewertung der Webseite heranziehen. Deshalb sollten Überschriften immer inhaltlich sinn- und wertvoll sein.^[4]

Empfehlung:

Stellen Sie sicher, dass die Überschrift auch alleine wirkt.

Neue Zeiten brauchen neue Entscheidungen

Es ist nicht erkennbar, um was es geht.

Kurz, knapp und prägnant: Kürzen Sie unnötige Wörter und Nebensätze.

Treffen Sie schnellere und bessere Entscheidungen mit Daten-Visualisierungen

Daten-Visualisierungen entdecken und verhindern Datenklau

Die untere Überschrift ist kürzer und inhaltlich genauer.

Stellen Sie wichtige Schlüsselwörter an den Anfang.

Neue Wege in der Daten-Analyse durch Daten-Visualisierungen

Daten-Visualisierungen erleichtern Daten-Analyse

Empfehlung: Praktische Verwendung
Ü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

Nicht immer kann man von einer Überschrift auf den Inhalt des eigentlichen Textes schließen, 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

<hgroup>
  <h1>Schreinerei Meier</h1>
  <p role="doc-subtitle">Ihr Partner für alles</p>
</hgroup>

Innerhalb eines hgroup-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. Das hgroup-Element dient als reiner Container und hat die role=generic.

Damit der Absatz für Assistenzsysteme als Teil der Überschrift erkennbar ist, erthält er noch das ARIA-Attribute role.^[5]

Zitate und Hervorhebungen

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.

Hauptartikel: CSS/Tutorials/Zitate interessant gestalten

Seitenstrukturierung

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 semantische 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:
Viele Nutzer jagen ihre Webseiten durch den Validator, ob ihre Webseite „richtig“ ist.
„Valides HTML“ sagt, dass Sie die HTML-Elemente und -Attribute richtig verwendet haben.
Das sagt nichts darüber, ob Sie die richtigen, semantisch passenden HTML-Elemente und -Attribute verwendet haben.
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ß

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: Ein header mit nur einer Überschrift ist semantisch sinnlos. Er bläht nur das Markup unnötig auf und sollte 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.

Navigation

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.

Hauptartikel: Navigation/Grundstruktur

Hauptinhalt

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.

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`?

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:

SELFHTML-Blog: Serie: der Weg zu HTML5
SELFHTML-Blog: HTML5‐Serie: neue Elemente für die Seitenstruktur
SELFHTML-Blog: HTML5-Serie: Inhalte strukturieren

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

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`

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.

So sieht das fertige Beispiel aus:

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>

Siehe auch

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:

Einstieg in CSS
- Warum Layouts mit CSS?
- Stylesheet einbinden
- Webseiten responsiv umbauen
Einstieg in Grid Layout
- Grid-Container + Grid-Items (Rasterelemente)
- benannte Linien und Rasterbereiche
- Responsive Raster ohne Media Queries
Bilder im Internet
- Bilder präsentieren
Dark Mode

Lass' die Nutzer entscheiden:
OnePager
(Single-Page Webseite mit Scroll)
- Komfort-Version
- interactive Storytelling
Infoboxen

Neu! Revolutionär!

Popups ohne Programmieren!

Weblinks

↑ Wikipedia: Bleiwüste
↑ Selfhtml-Forum: Ist es möglich einem "border" eine Länge mitzugeben? vom 20.11.2015
↑ W3C: The h1, h2, h3, h4, h5, and h6 elements
↑ nngroup.com: headings are pickup lines: 5 tips for writing headlines that convert
↑ css-tricks: HTML for Subheadings and Headings vom 14.08.2020
↑ SELFHTML: Outline raus! Dafür ist hgroup wieder da! vom 22.07.2022

[1] Wikipedia: Bleiwüste

[2] Selfhtml-Forum: Ist es möglich einem "border" eine Länge mitzugeben? vom 20.11.2015

[3] W3C: The h1, h2, h3, h4, h5, and h6 elements

[4] roup.com: headings are pickup lines: 5 tips for writing headlines that convert

[5] ss-tricks: HTML for Subheadings and Headings vom 14.08.2020

[6] SELFHTML: Outline raus! Dafür ist hgroup wieder da! vom 22.07.2022

[1

[2

[3

[4

[5

[6

HTML/Tutorials/Seitenstrukturierung

Inhaltsverzeichnis

Absätze

Abstände und Trennlinien

Thematischer Bruch mit hr

Trennlinien mit CSS

Fehlerquelle: Blockelemente in Absätzen

Überschriften

Inhalt

Untertitel

Zitate und Hervorhebungen

Seitenstrukturierung

Seitenkopf- und fuß

Navigation

Hauptinhalt

`article` oder `section`?

header für Seitenstrukturierungselemente

`aside`

So sieht das fertige Beispiel aus:

Siehe auch

Weblinks

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Werkzeuge

Mitmachen

SELFHTML

HTML/Tutorials/Seitenstrukturierung

Inhaltsverzeichnis

Absätze

Abstände und Trennlinien

Thematischer Bruch mit hr

Trennlinien mit CSS

Fehlerquelle: Blockelemente in Absätzen

Überschriften

Inhalt

Untertitel

Zitate und Hervorhebungen

Seitenstrukturierung

Seitenkopf- und fuß

Navigation

Hauptinhalt

article oder section?

header für Seitenstrukturierungselemente

aside

So sieht das fertige Beispiel aus:

Siehe auch

Weblinks

Navigationsmenü

Suche

`article` oder `section`?

`aside`