Be able to place appropriate elements in the head section of a web page including insert a page title to display in the browser, attach external stylesheets (with the correct hierarchy, using a relative file path), metatags to use the appropriate att

Published by Patrick Mutisya · 8 days ago

Website Authoring – Head Section Elements

21 Website Authoring – Head Section

Learning Objective

Be able to place appropriate elements in the <head> section of a web page, including:

  • Page title that appears in the browser tab

  • Linking external style sheets using a relative file path and correct hierarchy

  • Meta‑tags with the required attributes (charset, name, content)

  • Setting a default target window for hyperlinks

Key Elements of the <head>

  1. Document title – displayed on the browser tab and in search results.

    <title>Your Page Title</title>

  2. Character set declaration – ensures correct text encoding.

    <meta charset="UTF-8">

  3. External stylesheet link – placed after the title for logical reading order.

    <link rel="stylesheet" href="css/style.css">

  4. Meta‑tags for SEO and device handling

    • name="description"

    • name="keywords"

    • name="author"

    • name="viewport"

  5. Base target – defines the default window or tab for all links.

    <base target="_blank">

Correct Hierarchy for Linking Stylesheets

When multiple style sheets are used, the order determines which rules take precedence – later sheets override earlier ones.

OrderElementPurpose
1<title>…</title>Sets the page title.
2<link rel="stylesheet" href="css/reset.css">Reset/normalize styles – base rules.
3<link rel="stylesheet" href="css/layout.css">Layout‑specific rules (grid, columns).
4<link rel="stylesheet" href="css/theme.css">Theme colours and component styles – overrides layout if needed.

Meta‑Tag Syntax

All meta‑tags use the name and content attributes (except charset which is self‑contained).

<meta name="description" content="Brief summary of the page">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Setting a Default Target Window

The <base> element defines the default target for all hyperlinks that do not specify their own target attribute.

  • <base target="_self"> – opens links in the same tab (default behaviour).

  • <base target="_blank"> – opens links in a new tab or window.

  • <base target="_parent"> – opens in the parent frame (relevant for framesets).

Example of a Complete <head> Section

<head>
<meta charset="UTF-8">
<title>My School Project</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<meta name="description" content="A simple web page for IGCSE ICT coursework.">
<meta name="keywords" content="IGCSE, ICT, web design">
<meta name="author" content="Student Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_blank">
</head>

Suggested diagram: Flow of information from the browser to the <head> elements and how each influences rendering.

Quick Revision Checklist

  • Title tag present and meaningful?

  • Charset declared as UTF‑8?

  • External stylesheet linked with a relative path (e.g., css/style.css)?

  • Meta tags for description, keywords, author, and viewport included?

  • Base target set according to the required default behaviour?