Einen Artikel erstellen im HTML5
Das Element article im HTML5
Ein anderes Element, das wir HTML5 zu verdanken haben, ist article. Das haben Sie schon ein paar Mal in Aktion gesehen. Nun sollen Sie mehr darüber erfahren, wie es eigentlich funktioniert.
Am Namen können Sie schon merken, dass man in article Inhalte wie einen Zeitungsartikel packen kann. Doch darauf ist es nicht beschränkt. In HTML5 ähnelt ein Artikel eher einem Element.
So wird das in HTML5 definiert:
Das article-Element ist ein eigenständiger Teil in einem Dokument, einer Seite, Anwendung oder Site und im Prinzip unabhängig wiederverwendbar oder weitergebbar, z.B. in einer Syndizierung. Es ist beispielsweise anwendbar auf ein Forum-Posting, einen Magazin- oder Zeitungsartikel, einen Blog-Eintrag, einen Benutzerkommentar, ein interaktives Widget oder Gadget oder irgendein anderes, inhaltlich unabhängiges Element.
Andere article-Elemente könnten eine Film- oder Konzertrezension, eine Fallstudie, eine Produktbeschreibung usw. sein. Sie sind vielleicht überrascht, dass es auch ein interaktives Widget oder Gadget sein kann, aber auch dabei handelt es sich um unabhängige, wiederverwendbare Inhaltselemente.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<nav role="navigation">
<ul>
<li><a href="#titel-html5">Der Titel im HTML5</a></li>
<li lang="de"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
</ul>
</nav>
</header>
<article>
<h1 id="html5-lernen">
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
</p>
<p>
Zunächst sehen wir uns aber an, wie wir mit den neuen <a href="#elementen">Elementen</a> von HTML5 unsere Seiten besser strukturieren können. In diesem Kapitel erforschen wie die folgenden neuen Elemente und Funktionen: Kopfzeilen, Fußzeilen und Navigationsmöglichkeiten. HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten. HTML5 ist eine <a href="#spezifikation">Spezifikation</a>, die einige neue Tags und neues Markup beschreibt. Wir beginnen mit einem kurzen Überblick über HTML5.
</p>
<h2 id="elementen" lang="de">
Elementen
</h2>
... [Bild und Absätze] ...
<h2 id="spezifikation">
Spezifikation
</h2>
... [Bild und Absätze] ...
</article>
</body>
</html>
Nun enthält die Seite header-, nav- und article-Elemente und auch die entsprechenden Inhalte dafür. Die article-Überschriften können je nach Browser standardmäßig auch unterschiedliche Größen haben. Sie können das Aussehen auch browserübergreifend mit CSS vereinheitlichen.
Einen Artikel erstellen
- Tippen Sie
<article>. - Geben Sie die Inhalte des Artikels ein – eine beliebige Anzahl von Elementen wie Absätze, Listen, Audio, Video, Fotos, Abbildungen usw.
- Tippen Sie
</article>.
Die HTML5-Elemente, article neben header, section und aside sind eines der vier Elemente, das die Webseite in Bereiche aufteilen kann.
Sie können einen article in einem anderen verschachteln, solange das innere article mit dem article insgesamt zusammenhängt. Sie können allerdings ein article nicht in einem address-Element verschachteln.
Eine Seite kann mehrere
article-Elemente (oder gar keins) enthalten. Die Homepage eines Blogs enthält beispielsweise üblicherweise ein paar der aktuellen Postings, und davon kann jedes ein eigener article sein.
Es ist nicht zwingend notwendig, dass ein article ein oder mehrere section-Elemente enthält. Valide wäre auch, wenn die h1-h6-Elemente innerhalb eines article für sich stehen, obwohl Sie durch die Definition von sections die Semantik des article expliziter machen. Und jede section kann ihre eigene Hierarchie von Überschriften-Ebenen haben.
Mehr article-Beispiele
Das vorige Beispiel ist nur eine Einsatzmöglichkeit für article. Schauen wir uns einige andere an.
Beispiel 1 (einfacher Artikel):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
</p>
... [restlicher Inhalt]
<footer>
<!-- Der Footer des Artikels, nicht der der Seite -->
<p>
In diesem Kapitel erforschen wie die folgenden neuen Elemente und Funktionen: Kopfzeilen, Fußzeilen und Navigationsmöglichkeiten. HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten.
</p>
<address> Sie erreichen sie unter <a href="mailto:max-mustermann@mustermann.com"> max@mustermann</a>. </address>
</footer>
</article>
</body>
</html>
Beachten Sie, wie hier die Elemente footer und address eingesetzt werden. Hier wird address nur auf das übergeordnete article angewendet, nicht auf die Seite oder andere article, die innerhalb dieses article verschachtelt sind, z.B. die Leserkommentare in Beispiel 2.
Beispiel 2 demonstriert verschachtelte article-Elemente in Form von Benutzerkommentaren über das übergeordnete article. Das kennen Sie aus dem Kommentarbereich von Blogs oder News-Sites. Es zeigt auch eine Verwendung des section-Elements.
Beispiel 2 (verschachtelte Artikel):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
</p>
... [restlicher Inhalt]
<footer>
<p>
In diesem Kapitel erforschen wie die folgenden neuen Elemente und Funktionen: Kopfzeilen, Fußzeilen und Navigationsmöglichkeiten. HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten.
</p>
</footer>
<section>
<h2>
Leserkommentare
</h2>
<article>
<footer>
html5-lernen schrieb am <time datetime="2022-11-17" pubdate>17. November 2022</time>:
</footer>
<p>
Toller Artikel! Ich war schon immer neugierig auf HTML5-Lernen.
</p>
</article>
<article>
... [nächster Leserkommentar] ...
</article>
</section>
</article>
</body>
</html>
Dies sind nur ein paar übliche Beispiele, wie man
articleund dessen begleitende Elemente einsetzen kann.