html5 semantic tags

Abschnitt 1. Strukturieren von Inhalten mit HTML5 -Semantik -Tags

1.1. Struktur

• Mit HTML können wir das Dokument gemäß der Bedeutung des Inhalts strukturieren
• Div, Tabellen -Tags werden verwendet, um Struktur, Layout zu erstellen, aber es ist nicht semantisch
• HTML Semantic Tags - Struktur der Webseite, um Bedeutung zu zeigen, nicht nur Layout
• HTML Semantische Struktur-/Schnittelemente helfen dabei, Seiten lesbarer, zugänglicher und bessere suchmaschinenergebnisorientierte, einfach zu ändern
• Ein semantisches Element beschreibt seine Bedeutung sowohl für den Browser als auch für den Entwickler deutlich

Hinweis : In allen modernen Browsern werden die semantischen HTML5 -Elemente unterstützt.

HTML -Überschriften -Schnittelemente

H1 bis H6

HTML5 Semantische Struktur-/Schnittelemente

Etikett	Verwenden
<main>	Gibt den Hauptinhalt eines Dokuments an
<header>	Gibt einen Header für ein Dokument oder Abschnitt an
<nav>	Definiert Navigationsverbindungen
<section>	Definiert einen Abschnitt in einem Dokument
<article>	Definiert einen Artikel.
<aside>	Definiert Inhalte neben dem Seiteninhalt
<footer>	Definiert eine Fußzeile für ein Dokument oder Abschnitt

Warum eingeführte HTML5 -Semantik-/Schnittelemente?

• Früher mit HTML verwendeten/erstellten Entwickler ihre eigenen ID-/Klassennamen für Stilelemente wie Header, Fußzeile, Top NAV, unterer NAV, Hauptmenü, Navigation - Navigation, Hauptvermittler links rechts oberen oberen unteren Container, Inhalt, linker Artikel, rechte Seitenleiste usw.
• Dies machte es für Suchmaschinen schwierig und unmöglich, den korrekten Webseite Inhalt zu identifizieren. Außerdem ein Entwickler für den Browser und das Bearbeiten von Inhalten
• Mit den neuen semantischen/aussagekräftigen HTML5 -Elementen wie ( <header> <footer> <nav> <section> <article> <aside> ) wird dies einfacher
• HTML5 Semantische/aussagekräftige Elemente machen Seiten für Maschinen sowie Benutzer mit Zugänglichkeit, Suchmaschinenergebnissen, konsistenter und einfacher zu bedienen und stilvoller lesbarer

• Laut W3C: "Ermöglicht ein semantisches Web:" Ermöglicht die Freigabe und Wiederverwendung von Daten über Anwendungen, Unternehmen und Gemeinschaften. "

Implementierung der strukturellen Hierarchie

Es liegt wirklich an Ihnen, was genau die Elemente darstellen, solange die Hierarchie Sinn macht. Sie müssen nur einige Best Practices berücksichtigen, wenn Sie solche Strukturen erstellen:

• Vorzugsweise sollten Sie einfach use a single <h1> per page - dies ist die oberste Ebene der Ebene, und alle anderen sitzen in der Hierarchie darunter
• Stellen Sie sicher, dass Sie die Überschriften in der richtigen Reihenfolge in der Hierarchie verwenden. Verwenden Sie nicht <h3>s , um Unterschriften darzustellen, gefolgt von <h2>s um Sub-Subheadings darzustellen-das macht keinen Sinn und wird zu seltsamen Ergebnissen führen

Warum brauchen wir Struktur?

• Benutzer, die eine Webseite betrachten, neigen dazu, schnell relevante Inhalte zu finden. Wenn sie innerhalb weniger Sekunden nichts Nützliches sehen können, werden sie wahrscheinlich frustriert und gehen woanders hin.
• Suchmaschinen Indizieren Ihre Seite Betrachten Sie den Inhalt von Überschriften als wichtige Schlüsselwörter für die Beeinflussung der Suchrankings der Seite. Ohne Überschriften wird Ihre Seite in Bezug auf SEO (Search Engine Optimization)
• Sehbehinderte Menschen lesen oft keine Webseiten. Sie hören sie stattdessen zu. Wenn keine Überschriften verfügbar sind, werden sie gezwungen, das gesamte Dokument laut zu hören

1.2. Umrisse

• HTML verwendet semantische Elemente, Überschriften, semantische Tags, um den Dokumentriss des Seiteninhalts zu generieren/zu beschreiben (Dokumentenüberschreitungen = Themen, Inhaltsverzeichnis, Index)
• Die Dokumentriss wird von Geräten/Browsern zum Scannen und Durchsuchen von Inhalten verwendet, navigieren Sie zu einem bestimmten/bestimmten Abschnitt, um zu bestimmen, wie sich die Inhalte miteinander beziehen
• Der HTML5 -Outliner wird verwendet, um die genaue Umrissd IE -Seitenstruktur der HTML -Seite/des Dokuments zu verstehen und zu kennen
• Verwenden Sie das Dienstprogramm von Outliner: https://gsnedders.html1.org/outliner/
• Texteditor wie Brackets verwendet ein Document Outliner Plugin/extension um die ordnungsgemäße Dokument -Gliederung/Inhaltstabelle/Themen/Indexierung der Seite anzuzeigen
• Klammern -> Menü anzeigen -> Dokumentenrinde anzeigen

1.3. Navigation

• Repräsentiert einen Abschnitt des Dokuments, das für die Navigation bestimmt ist
• Das Element definiert eine Reihe von Navigationslinks
• Das HTML -Element repräsentiert einen Abschnitt einer Seite, deren Ziel es ist, Navigationslinks zu liefern, entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten
• Häufige Beispiele für Navigationsabschnitte sind Menüs, Inhaltsverzeichnisse und Indizes

HINWEIS : Es ist keine Regel, dass alle Links eines Dokuments in einem enthalten sein sollten

Element Das Element ist nur für einen großen Block von Navigationsverbindungen bestimmt

1.4. Abschnitt

• Stellt einen generischen Dokument oder Anwendungsabschnitt dar
• Der
  Element definiert einen Abschnitt in einem Dokument
• Die HTML
  Element repräsentiert einen eigenständigen Abschnitt

• Laut HTML5 -Dokumentation von W3C: "Ein Abschnitt ist eine thematische Gruppierung von Inhalten, typischerweise mit einer Überschrift"

• Eine Webseite kann normalerweise in Abschnitte zur Einführung, Inhalte, im mittleren Abschnitt mit linken und rechten Abschnitten usw. aufgeteilt werden.

1.5. Artikel

• Repräsentiert einen unabhängigen Inhalt eines Dokuments, z. B. einen Blogeintrag oder einen Zeitungsartikel
• Das Element gibt unabhängigen, in sich geschlossenen Inhalt an
• Das HTML-Element repräsentiert eine in sich geschlossene Komposition in einem Dokument
• Das HTML -Tag wird in einem Blog/Forum -Beitrag, Zeitungsartikel, Blogeintrag usw. verwendet.

1.6. Beiseite

• Stellt einen Inhalt dar, der nur geringfügig mit dem Rest der Seite zusammenhängt
• Das Element definiert einen Inhalt neben dem Inhalt, in dem es platziert ist (wie eine Seitenleiste)
• Abschlüsse werden häufig als Seitenleisten oder Call-out-Boxen dargestellt

1.7. Kopfball

• Repräsentiert eine Gruppe Einführungs- oder Navigationshilfen
• Das Element gibt einen Header für ein Dokument oder Abschnitt an
• Das Element sollte als Container für Einführungsinhalte verwendet werden
• Das HTML -Element repräsentiert einführende Inhalte, typischerweise eine Gruppe Einführungs- oder Navigationshilfen
• Es kann einige Überschriftenelemente, aber auch ein Logo, ein Suchformular, einen Autornamen und andere Elemente enthalten
• Möglicherweise haben Sie mehrere Elemente in einem Dokument

1.8. Fußzeile

• Repräsentiert eine Fußzeile für einen Abschnitt
• Das Element gibt eine Fußzeile für ein Dokument oder Abschnitt an
• Das HTML -Element repräsentiert eine Fußzeile für den nächsten Schnittinhalt oder das Stammelement für Schnitte
• Eine Fußzeile enthält normalerweise Informationen über den Autor des Abschnitts, Urheberrechtsdaten oder Links zu verwandten Dokumenten
• Möglicherweise haben Sie mehrere Elemente in einem Dokument

1.9. Div

• Das Div -Tag ist als Division, Divider tag bekannt
• Das HTML -Inhaltsabteilungselement (
  ) ist der generische Behälter für den Flussgehalt
• Vor der HTML5 -Semantik -Tags wird das DIV -Tag in HTML verwendet, um Inhaltsabteilungen auf der Webseite zu erstellen (Text, Bilder, Header, Fußzeile, Navigationsleiste usw.)
• Der
  Tag ist ein leeres Container -Tag, das eine Teilung oder einen Abschnitt definiert, indem untergeordnete Elemente angegeben werden
• Mit HTML5 -Semantik -Tags, Div Ein leistungsstarkes Tag, das auch zum Strukturieren, Dividieren, Layout, Abschnitte/Inhalt mit CSS oder mit Skripten manipuliert wird
• Der
  Tag ist ein Element auf Blockebene, daher wird vor und danach ein Linienbruch platziert
• Das DIV ist das nutzlichste Tag in der Webentwicklung, da es uns hilft, Daten auf der Webseite zu trennen und einen bestimmten Abschnitt zu erstellen
• Es wird an die Gruppe verschiedener Tags von HTML gewöhnt, damit Abschnitte erstellt werden können und der Stil auf sie angewendet werden kann

1.10. Wai-Aria

• Initiative für Web Accessibility-zugängliche reiche Internetanwendung
• Es handelt sich um eine Reihe von Attributen, um die Semantik einer Website oder Webanwendung zu verbessern, um Unterstützung bei der Unterstützung von Technologien wie Bildschirmlesern für Blinde zu unterstützen, um bestimmte Dinge zu verstehen, die bei HTML nicht nativ sind
• ARIA (WAI-ARIA) ist eine Reihe von Attributen, die Sie zu HTML-Elementen hinzufügen können. Diese Attribute vermitteln Hilfstechnologien über die in Browsers implementierten APIs mit Zugänglichkeit, die in den Browsern implementiert sind
• ARIA (WAI-ARIA) bietet dem Benutzer eine gute Möglichkeit, Ihre Website zu navigieren und zu interagieren. Machen Sie Ihren HTML -Code so semantisch wie möglich, damit der Code für Besucher und Bildschirmleser leicht zu verstehen ist
• Wai-Aria ist eine unglaublich leistungsstarke Technologie, mit der Entwickler den Zweck, den Zustand und die anderen Funktionalität visuell reichhaltiger Benutzeroberflächen problemlos beschreiben können
• Wahrzeichenrollen (Bildschirmleser und andere Geräte scannen und springen zu der erforderlichen Rolle)

    - <header role="banner">
    - <nav role="navigation">
    - <main role="main">
    - <article role="article">
    - <footer role="footer">
    - <aside role="complementary">
    - <footer role="contentinfo">

1.11. Websites / Blogs

• https://www.w3schools.com/html/html_accessibility.asp
• https://www.w3.org/wai/standards-guidelines/aria/
• https://www.w3.org/tr/wai-aria/
• https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/