IT-Kurs HTML-Grundlagen 016_Semantische Elemente
Semantische Elemente
HTML5 hat viele semantische Elemente eingeführt, deren Zweck es ist, die Semantik der Dokumentstruktur zu verbessern, wodurch das Dokument lesbarer und wartbarer wird und sowohl für Suchmaschinen als auch für Entwickler freundlicher ist.
Eine Seitenstruktur umfasst normalerweise: Kopfzeile, Fußzeile, Überschriften, Navigation, Inhalt, Seitenleiste usw.
Verwendung des <div>-Elements für das Seitenlayout:
[!Zusammenfassung]
- Nicht förderlich für Entwickler beim Schreiben von Code. Wenn Sie vor einem Bildschirm voller
<div>-Elemente stehen, ist es schwierig, schnell zu unterscheiden, was sie bedeuten.- Nicht förderlich für Suchmaschinenoptimierung (SEO). Der Browser weiß nur, dass Sie ein
<div>-Element verwendet haben, aber das div-Element selbst hat keine Bedeutung, es ist nur ein Container.
Verwendung semantischer Elemente für das Seitenlayout:
Die Verwendung von <header> <nav> <main> <aside> <footer> zur Darstellung verschiedener Bereiche auf der Seite gibt der Seite eine gute Semantik und Struktur, sodass sowohl Entwickler als auch Browser den Inhalt der Webseite schnell verstehen können.
| Element | Funktion |
|---|---|
<header> | Wird verwendet, um den Kopfbereich der Seite zu definieren, normalerweise einschließlich Website-Logo, Hauptnavigation, globaler Links und Suchfeld. |
<nav> | Wird verwendet, um den Bereich der Navigationslinks der Seite zu definieren. |
<main> | Wird verwendet, um den Hauptinhalt oder die Hauptfunktion der Seite zu definieren. Dieser Inhalt sollte auf der Seite einzigartig sein. |
<aside> | Wird verwendet, um den Seitenleisteninhalt der Seite zu definieren. Dieser Inhalt ist mit dem Hauptinhalt verbunden, aber optional. |
<footer> | Wird verwendet, um den Fußzeilenbereich der Seite zu definieren, normalerweise einschließlich Urheberrechtsinformationen, Kontaktinformationen und anderen relevanten Informationen. |
<article> | Wird verwendet, um unabhängige Artikel, Dokumente, Seiten, Anwendungen oder andere Inhaltsbereiche zu definieren. |
<section> | Wird verwendet, um einen generischen unabhängigen Abschnitt auf einer Webseite zu definieren, der normalerweise eine Überschrift oder Absätze, Blöcke enthält. |
<figure> | Wird verwendet, um unabhängige Bilder, Diagramme, Fotos usw. zu definieren. |
<figcaption> | Wird verwendet, um eine Überschrift oder Beschreibung für das <figure>-Element bereitzustellen. |
Beispiel:
<!DOCTYPE html><html lang="en"><head> <title>Meine Webseite</title></head><body> <header> <h1>Meine Webseite</h1> </header>
<nav> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Über mich</a></li> <li><a href="#">Kontaktiere mich</a></li> </ul> </nav>
<main> <article> <h2>Meine Vorstellung</h2> <p>Mein Name ist XXX, dies ist ein Beispiel für semantische Elemente.</p> </article> </main>
<aside> <h2>Verwandte Links</h2> <ul> <li><a href="#">Mein Blog</a></li> <li><a href="#">Meine GitHub-Seite</a></li> </ul> </aside>
<footer> <p>Copyright 2023 XXX</p> </footer></body></html>Effekt:
Dieses Beispiel enthält eine Webseite, die HTML5-semantische Elemente verwendet, um die Bedeutung des Webseiteninhalts zu beschreiben.
- Das
<header>-Element definiert den Kopfbereich der Seite, einschließlich Website-Logo und Hauptnavigation. - Das
<nav>-Element definiert den Bereich der Navigationslinks der Seite. - Das
<main>-Element definiert den Hauptinhalt der Seite, einschließlich meines Vorstellungsartikels. - Das
<aside>-Element definiert den Seitenleisteninhalt der Seite, einschließlich verwandter Links. - Das
<footer>-Element definiert den Fußzeilenbereich der Seite, einschließlich Urheberrechtsinformationen.
[!Zusammenfassung]
- Suchmaschinen können den Inhalt der Webseite besser verstehen und das Ranking der Webseite in den Suchergebnissen verbessern.
- Kann Menschen mit Behinderungen helfen, den Inhalt der Webseite leichter zu verstehen und die Zugänglichkeit der Webseite zu verbessern.
- Kann Entwicklern helfen, die Struktur der Webseite besser zu organisieren und die Wartbarkeit der Webseite zu verbessern.
Link: 观鸟网 (roy-tian.github.io)