Semantische HTML-Elemente

Sehen wir uns einige semantische Elemente an, die bei der Strukturierung einer Webseite hilfreich sind. Ein <header> ist ein Container, normalerweise für Navigationslinks oder Einführungsinhalte, der Überschriften von <h1> bis <h6> enthält.

Das folgende Beispiel zeigt <header> in Aktion:

Dies kann mit dem folgenden Code verglichen werden, der ein <div>-Tag anstelle eines <header>-Tags verwendet:

Durch die Verwendung eines <header>-Tags wird unser Code leichter lesbar. Es ist viel einfacher zu erkennen, was sich innerhalb der übergeordneten Tags von <h1> befindet, im Gegensatz zu einem <div>-Tag, das keine Details darüber liefern würde, was sich innerhalb des Tags befindet.

Eine <nav> wird verwendet, um einen Block von Navigationslinks wie Menüs und Inhaltsverzeichnisse zu definieren. Es ist wichtig zu beachten, dass <nav> innerhalb des <header>-Elements, aber auch allein verwendet werden kann.

Sehen wir uns das folgende Beispiel an:

Zwei weitere Strukturelemente sind <main> und <footer>. Diese Elemente helfen zusammen mit <nav> und <header> dabei, basierend auf herkömmlichen Webentwicklungsstandards zu beschreiben, wo sich ein Element befindet.

Das Element <main> wird verwendet, um den Hauptinhalt einer Webseite zusammenzufassen. Dieses Tag ist vom <footer> und <nav> einer Webseite getrennt, da diese Elemente nicht den Hauptinhalt enthalten. Durch die Verwendung von <main> anstelle eines <div>-Elements können Bildschirmleseprogramme und Webbrowser besser erkennen, dass das, was sich innerhalb des Tags befindet, den Hauptinhalt darstellt.

Wie sieht also <main> aus, wenn es in unseren Code integriert wird?

Wie wir oben sehen, enthält <main> ein <article>- und ein <header>-Tag mit untergeordneten Elementen, die die wichtigsten Informationen zur Seite enthalten.

Der Inhalt am Ende der Betreff Informationen wird als Fußzeile bezeichnet und durch das Element <footer> gekennzeichnet. Die Fußzeile enthält Informationen wie:

• Kontakt Informationen

• Copyright-Informationen

• Nutzungsbedingungen

• Sitemap

• Verweis auf Links am Seitenanfang

Als Beispiel:

Nachdem wir nun den Hauptteil von semantischem HTML behandelt haben, konzentrieren wir uns darauf, was in den Hauptteil aufgenommen werden kann. Die beiden Elemente, auf die wir uns jetzt konzentrieren werden, sind <section> und <article>.

<section> definiert Elemente in einem Dokument, wie etwa Kapitel, Überschriften oder andere Bereiche des Dokuments mit demselben Thema. Beispielsweise können Inhalte mit demselben Thema, wie etwa Artikel über Cricket, unter einem einzigen <section> zusammengefasst werden. Die Homepage einer Website könnte in Abschnitte für die Einführung, Neuigkeiten und Kontaktinformationen unterteilt werden.

Hier ist ein Beispiel für die Verwendung von <section>:

Im obigen Code haben wir ein <section>-Element erstellt, um den Code einzukapseln. In <section> haben wir ein <h2>-Element als Überschrift hinzugefügt.

Das <article>-Element enthält Inhalt, der für sich genommen Sinn ergibt. <article> kann Inhalt wie Artikel, Blogs, Kommentare, Zeitschriften usw. enthalten. Ein <article>-Tag würde jemandem, der einen Screenreader verwendet, helfen zu verstehen, wo der Artikelinhalt (der eine Kombination aus Text, Bildern, Audio usw. enthalten kann) beginnt und endet.

Hier ist ein Beispiel für die Verwendung von <article>:

Das <aside>-Element wird verwendet, um zusätzliche Informationen zu kennzeichnen, die ein anderes Element ergänzen können, aber nicht erforderlich sind, um den Hauptinhalt zu verstehen. Dieses Element kann zusammen mit anderen Elementen wie <article> oder <section> verwendet werden. Einige häufige Verwendungen des <aside>-Elements sind:

• Bibliographien

• Endnoten

• Kommentare

• Zitate

• Redaktionelle Seitenleisten

• Weitere Informationen

Hier ist ein Beispiel für die Verwendung von <aside> zusammen mit <article>:

Mit <aside> haben wir gelernt, dass wir neben dem Hauptinhalt zusätzliche Informationen platzieren können. Was aber, wenn wir ein Bild oder eine Illustration hinzufügen möchten? Hier kommen <figure> und <figcaption> ins Spiel.

<figure> ist ein Element, das zum Einkapseln von Medien wie Bildern, Illustrationen, Diagrammen, Codeausschnitten usw. verwendet wird, auf die im Hauptfluss des Dokuments verwiesen wird.

In diesem Code haben wir ein <figure>-Element erstellt, damit wir unser <img>-Tag einkapseln können. In <figure> haben wir das <img>-Tag verwendet, um ein Bild auf der Webseite einzufügen. Wir haben das src-Attribut innerhalb des <img>-Tags verwendet, damit wir die Quelle des Bildes verlinken können.

Mit <figcaption> können Sie dem Bild eine Beschriftung hinzufügen.

<figcaption> ist ein Element, das zur Beschreibung des Mediums im <figure>-Tag verwendet wird. Normalerweise wird <figcaption> in <figure> eingefügt. Dies unterscheidet sich von der Verwendung eines <p>-Elements zur Beschreibung des Inhalts. Wenn wir uns entscheiden, die Position von <figure> zu ändern, wird das Absatz-Tag möglicherweise von der Abbildung verdrängt, während sich <figcaption> mit der Abbildung bewegt. Dies ist nützlich, um ein Bild mit einer Bildunterschrift zu gruppieren.

Nachdem wir nun etwas über textbasierte Inhalte gelernt haben, wollen wir uns mit <Audio> befassen.

Das <audio>-Element wird verwendet, um Audioinhalte in ein Dokument einzubetten. Wie <video> verwendet <audio> src, um die Audioquelle zu verknüpfen.

In diesem Beispiel haben wir ein <audio>-Element erstellt. Dann haben wir ein <source>-Element erstellt, um unseren Audiolink einzukapseln. In diesem Fall ist IchbineineAudioDatei.mp3 unsere Audiodatei. Dann haben wir den Typ mit type angegeben und benannt, um welche Art von Audio es sich handelt. Obwohl es nicht immer notwendig ist, wird empfohlen, den Audiotyp anzugeben, da dies dem Browser hilft, ihn leichter zu identifizieren und festzustellen, ob dieser Audiodateityp vom Browser unterstützt wird.

Wir haben unsere Audiodatei mit dem Browser verknüpft, aber jetzt müssen wir ihr Steuerelemente geben. 

Mithilfe von Attributen können wir viele verschiedene Dinge mit unserer Audiodatei machen. Es gibt viele Attribute für <audio>, aber heute konzentrieren wir uns auf Steuerelemente (controls) und Quelle (src).

• controls: Zeigt automatisch die Audio-Steuerung im Browser an, beispielsweise Wiedergabe und Stummschalten.

• src: Gibt die URL der Audiodatei an.

Wie Sie vielleicht bemerkt haben, haben wir das src-Attribut bereits im obigen Beispielcode verwendet. Die meisten Attribute gehören in das öffnende Tag von <audio>. So könnten wir beispielsweise sowohl die Autoplay-Funktionalität als auch Audiosteuerungen hinzufügen:

Wie in der vorherigen Übung gezeigt, können Medieninhalte eine nützliche Ergänzung einer Website sein. Mithilfe eines <video>-Elements können wir unserer Website Videos hinzufügen. Das <video>-Element macht deutlich, dass ein Entwickler versucht, dem Benutzer ein Video anzuzeigen.

Zu den Attributen, die die Videowiedergabe verändern können, gehören:

• controls: Wenn hinzugefügt, wird dem Video eine Wiedergabe-/Pause-Schaltfläche sowie eine Lautstärkeregelung und eine Vollbildoption hinzugefügt.

• Autoplay: Das Attribut bewirkt, dass ein Video automatisch abgespielt wird, sobald die Seite geladen ist.

• loop: Dieses Attribut bewirkt, dass das Video kontinuierlich wiederholt abgespielt wird.

Unten sehen Sie ein Beispiel für die Verwendung von <video> mit dem Controls-Attribut:

Im obigen Code wird eine Videodatei mit dem Namen programmieren.mp4 abgespielt. Die Meldung „Video wird nicht unterstützt“ wird nur angezeigt, wenn der Browser das Video nicht anzeigen kann.

Ein weiteres Tag, das zum Einfügen von Medieninhalten in eine Seite verwendet werden kann, ist das <embed>-Tag, mit dem beliebige Medieninhalte wie Videos, Audiodateien und GIFs aus einer externen Quelle eingebettet werden können. Dies bedeutet, dass Websites mit einer Einbettungsschaltfläche über eine Form von Medieninhalten verfügen, die zu anderen Websites hinzugefügt werden können. Das <embed>-Tag ist im Gegensatz zum <video>-Element ein selbstschließendes Tag. Beachten Sie, dass <embed> ein veraltetes Tag ist und andere Alternativen wie <video>, <audio> und <img> an seiner Stelle verwendet werden sollten, aber aus Gründen der Veraltung gelehrt wird.

Nachfolgend sehen wir uns die Verwendung von <embed> in Aktion an.