Semantisches HTML

Kurz: Semantisches HTML bedeutet, Elemente nach ihrer Bedeutung zu wählen, zum Beispiel <nav> für Navigation und <button> für Schaltflächen, statt alles mit <div> zu bauen.

Genauer: Browser, Suchmaschinen und Screenreader lesen die Bedeutung der Tags. Ein <button> ist automatisch per Tastatur bedienbar und wird als Schaltfläche angesagt. Ein <div onclick> kann das alles nicht von selbst.

Im Detail

• Seitenstruktur: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
• Überschriften: <h1> bis <h6> in logischer Reihenfolge, ohne Ebenen zu überspringen.
• Listen und Tabellen: <ul>, <ol>, <table> mit <th> für Kopfzeilen.
• Formulare: Jedes Eingabefeld bekommt ein <label>.
• Gewinn: Barrierefreiheit, besseres SEO, weniger Code, einfachere Wartung.

Siehe auch: Web Components