Be able to create the content layer of a web page

Published by Patrick Mutisya · 14 days ago

ICT 0417 – Website Authoring: Creating the Content Layer

1. What is the Content Layer?

The content layer is the part of a web page that holds the actual information a user reads or interacts with. It is created using HTML (HyperText Markup Language) and includes text, headings, lists, tables, links, and embedded media.

2. Basic HTML Structure for the Content Layer

Every HTML document starts with a standard skeleton. Only the <body> section contains the content layer.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
</body>
</html>

3. Text and Headings

Headings organise content into a hierarchy. Use <h1> to <h6> (only <h2> and <h3> are shown here for notes).

Example

<h2>Main Section Title</h2>

<h3>Sub‑section Title</h3>

4. Paragraphs

Paragraphs are created with the <p> element. They automatically add vertical spacing.

5. Lists

Two main types of lists are used in web pages:

  • Unordered list – items without a specific order (<ul>).

  • Ordered list – items that follow a sequence (<ol>).

Example of an unordered list

  • Home

  • About us

  • Contact

Example of an ordered list

  1. Plan the layout

  2. Write the HTML

  3. Test in browsers

6. Tables

Tables organise data in rows and columns. Use <table> together with <thead>, <tbody>, <tr>, <th> and <td>.

TagPurpose
<table>Creates a table container
<thead>Groups header rows
<tbody>Groups body rows
<tr>Defines a table row
<th>Header cell (bold, centred by default)
<td>Standard data cell

Simple table example

DayTopic
MondayHTML basics
WednesdayLists and tables
FridayEmbedding media

7. Hyperlinks

Links connect one page to another or to a specific part of the same page. Use the <a> element with the href attribute.

Example: <a href="https://www.cambridgeinternational.org">Cambridge International</a>

8. Embedding Multimedia

HTML5 provides native tags for audio and video, removing the need for plug‑ins.

  • <audio controls>…</audio> – plays sound files.

  • <video controls width="320">…</video> – plays video files.

9. Semantic Elements (Content Layer)

Semantic tags give meaning to sections of content, helping both users and search engines.

  • <header> – introductory content or navigation links.

  • <nav> – a set of navigation links.

  • <section> – a thematic grouping of content.

  • <article> – self‑contained composition (e.g., a blog post).

  • <aside> – tangentially related content (e.g., a sidebar).

  • <footer> – closing information, such as author details or copyright.

10. Checklist for a Complete Content Layer

  1. Use a clear heading hierarchy (<h2>, <h3>).

  2. Write concise, well‑structured paragraphs.

  3. Choose the appropriate list type (<ul> or <ol>).

  4. Present tabular data with a properly marked‑up table.

  5. Provide meaningful link text and ensure all links work.

  6. Embed audio/video where relevant, using the controls attribute.

  7. Apply semantic elements to improve accessibility and SEO.

  8. Validate the HTML using a validator to catch errors.

Suggested diagram: Flow of creating the content layer – from planning headings, writing paragraphs, adding lists/tables, inserting links, to embedding multimedia.