Lernen Sie die Rolle semantischer Elemente kennen, die die Zugänglichkeit, Lesbarkeit und Struktur von Webseiten verbessern.
Front-End-Entwickler
Semantische HTML-Elemente sind solche, die ihre Bedeutung sowohl für Menschen als auch für Maschinen klar beschreiben. Elemente wie
HTML wurde ursprünglich als Auszeichnungssprache zur Beschreibung von Dokumenten in den Anfängen des Internets entwickelt. Mit dem Wachstum und der Verbreitung des Internets haben sich auch die Anforderungen geändert.
Ursprünglich für den Austausch wissenschaftlicher Dokumente gedacht, wurde das Internet auch für den Austausch anderer Inhalte genutzt. Schon bald bemühten sich die Menschen darum, Websites attraktiver zu gestalten.
Da das Web ursprünglich nicht mit Blick auf das Design entwickelt wurde, wendeten die Entwickler verschiedene Tricks an, um Elemente auf den Seiten auf unterschiedliche Weise zu platzieren. Statt der Verwendung von <table> um Informationen in einer Tabelle zu beschreiben, verwendeten die Entwickler sie, um andere Elemente auf der Seite zu positionieren.
Als sich das visuelle Seitendesign weiterentwickelte, begannen die Entwickler, generische, nicht-semantische" Tags wie <div>. Sie wiesen diesen Elementen häufig Attribute wie class oder id zu, um ihren Zweck zu beschreiben. Zum Beispiel, anstatt von <header> hat oft geschrieben <div class="”header”">.
Obwohl HTML5 relativ neu ist, ist die Verwendung von nicht-semantischen Elementen auf Websites immer noch sehr verbreitet.
Zu den in HTML5 hinzugefügten semantischen Elementen gehören: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> Elemente wie <header>, <nav>, <section>, <article>, <aside> i <footer> funktionieren mehr oder weniger wie Elemente von <div>. Sie gruppieren andere Elemente in Abschnitten der Seite. Anders als die <div>die jede Art von Information enthalten kann, ist es einfach zu bestimmen, welche Art von Information in die semantische Region aufgenommen werden sollte. <header>.
Um die Vorteile der Verwendung semantischer Elemente zu verdeutlichen, sehen Sie hier zwei HTML-Codeblöcke. Der erste Codeblock verwendet semantische Elemente:
Unsemantischer Code:
<div id="Kopfzeile"></div>
<div Klasse="Abschnitt">
<div Klasse="Artikel">
<div Klasse="Figur">
<img>
<div Klasse="figcaption"></div>
</div>
</div>
</div>
<div id="Fußzeile"></div>Code unter Verwendung von Semantik:
<Kopfzeile></Kopfzeile>
<Abschnitt>
<Artikel>
<Abbildung>
<img>
<Bildunterschrift></Bildunterschrift>
</Abbildung>
</Artikel>
</Abschnitt>
<Fußzeile></Fußzeile>Die erste Variante ist viel einfacher zu lesen. Das ist wahrscheinlich das erste, was Ihnen auffällt, wenn Sie sich den ersten Codeblock ansehen, der semantische Elemente verwendet. Dies ist ein kleines Beispiel, aber als Programmierer lesen Sie vielleicht Hunderte oder Tausende von Codezeilen. Je einfacher es ist, diesen Code zu lesen und zu verstehen, desto einfacher wird Ihre Arbeit.
Verbessert die Zugänglichkeit. Nicht nur für Sie sind semantische Elemente leichter zu verstehen. Auch Suchmaschinen und unterstützende Technologien (z. B. Bildschirmlesegeräte für sehbehinderte Nutzer) verstehen den Kontext und den Inhalt Ihrer Website besser, was für Ihre Nutzer ein besseres Erlebnis bedeutet.
Im Allgemeinen führen semantische Elemente auch zu konsistenterem Code. Wenn ein Header mit nicht-semantischen Elementen erstellt wird, können verschiedene Programmierer ihn wie folgt schreiben <div class="header">, <div id="header">, <div class="head"> oder einfach <div>. Es gibt viele Möglichkeiten, ein Header-Element zu erstellen, und alles hängt von den persönlichen Vorlieben des Entwicklers ab. Durch die Schaffung eines semantischen Standardelements wird die Arbeit für alle einfacher.
Seit Oktober 2014 wurde HTML4 auf HTML5 aktualisiert, zusammen mit mehreren neuen "semantischen" Elementen. Bis heute sind einige von uns vielleicht immer noch verwirrt, warum es so viele verschiedene Elemente gibt, die keine wesentlichen Änderungen zu bringen scheinen.
"Was ist der Unterschied?", werden Sie sich fragen. Beide werden verwendet, um Inhalte zu zerlegen, und ja, sie können durchaus austauschbar verwendet werden. Die Frage ist nur, in welcher Situation. HTML4 bietet nur einen Typ von Containerelementen, nämlich das <div>. Obwohl es in HTML5 immer noch verwendet wird, hat HTML5 uns eine i . als eine Art Ersatz für <div>.
Die Elemente
Der Artikel ist für die unabhängige Verbreitung oder Wiederverwendung bestimmt. Ein Abschnitt ist eine thematische Gruppierung von Inhalten.
Beispiel:
<Abschnitt>
<p>Die wichtigsten Botschaften</p>
<Abschnitt>
<p>Nachrichten</p>
<Artikel>Geschichte 1</Artikel>
<Artikel>Geschichte 2</Artikel>
<Artikel>Geschichte 3</Artikel>
</Abschnitt>
<Abschnitt>
<p>Sport</p>
<Artikel>Geschichte 1</Artikel>
<Artikel>Geschichte 2</Artikel>
<Artikel>Geschichte 3</Artikel>
</Abschnitt>
</Abschnitt>Das
Beispiel:
<Kopfzeile>
<h1>Unternehmen A</h1>
<ul>
<li><a href="/home">Homepage</a></li>
<li><a href="/über">Über uns</a></li>
<li><a href="/Kontakt">Kontakt</a></li>
</ul>
<Formulare Ziel="/Suche">
<Eingabe Name="q" Typ="Suche" />
<Eingabe Typ="einreichen" />
</Formulare>
</Kopfzeile>
<!-- Hinweis: Das -Element sollte verwendet werden, wenn Sie eine Hauptüberschrift mit einer oder mehreren Unterüberschriften wünschen. -->
<hGruppe>
<h1>Rubrik 1</h1>
<h2>Untertitel 1</h2>
<h2>Untertitel 2</h2>
</hGruppe>ERINNERN Sie daran, dass das Element <header> kann einen beliebigen Inhalt haben, aber das Element <hgroup> darf nur andere Kopfzeilen enthalten, d. h. <h1> An <h6> einschließlich <hgroup>.
Das
<beiseite>
<p>Es handelt sich um eine Randbemerkung, z. B. eine Definition eines Begriffs oder einen kurzen Hintergrund zu einer historischen Figur.</p>
</beiseite>Vor HTML5 wurden unsere Menüs mit
Front-End-Entwickler
© 2022 - 2024 Unsere Kreativität, Ihre Möglichkeiten. Alle Rechte vorbehalten.
Deutsch 
Polski 
English