Die semantischen Elemente sind eine der bedeutsamen Erneuerungen in HTML5. Bis zu ihrem Erscheinen wurde die ganze Auszeichnung der Webseiten mithilfe des Elements <div>, deren Identifikatoren (id) oder Klassen (class) gegeben wurden. Für die Unterbringung der Seitenpaneele, der oberen und unteren Kolumnentitel, der Elemente der Navigation und der übrigen strukturellen Blöcke wurden die Blöcke div mit den entsprechenden Bedeutungen (zum Beispiel, div="footer") verwendet.
In HTML5 sind neue semantische Elemente für die Strukturierung, Gruppierung und der Markierung des Textinhalts erschienen. Sie beschreiben deutlich, welchen Content sie enthalten (war <div id="footer">, ist <footer>).
Jetzt betrachten wir ausführlich semantische Elemente und ihre Werte.
Das Element <header>
Das Element <header> bildet den Titelblock oder "die Mütze" des Dokumentes, es wird wie ein Container für die Gruppierung der einführenden und Navigationselemente (das Logo, das Navigationsmenü, die Form der Suche usw. ) verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline-block;margin-right:10px;color:#778899}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Über uns</li>
</ul>
</nav>
<h1>Willkommen</h1>
<hr>
</header>
<article>
<header>
<h2>Der Titel der Abteilung</h2>
<p>Der Absatz des Textes.</p>
</header>
</article>
</body>
</html>Ergebnis
Das Element <nav>
Das Element <nav> bildet den Bauptblock von Navigationslinks. Beachten Sie bitte, dass nicht alle Links im HTML-Dokument im Element <nav> eingeschlossen werden können, es kann nur die grossen Navigationsblöcke einschließen.Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Fenstertitel der Webseite</title>
</head>
<body>
<header>
<h1>Kurse für Programmieren</h1>
</header>
<nav>
<a href="/uchebnik-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>Willkommen in W3Docs!</h2>
</body>
</html>Ergebnis
Das Element <article>
Das Element <article> bestimmt ein unabhängiges Block, wo die Einträge (Artikel, Beiträge im Blog, Kommentare usw.) gruppiert werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel der Webseite</title>
</head>
<body>
<article>
<h1>Die Überschrift des Artikels</h1>
<p>Der Inhalt des Artikels</p>
</article>
</body>
</html>Ergebnis
Das Element <section>
Das Element <section> wird für die Gruppierung vom thematischen Inhalt (Überschrifte, Programm, Abteilungen usw.) verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Gebrauch des Tages section</title>
</head>
<body>
<section>
<h1>Hypertext-Auszeichnungssprache HTML</h1>
<p>Die standardisierte Auszeichnungssprache der Dokumente im Netz. Die Sprache HTML wird von den Browsern interpretiert; der infolge der Interpretation bekommene formatierte Text wird am Bildschirm des Computers oder des mobilen Geräts dargestellt.</p>
</section>
<section>
<h1>CSS</h1>
<p>Die formale Sprache wird für die Beschreibung, die Erledigung des Aussehens der Webseiten, die mithilfe der Auszeichnungssprache HTML und XHTML geschrieben sind, verwendet. Es kann auch zu beliebigen XML-Dokumenten, zum Beispiel, zu SVG oder XUL auch verwendet werden.</p>
</body>
</html>Ergebnis
Das Element <aside>
Das Element <aside> bestimmt die Abteilung, wo die Information enthalten ist, und es ergänzt die Hauptabteilung. Diese Information ist fakultativ und, wenn sie entfernt wird, leidet der Hauptinhalt nicht. Solche Informationen können die Kommentare, die Listen der Fachausdrücke, die Links usw. sein.
Beispiel
<!DOCTYPE html>
<html>
<body>
<p>Ich mag Stargate Serien.</p>
<aside>
<h4>Stargate Serien</h4>
<p>Stargate ist eine amerikanische Sci-fi-Serie.</p>
</aside>
</body>
</html>Ergebnis
Das Element <footer>
Das Element <footer> definiert den unteren Kolumnentitel der Webseite oder des Abschnittes. In der Regel wird in diesem Tag die Information über das Copyright, die Kontaktdaten, die Links usw. platziert.
Beispiel
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Der Autor des Artikels: Max Mustermann</p>
<p> <a href="mailto:[email protected]">Dem Autor schreiben</a>.
</footer>
</body>
</html>Ergebnis
Das Element <address>
Das Element <address> bestimmt die Kontaktinformation des Besitzers der Webseite oder des Autors des Artikels verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<address>
Autor: Ani Sargsyan <br/>
Manandyan St. Building 41<br/>
Shengavit, Yerevan<br/>
(+374)10-429255
</address>
</body>
</html>Ergebnis
Das Element <main>
Das Element <main> erstellt den Hauptinhalt des Dokuments (den Inhalt des Elementes <body>). Der Inhalt des Tages muss einzigartig sein und gleichartige Blocks, die in anderen Dokumenten vorkommen, nicht duplizieren. Wie zum Beispiel die Überschrift (header), Fußzeile (footer), Menü, Suchform usw.
Beispiel
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Programmiersprache</h1>
<p>Die Sprachen HTML und CSS sind für Front-End und Back-End Entwicklung vorgesehen.</p>
<article>
<h2>HTML</h2>
<p>HTML (Hyper Text Markup Language) wird für die Erstellung von Webseiten verwendet.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS ist die Sprache für Stile, die das Aussehen von HTML-Dokumenten bestimmt.</p>
<p>... </p>
</article>
</main>
</body>
</html>Ergebnis
Das Element <figure>
Das Element <figure> wird für die Gruppierung des Inhalts, der das Dokument ergänzt oder illustriert, verwendet. Im Tag können Bilder, Charts, Illustrationen, Beispiele von Codes usw. eingeschlossen werden.
Beispiel
<!DOCTYPE html>
<html>
<body>
<p>Ein Baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
</figure>
</body>
</html>Ergebnis
Das Element <figcaption>
Das Element <figcaption> fürs Einfügen des Titels oder der Unterschrift zum Inhalt des Tages <figure> verwendet.
Beispiel
<!DOCTYPE html>
<html>
<body>
<p>Ein hübsches Baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
<figcaption>Fig.1 - Ein hübsches Baby mit blauen Augen.</figcaption>
</figure>
</body>
</html>Ergebnis
Das Element <time>
Das Element <time> die Zeit im 24-stündigen Format und\oder des genauen Datums verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Die Fensterkopfzeile der Webseite</title>
</head>
<body>
<p>Das Spiel wird am <time datetime="2014-09-28 19:00">28. September</time> stattfinden.</p>
<p>Anfang um <time>19:00</time></p>
</body>
</html>Ergebnis
Das Element <mark>
Das Element <mark> hebt die wichtigsten Textteile und Schlüßelwörter hervor. Voreingestellt wird der Text gelb markiert.
Beispiel
<!DOCTYPE html>
<html>
<body>
<p>Studieren Sie die Auszeichnungssprache HTML auf unserer Webseite <mark>W3Docs.com</mark>.</p>
</body>
</html>Ergebnis
Das Element <bdi>
Das Element <bdi> verwendet man für die Isolation eines bidirektionalen Textes.
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1>bdi Element im Gebrauch</h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> Dieser arabische Satz wird automatisch von rechts nach links angezeigt.</p>
</body>
</html>Ergebnis
Das Element <wbr>
Das Element <wbr> weist den Browser darauf hin, dass bei Bedarf einen Zeilenumbruch gemacht werden kann.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Ein Beispiel ohne Gebrauch des Tages wbr.</p>
<p>Bundesausbildungsförderungsgesetz</p>
<p>Ein Beispiel mit dem Gebrauch des Tages wbr.</p>
<p>Ein langes Wort im Deutschen Sprache: Bundes<wbr>ausbildungs<wbr>förderungs<wbr>gesetz</p>
</body>
</html>Ergebnis
Übe dein Wissen
