032.2 Lektion 1

Zertifikat:

Web Development Essentials

Version:

1.0

Thema:

032 HTML-Dokument-Markup

Lernziel:

032.2 HTML-Semantik und Dokumenthierarchie

Lektion:

1 von 1

Einführung

In der vorangegangenen Lektion haben wir gelernt, dass HTML eine Auszeichnungssprache ist, die den Inhalt einer Website semantisch beschreibt. Ein HTML-Dokument enthält ein so genanntes Skelett, das aus den HTML-Elementen <html>, <head> und <body> besteht. Während das <head>-Element einen Block von Metainformationen für das HTML-Dokument beschreibt, der für den Besucher der Website unsichtbar ist, kann das <body>-Element viele andere Elemente enthalten, die die Struktur und den Inhalt des HTML-Dokuments definieren.

In dieser Lektion werden wir uns mit der Textformatierung, den grundlegenden semantischen HTML-Elementen und ihrem Zweck sowie mit der Strukturierung eines HTML-Dokuments beschäftigen. Als Beispiel dient eine Einkaufsliste.

Note	Alle nachfolgenden Code-Beispiele befinden sich innerhalb des `<body>`-Elements eines HTML-Dokuments, das das komplette Skelett enthält. Aus Gründen der Lesbarkeit wird nicht in jedem Beispiel das HTML-Skelett gezeigt.

Text

In HTML sollte kein Textblock außerhalb eines Elements stehen. Selbst ein kurzer Absatz sollte in die HTML-Tags <p> eingeschlossen sein — die Kurzform für “paragraph”, also Absatz.

<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>

In einem Webbrowser erzeugt dieser HTML-Code das in Figure 1 gezeigte Ergebnis.

Figure 1. Webbrowser-Darstellung von HTML-Code mit zwei Textabsätzen. Der erste Absatz ist sehr kurz. Der zweite Absatz ist etwas länger und geht in eine zweite Zeile über.

Standardmäßig fügen Webbrowser zur besseren Lesbarkeit einen Abstand vor und nach dem Element <p> ein. Aus diesem Grund wird <p> als Block-Element bezeichnet.

Überschriften

HTML definiert sechs Überschriftenebenen, um den Inhalt eines HTML-Dokuments zu beschreiben und zu strukturieren. Diese Überschriften werden mit den HTML-Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6> markiert.

<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Ein Webbrowser rendert diesen HTML-Code wie in Figure 2.

Figure 2. Webbrowser-Darstellung von HTML-Code, die verschiedene Überschriftenebenen in einem HTML-Dokument zeigt. Die Schriftgröße markiert die Hierarchie der Überschriften.

Wenn Sie mit Textverarbeitungsprogrammen wie LibreOffice oder Microsoft Word vertraut sind, werden Ihnen vielleicht einige Ähnlichkeiten in der Art und Weise auffallen, wie ein HTML-Dokument verschiedene Ebenen von Überschriften verwendet und wie diese im Webbrowser dargestellt werden. Standardmäßig verwendet HTML die Größe, um Hierarchie und Bedeutung von Überschriften zu kennzeichnen, und fügt vor und nach jeder Überschrift Leerraum ein, um sie optisch vom Inhalt zu trennen.

Eine Überschrift mit dem Element <h1> steht an der Spitze der Hierarchie und gilt daher als wichtigste Überschrift, die den Inhalt der Seite beschreibt. Sie ist vergleichbar mit dem in der vorangegangenen Lektion besprochenen Element <title>, allerdings bezogen auf den Inhalt des HTML-Dokuments. Nachfolgende Überschriftenelemente dienen der weiteren Strukturierung des Inhalts. Achten Sie darauf, dass Sie keine Überschriftenebenen überspringen. Die Dokumenthierarchie sollte mit <h1> beginnen, mit <h2> fortfahren, dann <h3> und so weiter. Sie müssen nicht jedes Überschriftenelement bis hinunter zu <h6> verwenden, wenn Ihr Inhalt dies nicht erfordert.

Note

Überschriften sind wichtige Hilfsmittel zur Strukturierung eines HTML-Dokuments, sowohl in semantischer als auch in visueller Hinsicht. Allerdings sollten Überschriften niemals dazu verwendet werden, einen strukturell unwichtigen Text hervorzuheben. Ebenso sollte man einen kurzen Absatz nicht fett oder kursiv machen, um ihn wie eine Überschrift aussehen zu lassen — verwenden Sie Überschriften-Tags ausschließlich, um Überschriften zu markieren.

Beginnen wir mit der Erstellung des HTML-Dokuments der Einkaufsliste, indem wir dessen Gliederung festlegen. Wir erstellen ein <h1>-Element, das den Seitentitel enthält (hier Garden Party), gefolgt von kurzen Informationen in einem <p>-Element. Außerdem führen wir mit zwei <h2>-Elementen die beiden Inhaltsabschnitte Agenda und Please bring ein.

<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>

Dieser HTML-Code sieht im Webbrowser wie in Figure 3 aus.

Figure 3. Webbrowser-Darstellung des HTML-Codes für ein einfaches Beispieldokument: Einladung zu einer Gartenparty mit zwei Überschriften für den Ablauf und die Liste der mitzubringenden Dinge.

Zeilenumbrüche

Manchmal kann es notwendig sein, einen Zeilenumbruch ohne ein weiteres <p>-Element oder ein ähnliches Block-Element einzufügen. Für solche Fälle steht das selbstschließende <br>-Element bereit. Beachten Sie, dass es nur für durch den Text selbst vorgegebene Zeilenumbrüche gedacht ist, wie etwa bei Gedichten, Liedtexten oder Adressen. Für Inhaltsblöcke empfiehlt sich stattdessen das <p>-Element.

Den Text aus dem Beispiel können wir zum Beispiel wie folgt aufteilen:

<p>
  Invitation to John's garden party.<br>
  Saturday, next week.
</p>

In einem Webbrowser führt dieser HTML-Code zu dem Ergebnis in Figure 4.

Figure 4. Webbrowser-Darstellung von HTML-Code von einem einfachen Beispieldokument mit einem erzwungenen Zeilenumbruch

Horizontale Linien

Das Element <hr> definiert eine horizontale Linie (horizontal rule). Standardmäßig erstreckt sie sich über die gesamte Breite des übergeordneten Elements. Das <hr>-Element dient meist dazu, einen thematischen Wechsel im Inhalt anzuzeigen oder Abschnitte des Dokuments zu trennen. Das Element ist selbstschließend und hat daher kein schließendes Tag.

Für unser Beispiel könnten wir die beiden Überschriften trennen:

<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>

Figure 5 zeigt das Ergebnis dieses Codes.

Figure 5. Webbrowser-Darstellung der Einkaufsliste mit zwei durch eine horizontale Linie getrennten Abschnitten

HTML-Listen

In HTML können Sie drei Arten von Listen definieren:

Sortierte Liste (ordered list): Die Reihenfolge der Listenelemente ist relevant.
Unsortierte Liste (unordered list): Die Reihenfolge der Listenelemente ist nicht relevant.
Beschreibungsliste (description list): Dient der genaueren Beschreibung von Begriffen.

Jede enthält eine beliebige Anzahl von Listenelementen (list items). Im Folgenden beschreiben wir jeden dieser Listentypen.

Sortierte Listen

Eine sortiere oder geordnete Liste (ordered list) in HTML, die mit dem HTML-Element <ol> bezeichnet wird, ist eine Sammlung von beliebig vielen Listenelementen. Das Besondere an diesem Element ist, dass die Reihenfolge der Listenelemente von Bedeutung ist. Um dies zu kenntlich zu machen, nummerieren Webbrowser standardmäßig die Listenelemente durch.

Note	`<li>`-Elemente sind die einzigen gültigen untergeordneten Elemente innerhalb eines `<ol>`-Elements.

Für unser Beispiel füllen wir den Ablauf für die Gartenparty mit einem <ol>-Element mit folgendem Code aus:

<h2>Agenda</h2>
<ol>
  <li>Welcome</li>
  <li>Barbecue</li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

In einem Webbrowser führt dieser HTML-Code zu dem Ergebnis in Figure 6.

Figure 6. Webbrowser-Darstellung einer Überschrift zweiter Ebene, gefolgt von einer geordneten Liste mit vier Punkten für den Ablauf der Gartenparty

Optionen

Wie im Beispiel zu sehen, werden die Listenelemente standardmäßig mit Dezimalzahlen nummeriert, die bei 1 beginnen. Sie ändern dieses Verhalten über das Attribut type des <ol>-Tags. Gültige Werte für dieses Attribut sind 1 für Dezimalzahlen, A für Großbuchstaben, a für Kleinbuchstaben, I für römische Zahlen in Großbuchstaben und i für römische Zahlen Kleinbuchstaben.

Bei Bedarf legen Sie den Startwert mit dem Attribut start des Tags <ol> fest. Das Attribut start nimmt immer einen dezimalen Zahlenwert an, auch wenn das Attribut type eine andere Art der Nummerierung definiert.

Um zum Beispiel unsere geordnete Liste so anzupassen, dass den Listenelementen Großbuchstaben vorangestellt werden, beginnend mit dem Buchstaben C, schreiben wir:

<h2>Agenda</h2>
<ol type="A" start="3">
  <li>Welcome</li>
  <li>Barbecue</li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

Im Webbrowser erscheint dieser HTML-Code wie in Figure 7.

Figure 7. Webbrowser-Darstellung mit einer Überschrift zweiter Ebene, gefolgt von einer geordneten Liste mit Listenelementen, denen Großbuchstaben vorangestellt sind, die mit dem Buchstaben C beginnen

Die Reihenfolge der Listenelemente kehren Sie mit dem Attribut reversed ohne Wert um.

Note	In einer sortierten Liste bestimmen Sie den Anfangswert eines bestimmten Listenelements mit dem Attribut `value` des Tags `<li>`. Nachfolgende Listenelemente werden von dieser Zahl aus hochgezählt. Das Attribut `value` nimmt immer einen numerischen Dezimalwert an.

Unsortierte Listen

Eine unsortierte Liste enthält eine Reihe von Listenelementen, die im Gegensatz zu denen einer geordneten Liste keine besondere Reihenfolge haben. Das HTML-Element für diese Liste ist <ul>. Auch hier ist <li> das HTML-Element zur Kennzeichnung der Listenelemente.

Note	`<li>` Elemente sind die einzigen gültigen untergeordneten Elemente innerhalb eines `<ul>`-Elements.

Für unsere Beispiel-Website nutzen wir die ungeordnete Liste, um die Gegenstände aufzulisten, die die Gäste zu der Party mitbringen sollen, und zwar mit dem folgenden HTML-Code:

<h2>Please bring</h2>
<ul>
  <li>Salad</li>
  <li>Drinks</li>
  <li>Bread</li>
  <li>Snacks</li>
  <li>Desserts</li>
</ul>

In einem Webbrowser erzeugt dieser HTML-Code die Anzeige in Figure 8.

Figure 8. Webbrowser-Darstellung mit einer Überschrift zweiter Ebene, gefolgt von einer ungeordneten Liste mit Listenelementen zu Speisen, die die Gäste mitbringen sollen

Standardmäßig ist jedem Listenelement eine Aufzählungsmarke vorangestellt. Sie können deren Aussehen mit CSS ändern, was Thema späterer Lektionen ist.

Verschachtelte Listen

Sie können Listen in anderen Listen verschachteln, z.B. geordnete Listen in ungeordneten Listen und umgekehrt. Dafür muss die verschachtelte Liste Teil eines Listenelements <li> sein, denn <li> ist das einzige gültige Kindelement ungeordneter und geordneter Listen. Achten Sie bei der Verschachtelung darauf, dass sich die HTML-Tags nicht überschneiden.

Für unser Beispiel ergänzen wir einige Informationen zur Agenda :

<h2>Agenda</h2>
<ol type="A" start="3">
  <li>Welcome</li>
  <li>
    Barbecue
    <ul>
      <li>Vegetables</li>
      <li>Meat</li>
      <li>Burgers, including vegetarian options</li>
    </ul>
  </li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

Ein Webbrowser rendert den Code wie in Figure 9.

Figure 9. Webbrowser-Darstellung von HTML-Code mit einer ungeordneten Liste innerhalb einer geordneten Liste für den Ablauf der Gartenparty

Theoretisch können Sie beliebig viele Listen ineinander verschachteln. Berücksichtigen Sie jedoch stets die Lesbarkeit für Ihre Besucher.

Beschreibungslisten

Eine Beschreibungsliste (description list) wird mit dem Element <dl> definiert und stellt eine Art Wörterbuch mit Schlüsseln und Werten dar. Der Schlüssel ist ein zu beschreibender Begriff oder Name, und der Wert ist dessen Beschreibung. Beschreibungslisten können einfache Schlüssel-Werte-Paare, aber auch umfangreiche Definitionen sein.

Das Element <dt> definiert den Schlüssel (oder term), während das Element <dd> dessen Beschreibung markiert.

Hier ein Beispiel für eine solche Beschreibungsliste mit exotischen Früchten:

<h3>Exotic Fruits</h3>
<dl>
  <dt>Banana</dt>
  <dd>
    A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
    may also have a soft green color when underripe and get brown spots when
    overripe.
  </dd>

  <dt>Kiwi</dt>
  <dd>
    A small, oval fruit with green flesh, black seeds, and a brown, hairy
    skin.
  </dd>

  <dt>Mango</dt>
  <dd>
    A fruit larger than a fist, with a green skin, orange flesh, and one big
    seed. The skin may have spots ranging from green to yellow or red.
  </dd>
</dl>

In einem Webbrowser führt dies zu dem Ergebnis in Figure 10.

Figure 10. Ein Beispiel für eine HTML-Beschreibungsliste mit exotischen Früchten

Note	Im Gegensatz zu geordneten und ungeordneten Listen ist in einer Beschreibungsliste jedes HTML-Element als direktes untergeordnetes Element zulässig. So können Sie Elemente gruppieren und sie an anderer Stelle mit CSS gestalten.

Inline-Textformatierung

HTML kennt Formatierungselemente, um das Aussehen des Textes zu beeinflussen. Man unterscheidet dabei zwischen Darstellungselementen (presentation elements) und Ausdruckselemente (phrase elements).

Darstellungselemente

Grundlegende Darstellungselemente ändern die Schriftart oder das Aussehen von Text: <b>, <i>, <u> und <tt>. Diese Elemente wurden definiert, bevor CSS die Möglichkeit bot, Text fett, kursiv usw. darzustellen. Heute gibt es in der Regel bessere Möglichkeiten, das Aussehen von Text zu verändern, aber manchmal sieht man diese Elemente noch.

Fettgedruckter Text

Um Text fett zu machen, schließen Sie ihn in das Element <b> ein, wie im folgenden Beispiel gezeigt. Das Ergebnis erscheint in Figure 11.

This <b>word</b> is bold.

Figure 11. Das Tag b sorgt für Fettdruck.

Nach der HTML5-Spezifikation sollte das Element b nur verwendet werden, wenn es keine geeigneteren Tags gibt. Das Element, das die gleiche visuelle Ausgabe erzeugt, aber den markierten Text zusätzlich semantisch spezifiziert, ist das Element strong.

Kursiver Text

Um Text kursiv zu setzen, schließen Sie ihn in das Element <i> ein, wie im folgenden Beispiel gezeigt. Das Ergebnis erscheint in Figure 12.

This <i>word</i> is in italics.

Figure 12. Das <i>-Tag sorgt für kursiven Text.

Nach der HTML5-Spezifikation sollten Sie das Element i allerdings nur verwenden, wenn es keine anderen geeigneten Tags gibt.

Unterstrichener Text

Um Text zu unterstreichen, schließen Sie ihn in das Element <u> ein, wie im folgenden Beispiel gezeigt. Das Ergebnis erscheint in Figure 13.

This <u>word</u> is underlined.

Figure 13. Das <u>-Tag sorgt für unterstrichenen Text.

Nach der HTML5-Spezifikation sollten Sie das Element u allerdings nur verwenden, wenn es keine besseren Möglichkeiten gibt, Text zu unterstreichen. CSS bietet eine moderne Alternative.

Schrift mit fester Breite (Monospaced)

Um Text in einer Schriftart mit fester Breite (Monospaced) darzustellen – häufig für die Darstellung von Computercode genutzt –, schließen Sie ihn in das Element <tt> ein, wie im folgenden Beispiel zu sehen. Das Ergebnis erscheint in Figure 14.

This <tt>word</tt> is in fixed-width font.

Figure 14. Das <tt>-Tag zeigt Text in einer Schrift mit fester Breite an.

Das <tt>-Tag wird in HTML5 nicht unterstützt. Webbrowser geben ihn trotzdem wie erwartet wieder. Sie sollten jedoch geeignetere Tags verwenden, z.B. <code>, <kbd>, <var> oder <samp>.

Ausdruckselemente

Ausdruckselemente zielen nicht nur auf das Aussehen des Textes, sondern markieren auch semantische Bedeutung. Sie heben so ein Wort hervor und kennzeichnen es als wichtig. Im Gegensatz zu Darstellungselementen werden diese Elemente auch von Bildschirmlesegeräten erkannt, was den Text für sehbehinderte Besucher leichter zugänglich macht. Auch Suchmaschinen können den Seiteninhalt besser bewerten. Die in dieser Lektion verwendeten Ausdruckselemente sind <em>, <strong> und <code>.

Hervorgehobener Text

Um Text hervorzuheben, schließen Sie ihn in das Element <em> ein:

This <em>word</em> is emphasized.

Figure 15. Das <em>-Tag hebt Text hervor.

Der Webbrowser zeigt <em> auf die gleiche Weise an wie <i>, aber <em> fügt als Ausdruckselement semantische Bedeutung hinzu, was Besuchern mit eingeschränkter Sehfähigkeit den Zugang erleichtert.

Wichtiger Text

Um Text als wichtig zu kennzeichnen, schließen Sie ihn in das Element <strong> ein, wie im folgenden Beispiel dargestellt. Das Ergebnis erscheint in Figure 16.

This <strong>word</strong> is important.

Figure 16. Das <strong>-Tag kennzeichnet Text als wichtig.

Der Webbrowser zeigt <strong> auf die gleiche Weise an wie <b>, aber <strong> fügt als Ausdruckselement semantische Bedeutung hinzu, was Besuchern mit eingeschränkter Sehfähigkeit den Zugang erleichtert.

Computercode

Um Computercode einzufügen, schließen Sie ihn in das Element <code> ein, wie im folgenden Beispiel gezeigt. Das Ergebnis erscheint in Figure 17.

The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.

Figure 17. Das <code>-Tag zeichnet Computercode aus.

Markierter Text

Um Text mit einem gelben Hintergrund hervorzuheben, ähnlich einem Textmarker, schließen Sie ihn in das Element <mark> ein, wie im folgenden Beispiel dargestellt. Das Ergebnis erscheint in Figure 18.

This <mark>word</mark> is highlighted.

Figure 18. Das Tag <mark> hebt Text mit einem gelben Hintergrund hervor.

Textformatierung in unserer HTML-Einkaufsliste

In unserem Beispiel fügen wir nun einige Ausdruckselemente ein, um das Erscheinungsbild des Textes zu verändern und gleichzeitig semantische Bedeutung zu markieren. Das Ergebnis erscheint in Figure 19.

<h1>Garden Party</h1>
<p>
  Invitation to <strong>John's garden party</strong>.<br>
  <strong>Saturday, next week.</strong>
</p>

<h2>Agenda</h2>
<ol>
  <li>Welcome</li>
  <li>
    Barbecue
    <ul>
      <li><em>Vegetables</em></li>
      <li><em>Meat</em></li>
      <li><em>Burgers</em>, including vegetarian options</li>
    </ul>
  </li>
  <li>Dessert</li>
  <li><mark>Fireworks</mark></li>
</ol>

<hr>

<h2>Please bring</h2>
<ul>
  <li>Salad</li>
  <li>Drinks</li>
  <li>Bread</li>
  <li>Snacks</li>
  <li>Desserts</li>
</ul>

Figure 19. Die HTML-Seite mit einigen Formatierungselementen.

In diesem HTML-Beispiel kennzeichnen wir die wichtigsten Informationen zum Gartenfest selbst mit dem Element <strong>. Die angebotenen Speisen heben wir mit dem Element <em>, das Feuerwerk mit dem Element <mark> hervor.

Als Übung können Sie auch andere Textstücke mit den anderen Formatierungselementen auszeichnen.

Vorformatierter Text

In den meisten HTML-Elementen werden mehrere Leerzeichen in der Regel auf ein einziges reduziert oder sogar ganz ignoriert. Mit dem HTML-Element <pre> zeichnen Sie jedoch sogenannten vorformatierten Text aus. Leerraum im Inhalt dieses Elements, einschließlich Leerzeichen und Zeilenumbrüche, bleibt dann erhalten und erscheint im Webbrowser. Außerdem erscheint der Text in einer Schriftart mit fester Breite, ähnlich wie beim Element <code>.

<pre>
field() {
  shift $1 ; echo $1
}
</pre>

Figure 20. Webbrowser-Darstellung von HTML-Code mit Umbrüchen und Leerzeichen im Element <pre>

Elemente gruppieren

Üblicherweise unterscheidet man bei HTML-Elementen zwei Kategorien:

Block-Elemente: Diese erscheinen in einer neuen Zeile und nehmen die gesamte verfügbare Breite ein. Beispiele für Elemente auf Block-Ebene, die wir bereits besprochen haben, sind <p>, <ol> und <h2>.
Inline-Elemente: Sie erscheinen in derselben Zeile wie andere Elemente und Text und nehmen nur so viel Platz ein, wie ihr Inhalt benötigt. Beispiele für Elemente auf Inline-Ebene sind <strong>, <em> und <i>.

Note	HTML5 führt genauere und präzisere Elementkategorien ein und versucht, Verwechslungen mit CSS-Block- und Inline-Boxen zu vermeiden. Der Einfachheit halber bleiben wir hier bei der herkömmlichen Unterteilung in Block- und Inline-Elemente.

Die grundlegenden Elemente für die Gruppierung mehrerer Elemente sind <div> und <span>.

Das <div>-Element ist ein Block-Container für andere HTML-Elemente und bringt selbst keinen semantischen Wert mit. Sie setzen dieses Element ein, um ein HTML-Dokument in Abschnitte zu unterteilen und den Inhalt zu strukturieren — sowohl für bessere Lesbarkeit des Codes als auch um CSS-Stile auf eine Gruppe von Elementen anzuwenden. Wir kommen darauf noch zurück.

Standardmäßig fügen Webbrowser einen Zeilenumbruch vor und nach jedem <div>-Element ein, so dass jedes Element in einer eigenen Zeile erscheint.

Im Gegensatz dazu dient das Element <span> als Container für HTML-Text im Allgemeinen dazu, andere Inline-Elemente zu gruppieren, um über CSS Formatierungen auf kleinere Texteinheiten anzuwenden.

Das Element <span> verhält sich wie normaler Text und beginnt nicht in einer neuen Zeile. Es ist daher ein Inline-Element.

Das folgende Beispiel vergleicht die visuelle Darstellung des semantischen Elements <p> mit der der Gruppierungselemente <div> und <span>:

<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>

Ein Webbrowser rendert diesen Code wie in Figure 21.

Figure 21. Webbrowser-Darstellung zu den Unterschieden zwischen p-, div- und span-Elementen

Wir haben bereits gesehen, dass Webbrowser standardmäßig einen Abstand vor und nach <p>-Elementen einfügen. Dieser Abstand wird bei den Gruppierungselementen <div> und <span> nicht eingehalten. Allerdings werden <div>-Elemente als eigene Blöcke formatiert, während der Text in <span>-Elementen in derselben Zeile erscheint.

HTML-Seitenstruktur

Wir haben gesehen, wie man mit HTML-Elementen den Inhalt einer Webseite semantisch beschreibt — dem Text also Bedeutung und Kontext zuschreibt. Eine andere Gruppe von Elementen dient dazu, die semantische Struktur einer Webseite zu beschreiben. Diese Elemente sind Block-Elemente, d.h. in der Darstellung verhalten sie sich ähnlich wie ein <div>-Element. Sie bestimmen die semantische Struktur einer Webseite, indem sie Bereiche wie Kopf- und Fußzeilen und den Hauptinhalt der Seite definieren. Diese semantische Gruppierung von Inhalten wird auch von Suchmaschinen und Bildschirmlesegeräten verstanden.

Das Element `<header>`

Das Element <header> enthält Grundinformationen zu dem entsprechenden semantischen Element innerhalb eines HTML-Dokuments. Ein Header (Kopf) unterscheidet sich von einer Heading (Überschrift), aber ein Header enthält oft ein Überschriftenelement (<h1>, … , <h6>).

In der Praxis definiert dieses Element meist den Seitenkopf, z.B. für ein Banner mit einem Logo. Es kann aber auch in den Inhalt eines der folgenden Elemente einführen: <body>, <section>, <article>, <nav> oder <aside>.

Ein Dokument kann mehrere <header>-Elemente enthalten, aber ein <header>-Element darf nicht in einem anderen <header>-Element verschachtelt werden. Ebenso wenig darf ein <footer>-Element innerhalb eines <header>-Elements stehen.

Um beispielsweise zu unserem Beispieldokument einen Seitenkopf hinzuzufügen, gehen wir wie folgt vor:

<header>
  <h1>Garden Party</h1>
</header>

Es wird keine sichtbaren Änderungen am HTML-Dokument geben, da <h1> (wie alle anderen Überschriftenelemente) ein Element auf Blockebene ist, das keine weiteren visuellen Eigenschaften hat.

Das Inhaltselement `<main>`

Das <main>-Element ist ein Container für den zentralen Inhalt einer Webseite. In einem HTML-Dokument darf es nicht mehr als ein <main>-Element geben.

In unserem Beispieldokument platzieren wir den gesamten bisherigen HTML-Code in einem <main>-Element:

<main>
  <header>
    <h1>Garden Party</h1>
  </header>
  <p>
    Invitation to <strong>John's garden party</strong>.<br>
    <strong>Saturday, next week.</strong>
  </p>

  <h2>Agenda</h2>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>

  <hr>

  <h2>Please bring</h2>
  <ul>
    <li>Salad</li>
    <li>Drinks</li>
    <li>Bread</li>
    <li>Snacks</li>
    <li>Desserts</li>
  </ul>
</main>

Wie das Element <header> verursacht auch das Element <main> in unserem Beispiel keine Veränderungen in der Darstellung.

Das Element `<footer>`

Das <footer>-Element enthält Fußnoten, z.B. Informationen über Autoren, Kontaktinformationen oder verwandte Dokumente, für das umgebende semantische Element, z.B. <section>, <nav> oder <aside>. Ein Dokument kann mehrere <footer>-Elemente enthalten, um semantische Elemente besser zu beschreiben. Allerdings darf ein <footer>-Element nicht in einem anderen <footer>-Element verschachtelt werden, noch darf ein <header>-Element innerhalb eines <footer>-Elements stehen.

Für unser Beispiel ergänzen wir Kontaktinformationen des Gastgebers:

<footer>
  <p>John Doe</p>
  <p>john.doe@example.com</p>
</footer>

Das Element `<nav>`

Das Element <nav> beschreibt eine größere Navigationseinheit, z.B. ein Menü, das eine Reihe von Hyperlinks enthält.

Note	Nicht alle Hyperlinks müssen von einem `<nav>`-Element umschlossen sein. Es dient eher dazu, eine Gruppe von Links zu kapseln.

Da Hyperlinks noch nicht Thema waren, gehen wir hier nicht weiter auf dieses Navigationselement ein.

Das Element `<aside>`

Das <aside>-Element ist ein Container für Inhalte, die nicht unmittelbar zum Hauptinhalt der Seite gehören, aber damit verbunden sind und ihn in der Regel ergänzen. Dieses Element kapselt meist Seitenleisten mit sekundären Informationen, z.B. ein Glossar.

In unserem Beispiel fügen wir mit dem Element <aside> Adress- und Anreiseinformationen hinzu, die nur indirekt mit dem übrigen Inhalt verbunden sind.

<aside>
  <p>
    10, Main Street<br>
    Newville
  </p>
  <p>Parking spaces available.</p>
</aside>

Das Element `<section>`

Das Element <section> definiert einen Inhaltsabschnitt in einem Dokument, der Teil des umgebenden semantischen Elements ist, also nicht den Stellenwert eines eigenständigen Teils hat, z.B. eines Kapitels.

In unserem Beispieldokument kapseln wir die Inhaltsabschnitte für den Ablauf und die mitzubringenden Speisen:

<section>
  <header>
    <h2>Agenda</h2>
  </header>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>
</section>

<hr>

<section>
  <header>
    <h2>Please bring</h2>
  </header>
  <ul>
    <li>Salad</li>
    <li>Drinks</li>
    <li>Bread</li>
    <li>Snacks</li>
    <li>Desserts</li>
  </ul>
</section>

Das Beispiel fügt auch weitere <header>-Elemente in den Abschnitten hinzu, so dass jeder Abschnitt ein eigenes <header>-Element hat.

Das Element `<article>`

Das Element <article> definiert eigenständige Inhalte, die ohne den Rest der Seite eine sinnvolle Einheit bilden. Der Inhalt kann in einem anderen Kontext verteilt oder wiederverwendet werden. Typische Beispiele für <article>-Elemente sind Blog-Beiträge, Produktlisten für einen Shop und Werbeseiten von Produkten. Diese könnten dann sowohl für sich allein stehen als auch in einer größeren Seite eingebettet sein.

In unserem Beispiel ersetzen wir das erste <section>-Element, das die Agenda umschließt, durch ein <article>-Element:

<article>
  <header>
    <h2>Agenda</h2>
  </header>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>
</article>

Das <header>-Element aus dem vorangegangenen Beispiel bleibt erhalten, weil auch <article>-Elemente eigene <header>-Elemente haben können.

Das fertige Beispiel

Kombinieren wir alle genannten Beispiele, sieht das HTML-Dokument für unsere Einladung wie folgt aus:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Garden Party</title>
  </head>

  <body>
    <main>
      <h1>Garden Party</h1>
      <p>
        Invitation to <strong>John's garden party</strong>.<br>
        <strong>Saturday, next week.</strong>
      </p>

      <article>
        <h2>Agenda</h2>
        <ol>
          <li>Welcome</li>
          <li>
            Barbecue
            <ul>
              <li><em>Vegetables</em></li>
              <li><em>Meat</em></li>
              <li><em>Burgers</em>, including vegetarian options</li>
            </ul>
          </li>
          <li>Dessert</li>
          <li><mark>Fireworks</mark></li>
        </ol>
      </article>

      <hr>

      <section>
        <h2>Please bring</h2>
        <ul>
          <li>Salad</li>
          <li>Drinks</li>
          <li>Bread</li>
          <li>Snacks</li>
          <li>Desserts</li>
        </ul>
      </section>
    </main>

    <aside>
      <p>
        10, Main Street<br>
        Newville
      </p>
      <p>Parking spaces available.</p>
    </aside>

    <footer>
      <p>John Doe</p>
      <p>john.doe@example.com</p>
    </footer>
  </body>
</html>

In einem Webbrowser erscheint die gesamte Seite wie in Figure 22.

Figure 22. Webbrowser-Darstellung des resultierenden HTML-Dokuments, das die vorherigen Beispiele kombiniert. Die Einladung zu einer Party mit Ablauf und einer Liste der Speisen.

Geführte Übungen

Geben Sie für jedes der folgenden Tags das entsprechende schließende Tag an:

<h5>

<br>

<ol>

<dd>

<hr>

<strong>

<tt>

<main>
Geben Sie für jedes der folgenden Tags an, ob es den Beginn eines Block- oder Inline-Elements markiert:

<h3>

<span>

<b>

<div>

<em>

<dl>

<li>

<nav>

<code>

<pre>
Welche Arten von Listen können Sie in HTML erstellen? Welche Tags sollten Sie für jede dieser Listen verwenden?
Welche Tags umschließen die Block-Elemente, die Sie zur Strukturierung einer HTML-Seite verwenden können?

Offene Übungen

Erstellen Sie eine einfache HTML-Seite mit dem Titel “Form Rules”. Die folgenden Übungen bauen auf dieser Seite auf. Fügen Sie eine Überschrift der Ebene 1 mit dem Text “How to fill in the request form”, einen Absatz mit dem Text “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” und eine ungeordnete Liste mit den folgenden Listenelementen hinzu: “Name”, “Surname”, “Email Address”, “Nation”, “Country” und “Zip/Postal Code”.
Setzen Sie die ersten drei Felder (“Name”, “Surname” und “Email Address”) in Fettdruck und fügen Sie gleichzeitig semantische Bedeutung hinzu. Fügen Sie dann eine Überschrift der Ebene 2 mit dem Text “Required fields” und einen Absatz mit dem Text “Bold fields are mandatory.” hinzu.
Fügen Sie eine weitere Überschrift der Ebene 2 mit dem Text “Steps to follow”, einen Absatz mit dem Text “There are four steps to follow:” und eine geordnete Liste mit den folgenden Listenelementen hinzu: “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, and “Check your e-mail - You will receive the full HTML course in minutes”.
Erstellen Sie unter Verwendung von <div> einen Block für jeden Abschnitt, der mit einer Überschrift der Ebene 2 beginnt.
Erstellen Sie mit <div> einen weiteren Block für den Abschnitt, der mit der Überschrift der Ebene 1 beginnt. Trennen Sie diesen Abschnitt von den beiden anderen mit einer horizontalen Linie.
Fügen Sie das Header-Element mit dem Text “Form Rules - 2021” und das Footer-Element mit dem Text “Copyright Note - 2021” hinzu. Fügen Sie schließlich das Hauptelement hinzu, das die drei <div>-Blöcke enthalten muss.

Zusammenfassung

In dieser Lektion haben Sie gelernt:

Wie man Markup für Inhalte in einem HTML-Dokument erstellt.
Die hierarchische HTML-Textstruktur.
Der Unterschied zwischen Block- und Inline-Elementen.
Wie man HTML-Dokumente mit einer semantischen Struktur erstellt.

Die folgenden Begriffe wurden in dieser Lektion behandelt:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Überschriften-Tags
<p>: Absatz-Tag
<ol>: Tag für geordnete Listen
<ul>: Tag für ungeordnete Listen
<li>: Tag für Listenelement
<dl>: Tag für Beschreibungslisten
<dt>, <dd>: Tags der Begriffe und Beschreibungen in Beschreibungslisten
<pre>: Tag zur Bewahrung von vorformatiertem Text
<b>, <i>, <u>, <tt>, <em>, <strong>, <code>, <mark>: Tags zur Formatierung
<div>, <span>: Tags zur Gruppierung
<header>, <main>, <nav>, <aside>, <footer>: Tags zur Strukturierung einer HTML-Seite

Lösungen zu den geführten Übungen

Geben Sie für jedes der folgenden Tags das entsprechende schließende Tag an:

<h5>

</h5>

<br>

existiert nicht

<ol>

</ol>

<dd>

</dd>

<hr>

existiert nicht

<strong>

</strong>

<tt>

</tt>

<main>

</main>
Geben Sie für jedes der folgenden Tags an, ob es den Beginn eines Block- oder Inline-Elements markiert:

<h3>

Block

<span>

Inline

<b>

Inline

<div>

Block

<em>

Inline

<dl>

Block

<li>

Block

<nav>

Block

<code>

Inline

<pre>

Block
Welche Arten von Listen können Sie in HTML erstellen? Welche Tags sollten Sie für jede dieser Listen verwenden?

In HTML stehen drei Arten von Listen zur Verfügung: geordnete Listen, die aus einer Reihe von nummerierten Listenelementen bestehen, ungeordnete Listen, die aus einer Reihe von Listenelementen bestehen, die keine besondere Ordnung oder Reihenfolge haben, und Beschreibungslisten, die Einträge wie in einem Wörterbuch oder einer Enzyklopädie darstellen. Eine geordnete Liste wird zwischen den Tags <ol> und </ol> eingeschlossen, eine ungeordnete Liste zwischen den Tags <ul> und </ul> und eine Beschreibungsliste zwischen den Tags <dl> und </dl>. Jeder Eintrag in einer geordneten oder ungeordneten Liste wird zwischen den Tags <li> und </li> eingeschlossen, während jeder Begriff in einer Beschreibungsliste von den Tags <dt> und </dt> und seine Beschreibung von den Tags <dd> und </dd> eingeschlossen wird.
Welche Tags umschließen die Block-Elemente, die Sie zur Strukturierung einer HTML-Seite verwenden können?

Die Tags <header> und </header> umschließen den Seitenkopf, die Tags <main> und </main> den eigentlichen Inhalt der HTML-Seite, die Tags <nav> und </nav> die sogenannte Navigationsleiste, die Tags <aside> und </aside> die Seitenleiste und die Tags <footer> und </footer> den Seiten-Footer.

Lösungen zu den offenen Übungen

Erstellen Sie eine einfache HTML-Seite mit dem Titel “Form Rules”. Die folgenden Übungen bauen auf dieser Seite auf. Fügen Sie eine Überschrift der Ebene 1 mit dem Text “How to fill in the request form”, einen Absatz mit dem Text “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” und eine ungeordnete Liste mit den folgenden Listenelementen hinzu: “Name”, “Surname”, “Email Address”, “Nation”, “Country” und “Zip/Postal Code”.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li>Name</li>
      <li>Surname</li>
      <li>Email Address</li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>
  </body>
</html>

Setzen Sie die ersten drei Felder (“Name”, “Surname” und “Email Address”) in Fettdruck und fügen Sie gleichzeitig semantische Bedeutung hinzu. Fügen Sie dann eine Überschrift der Ebene 2 mit dem Text “Required fields” und einen Absatz mit dem Text “Bold fields are mandatory.” hinzu.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li><strong> Name </strong></li>
      <li><strong> Surname </strong></li>
      <li><strong> Email Address </strong></li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>

    <h2>Required fields</h2>
    <p>Bold fields are mandatory.</p>
  </body>
</html>

Fügen Sie eine weitere Überschrift der Ebene 2 mit dem Text “Steps to follow”, einen Absatz mit dem Text “There are four steps to follow:” und eine geordnete Liste mit den folgenden Listenelementen hinzu: “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, and “Check your e-mail - You will receive the full HTML course in minutes”.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li><strong> Name </strong></li>
      <li><strong> Surname </strong></li>
      <li><strong> Email Address </strong></li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>

    <h2>Required fields</h2>
    <p>Bold fields are mandatory.</p>

    <h2>Steps to follow</h2>
    <p>There are four steps to follow:</p>
    <ol>
      <li>Fill in the fields</li>
      <li>Click the Submit button</li>
      <li>
        Check your e-mail and confirm your request by clicking on the link you
        receive
      </li>
      <li>
        Check your e-mail - You will receive the full HTML course in minutes
      </li>
    </ol>
  </body>
</html>

Erstellen Sie unter Verwendung von <div> einen Block für jeden Abschnitt, der mit einer Überschrift der Ebene 2 beginnt.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li><strong> Name </strong></li>
      <li><strong> Surname </strong></li>
      <li><strong> Email Address </strong></li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>

    <div>
      <h2>Required fields</h2>
      <p>Bold fields are mandatory.</p>
    </div>

    <div>
      <h2>Steps to follow</h2>
      <p>There are four steps to follow:</p>
      <ol>
        <li>Fill in the fields</li>
        <li>Click the Submit button</li>
        <li>
          Check your e-mail and confirm your request by clicking on the link you
          receive
        </li>
        <li>
          Check your e-mail - You will receive the full HTML course in minutes
        </li>
      </ol>
    </div>
  </body>
</html>

Erstellen Sie mit <div> einen weiteren Block für den Abschnitt, der mit der Überschrift der Ebene 1 beginnt. Trennen Sie diesen Abschnitt von den beiden anderen mit einer horizontalen Linie.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <div>
      <h1>How to fill in the request form</h1>
      <p>
        To receive the PDF document with the complete HTML course, it is
        necessary to fill in the following fields:
      </p>
      <ul>
        <li><strong> Name </strong></li>
        <li><strong> Surname </strong></li>
        <li><strong> Email Address </strong></li>
        <li>Nation</li>
        <li>Country</li>
        <li>Zip/Postal Code</li>
      </ul>
    </div>

    <hr>

    <div>
      <h2>Required fields</h2>
      <p>Bold fields are mandatory.</p>
    </div>

    <div>
      <h2>Steps to follow</h2>
      <p>There are four steps to follow:</p>
      <ol>
        <li>Fill in the fields</li>
        <li>Click the Submit button</li>
        <li>
          Check your e-mail and confirm your request by clicking on the link you
          receive
        </li>
        <li>
          Check your e-mail - You will receive the full HTML course in minutes
        </li>
      </ol>
    </div>
  </body>
</html>

Fügen Sie das Header-Element mit dem Text “Form Rules - 2021” und das Footer-Element mit dem Text “Copyright Note - 2021” hinzu. Fügen Sie schließlich das Hauptelement hinzu, das die drei <div>-Blöcke enthalten muss.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <header>
      <h1>Form Rules - 2021</h1>
    </header>

    <main>
      <div>
        <h1>How to fill in the request form</h1>
        <p>
          To receive the PDF document with the complete HTML course, it is
          necessary to fill in the following fields:
        </p>
        <ul>
          <li><strong> Name </strong></li>
          <li><strong> Surname </strong></li>
          <li><strong> Email Address </strong></li>
          <li>Nation</li>
          <li>Country</li>
          <li>Zip/Postal Code</li>
        </ul>
      </div>

      <hr>

      <div>
        <h2>Required fields</h2>
        <p>Bold fields are mandatory.</p>
      </div>

      <div>
        <h2>Steps to follow</h2>
        <p>There are four steps to follow:</p>
        <ol>
          <li>Fill in the fields</li>
          <li>Click the Submit button</li>
          <li>
            Check your e-mail and confirm your request by clicking on the link
            you receive
          </li>
          <li>
            Check your e-mail - You will receive the full HTML course in minutes
          </li>
        </ol>
      </div>
    </main>

    <footer>
      <p>Copyright Note - 2021</p>
    </footer>
  </body>
</html>