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

21 Website Authoring: Head & Body Sections

What is the <head>?

The <head> is like the front desk of a library. It holds all the information that tells the browser how to prepare the page before showing the content. Inside the head you find:

  • <title> – the page’s title that appears in the browser tab.
  • <meta> – extra data like language, description, and keywords.
  • <link> – links to stylesheets (CSS) or favicons.
  • <script> – scripts that run before the page is fully loaded.

What is the <body>?

The <body> is the main room of the library where the books (content) are displayed. It contains everything the user sees and interacts with: text, images, videos, forms, and more. Think of it as the “stage” where the story unfolds.

Why do we need them?

- Organisation: Keeps metadata separate from visible content. - Performance: Browsers load the head first, so they know how to render the body efficiently. - SEO & Accessibility: Search engines read the head for titles and descriptions; screen readers use meta tags for context.

Exam Tip Box

Remember: When answering “Explain the purpose of the head and body sections”, mention:
  1. The head contains metadata and resources (title, meta, link, script).
  2. The body contains visible content that users interact with.
  3. Both sections are required for a valid HTML document.
Tip: Use the library analogy to illustrate the separation of “information” and “content”.

Quick Comparison Table

Section What It Holds Why It Matters
<head> Metadata, title, links, scripts. Prepares the browser, improves SEO, loads resources.
<body> Visible content: text, images, forms, etc. What the user sees and interacts with.

Practical Example

Here’s a minimal page skeleton: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello, world! 🌍</h1>
    <p>This is a simple example of head and body sections.</p>
  </body>
</html>

Final Exam Reminder

Checklist:
  • Identify the <head> and <body> tags in a given HTML snippet.
  • Explain at least three elements that belong in the head.
  • Describe how the body is rendered by the browser.
Good luck! 🚀

Revision

Log in to practice.

2 views 0 suggestions