1.7 Sturktur und Layout

<div> und <span>

`<div>` ist ein Block-Element, das ganze Abschnitte umschliesst, während `<span>` ein Inline-Element ist, das kleinere Textteile oder Elemente innerhalb eines Absatzes gruppiert. Beide dienen hauptsächlich zur Strukturierung und für Styling-Zwecke.

Semantische Tags

Semantische HTML-Tags beschreiben die Rolle eines Inhaltsabschnitts klarer. Beispiele sind:

`<header>`: Kopfbereich der Seite

`<nav>`: Navigationsbereich

`<main>`: Hauptinhalt der Seite

`<section>`: thematisch abgegrenzter Abschnitt

`<article>`: eigenständiger Beitrag oder Artikel

`<footer>`: Fussbereich der Seite

Semantik verbessert die Lesbarkeit für Entwickler, erleichtert Suchmaschinenoptimierung (SEO) und unterstützt Screenreader für Barrierefreiheit. Sie sorgt dafür, dass Inhalt und Layout klar voneinander getrennt werden.

Beispiel

Das folgende Beispiel zeigt eine einfache semantische Struktur einer Webseite.

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Struktur & Layout</title>
</head>

<body>
    <header>
        <h1>Meine Webseite</h1>
    </header>

    <nav>
        <a href="#section1">Abschnitt 1</a>
        <a href="#section2">Abschnitt 2</a>
    </nav>

    <main>
        <section id="section1">
            <h2>Abschnitt 1</h2>
            <p>Inhalt von Abschnitt 1.</p>
        </section>

        <article id="section2">
            <h2>Artikel</h2>
            <p>Dies ist ein eigenständiger Artikel.</p>
        </article>
    </main>

    <footer>
        <p>© 2026 Meine Webseite</p>
    </footer>
</body>
</html>

1.7 Sturktur und Layout

<div> und <span>

<div> ist ein Block-Element, das ganze Abschnitte umschliesst, während <span> ein Inline-Element ist, das kleinere Textteile oder Elemente innerhalb eines Absatzes gruppiert. Beide dienen hauptsächlich zur Strukturierung und für Styling-Zwecke.

Semantische Tags

Semantik verbessert die Lesbarkeit für Entwickler, erleichtert Suchmaschinenoptimierung (SEO) und unterstützt Screenreader für Barrierefreiheit. Sie sorgt dafür, dass Inhalt und Layout klar voneinander getrennt werden.

Beispiel

Das folgende Beispiel zeigt eine einfache semantische Struktur einer Webseite.

<div> und <span>

Semantische Tags

Beispiel

`<div>` ist ein Block-Element, das ganze Abschnitte umschliesst, während `<span>` ein Inline-Element ist, das kleinere Textteile oder Elemente innerhalb eines Absatzes gruppiert. Beide dienen hauptsächlich zur Strukturierung und für Styling-Zwecke.