INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
INTRODUCTION TO HTML
HyperText Markup Language
Complete Basic Notions · All Essential Tags · GCE Exam Ready
Upper Sixth | Computer Science | Cameroon GCE Advanced Level
CHAPTERS COVERED:
1. Chapter 1 — What is HTML?
2. Chapter 2 — HTML Document Structure
3. Chapter 3 — Text Tags — Headings & Paragraphs
4. Chapter 4 — Text Formatting Tags
5. Chapter 5 — Lists — Ordered, Unordered & Definition
6. Chapter 6 — Links (Hyperlinks)
7. Chapter 7 — Images
8. Chapter 8 — Tables
9. Chapter 9 — Forms & User Input
10. Chapter 10 — Colours & Backgrounds
11. Chapter 11 — Div, Span & Layout Tags
12. Chapter 12 — Comments & Special Characters
13. Chapter 13 — GCE Complete Practice Solution
14. Chapter 14 — Full Tag Reference Card
Cameroon GCE Board · HTML Notes Page 1 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 1 — What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create web
pages — every website you visit on the internet was built using HTML as its foundation.
HyperText means text that links to other documents. Markup Language means we use special
codes called tags to describe structure and content.
Key Facts About HTML
• HTML is NOT a programming language — it does not perform calculations or make
decisions.
• HTML is a markup language — it tells the browser WHAT to display and HOW to organise
it.
• HTML files are saved with the .html extension (e.g. [Link], [Link]).
• HTML is read by a web browser (Chrome, Firefox, Edge) which displays the page.
Brief History
HTML was invented by Tim Berners-Lee in 1991. He created it so scientists could share
documents easily over the internet. Today we use HTML5, the most modern version.
How It Works — Code vs Output
HTML Code Browser Output
<h1>Hello World</h1> Hello World (large heading)
<p>This is HTML.</p> This is HTML. (paragraph)
WARNING: HTML files must end in .html — if saved as .txt the browser shows raw code, not a
web page.
TIP: You only need Notepad and a browser. No expensive software required!
Cameroon GCE Board · HTML Notes Page 2 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 2 — HTML Document Structure
Every HTML page MUST follow the same skeleton structure below. Without this, browsers may not
display your page correctly.
The Page Skeleton
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<!-- All visible content goes here -->
<h1>Welcome!</h1>
<p>This is my first page.</p>
</body>
</html>
What Each Part Does
Tag / Attribute Description & Usage
<!DOCTYPE html> Always the FIRST line. Tells the browser this is an HTML5 document.
<html> … </html> The ROOT element. Every other tag lives inside this.
<head> … </head> Contains page INFORMATION for the browser — not visible on screen.
<title> … Sets the name on the BROWSER TAB at the top of the window.
</title>
<body> … </body> Contains ALL VISIBLE content: text, headings, images, lists, tables…
<!-- … --> A COMMENT — ignored by browser, used by developer to leave notes.
NOTE: Think: HEAD = brain (information the browser needs), BODY = everything you can see.
GCE EXAM: The <title> appears on the browser tab — it is DIFFERENT from <h1> which
appears on the page.
Nesting Rules
Tags can be placed inside other tags — this is called nesting. You must always close the inner tag
BEFORE closing the outer tag.
HTML Code Browser Output
CORRECT: b closes before p — GOOD
<p><b>Bold text</b></p>
WRONG: p closes before b — BAD
<p><b>Bold text</p></b> (will cause display errors)
Cameroon GCE Board · HTML Notes Page 3 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
Cameroon GCE Board · HTML Notes Page 4 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 3 — Text Tags — Headings & Paragraphs
Headings — <h1> to <h6>
HTML provides six heading levels. <h1> is the largest and most important; <h6> is the smallest.
<h1>This is Heading 1 (Biggest)</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6 (Smallest)</h6>
Tag / Attribute Description & Usage
<h1> Main page title — use ONCE per page
<h2> Major section headings
<h3> Sub-section headings
<h4> to <h6> Minor headings, rarely needed
GCE EXAM: In GCE exams <h1> is used for the main title of the page. Always use it once.
Paragraphs — <p>
A paragraph is written using <p> tags. The browser adds space above and below automatically.
HTML Code Browser Output
<p>Africa is a large continent.</p> Africa is a large continent.
<p>It has 54 countries.</p>
It has 54 countries.
Line Break — <br>
Use <br> to start a new line WITHOUT creating a new paragraph. Note: <br> has NO closing tag.
HTML Code Browser Output
<p>Line one.<br>Line two.<br>Line Line one.
three.</p> Line two.
Line three.
Horizontal Rule — <hr>
Use <hr> to draw a horizontal dividing line across the page. Also self-closing (no closing tag).
<p>Section 1 content</p>
<hr>
<p>Section 2 content</p>
Centering Content — <center>
HTML Code Browser Output
<center> Welcome to Africa
Cameroon GCE Board · HTML Notes Page 5 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
<h1>Welcome to Africa</h1> (centred on the page)
</center>
GCE EXAM: The <center> tag is fully accepted in GCE exams.
Cameroon GCE Board · HTML Notes Page 6 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 4 — Text Formatting Tags
HTML provides many tags to change the appearance of text — making it bold, italic, underlined,
coloured, and more.
Basic Formatting Tags
Tag / Attribute Description & Usage
<b> … </b> Bold text — makes text thick and dark
<strong> … Bold text (with importance — preferred in HTML5)
</strong>
<i> … </i> Italic text — slanted style
<em> … </em> Italic text with emphasis (preferred in HTML5)
<u> … </u> Underlined text
<s> … </s> Strikethrough text — a line through the text
<mark> … </mark> Highlighted text (yellow background by default)
<small> … Smaller text
</small>
<big> … </big> Bigger text
<sub> … </sub> Subscript — text below the baseline (e.g. H2O)
<sup> … </sup> Superscript — text above the baseline (e.g. x squared)
Examples
HTML Code Browser Output
<b>Bold Text</b> Bold Text
<i>Italic Text</i> Italic Text
<u>Underlined Text</u> Underlined Text
<b><i>Bold and Italic</i></b> Bold and Italic
<s>Crossed Out</s> Crossed Out
<mark>Highlighted</mark> Highlighted (yellow bg)
H<sub>2</sub>O H2O (subscript 2)
x<sup>2</sup> x2 (superscript 2)
The <font> Tag — Colour, Size, Face
The <font> tag controls colour, size, and typeface using attributes:
Tag / Attribute Description & Usage
color="red" Sets text colour. Use names (red, blue) or hex codes (#FF0000).
size="4" Sets text size. Range is 1 (smallest) to 7 (biggest). Default is 3.
face="Arial" Sets font typeface. e.g. Arial, Verdana, Times New Roman, Courier New.
HTML Code Browser Output
<font color="red">Red Text</font> Red coloured text
<font size="6">Big Text</font> Large text
<font face="Arial">Arial Font</font> Text in Arial font
Cameroon GCE Board · HTML Notes Page 7 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
<font color="blue" size="4" Blue, size 4,
face="Verdana"> Verdana font
Combined styling (all combined)
</font>
GCE EXAM: In GCE exams, <font> is accepted. In real web development, HTML5 uses CSS for
styling instead.
Cameroon GCE Board · HTML Notes Page 8 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 5 — Lists — Ordered, Unordered & Definition
Lists group related items. HTML has three types, each with a specific purpose.
Unordered List — <ul>
Displays items with bullet points (•). Use when ORDER does NOT matter.
HTML Code Browser Output
<ul> • Mango
<li>Mango</li> • Orange
<li>Orange</li> • Banana
<li>Banana</li>
</ul>
Ordered List — <ol>
Displays items numbered 1, 2, 3 … Use when ORDER matters (steps, rankings).
HTML Code Browser Output
<ol> 1. Egypt
<li>Egypt</li> 2. Morocco
<li>Morocco</li> 3. Libya
<li>Libya</li> 4. Tunisia
<li>Tunisia</li>
</ol>
GCE EXAM: The GCE 2021 question asked for an ORDERED list. Writing <ul> instead of <ol>
loses marks!
Ordered List Type Attribute
Tag / Attribute Description & Usage
type="1" Numbers: 1, 2, 3 … (default)
type="A" Uppercase letters: A, B, C …
type="a" Lowercase letters: a, b, c …
type="I" Uppercase Roman numerals: I, II, III …
type="i" Lowercase Roman numerals: i, ii, iii …
type="disc" Bullet: filled circle • (default for ul)
type="circle" Bullet: empty circle ○
type="square" Bullet: filled square ■
Nested Lists — List Inside a List
<ol>
<li>Africa
<ul>
<li>Egypt</li>
<li>Nigeria</li>
</ul>
</li>
Cameroon GCE Board · HTML Notes Page 9 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
<li>Asia</li>
</ol>
Definition List — <dl>
Pairs terms with their definitions. Uses three tags together:
Tag / Attribute Description & Usage
<dl> … </dl> Definition List container
<dt> … </dt> Definition Term (the word being defined)
<dd> … </dd> Definition Description (the meaning)
HTML Code Browser Output
<dl> HTML
<dt>HTML</dt> HyperText Markup Language
<dd>HyperText Markup Language</dd> CSS
<dt>CSS</dt> Cascading Style Sheets
<dd>Cascading Style Sheets</dd>
</dl>
Cameroon GCE Board · HTML Notes Page 10 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 6 — Links — Hyperlinks with <a>
Links are what make the web hypertext — they connect one page to another. The tag for a link is
<a> (stands for anchor).
Basic Syntax
<a href="URL"> Clickable Text </a>
The href attribute (Hypertext Reference) contains the address the link points to.
Tag / Attribute Description & Usage
href="URL" REQUIRED. The address/destination of the link.
target="_blank" Opens link in a NEW tab/window.
target="_self" Opens in the SAME tab (default).
title="text" Shows a tooltip when mouse hovers over the link.
Types of Links
1. External Link — another website
<a href="[Link] target="_blank">BBC News</a>
2. Internal Link — another page on same site
<a href="[Link]">About Us</a>
3. Email Link — opens email program
<a href="[Link] Us</a>
4. Anchor Link — jumps to a section on same page
<!-- Define the target -->
<h2 id="section2">Chapter 2</h2>
<!-- Link to it -->
<a href="#section2">Go to Chapter 2</a>
5. Image as a Link
<a href="[Link] src="[Link]"></a>
NOTE: By default links are blue and underlined. Visited links turn purple. These can be changed
with CSS.
Cameroon GCE Board · HTML Notes Page 11 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 7 — Images — <img>
Images are added using the <img> tag. It is a self-closing tag — it has NO closing tag.
Basic Syntax
<img src="[Link]" alt="Description of image">
Image Attributes
Tag / Attribute Description & Usage
src="filename" REQUIRED. The path/URL of the image file.
alt="text" REQUIRED. Alternative text if image cannot load.
width="200" Sets width in pixels.
height="150" Sets height in pixels.
border="2" Adds a border. Number = thickness in pixels.
align="center" Aligns image: left, right, center, top, bottom.
title="text" Tooltip shown when mouse hovers over image.
Examples
<!-- Basic image -->
<img src="[Link]" alt="A photo">
<!-- With size -->
<img src="[Link]" alt="School logo" width="200" height="100">
<!-- With border and alignment -->
<img src="[Link]" alt="Africa map" width="300" border="3" align="center">
<!-- Image from the internet -->
<img src="[Link] alt="Online image">
Image File Formats
Tag / Attribute Description & Usage
JPEG Photographs, realistic images
(.jpg .jpeg)
PNG (.png) Images with transparent backgrounds, logos
GIF (.gif) Simple animations, icons
GCE EXAM: Always include alt text — the GCE examiner may check for it. It also helps visually
impaired users.
Cameroon GCE Board · HTML Notes Page 12 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 8 — Tables
Tables display data in rows and columns — like a spreadsheet. Multiple tags work together.
Table Tags
Tag / Attribute Description & Usage
<table> … Creates the TABLE container.
</table>
<tr> … </tr> Table Row — one horizontal row.
<th> … </th> Table Header cell — bold and centred by default.
<td> … </td> Table Data cell — a regular cell.
<caption> … Table title shown above the table.
</caption>
Table Attributes
Tag / Attribute Description & Usage
border="1" Adds a visible border. 0 = no border (default).
width="500" Total table width in pixels or %.
cellpadding="5" Space INSIDE each cell.
cellspacing="3" Space BETWEEN cells.
bgcolor="colour" Background colour of the table.
align="center" Aligns the table: left, center, right.
colspan="2" Cell spans across 2 columns (in <td> or <th>).
rowspan="2" Cell spans across 2 rows (in <td> or <th>).
Complete Table Example
<table border="1" width="400" cellpadding="5">
<caption>African Countries</caption>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population</th>
</tr>
<tr>
<td>Egypt</td>
<td>Cairo</td>
<td>104 million</td>
</tr>
<tr>
<td>Nigeria</td>
<td>Abuja</td>
<td>218 million</td>
</tr>
</table>
Cameroon GCE Board · HTML Notes Page 13 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
Colspan & Rowspan Example
<table border="1">
<tr>
<th colspan="2">Full Name</th> <!-- spans 2 columns -->
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>17</td>
</tr>
</table>
GCE EXAM: A common exam question asks you to create a table with headers. Always use
<th> for the header row.
Cameroon GCE Board · HTML Notes Page 14 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 9 — Forms — Collecting User Input
Forms allow users to enter information — login details, searches, registration data — and send it to
a server.
The <form> Tag
<form action="[Link]" method="post">
... inputs here ...
</form>
Tag / Attribute Description & Usage
action="URL" Where to SEND the form data when submitted.
method="post" Sends data securely (hidden from URL). Use for passwords.
method="get" Sends data in the URL. Visible. Use for search boxes.
The <input> Tag and Its Types
Tag / Attribute Description & Usage
type="text" Single-line text box. For names, usernames.
type="password" Password box — characters appear as dots.
type="email" Email address field with basic format validation.
type="number" Accepts only numbers.
type="date" Date picker calendar.
type="checkbox" Tick box — allows multiple selections.
type="radio" Radio button — allows ONE choice from a group.
type="submit" Submit button — sends the form.
type="reset" Reset button — clears all fields.
type="button" A plain button (no built-in action).
type="file" File upload button.
type="hidden" Hidden field — not visible, sends data automatically.
Other Form Elements
Tag / Attribute Description & Usage
<textarea> Multi-line text input area.
<select> Dropdown selection menu.
<option> Each item inside a <select> dropdown.
<label> A descriptive label for an input field.
<button> A clickable button.
<fieldset> Groups related form elements with a box.
<legend> Caption for a <fieldset> group.
Cameroon GCE Board · HTML Notes Page 15 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
Complete Form Example
<form action="[Link]" method="post">
<label>Full Name:</label><br>
<input type="text" name="fullname" size="30"><br><br>
<label>Password:</label><br>
<input type="password" name="pass"><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Subjects:</label><br>
<input type="checkbox" name="maths"> Mathematics
<input type="checkbox" name="ict"> ICT<br><br>
<label>Country:</label>
<select name="country">
<option value="cm">Cameroon</option>
<option value="ng">Nigeria</option>
</select><br><br>
<label>Message:</label><br>
<textarea name="msg" rows="4" cols="40"></textarea><br><br>
<input type="submit" value="Send Form">
<input type="reset" value="Clear All">
</form>
WARNING: Radio buttons in a group MUST have the same name attribute — otherwise multiple
can be selected!
Cameroon GCE Board · HTML Notes Page 16 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 10 — Colours & Backgrounds
Page Background Colour
<body bgcolor="lightblue">
Page Background Image
<body background="[Link]">
Colour Values in HTML
Tag / Attribute Description & Usage
Colour Name Use the English name: red, blue, green, grey, white, black, yellow, pink, orange,
purple…
Hex Code A 6-digit code starting with #. Examples: #FF0000=red #00FF00=green
#0000FF=blue #FFFFFF=white #000000=black
RGB Value rgb(255, 0, 0) = red. Three numbers 0 to 255 for Red, Green, Blue.
Common Colour Names and Hex Codes
white #FFFFFF black #1A1A1A red #CC0000 blue #1565C0
green #2E7D32 yellow #F9A825 orange #E65100 grey #757575
lightblue #ADD8E6 pink #F48FB1 purple #6A1B9A brown #6D4C41
Colours in Tables — Row and Cell Colours
<table border="1">
<tr bgcolor="yellow"> <!-- entire row -->
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td bgcolor="lightgreen">Alice</td> <!-- single cell -->
<td>95</td>
</tr>
</table>
NOTE: The bgcolor attribute works on <body>, <table>, <tr>, <td>, and <th>.
Cameroon GCE Board · HTML Notes Page 17 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 11 — Div, Span & Layout Tags
As pages grow, you need ways to group and organise sections of content. HTML provides two
essential grouping tags.
<div> — Block-level Container
<div> stands for Division. It creates a block container — takes up the full width and always starts
on a new line.
HTML Code Browser Output
<div style="background:lightblue; [Light blue box]
padding:10px;"> Section Title (bold, large)
<h2>Section Title</h2> Some text here.
<p>Some text here.</p>
</div>
<span> — Inline Container
<span> is an inline container — stays within the line of text. Use it to style just a few words.
HTML Code Browser Output
<p>Africa has <span Africa has 54 countries.
style="color:red;">54</span> (the number 54 appears in red)
countries.</p>
Difference Between <div> and <span>
Feature <div> <span>
Type Block-level Inline
New line? Yes — starts on new line No — stays in same line
Use for… Sections, large groups Words, phrases, icons
HTML5 Semantic Layout Tags
HTML5 introduced tags that describe the role of each section — called semantic tags.
Tag / Attribute Description & Usage
<header> Top section — logo, title, navigation menu
<nav> Navigation menu / links bar
<main> Main content area of the page
<section> A distinct section of content
<article> An independent piece of content (blog post, news)
<aside> Side content — adverts, related links, extra info
<footer> Bottom section — copyright, contact info
NOTE: Semantic tags make pages easier for search engines and screen readers to understand.
Cameroon GCE Board · HTML Notes Page 18 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 12 — Comments & Special Characters (Entities)
HTML Comments
A comment is text the browser completely ignores. It is ONLY for the developer — to explain code
or temporarily disable it.
<!-- This is a comment. The browser ignores this. -->
<!-- TODO: Add image here -->
<h1>Welcome</h1>
<!-- Disabled paragraph:
<p>Old paragraph text</p>
-->
TIP: Use comments to explain your code. Very useful in long HTML pages.
Special Characters — HTML Entities
Some characters have special meaning in HTML (like < and > used for tags). To display them on
screen, use HTML entities — codes starting with & and ending with ;
Tag / Attribute Description & Usage
< < — Less-than sign <
> > — Greater-than sign >
& & — Ampersand &
— Non-breaking space (extra space)
" " — Quotation mark "
' ' — Apostrophe '
© © — Copyright symbol ©
® ® — Registered trademark ®
™ ™ — Trademark symbol ™
€ € — Euro sign €
£ £ — Pound sign £
Using Entities in Code
HTML Code Browser Output
<p>5 < 10 means 5 is less than 5 < 10 means 5 is less than 10.
10.</p> Press <Enter> to continue.
<p>Press <Enter> to Copyright © 2024 My School
continue.</p> Use for extra spaces.
<p>Copyright © 2024 My
School</p>
<p>Use for extra
spaces.</p>
Cameroon GCE Board · HTML Notes Page 19 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 13 — GCE 2021 COMPLETE PRACTICE SOLUTION
The 2021 GCE Computer Science paper asked students to create an HTML page called [Link]
with these specific requirements:
No. Requirement HTML Solution
1 Page title: Arab <title>Arab</title> inside <head>
2 Grey background colour <body bgcolor="grey">
3 Centred H1 heading <center><h1>…</h1></center>
4 Paragraph of text <p>…text…</p>
5 Ordered list of 4 countries <ol> with four <li> items
Complete annotated solution — every line explained:
<!DOCTYPE html> <!-- Line 1: declare HTML5 -->
<html> <!-- Line 2: start of page -->
<head> <!-- Head: info for browser -->
<title>Arab</title> <!-- Req.1: title on browser tab -->
</head>
<body bgcolor="grey"> <!-- Req.2: grey background -->
<center> <!-- Req.3: centre the heading -->
<h1>Four African Arab Countries</h1>
</center>
<p> <!-- Req.4: paragraph -->
The African Arab countries are found in
the northern part of Africa.
The Arab countries are given below.
</p>
<ol> <!-- Req.5: ordered list -->
<li>Egypt</li>
<li>Morocco</li>
<li>Libya</li>
<li>Tunisia</li>
</ol>
</body>
</html>
GCE EXAM: Save the file as [Link] — go to File → Save As → set 'Save as type' to All Files
→ type [Link] → click Save.
Common Exam Mistakes — Avoid These!
WRONG ✗ CORRECT ✓
Saving file as [Link] Save as [Link] using All Files
Title placed inside <body> <title> must be inside <head>
Cameroon GCE Board · HTML Notes Page 20 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
Using <ul> for numbered list Use <ol> for ordered/numbered lists
Not closing tags: <p>text Always close: <p>text</p>
Forgetting bgcolor on <body> <body bgcolor="grey"> exactly
Writing content outside <body> ALL visible content inside <body>
Missing <html> or </html> Always open AND close the <html> tag
Cameroon GCE Board · HTML Notes Page 21 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
CHAPTER 14 — COMPLETE HTML TAG REFERENCE CARD
Document Structure
Tag Purpose
<!DOCTYPE html> Declares HTML5 document type — always first line
<html> Root element — wraps everything
<head> Browser information section (not visible)
<title> Page name shown on browser tab
<body> All visible content goes here
<meta> Page metadata (charset, description, author)
<!-- comment --> Developer comment — browser ignores it
Text & Headings
Tag Purpose
<h1> to <h6> Headings — h1 largest, h6 smallest
<p> Paragraph of text
<br> Line break (self-closing, no closing tag)
<hr> Horizontal rule / dividing line (self-closing)
<center> Centres content horizontally
<pre> Preformatted text — preserves spaces and line breaks
<blockquote> Indented quote block
<q> Inline short quotation (adds quote marks)
<abbr> Abbreviation or acronym
<address> Contact / address information
Text Formatting
Tag Purpose
<b> / <strong> Bold text
<i> / <em> Italic text
<u> Underlined text
<s> / <del> Strikethrough text
<mark> Highlighted text
<small> / <big> Smaller / bigger text
<sub> Subscript (below baseline)
<sup> Superscript (above baseline)
<code> Inline code (monospace font)
<font> Text colour, size, face (GCE accepted)
<span> Inline grouping container
Lists
Tag Purpose
<ul> Unordered list (bullet points)
Cameroon GCE Board · HTML Notes Page 22 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
<ol> Ordered list (numbered)
<li> List item (used inside ul or ol)
<dl> Definition list
<dt> Definition term
<dd> Definition description
Links & Images
Tag Purpose
<a href="URL"> Hyperlink — anchor tag
<img src="file"> Image (self-closing tag)
Tables
Tag Purpose
<table> Table container
<tr> Table row
<th> Table header cell (bold, centred by default)
<td> Table data cell
<caption> Table title / caption
<thead> Table header group (HTML5)
<tbody> Table body group (HTML5)
<tfoot> Table footer group (HTML5)
Forms
Tag Purpose
<form> Form container
<input> Input field (many types: text, password, checkbox, radio, submit, reset, file…)
<textarea> Multi-line text area
<select> Dropdown selection menu
<option> Option inside a <select> menu
<label> Label for an input field
<button> Clickable button
<fieldset> Groups related form elements with a box
<legend> Caption for a <fieldset> group
Layout & Grouping
Tag Purpose
<div> Block-level grouping container
<span> Inline grouping container
<header> Page/section header (HTML5 semantic)
<nav> Navigation links (HTML5 semantic)
<main> Main content area (HTML5 semantic)
<section> Page section (HTML5 semantic)
Cameroon GCE Board · HTML Notes Page 23 of 24
INTRODUCTION TO HTML — Complete GCE Notes Upper Sixth | Computer Science
<article> Independent content block (HTML5 semantic)
<aside> Side content (HTML5 semantic)
<footer> Page footer (HTML5 semantic)
These notes cover all basic HTML notions required for the Cameroon GCE Advanced Level Computer
Science examination. Good luck! Study hard and revise regularly.
Cameroon GCE Board · HTML Notes Page 24 of 24