Semantische Elemente in HTML5
Semantische Elemente gehören zu den wichtigsten Neuerungen in HTML5. In früheren Versionen von HTML wurde das generische Tag <div> mit einem id- oder class-Attribut verwendet, um eine Webseite zu strukturieren. Zum Beispiel wurde für Seitenleisten, Fußzeilen, Menüs oder andere strukturelle Blöcke das <div>-Tag mit der entsprechenden Bedeutung verwendet (div class="footer").
Semantische Elemente in HTML haben eine inhärente Bedeutung und vermitteln diese sowohl dem Browser als auch dem Entwickler. Sie definieren klar, welche Art von Inhalt sie enthalten (zum Beispiel wird das Tag <footer> anstelle von <div id="footer"> verwendet). Außerdem tragen sie dazu bei, die Barrierefreiheit zu verbessern, und machen das Markup für Suchmaschinen leichter verständlich.
Werfen wir einen Blick auf semantische Elemente und ihre Bedeutung.
Das Element <header>
Das Element <header> definiert einen Kopfbereich für das Dokument oder einen Abschnitt. Es enthält normalerweise ein Logo, eine Suchleiste, Navigationslinks usw.
Beispiel für das HTML-Element <header>:
Beispiel für den HTML-Kopfbereich der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr />
</header>
<article>
<header>
<h2>Title of the document</h2>
<p>The content of the paragraph.</p>
</header>
</article>
</body>
</html>Das Element <nav>
Das Element <nav> definiert einen Block mit Navigationslinks, entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten. Beachten Sie, dass nicht alle Links im HTML-Dokument innerhalb des <nav>-Elements platziert werden können; es darf nur wichtige Navigationsblöcke enthalten. Zum Beispiel kann das <nav>-Tag auch im <footer>-Tag platziert werden, um Links in der Fußzeile der Website zu definieren.
Beispiel für das HTML-Element <nav>:
Beispiel für das nav-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>Das Element <article>
Das Element <article> wird verwendet, um eigenständigen, in sich geschlossenen Inhalt anzugeben (Artikel, Blogbeiträge, Kommentare usw.). Der Inhalt des Elements hat eine eigene Bedeutung und lässt sich leicht vom restlichen Inhalt der Webseite unterscheiden.
Beispiel für das HTML-Element <article>:
Beispiel für das article-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>Das Element <section>
Das Element <section> wird verwendet, um eigenständige Abschnitte innerhalb einer Webseite zu gruppieren, die logisch zusammenhängenden Inhalt enthalten (Nachrichtenblock, Kontaktinformationen usw.).
Beispiel für das HTML-Element <section>:
Beispiel für das section-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h1>Hypertext markup language HTML</h1>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h1>CSS</h1>
<p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html>Das Element <aside>
Das Element <aside> definiert einen Abschnitt mit zusätzlichen Informationen, die sich auf den Inhalt rund um das <aside>-Element beziehen. Es wird im Allgemeinen verwendet, um einen Artikel mit zusätzlichen Informationen zu ergänzen oder die Teile hervorzuheben, die für den Benutzer interessant sein können.
Beispiel für das HTML-Element <aside>:
Beispiel für das aside-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Das Element <footer>
Das Element <footer> definiert die Fußzeile einer Webseite oder eines Abschnitts. In der Regel enthält es Copyright-Informationen, Kontaktdaten, Navigationslinks usw.
Beispiel für das HTML-Element <footer>:
Beispiel für das footer-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
.main-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Das Element <address>
Das Element <address> wird verwendet, um Kontaktinformationen des Autors oder des Eigentümers eines Artikels, Dokuments oder der Website bereitzustellen.
Beispiel für das HTML-Element <address>:
Beispiel für das address-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs Team<br />
<a href="mailto:[email protected]">Send Mail to the Author</a>
</address>
</body>
</html>Demo: Send Mail to the Author
Das Element <main>
Das Element <main> definiert den Hauptinhalt der Seite. Der Inhalt des <main>-Tags muss eindeutig sein und darf keine Blöcke desselben Typs duplizieren, die in anderen Dokumenten wiederholt werden, wie etwa der Kopfbereich einer Website, die Fußzeile, das Menü, die Suche, Copyright-Informationen usw.
Beispiel für das HTML-Element <main>:
Beispiel für das main-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.</p>
<article>
<h2>HTML</h2>
<p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS is a language of styles, defining the display of HTML documents. </p>
<p>... </p>
</article>
</main>
</body>
</html>Das Element <figure>
Das Element <figure> wird verwendet, um in sich geschlossenen Inhalt zu kennzeichnen. Das Tag kann Bilder, Diagramme, Illustrationen, Codebeispiele usw. enthalten.
Beispiel für das HTML-Element <figure>:
Beispiel für das figure-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>Das Element <figcaption>
Das Element <figcaption> wird verwendet, um dem <figure>-Tag eine Beschriftung oder Anmerkung hinzuzufügen.
Beispiel für das HTML-Element <figcaption>:
Beispiel für das figcaption-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Das Element <time>
Das Element <time> definiert eine für Menschen lesbare Uhrzeit im 24-Stunden-Format oder ein genaues Datum im gregorianischen Kalender.
Beispiel für das HTML-Element <time>:
Beispiel für das time-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>Das Element <mark>
Das Element <mark> wird verwendet, um einen relevanten Teil des Textes zu markieren. Es kann verwendet werden, um Text hervorzuheben und so eine Betonung zu zeigen, Suchbegriffe in Suchergebnissen hervorzuheben, um Kontext bereitzustellen, oder neu hinzugefügten Inhalt des Benutzers durch eine andere Darstellung zu unterscheiden.
Beispiel für das HTML-Element <mark>:
Beispiel für das mark-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Das Element <bdi>
Das Element <bdi> wird verwendet, um bidirektionalen Text zu isolieren, wenn eine Sprache mit Schreibrichtung von rechts nach links, wie Arabisch oder Hebräisch, inline mit Sprachen von links nach rechts verwendet wird.
Beispiel für das HTML-Element <bdi>:
Beispiel für das bdi-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>Das Element <wbr>
Das Tag <wbr> wird verwendet, um dem Browser mitzuteilen, wo im Text ein Zeilenumbruch eingefügt werden könnte. Anders als das <br>-Tag, das den Browser zum Einfügen eines Zeilenumbruchs zwingt, analysiert der Browser bei <wbr> zunächst den Inhalt und fügt dann bei Bedarf einen Zeilenumbruch ein (bei einem zu langen Wort oder einer URL-Adresse).
Beispiel für das HTML-Element <wbr>:
Beispiel für das wbr-Element der Seite|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>Practice
What is the main purpose of using semantic elements in HTML5?