Know and understand the purpose of the head and body sections of a web page

Resources → Subject Notes → Information Communication Technology ICT → Lesson Plan
ICT 0417 – Website Authoring: The Head and Body Sections

21. Website Authoring

Objective

Know and understand the purpose of the <head> and <body> sections of a web page.

1. The Overall Structure of an HTML Document

Every HTML5 document follows a basic skeleton:

<!DOCTYPE html>
<html>
    <head>
        …metadata…
    </head>
    <body>
        …page content…
    </body>
</html>

2. The <head> Section

The <head> contains information that is not displayed directly on the page but is essential for browsers, search engines and other user agents.

  • Document title – defined with <title>; appears in the browser tab and in search results.
  • Character encoding – usually <meta charset="UTF-8"> to ensure correct text display.
  • Metadata – <meta> tags for description, keywords, author, viewport, etc.
  • Links to external resources – stylesheets (<link rel="stylesheet">) and favicons.
  • Scripts that need to load before the page renders – e.g., critical JavaScript placed in the head.

3. The <body> Section

The <body> holds all the content that users see and interact with.

  • Text, headings, paragraphs, lists, tables, etc.
  • Images, audio, video, and other media.
  • Forms for user input.
  • Navigation menus and hyperlinks.
  • Client‑side scripts that manipulate page content after it loads.

4. Comparison of <head> and <body>

Aspect <head> <body>
Purpose Provides metadata and resources for the document. Contains the visible content and interactive elements.
Visibility to user Not displayed on the page. Rendered in the browser window.
Typical elements <title>, <meta>, <link>, <style>, early <script> All content tags: <h1>–<h6>, <p>, <ul>, <table>, <img>, <video>, etc.
Impact on SEO Title, description and keywords influence search rankings. Content relevance and structure affect ranking.
Loading order Parsed first; resources may be pre‑loaded. Parsed after the head; rendered sequentially.

5. Practical Example

Below is a minimal but complete HTML5 page illustrating the head and body sections.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <meta name="description" content="A simple example page for ICT 0417.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This paragraph is part of the <code><body></code> section and will be displayed in the browser.</p>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</body>
</html>

6. Common Mistakes to Avoid

  1. Placing visible content inside the <head> – it will not be shown.
  2. Omitting the <title> tag – browsers will display a generic title and SEO suffers.
  3. Forgetting the character encoding meta tag – can cause garbled text for non‑ASCII characters.
  4. Including large JavaScript files in the head without async/defer – may delay page rendering.

7. Suggested Diagram

Suggested diagram: A labelled block diagram showing the <head> at the top of the document flow and the <body> below it, with arrows indicating “metadata” and “visible content”.

8. Summary

The <head> and <body> sections serve distinct but complementary roles. The head prepares the page for browsers and search engines, while the body delivers the actual user experience. Mastery of both sections is essential for creating well‑structured, accessible, and SEO‑friendly web pages.