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

Resources | Subject Notes | Information Communication Technology ICT

21 Website Authoring: Head and Body Sections

21 Website Authoring: Understanding Head and Body Sections

Introduction

When creating a web page, it's important to understand the fundamental structure. A typical web page is divided into two main sections: the head and the body. These sections serve distinct purposes in how the page is structured and how content is presented to the user.

The Head Section

The <head> section contains meta-information about the HTML document that is not displayed on the page itself. This information is crucial for browsers, search engines, and other websites to understand the page's content and how to handle it.

  • Meta Title: This specifies the title of the page, which appears in the browser's title bar or tab.
  • Character Set: Defines the character encoding used in the document (e.g., UTF-8 for supporting a wide range of characters).
  • Links to Stylesheets: Includes links to external CSS files that define the page's visual appearance. (Note: We are not using external stylesheets in this example).
  • Other Meta Tags: Contains various meta tags for search engines (e.g., description, keywords), viewport settings, and other metadata.

The Body Section

The <body> section contains all the content that will be visible to the user in the browser window. This is where the text, images, videos, and other elements of the web page are placed.

Structure of the Body Section

The content within the <body> section is typically organized using headings, paragraphs, lists, tables, and other HTML elements. A common structure includes:

  • Headings: <h1> to <h6> are used to define headings of different levels.
  • Paragraphs: <p> elements are used to create paragraphs of text.
  • Lists: <ul> (unordered list) and <ol> (ordered list) are used to create lists of items.
  • Tables: <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements are used to create tables.

Example Structure

Here's a simple example of a web page structure demonstrating the head and body sections:

Section Description
<head> Contains meta-information about the HTML document.
<body> Contains all the visible content of the web page.

Purpose Summary

The <head> section provides essential information about the page's identity and behavior, while the <body> section holds the actual content that users see and interact with.