Registrieren/Anmelden

Eine Frage stellen

Thema erstellen

Bereiche definieren mit HTML DIVs: <div>

Lerne, wie du mit Hilfe von HTML DIVs das Layout deiner Webseite definieren kannst, was das HTML-Box-Modell ist und warum man HTML und CSS trennen sollte.
(Letztes Update von Niklas Baumgärtler am 8.9.2020)

Am Ende wirst du:

  • Lernen wie man DIV-Tags zur Strukturierung deiner Webseite verwenden kannst
  • Das HTML-Box-Modell kennenlernen
  • Erfahren warum du mit dem style-Attribut alleine an diesem Punkt nicht mehr weiterkommst
Diese Einheit überspringen

Willkommen zur nächsten Lektion unseres Programmier-Kurses über HTML und CSS! Heute werden wir uns mit einem HTML-Tag beschäftigen, das fast im Alleingang für den Grundaufbau der meisten Webseiten zuständig ist. Wir werden lernen, wie man in HTML DIVs einfügt.

Profi-Tipp: Manchmal werden <div>-Tags im Fließtext auch großgeschrieben, also so: DIV. Das hat den Vorteil, dass man sie so besser lesen kann. Im Grunde gilt das für alle Tags, die hier so vorkommen. Ein <p>-Tag ist das Gleiche wie ein P-Tag, ein <h1>-Tag gleichbedeutend mit einem H1-Tag, und so weiter. Ich werde die Schreibweisen in Zukunft immer wieder mal abwechseln, damit du dich langsam daran gewöhnen kannst.

1. Was sind HTML DIVs bzw. <div>-Tags?

Das Kürzel “div” steht für das englische Wort “Division”, also Bereich. Ein <div>-Tag beschreibt also einen bestimmten Unter-Bereich einer Webseite, und da es sich um ein Tag der zweiten Gruppe handelt, wird alles zwischen dem öffnenden <div> und dem schließenden </div> einem Bereich zugeordnet.

1.1 Wie füge ich in HTML DIVs ein?

Mit Hilfe unseres style-Attributs können wir dann unserem <div>-Tag allerhand CSS-Befehle verpassen, um sein Aussehen unseren Wünschen anzupassen. Du willst zum Beispiel ein Layout mit zwei Spalten, einer Navigations-Leiste links und einen Inhalts-Bereich rechts, wobei der linke kleiner sein soll als der rechte und eine andere Farbe haben soll? Dann dürfte dir der folgende Code gefallen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>DIV-Layouts</title>
  </head>
  <body>
  	<div style='width: 100%;'>
  		<div style='width: 30%; height: 400px; background-color: gray; float: left;'>
  			Ein Navi-Link<br>
  			Ein zweiter Navi-Link
  		</div>
  		<div style='width: 70%; height: 400px; background-color: yellow; float: left;'>
  			Inhalt hier
  		</div>
  	</div>
  </body>
</html>

Wenn du diesen Code in deine index.html einfügst und diese öffnest, solltest du in etwa das hier sehen können (vielleicht auch etwas größer, ich habe mein Browser-Fenster zur besseren Übersicht wieder verkleinert):

2 Spalten mit CSS

Aber was haben wir da eigentlich genau programmiert?

Wir haben insgesamt drei <div>-Tags erstellt. Eines ist unser Container, und die anderen zwei befinden sich in dem Container drin. Dem linken “Kind”-DIV des Containers haben wir eine graue Farbe und eine Breite von 30% verpasst, dem rechten “Kind”-DIV eine gelbe Farbe und die übrigen 70%.

Profi-Tipp: Man nennt den übergeordneten Container in der Programmierung manchmal auch “Eltern” oder “parent”, und die untergeordneten Tags dann seine “Kinder” oder auch “children”. Das ist wichtig zu wissen, wenn du einmal im Internet danach suchen willst, wie du Elemente dieser Eltern-Kind-Beziehung verändern kannst.

1.2 Worauf beziehen sich Prozent-Angaben bei CSS-Befehlen?

Aber 30% bzw. 70% wovon eigentlich? Prozent-Angaben beziehen sich immer auf den übergeordneten HTML-Block – in diesem Fall unser “Eltern”-DIV. Hätten wir kein Eltern-DIV erstellt, wäre der nächst-höhere Container das <body>-Tag gewesen.

1.3 Der “heimliche Abstand” (Margin) auf dem BODY-Tag

Außerdem wird dir vielleicht aufgefallen sein, dass die beiden farbigen Blöcke die man sieht seltsamerweise nicht bis ganz an den äußeren Rand gehen. Das liegt daran, dass der Browser dem <body>-Tag ohne unser Zutun den CSS-Befehl margin: 8px; zuweist. Wenn wir das nicht mehr wollen, braucht unser <body>-Tag das zusätzliche Attribut style=’margin: 0px;’.

1.4 Über den CSS-Befehl float

Und dann haben wir zu guter Letzt noch den CSS-Befehl “float: left;”. Der CSS-Befehl float sagt dem Browser, dass er versuchen soll, das Element in den umliegenden Fließtext der von links kommt einzubetten. “float: right;” dreht entsprechend die Richtung um.

Der CSS-Befehl float hat die praktische Eigenschaft, dass wenn sein Eltern-Container nicht groß genug ist, er einfach in die nächste Zeile springt. Das kann praktisch sein, wenn der Benutzer das Fenster verkleinert oder von einem Handy aus auf die Webseite kommt, weil man dann immer noch alle Inhalte sehen kann.

In den meisten Fällen führt es aber eher zu unkontrollierten Ergebnissen, weswegen der float-Befehl in der modernen Web-Programmierung kaum mehr verwendet wird. Aber für unsere einfachen Darstellungs-Zwecke eignet er sich für den Anfang super.

Wenn du nun z.B. dem zweiten Kind-DIV (dem gelben) eine fixe Breite von “width: 700px;” gibst und dein Browser-Fenster verkleinerst, wirst du sehen wie das gelbe DIV irgendwann nach unten “springt”. Außerdem wächst das gelbe DIV dann nicht mit, und wenn du das Fenster groß genug machst, erscheint rechts ein weißer Bereich, der nicht eingefärbt ist.

Aber hier nochmal zum veränderten Code zum abtippen/kopieren und ausprobieren:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>DIV-Layouts</title>
  </head>
  <body style='margin: 0px;'>
  	<div style='width: 100%;'>
  		<div style='width: 30%; height: 400px; background-color: gray; float: left;'>
  			Ein Navi-Link<br>
  			Ein zweiter Navi-Link
  		</div>
  		<div style='width: 700px; height: 400px; background-color: yellow; float: left;'>
  			Inhalt hier
  		</div>
  	</div>
  </body>
</html>

Bevor wir nun mit den komplexeren Verschachtelungen weitermachen, müssen wir uns aber dringend mal das HTML-Box-Modell ansehen:

2. Das HTML Box-Modell für HTML DIVs

Das HTML Box-Modell beschreibt eigentlich etwas ziemlich einfaches: Ein jedes HTML-Element, sei es ein Bild, ein DIV oder sonst eines, ist durch einen rechteckigen Rahmen umfasst. Dieser Rahmen, Border genannt, ist zwar nicht immer sichtbar, aber doch immer vorhanden. Ausgehend von diesem Rahmen gibt es Abstände nach außen, diese werden Margin genannt, und Abstände nach innen, diese werden Padding genannt. Im Webseiten-Inspektor vom Browser Firefox wird dazu ein vergleichsweise übersichtliches Bild erzeugt:

HTML Box-Modell

Das Element selbst ist der blaue Mittel-Teil. Padding ist der Abstand vom Rahmen (border) nach innen, margin der Abstand vom Rahmen nach außen.

2.1 Abstand nach innen: Den CSS-Befehl padding verwenden

Wenn wir nun zum Beispiel wollen dass unsere Navigationsleiste (also das graue Child-DIV unseres Codes von vorhin) einen inneren Abstand von 10 Pixeln in alle Richtungen erhält, dann können wir z.B. den CSS-Befehl “padding: 10px;” in das style-Attribut des ensprechenden DIVs einfügen.

2.2 Abstand nach außen: Den CSS-Befehl margin verwenden

Vielleicht soll das gelbe DIV dafür einen äußeren Abstand nach links zur Navigations-Leiste bekommen? An sich erledigt uns der CSS-Befehl “margin: 5px;” das. Aber das würde in alle Richtungen einen solchen Abstand erzeugen. Wie könnte man einen äußeren Abstand nur nach links definieren?

Die Lösung ist sehr einfach, man ersetzt einfach das margin durch ein margin-left, also z.B: “margin-left: 5px;”.

Das gleiche funktioniert übrigens auch mit padding, man kann also ein “padding: 10px;” z.B. durch “padding-top: 10px;” ersetzen, falls man den inneren Abstand nur nach oben haben möchte.

2.3 Rahmen anzeigen: Den CSS-Befehl border verwenden

Nun habe ich anfangs von einer Umrahmung gesprochen, die immer da sei, aber nicht immer sichtbar. Das ist so, weil der Rahmen von HTML-Elementen grundsätzlich nur dann angezeigt werden wenn der Programmierer das extra so bestimmt hat.

Der dazugehörige CSS-Befehl lautet “border”, und funktioniert beispielsweise so:

<div style='border: 1px solid red'>

Damit haben wir dem DIV einen Rahmen verpasst, der 1 Pixel breit ist, durchgängig ist (“solid”) und die Farbe rot hat.

Wie man die Breite des Rahmens ändert oder die Farbe wird dir wahrscheinlich klar sein. Aber welche Alternativen gibt es zu dem “solid” eigentlich? Hier findest du eine Liste der Möglichkeiten dazu – probiere  doch mal einige aus, in dem du sie in den Code von unten einfügst!

Hier das Endergebnis als Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>DIV-Layouts</title>
  </head>
  <body style='margin: 0px;'>
  	<div style='width: 100%;'>
  		<div style='padding: 10px; width: 30%; height: 400px; background-color: gray; float: left;'>
  			Ein Navi-Link<br>
  			Ein zweiter Navi-Link
  		</div>
  		<div style='border-left: 12px double red; margin-left: 5px; width: 700px; height: 400px; background-color: yellow; float: left;'>
  			Inhalt hier
  		</div>
  	</div>
  </body>
</html>

Und hier nochmal das Ergebnis in meinem Browser:

CSS 2 Spalten

2.4 Wie padding, margin und border die Breite und Höhe eines HTML-Elements beeinflussen können

Ist dir aufgefallen, dass das graue DIV nun größer ist als das gelbe DIV? Wie kann das sein, wenn doch beide eine Höhe von exakt 400px haben? Was ist beim linken DIV anders als beim rechten DIV, was könnte diesen Unterschied in der Höhe bewirken?

Die Antwort ist im CSS-Befehl “padding: 10px;” zu finden, der nur auf das graue DIV angewendet wird. Der padding-Befehl fügt auf allen Seiten des DIVs noch 10 Pixel dazu damit er genug Platz für den Inhalt findet. Das führt dazu, dass die tatsächliche Höhe nun nicht mehr 400px ist, sondern 420px.

Keine Bange: Auch Profis kann es – vor allem bei größeren Webseiten-Projekten – passieren, dass sie keine Ahnung haben, warum ein HTML-Element nun nicht die Größe hat die es soll.

Der Webseiten-Inspektor ist in solchen Situationen ein sehr hilfreiches Werkzeug. Man dann einfach per Rechtsklick->”Element untersuchen” das Element auswählen das man untersuchen möchte, und danach mit der Maus links unten über das HTML-Tag des Elements fahren, dann wird das Box-Modell über der Webseite selbst angezeigt. In diesem Fall ist aufgrund der lila Einfärbung klar zu sehen dass das graue DIV überall Padding dazubekommen hat und deswegen größer ist als das gelbe DIV (Margin würde gelb angezeigt werden):

HTML 2 Spalten 2

Dann kann man beispielsweise auch dem gelben DIV ein passendes Padding verpassen, oder was auch immer man tun möchte damit alles wieder zusammenstimmt.

3. Warum wir nun an der Stelle der HTML DIVs an einer wichtigen Grenze angelangt sind

Eine normale Webseite besteht aus unzähligen DIVs, die alle ineinander verschachtelt sind und die einzelnen Bereiche der Webseite festlegen. Es ist zwar grundsätzlich möglich, all diese Bereiche über das style-Attribut zu definieren, aber das artet sehr rasch in sehr viel Arbeit aus.

Vor allem aber stoßen wir sehr rasch an unsere Grenzen sobald wir es mit mehreren HTML-Dateien zu tun haben, die alle ein ungefähr gleiches Aussehen haben sollen, also zum Beispiel unsere Navigationsleiste. Da müssten wir dann in jedes HTML-Dokument einzeln alle wichtigen style-Angaben hineinkopieren. Wenn wir nun irgendetwas irgendwo ändern wollen, müssen wir das in allen HTML-Dokumenten tun. Sobald wir uns irgendwo dabei vertippen, schleichen sich dann Fehler ein, die gar nicht so einfach zu finden sind.

Es ist nun an der Zeit, dass wir unsere CSS-Befehle von unseren HTML-Befehlen trennen, um uns in Zukunft einen Haufen Arbeit zu ersparen. Bevor wir wirklich anfangen an größeren Webseiten zu bauen, und bevor wir uns ineffiziente Gewohnheiten antrainieren.

Darum wird es in der nächsten Lektion gehen. Bis dann!

Du hast nun:

  • Eine Ahnung davon wie du mit Hilfe von DIV-Tags deine Webseite strukturieren kannst
  • Das HTML-Box-Modell kennengelernt
  • Erkannt dass es notwendig sein wird deine HTML-Befehle und deine CSS-Befehle in Zukunft zu trennen
Diese Einheit abschließen

Mit deinem kostenlosen Account kannst du:

  • deine selbst programmierte Webseite auf verschiedenen Geräten ansehen und auch deinen Freunden zeigen
  • Fragen an mich und die Community stellen
  • mehr Hilfsmittel benutzen, um dich besser im Kurs zu orientieren