x

HTML Grundkurs: Der Body (Körper) einer HTML-Datei

In diesem Beitrag schauen wir uns den Body einer HTML-Datei etwas genauer an. Wir werden dir dabei erklären, was der Body ist und warum du ihn bei deiner Webseite nicht vergessen darfst.

Wir zeigen und erklären dir dabei die Funktion des Headers und des Footers.

Play Video

Head vs Body

In den letzten zwei Beiträgen des HTML Grundkurs hast du gelernt, dass sich im Head ausschließlich Inhalte befinden, die nicht direkt auf deiner Webseite angezeigt werden.

Die Inhalte des Body werden hingegen zum Großteil im Browser wiedergegeben. Wie der Name es schon sagt, ist der Body der Körper deiner HTML-Datei. Er umfasst alle anzuzeigenden Inhalte, wie zum Beispiel Texte und Bilder.

Den Body kannst du grob in drei Abschnitte unterteilen.

1. Abschnitt: Der Header

Im Header befindet sich der sichtbare Kopfbereich deiner Webseite. In den meisten Fällen befindet sich dort ein Logo und ein Menü.

Mithilfe des Menüs, können sich deine Webseitenbesucher später einfach und schnell auf deiner Webseite bewegen. Der Header sollte sich daher auf allen Seiten deiner Webseite befinden und er sollte sich wenn nur minimal verändern.

Wie du ein solches Menü erstellst, werden wir dir im Laufe des HTML Grundkurses noch erklären.

Der Header besitzt wie die meisten Tags im HTML ein öffnendes und ein schließendes Tag.

<header></header>

2. Abschnitt: Der Inhalt

Dieser Abschnitt macht den größten Teil deiner Webseite aus, da er den eigentlichen Inhalt deiner Webseite darstellt. Für diesen Abschnitt gibt es keinen festen Tag.
Du kannst hierfür zum Beispiel das Article-Tag verwenden oder einfach das Div-Tag.

Ich persönlich nutze in den meisten Fällen das Div-Tag. Es schließt alle Inhalte innerhalb des öffnenden und des schließenden Tag zu einem Bereich zusammen. Dabei spricht man von einem Div-Container. Das Div-Tag kannst du beliebig oft in deinem HTML Code verwenden, um Inhalte zu einem Bereich zusammenzuschließen.

<div></div>

3. Abschnitt: Der Footer

Der Footer befindet sich auf meisten Webseiten ganz unten. Im Footer sind häufig weitere Menüpunkte beispielsweise zum Impressum einer Webseite oder zum Datenschutz enthalten. Des Weiteren wird dort häufig das Urheberrecht bzw. das Copyright ausgewiesen.

Der Footer hat ebenfalls ein öffnendes und ein schließendes Tag.

<footer></footer>

 

Wichtig: Es ist nicht festgelegt, dass sich der Header am Anfang und der Footer am Ende einer Webseite befinden muss. Es gibt’s zum Beispiel auch Seiten, bei denen sich der Header oder der Footer links oder rechts an der Seite befindet.

Die index.html Datei:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs."> <meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital"> <title>Index - HTML Grundkurs</title> </head> <body> <header></header> <div></div> <footer></footer> </body> </html>


Im nächsten Beitrag des HTML Grundkurs zeigen wir dir, wie du Überschriften und Texte zu deiner Webseite hinzufügst.

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: