Warum wird HTML5 als Semantisches HTML bezeichnet?

2 Antworten

Von Experte medmonk bestätigt
threadi
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Internet, HTML
31.10.2021, 12:37

Semantik heißt, das jedes Element eine Bedeutung hat. In frühere HTML-Versionen hat man viele bedeutungslose Elemente verwendet um die Inhalte zu strukturieren. Mit HTML5 wurden viele Elemente eingeführt die dem Inhalt auch eine Bedeutung geben - eine Semantik die wiederum von Programmen, die diesen Quellcode lesen einfacher zu identifizieren ist.

Beispiel:

Früher schrieb man für ein Menü:

<div id="kopf">
<div class="navigation">
    <ul>
       <li><a href="">Menü 1</li>
       <li><a href="">Menü 2</li>
       <li><a href="">Menü 3</li>
    </ul>
</div>
</div>

Mit HTML bekommt der Abschnitt eine Bedeutung:

<header>
<nav>
    <ul>
       <li><a href="">Menü 1</li>
       <li><a href="">Menü 2</li>
       <li><a href="">Menü 3</li>
    </ul>
</nav>
</header>

Suchmaschinen können daher einfacher erkennen was dieser Quellcode für eine Bedeutung hat und daher die Webseite genauer analysieren als früher.
Woher ich das weiß:Berufserfahrung
TheDiablen 
Beitragsersteller
 31.10.2021, 15:45

Danke dir
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
IT, Webentwicklung
31.10.2021, 05:10

In HTML gab es lange nur Struktur-Elemente, was sich jedoch durch HTML5 geändert hat. Mithilfe der semantischen Elemente können die Inhalte einer Internetseite sinnvoller und spezifischer gegliedert werden. Wie du anhand der Beispiel sehen kannst, beschreibt das Element selbst bereits den Inhaltstyp.

HTML:

<div class="header">
  <div class="navigation">
    <!-- nav comes here... -->
  </div>
</div>
<div class="main">
 <div class="about">
   <h2>title</h2>
 </div>
 <div class="sidebar"></div>
</div>
<div class="footer">
</div>

HTML5:

<header class="header">
 <nav class="navigation">
  <!-- nav comes here... -->
 </nav>
</header>
<main class="main">
  <section class="about">
   <h2>title</h2>
  </section>
  <aside class="sidebar">
  </aside>
</main>
<footer class="footer">
</footer>

"Container-Elemente" wie <div> und <span> sind im Vergleich nichtssagend, während die semantischen Elemente ihren Inhalt bereits beschreiben. Weil mit diesen Elementen eine genauere Strukturierung, Gruppierung und/oder Markierung möglich ist, spricht man bei HTML5 von semantischen HTML.
Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer
TheDiablen 
Beitragsersteller
 31.10.2021, 15:44

Danke für die gute Erklärung