Semantic HTML bedeutet, Elemente zu verwenden, die die Bedeutung ihres Inhalts beschreiben, nicht nur sein Aussehen. <nav> sagt "das ist Navigation"; <button> sagt "das ist anklickbar" — während <div> nichts sagt.
html
Home
Home
Beide können identisch gestaltet werden, aber nur die zweite wird von Browsern, Bildschirmlesern und Suchmaschinen verstanden.
<header>, <nav>, <main>, <footer> eine Landmarkenkarte, mit der Benutzer zwischen Regionen springen können. Eine Mauer aus <div>s gibt ihnen nichts.<h1>, <article>, <main> und verstehen die Seitenstruktur.<button> ist fokussierbar, tastaturaktivierbar (Enter/Space) und wird als Schaltfläche angekündigt — ein <div onclick> ist nichts davon, wenn Sie nicht alles von Hand wieder hinzufügen.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Faustregel: greifen Sie zum Element, das das bedeutet, was Sie beabsichtigen, und verwenden Sie <div>/<span> nur als Styling-Container, wenn kein semantisches Element passt.
Es ist der günstigste Barrierefreiheits- und SEO-Gewinn, den Sie erreichen können.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden