HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

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>
Semantische HTML-Elemente


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 .