Semantische HTML -Elemente
Semantische Elemente = Elemente mit Bedeutung.
Was sind semantische Elemente?
Ein semantisches Element beschreibt seine Bedeutung sowohl für den Browser als auch für den Entwickler eindeutig.
Beispiele für nicht-semantische Elemente: <div>und <span>- sagt nichts über seinen Inhalt aus.
Beispiele für semantische Elemente: <form>, <table>, und <article>- Definiert eindeutig seinen Inhalt.
Semantische Elemente in HTML
Viele Websites enthalten HTML-Code wie: <div id="nav"> <div class="header"> <div id="footer"> zur Anzeige von Navigation, Kopf- und Fußzeile.
In HTML gibt es einige semantische Elemente, die verwendet werden können, um verschiedene Teile einer Webseite zu definieren:
- <Artikel>
- <beiseite>
- <Details>
- <figcaption>
- <Abbildung>
- <Fußzeile>
- <Kopfzeile>
- <Haupt>
- <Markierung>
- <Navigation>
- <Abschnitt>
- <Zusammenfassung>
- <Zeit>
HTML <section>-Element
Das <section>Element definiert einen Abschnitt in einem Dokument.
Gemäß der HTML-Dokumentation des W3C: "Ein Abschnitt ist eine thematische Gruppierung von Inhalten, typischerweise mit einer Überschrift."
Beispiele, wo ein <section>Element verwendet werden kann:
- Kapitel
- Einführung
- Nachrichten
- Kontaktinformation
Eine Webseite könnte normalerweise in Abschnitte für Einführung, Inhalt und Kontaktinformationen unterteilt werden.
Beispiel
Zwei Abschnitte in einem Dokument:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
HTML <article>-Element
Das <article>Element gibt unabhängige, in sich geschlossene Inhalte an.
Ein Artikel sollte für sich genommen sinnvoll sein, und es sollte möglich sein, ihn unabhängig vom Rest der Website zu verteilen.
Beispiele, wo das <article>Element verwendet werden kann:
- Forenbeiträge
- Blogeinträge
- Benutzerkommentare
- Produktkarten
- Zeitungsartikel
Beispiel
Drei Artikel mit eigenständigem, in sich abgeschlossenem Inhalt:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Beispiel 2
Verwenden Sie CSS, um das Element <article> zu formatieren:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
<article> in <section> verschachteln oder umgekehrt?
Das <article>
Element gibt unabhängige, in sich geschlossene Inhalte an.
Das <section>Element definiert den Abschnitt in einem Dokument.
Können wir die Definitionen verwenden, um zu entscheiden, wie diese Elemente verschachtelt werden? Nein Wir können nicht!
Sie finden also HTML-Seiten mit <section>Elementen, die <article>Elemente enthalten, und <article>Elementen, die <section>Elemente enthalten.
HTML-<header>-Element
Das <header>Element stellt einen Container für einführende Inhalte oder eine Reihe von Navigationslinks dar.
Ein <header>Element enthält typischerweise:
- ein oder mehrere Überschriftenelemente (<h1> - <h6>)
- Logo oder Symbol
- Informationen zur Urheberschaft
Hinweis: Sie können mehrere <header>Elemente in einem HTML-Dokument haben. Kann jedoch <header>nicht innerhalb eines oder eines anderen Elements platziert <footer>werden .<address><header>
Beispiel
Ein Header für einen <article>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML-<Fußzeile>-Element
Das <footer>Element definiert eine Fußzeile für ein Dokument oder einen Abschnitt.
Ein <footer>Element enthält typischerweise:
- Informationen zur Urheberschaft
- Urheberrechtsinformation
- Kontaktinformation
- Seitenverzeichnis
- Zurück nach oben Links
- zugehörige Unterlagen
Sie können mehrere <footer>Elemente in einem Dokument haben.
Beispiel
Ein Fußzeilenabschnitt in einem Dokument:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML <nav>-Element
Das <nav>Element definiert eine Reihe von Navigationslinks.
Beachten Sie, dass sich NICHT alle Links eines Dokuments innerhalb eines <nav>Elements befinden sollten. Das
<nav>Element ist nur für größere Blöcke von Navigationslinks vorgesehen.
Browser, wie z. B. Screenreader für behinderte Benutzer, können dieses Element verwenden, um zu bestimmen, ob die anfängliche Wiedergabe dieses Inhalts weggelassen werden soll.
Beispiel
Eine Reihe von Navigationslinks:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <aside>-Element
Das <aside>Element definiert einige Inhalte neben dem Inhalt, in dem es platziert ist (wie eine Seitenleiste).
Der <aside>Inhalt sollte einen indirekten Bezug zum umgebenden Inhalt haben.
Beispiel
Zeigen Sie einige Inhalte neben den Inhalten an, in denen sie platziert sind:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Beispiel 2
Verwenden Sie CSS, um das Element <aside> zu formatieren:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
HTML-Elemente <figure> und <figcaption>
Das <figure>Tag gibt in sich abgeschlossene Inhalte wie Abbildungen, Diagramme, Fotos, Codeauflistungen usw. an.
Das <figcaption>Tag definiert eine Beschriftung für ein <figure>Element. Das <figcaption>Element kann als erstes oder letztes untergeordnetes Element eines <figure>Elements platziert werden.
Das <img>Element definiert das eigentliche Bild/Illustration.
Beispiel
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Warum semantische Elemente?
Laut W3C: "Ein semantisches Web ermöglicht die gemeinsame Nutzung und Wiederverwendung von Daten über Anwendungen, Unternehmen und Gemeinschaften hinweg."
Semantische Elemente in HTML
Nachfolgend finden Sie eine Liste einiger semantischer Elemente in HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .