HTML Schnellstart / HTML Schnellstart Modul 3
0%
In Bearbeitung

Block Elemente und Bereiche

Wenn man Elemente in HTML benutzt, sollte man wissen, dass es zwei Darstellungsarten von HTML-Elementen gibt:

  1. Blockelemente
  2. Inlineelemente.

Block-Elemente

Kommen wir zu den Block-Elementen.

Wenn du dir ein HTML Dokument wie ein Buch vorstellst, haben bestimmte Elemente ihre eigenes Kapitel. Wie ein Kapitel immer auf einer neuen Seite anfängt, so startet ein Blockelement immer in einer neuen Zeile. So kommt es, dass mehrere p-Elemente untereinander dargestellt werden. Das p-Element ist nämlich ein Block-Element. Es gibt noch weitere Blockelemente, die auch für das Layout zuständig sind:

  • header
  • footer
  • section
  • article
  • aside

Das wichtigste block-Element ist das div-Element. Ein div-Element hat die Aufgabe, Elemente zu gruppieren. Wenn man Elemente erstmal gruppiert hat, kann man sie über das div-Element in ein Layout stecken.

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

<head>
    <meta charset="utf-8">
</head>

<body>
    <div> <!-- Das div-Element ist auf der Website unsichtbar. -->
        <h1>Hallo auf lerneProgrammieren.de</h1>
    </div>
</body>

</html>
Code ausprobieren ×

Wenn du diesen Code ausprobierst, wirst du merken, dass man das div-Element auf der Webseite nicht sieht.