Body oder auf deutsch Körper beschreibt bereits mit einem Wort sehr gut, um was es sich bei deiner Webseite dabei handelt: Dem Inhalt und dem Content-Bereich. Wo fängt der Body an und was kann man damit alles machen? Das erfährst du in diesem Artikel.
Hinweis: Bereits in dem Artikel “Aufbau einer Webseite” haben wir als Analogie für bessere Erklärungen ein Haus samt Grundstück übernommen. Das behalte ich so bei. Somit wird manches einfacher und verständlicher.
Body oder doch Content? #
Wie bereits beim Head und Header beschrieben, gibt es für deine Webseite auch zwei Begriffe für den Hauptteil. Der Body und der Content-Bereich. Und auch hier handelt es sich bei dem <body> um einen eher unsichtbaren Teil, da mit diesem Begriff eher der Quellcode beschrieben wird. Der sichtbare Content-Bereich kümmert sich um die Darstellung aller Informationen mit Text und Medien.
Wenn also jemand von einem Body deiner Webseite spricht, wird diese Person aller Wahrscheinlichkeit nach den Code und die Programmierung meinen. Beim Content handelt es sich um die Summe (vgl. Gruppe) aller Überschriften, Absätze, Texte, Bilder, Videos, Formulare und alle Dinge, die du im Browser bei einer Webseite sehen und anklicken kannst.
Im Endeffekt ergibt sich durch den vorhandenen Content, der Code des <body>’s von selbst. Denn ohne Content, kein Code und ohne Code kein Content.
Für unsere Analogie ist das einfach zu überführen: Bei dem Body handelt es sich um alle Materialien und Oberflächen all deiner Möbelstücke und Dekorationselemente. Alles, was du sehen und angreifen kannst, besteht aus irgendwelchen Oberflächen oder Stoffen. Meist kümmert das einen nicht so viel, außer das Möbelstück ist dreckig oder kaputt.
Durch die eingesetzten Möbelstücke und Deko-Elementen ergibt sich das Vorhandensein von unterschiedlichen Materialien ganz von selbst. Ohne Möbelstücke keine Materialien, ohne Materialien keine Möbelstücke.
Im Übrigen kannst du den auf deiner Website, wie auch in deinem Zimmer den Content-Bereich so gestalten, wie du es möchtest. Elemente können hinzugefügt, entfernt, eingeblendet, ausgeblendet, gestaltet und interaktiv werden. Darauf gehen wir in den eigenen Kapiteln noch genauer ein.
Der <body> HTML Tag #
Im Artikel Head und Header einer Webseite habe ich erwähnt, dass der <head>-Bereich der erst von zwei Teilen ist. Der <head>-Bereich beinhaltet als Code primär die Interaktivitäts- und Gestaltungspakete, die dann später im Content-Bereich genutzt werden können.
Der <body>-Bereich ist der zweite Teil einer gesamten <html>-Struktur. Wenn du dir einen Quellcode einer Webseite ansiehst, wirst du feststellen, dass diese immer wie folgt aufgebaut sind:
<!DOCTYPE html>
<html>
<head>
Hier kommt der Code zum Vorladen und für den Titel der Seite rein
</head>
<body>
Hier kommt der Code für den gesamten sichtbaren Teil hinein.
Also Header-Bereich, Navigation, Content-Bereich und Footer-Bereich
</body>
</html>Diese Struktur ist übrigens einzuhalten. Es darf auf jeder Webseite (einzelne Seite!) nur einen <html>, einen <head> und einen <body>-Tag geben. Der natürlich aufgemacht <head> und zugemacht </head> werden muss.
Wir werden das in einem späteren Artikel genauer betrachten.
Was bedeutet <!DOCTYPE html>? #
Im oberen Code findest du in der ersten Zeile den Eintrag <!DOCTYPE html> – doch was bedeutet dieser Eintrag? Dabei handelt es sich um einen Tag, eine sogenannte Kennzeichnung, betreffend des Dokumententyps.
In diesem Fall sagen wir dem Browser, dass es sich um ein HTML-Dokument handelt und der hinterlegte Code entsprechend zu interpretieren ist. Die Angabe ist nicht zwingend vorgeschrieben, aber durchaus empfehlenswert.
Es gibt weitere Doctypes wie beispielsweise SVG. Dadurch teilt man dem Browser mit, dass es sich um eine SVG-Datei handelt. Allerdings hat man sich seit geraumer Zeit dazu entschlossen, auf diese Angabe zu verzichten.
Wenn du also bei einem Quellcode auf den Eintrag <!DOCTYPE html> stößt, dann weißt du nun, was es damit auf sich hat.