Be able to place appropriate content in the body section of a web page

Published by Patrick Mutisya · 14 days ago

ICT 0417 – Website Authoring: Placing Content in the Body Section

Website Authoring – Placing Content in the Body Section

1. What belongs in the <body>?

The <body> element contains everything that will be displayed to the user in the web browser. Typical content includes:

  • Headings and sub‑headings

  • Paragraphs of text

  • Lists (ordered and unordered)

  • Tables of data

  • Links to other pages or resources

  • Embedded media (audio, video, etc.)

  • Forms for user input

2. Basic Structure of a Web Page

Below is the minimal HTML5 skeleton showing where the body content is placed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
</body>
</html>

3. Common Body Elements and Their Use

HTML ElementPurposeExample
<h2> … </h2>Main section heading<h2>Welcome to My Site</h2>
<h3> … </h3>Sub‑heading within a section<h3>Our Services</h3>
<p> … </p>Paragraph of text<p>We provide web design and hosting.</p>
<ul> … </ul>Unordered (bulleted) list

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

</ul>

<ol> … </ol>Ordered (numbered) list

<ol>

  <li>First step</li>

  <li>Second step</li>

</ol>

<table> … </table>Tabular dataSee the table above
<a href="URL"> … </a>Hyperlink to another page or resource<a href="https://www.example.com">Visit Example</a>

4. Step‑by‑Step Example: Building a Simple “About Me” Page

  1. Start with the HTML skeleton (see section 2).

  2. Add a main heading using <h2>.

  3. Insert a paragraph introducing yourself.

  4. Create an unordered list of hobbies.

  5. Provide a table showing your qualifications.

  6. End with a link to your portfolio.

Resulting body markup:

<body>
<h2>About Me</h2>
<p>Hello! I am Alex, a student studying ICT at XYZ College.</p>
<h3>My Hobbies</h3>
<ul>
<li>Coding</li>
<li>Photography</li>
<li>Cycling</li>
</ul>
<h3>Qualifications</h3>
<table>
<thead>
<tr>
<th>Course</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>ICT 0417</td>
<td>A</td>
</tr>
<tr>
<td>Mathematics</td>
<td>B</td>
</tr>
</tbody>
</table>
<p>View my full portfolio <a href="portfolio.html">here</a>.</p>
</body>

5. Checklist for a Complete Body Section

  • All visible content is placed inside <body>.

  • Headings follow a logical hierarchy (e.g., <h2> then <h3>).

  • Paragraphs are wrapped in <p> tags.

  • Lists use <ul> or <ol> with <li> items.

  • Tables include <thead> for headings and <tbody> for data rows.

  • Hyperlinks are correctly formed with the href attribute.

  • No stray tags appear outside the <body> element.

Suggested diagram: Layout of a simple web page showing the <head> and <body> sections with example content.