Semantik

Semantik in JavaScript

In JavaScript, betrachten Sie eine Funktion, die einen String-Parameter annimmt und ein <li>-Element mit diesem String als textContent zurückgibt. Müssten Sie den Code ansehen, um zu verstehen, was die Funktion macht, wenn sie build('Peach') oder createLiWithContent('Peach') genannt wird?

Semantik in CSS

In CSS, betrachten Sie das Styling einer Liste mit li-Elementen, die verschiedene Fruchttypen darstellen. Würden Sie wissen, welcher Teil des DOM mit div > ul > li oder .fruits__item ausgewählt wird?

Semantik in HTML

In HTML ist zum Beispiel das h1-Element ein semantisches Element, das dem Text, den es umschließt, die Rolle (oder Bedeutung) einer "Top-Level-Überschrift auf Ihrer Seite" verleiht.

<h1>This is a top level heading</h1>

Standardmäßig wird ein h1 in den meisten Browsern durch das User-Agent-Stylesheet mit einer großen Schriftgröße gestaltet, um es wie eine Überschrift aussehen zu lassen (obwohl Sie es so gestalten könnten, dass es wie etwas aussieht, das Sie möchten).

Andererseits könnten Sie jedes Element so gestalten, dass es wie eine Top-Level-Überschrift aussieht. Betrachten Sie folgendes:

<span style="font-size: 32px; margin: 21px 0;">Not a top-level heading!</span>

Dies wird es so darstellen, dass es wie eine Top-Level-Überschrift aussieht, aber es hat keinen semantischen Wert, daher werden keine zusätzlichen Vorteile wie oben beschrieben erhalten. Es ist daher eine gute Idee, das richtige HTML-Element für den jeweiligen Zweck zu verwenden.

HTML sollte so codiert werden, dass es die Daten repräsentiert, die eingefügt werden sollen, und nicht basierend auf seiner Standard-Darstellung. Die Präsentation (wie es aussehen sollte) ist die alleinige Verantwortung von CSS.

Einige der Vorteile des Schreibens von semantischem Markup sind:

• Suchmaschinen werden seinen Inhalt als wichtige Schlüsselwörter betrachten, um die Suchplatzierungen der Seite zu beeinflussen (siehe SEO)
• Screenreader können es als Wegweiser verwenden, um sehbehinderten Nutzern bei der Navigation einer Seite zu helfen
• Das Auffinden von Blöcken mit bedeutungsvollem Code ist erheblich einfacher als das Durchsuchen endloser divs mit oder ohne semantische oder Namespaced-Klassen
• Gibt dem Entwickler Hinweise auf den Typ der Daten, die eingefügt werden
• Semantische Benennung spiegelt die ordnungsgemäße benutzerdefinierte Element-/Komponentenbenennung wider

Wenn Sie sich überlegen, welche Markup-Elemente zu verwenden sind, fragen Sie sich: "Welche(s) Element(e) beschreiben/repräsentieren am besten die Daten, die ich einfügen werde?" Zum Beispiel, ist es eine Liste von Daten?; geordnet, ungeordnet?; ist es ein Artikel mit Abschnitten und einem beiseitestellenden Zusatz von verwandten Informationen?; listet es Definitionen auf?; ist es eine Figur oder ein Bild, das eine Bildunterschrift benötigt?; sollte es zusätzlich zum globalen, seitenweiten Header und Footer einen Header und einen Footer haben?; etc.

Semantische Elemente

Hier sind einige der ungefähr 100 semantischen Elemente, die verfügbar sind:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <form>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Siehe auch

• HTML-Element-Referenz auf MDN
• Verwendung von HTML-Abschnitten und Umrissen auf MDN
• Die Bedeutung der Semantik in der Informatik auf Wikipedia
• Verwandte Glossarbegriffe:
  • SEO