HTML <body> Section Guide: How to Structure Your HTML Page Content

Note:
This page is part of the Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.

<body>
Section

THE `<body>` TAG: THE STAGE FOR YOUR WEB PAGE

We saw in the previous guide the basic structure of an HTML page, with <!DOCTYPE html>, <html>, and <head>. Now let's focus on the other fundamental piece: the <body> tag.

If the <head> contains "behind-the-scenes" information (like the title in the browser tab or metadata), the <body> is the main stage. This is where you put everything the user sees and interacts with when they visit your web page in the browser.

Think about the structure of a book: the <head> is like the cover and table of contents, with information about the book itself. The <body>, on the other hand, holds all the internal pages, with the chapters, paragraphs, images... in short, the actual content.

Everything you want to show - text, images, links, videos, tables, forms - must be placed between the opening <body> tag and the closing </body> tag.

<!DOCTYPE html>
<html>
<head>
    <title>My Example Page</title>
    <!-- Other head info here -->
</head>

<body>
    <!-- ALL VISIBLE CONTENT GOES IN HERE -->
    <h1>This title will be seen in the browser</h1>
    <p>This paragraph will also be visible.</p>
    <!-- And so on... -->
</body>
</html>

STRUCTURING TEXT: HEADINGS `<h1>`-`<h6>` AND PARAGRAPHS `<p>`

The most basic way to add content is to insert text. But text just "dumped" there isn't well organized. HTML provides specific tags to give it a logical structure.

Headings (<h1> - <h6>): As we'll explore further later, these tags define the headings and subheadings of your page, creating a hierarchy. <h1> is the main title (only one per page!), <h2> are the main subheadings, <h3> are the next level down, and so on up to <h6>. They help organize content and are crucial for SEO and accessibility.
Paragraphs (<p>): This is the tag you'll use most often. It defines a block of text, a paragraph. The browser automatically adds some space before and after each <p> element, visually separating the text blocks.

Example:

<body>
    <h1>Main Topic of the Page</h1>
    <p>This is the first introductory paragraph explaining the topic.</p>
    
    <h2>Important Subheading</h2>
    <p>This paragraph elaborates on the concept introduced in the h2 subheading.</p>
    <p>This is another paragraph related to the same subheading.</p>
    
    <h3>Specific Detail</h3>
    <p>Here we go into even more detail on a particular aspect.</p>
</body>

Remember: use headings for logical structure, not just to change the text size (we'll use CSS for that in the future). Use <p> for each block of text that forms a paragraph.

BRINGING THE PAGE TO LIFE: INSERTING IMAGES WITH `<img>`

A web page isn't just made of text! To insert an image, you use the <img> tag. This tag is a bit special because it's self-closing (or an empty tag), meaning it doesn't have a closing </img> tag. All the information it needs lies in the attributes within the tag itself.

The two essential attributes for <img> are:

src (source): Indicates the path (the address, or URL) of the image file to display. It can be a relative path (if the image is in the same folder or a subfolder of your site) or an absolute path (a full web address, e.g., https://.../image.jpg).
alt (alternative text): This is alternative text that describes the image. It's essential for several reasons:
- Accessibility: It's read by screen reader software used by people with visual impairments.
- SEO: It helps search engines understand what the image is about.
- Fallback: It's displayed if the image fails to load for some reason (e.g., wrong path, slow connection). Never leave the alt attribute empty or missing!

Example:

<body>
    <h1>My Gallery</h1>
    <p>Here's a nice image:</p>
    
    <img src="images/my_cat.jpg" alt="Photo of my black cat curled up on the armchair">
    
    <p>Description of the image above.</p>
    
    <img src="https://www.externalsite.com/logo.png" alt="Logo of external site XYZ">
</body>

In the first case (images/my_cat.jpg), it's assumed there's a folder named "images" at the same level as the HTML file, and the file my_cat.jpg is inside it. In the second case, an image is loaded from another website.

NAVIGATING THE WEB: CREATING LINKS WITH `<a>`

The web is made of links! To create one in HTML, you use the <a> tag (stands for anchor). This tag also has an essential attribute:

href (hyperlink reference): Specifies the link's destination, the URL the user will be directed to when they click. It can be another page on your site (internal link) or a page on an external site (external link).

The text (or even an image) you put between the opening <a> and closing </a> tags becomes clickable.

Example:

<body>
    <h1>Useful Links</h1>
    <p>If you want to learn more about HTML, visit the
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs for HTML</a> site.
    </p>
    
    <p>You can also visit
    <a href="contact_page.html">my contact page</a>.
    </p>
    
    <p>Click here to search on Google:
    <a href="https://www.google.com">
    <img src="images/google_logo.png" alt="Google Logo">
    </a>
    </p>
</body>

In the first example, we link to an external site. In the second, we link to another HTML file (contact_page.html) which is assumed to be in the same folder. In the third, we make an image clickable to take us to Google.

ORGANIZING INFORMATION: BULLETED LISTS `<ul>` AND NUMBERED LISTS `<ol>`

Often, you need to present information in the form of a list. HTML offers two main types of lists:

Unordered lists (<ul> - unordered list): Used when the order of items doesn't matter (e.g., shopping list, list of features). They are usually displayed with bullet points.
Ordered lists (<ol> - ordered list): Used when the sequence of items is relevant (e.g., step-by-step instructions, rankings). They are usually displayed with numbers or letters.

In both cases, each individual list item must be enclosed in the <li> (list item) tag.

Unordered List Example (<ul>):

<body>
    <h2>Shopping List</h2>
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
        <li>Fruit</li>
    </ul>
</body>

Ordered List Example (<ol>):

<body>
    <h2>How to Make Coffee</h2>
    <ol>
        <li>Put water in the moka pot boiler.</li>
        <li>Fill the filter with ground coffee without packing it down.</li>
        <li>Screw the moka pot together tightly.</li>
        <li>Place on low heat.</li>
        <li>Remove from heat as soon as the coffee has risen.</li>
    </ol>
</body>

You can also nest lists within other lists to create more complex structures (for example, an ordered list inside an <li> element of an unordered list).

SUMMARY: WHAT GOES (AND WHAT DOESN'T GO) IN THE `<body>`

To recap, the <body> tag is the main container for all the visible content of your web page. Inside it, you will put:

Structured text: Using headings (<h1>-<h6>) and paragraphs (<p>).
Images: Using the <img> tag with the src and alt attributes.
Links: Using the <a> tag with the href attribute.
Lists: Using <ul> or <ol> as containers and <li> for the items.
...and many other elements we'll see later (tables, forms, video, audio, etc.).

What typically does NOT go in the <body>?

The title displayed in the browser tab (<title>).
Information about the page for search engines or the browser (meta tags like <meta charset="UTF-8">, <meta name="description" content="...">).
Links to external CSS files (<link rel="stylesheet" href="...">).
JavaScript code (<script>).
Internal CSS styles (<style>).

All these things normally belong in the <head> section, because they are information about the page or resources needed for its functionality/appearance, but not the direct visible content.

This is just the beginning of what you can put in the <body>. As we proceed, we'll discover many other tags to enrich your web pages. For now, you already have the basic tools to create a page with text, images, links, and lists!

Search This Blog

My Skill Vault - Tutorials and Guides