Warum sollten Sie auf Ihrer Website auf Semantik achten?

Lernen Sie die Rolle semantischer Elemente kennen, die die Zugänglichkeit, Lesbarkeit und Struktur von Webseiten verbessern.

Jan Szarwaryn

Front-End-Entwickler

Homepage » Warum sollten Sie auf Ihrer Website auf Semantik achten?
Das Inhaltsverzeichnis:

Inhaltsverzeichnis

Eintrag teilen:

Einführung

Semantische HTML-Elemente sind solche, die ihre Bedeutung sowohl für Menschen als auch für Maschinen klar beschreiben. Elemente wie

,
und
gelten als semantisch, weil sie den Zweck des Elements und die Art des Inhalts genau beschreiben.

Was sind semantische Elemente?

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.

Liste der neuen semantischen Elemente

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>.

Warum semantische Elemente verwenden?

Um die Vorteile der Verwendung semantischer Elemente zu verdeutlichen, sehen Sie hier zwei HTML-Codeblöcke. Der erste Codeblock verwendet semantische Elemente:

<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>
<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.

und .

"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

und
sind konzeptionell ähnlich und austauschbar. Um zu entscheiden, welches Element Sie wählen sollten, beachten Sie bitte die folgenden Punkte:

Der Artikel ist für die unabhängige Verbreitung oder Wiederverwendung bestimmt. Ein Abschnitt ist eine thematische Gruppierung von Inhalten.

<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>

und .

Das

-Element befindet sich in der Regel am Anfang eines Dokuments, Abschnitts oder Artikels und enthält in der Regel die Hauptüberschrift sowie Navigations- und Suchwerkzeuge.

<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>

.

Das

Wenn es eine gibt, muss es auch eine geben. Das

-Element befindet sich normalerweise am Ende eines Dokuments, Abschnitts oder Artikels. Wie das
-Element enthält der Inhalt in der Regel Metainformationen wie Angaben zum Autor, rechtliche Informationen und/oder Links zu verwandten Informationen. Es ist auch wichtig,
-Elemente in die Fußzeile aufzunehmen.

<span
<Fußzeile>© Unternehmen A</Fußzeile>

.

Das -Element erscheint oft im

- oder
<Fußzeile><klein>© Unternehmen A</klein> Datum</Fußzeile> 

.

Das -Element ermöglicht es, ein mehrdeutiges ISO 8601-Datum an eine menschenlesbare Version dieses Datums anzuhängen.

<span role="button" tabindex="0" data-code="<time datetime="2017-10-31t11:21:00+02:00">Dienstag, 31. Oktober 2017
<Zeit datetime="2017-10-31T11:21:00+02:00">Dienstag, 31. Oktober 2017</Zeit> 

Warum verwenden? Während Menschen die Zeit, die sich aus dem Kontext ergibt, auf normale Weise lesen können, können Computer das ISO-8601-Datum lesen und das Datum, die Uhrzeit und die Zeitzone erkennen.

und .

wird verwendet, um den Inhalt des Bildes zu umschließen, und
wird verwendet, um das Bild zu beschriften.

<Abbildung> 
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Schatten von Mordor" /> 
  <Bildunterschrift>Titelbild zu Mittelerde: Schatten von Mordor</Bildunterschrift> 
</Abbildung>

Auch wenn ich in diesem Text nicht auf alle verfügbaren semantischen Auszeichnungselemente eingehe, möchte ich Sie ermutigen, das Thema weiter zu erforschen. Für Interessierte, die mehr erfahren möchten, habe ich am Ende des Textes Links angegeben, die zu detaillierten Ressourcen und Anleitungen zu semantischen HTML5-Elementen führen. Dies ist eine faszinierende Ressource für jeden, der seine Kenntnisse im modernen Webdesign vertiefen möchte.

Erfahren Sie mehr über die neuen HTML5-Elemente:

  • w3-Schulen bietet einfache und klare Beschreibungen vieler der neuen Elemente und Informationen darüber, wie und wo sie verwendet werden sollten.
  • MDN bietet auch eine großartige Informationsquelle über alle HTML-Elemente und geht auf jedes von ihnen ein.

Front-End-Entwickler

Jan Szarwaryn

Wir entwickeln innovative Web-Lösungen, die Ihre Online-Präsenz in echte Geschäftserfolge verwandeln.
Daten zum Unternehmen
LunaDesign Sara Kowal
NIP: 8971901218
REGON: 521121045
ADRESSE:
Straße Henri Barbusse 3/3
58-305 Walbrzych

© 2022 - 2024 Unsere Kreativität, Ihre Möglichkeiten. Alle Rechte vorbehalten.