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.
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.
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.
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.
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:
Im nächsten Beitrag des HTML Grundkurs zeigen wir dir, wie du Überschriften und Texte zu deiner Webseite hinzufügst.
