Cambridge Syllabus Notes

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 Element	Purpose	Example
`<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 data	See 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

Start with the HTML skeleton (see section 2).
Add a main heading using <h2>.
Insert a paragraph introducing yourself.
Create an unordered list of hobbies.
Provide a table showing your qualifications.
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.

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