Informatik Webentwicklung – HTML und Semantik
Karteikarten zum Thema „Informatik“ · 15 Karten · von atrio. Beispiele: Was ist der Unterschied zwischen <section> und <article>? · Wann nutzt du <nav> statt…
Karten
15 KartenWas ist der Unterschied zwischen <section> und <article>?
Rückseite
<article> steht für in sich abgeschlossene, eigenständig verteilbare Inhalte (z. B. Blogbeitrag), <section> für thematische Abschnitte innerhalb eines Dokuments.
Wann nutzt du <nav> statt einer einfachen <ul> für Navigation?
Rückseite
<nav> kennzeichnet primäre Navigationsblöcke für Screenreader und Suchmaschinen; <ul> allein hat keine semantische Navigations-Bedeutung.
Welche Funktion hat das <main>-Element?
Rückseite
<main> umschließt den eindeutigen Hauptinhalt der Seite – exakt einmal pro Dokument, nicht in Vorfahren wie article oder section verschachtelt.
Warum solltest du <header> und <footer> innerhalb von <article> verwenden?
Rückseite
Sie strukturieren Metadaten (Überschrift, Autor, Datum) bzw. Fußnoten eines Artikels semantisch, unabhängig vom Seitensheader/-footer.
Was bewirkt das <aside>-Element?
Rückseite
<aside> markiert Inhalte, die nur indirekt zum Hauptinhalt gehören (Sidebar, Pull-Quotes, Werbung) und beim Lesen übersprungen werden können.
Wie verbessert <figure> mit <figcaption> die Barrierefreiheit?
Rückseite
<figure> fasst Medien (Bild, Diagramm, Code) zusammen, <figcaption> liefert die zugehörige Beschreibung – Screenreader verknüpfen beides automatisch.
Welches Element ersetzt <div id="header"> semantisch?
Rückseite
<header> – es kennzeichnet Einführungs- oder Navigationsbereiche auf Seiten- oder Section-Ebene ohne zusätzliche ID.
Was ist der Zweck von <time datetime="2024-01-15">15. Jan. 2024</time>?
Rückseite
Das datetime-Attribut stellt maschinenlesbare Datumsformate bereit, während der Inhalt menschenlesbar bleibt – wichtig für Crawler und Kalender-Tools.
Warum sind Überschriftenhierarchien (h1–h6) in HTML5 sectionsbasiert?
Rückseite
Jedes <section>, <article>, <aside>, <nav> kann eine eigene h1–h6-Hierarchie beginnen; die Outline wird durch Sectioning-Elemente definiert, nicht nur durch h-Tags.
Was unterscheidet <strong> von <b> und <em> von <i>?
Rückseite
<strong> und <em> tragen semantische Betonung (Wichtigkeit/Betonung), <b> und <i> sind rein präsentational ohne inhaltliche Gewichtung.
Welches Element nutzt du für Adressdaten des Seitenautors?
Rückseite
<address> – es kennzeichnet Kontaktinformationen des nächsten article- oder body-Vorfahren, nicht beliebige Postadressen.
Wie kennzeichnest du einen zitierten Block aus fremder Quelle?
Rückseite
<blockquote> für längere Zitate als Block, optional mit cite-Attribut für Quellen-URL; <q> für kurze Inline-Zitate.
Was bewirkt das <mark>-Element?
Rückseite
<mark> hebt Textpassagen hervor, die im aktuellen Kontext relevant sind (z. B. Suchtreffer), ohne Wichtigkeit wie <strong> zu implizieren.
Warum solltest du <div> und <span> nur als letztes Mittel einsetzen?
Rückseite
Sie tragen keine Semantik; Screenreader und Suchmaschinen können Struktur und Bedeutung nicht ableiten – nutze immer das passende semantische Element.
Wie prüfst du die semantische Struktur einer Seite schnell im Browser?
Rückseite
Öffne DevTools → Elements → Accessibility Tree oder nutze das „Headings Map“-Bookmarklet, um die Outline und ARIA-Rollen zu validieren.