Body area in HTML – Inserting content correctly

The body area of an HTML page plays a central role when it comes to structuring and presenting the visible content of a website. Here, all elements are housed that will ultimately be displayed in the browser, while the head area is usually only used for meta-information. In this tutorial, you will learn what the body is about and how to fill it effectively.

Key insights

The body tag exists only once per HTML document and is crucial for rendering content in the browser. All elements that are published belong in the body area.

Step-by-Step Guide

1. Understanding the Body Tag

The body tag is a crucial element in your HTML document. Like the head tag, this tag exists only once in the document. This means that throughout your HTML development, you should ensure that the body is used correctly. In a typical HTML document, it looks like this:

When browsing your structure, you will see that the head area and the body area are defined as main nodes.

2. The Difference Between Head and Body

The head area contains meta-information that is not directly visible to the user, such as the title of the page or the character set. The content you want to present to visitors is entered into the body area.

Here, it is important to understand that no visual content or data should be placed in the head area. Instead, it contains useful information that Google and other search engines can use for indexing the page.

3. The Structure of a Body Area

In the body area, you can insert structural HTML tags, such as H1 for the main heading. An H1 tag represents the highest level. Below you can use H2, H3, and further heading levels.

An example of using the H1 tag could look like this: "My First Paragraph". When you open this in your browser, it will be displayed as the main heading.

4. Pay Attention to the Character Set

When you insert content into your body area, it is important to use the correct character set. A common problem is that characters like "ü" or "ä" do not display correctly if the character set is not defined.

To ensure that everything is displayed correctly, use a meta tag such as . This ensures that the characters are encoded, and the browser knows how to interpret the data.

5. Inserting and Styling Content

Any content you want to display in the document belongs in the body. You have the freedom to use text paragraphs, lists, images, and many other elements.

An example would be to add one or more paragraphs after your H1 tag, providing additional information. Here too, you can create lists to display information clearly and neatly.

6. Avoid Common Mistakes

It is important to note that the body tag should only occur once in the document. Another attempt to create a body tag within the existing document is invalid and should be avoided at all costs.

An incorrectly formatted HTML document will not render as intended, which can lead to confusion. Make sure your structure adheres to solid standards.

Summary - Fundamentals of HTML: The Page Body and Its Content

The body area of an HTML page structures and visualizes all page content. It is a unique element that should be carefully constructed, paying attention to correctly formatted text and the right character set.