COMPUTER STUDIES SYLLA BUS

The Complete
HTML Roadmap
A comprehensive, beginner-friendly guide to
HyperText Markup Language and the World Wide Web

BASED ON SENIOR SECONDARY SCHOOL

COMPUTER STUDIES CURRICULUM
Contents

1. The Foundation: Understanding the Web

1.1 What is the World Wide Web (WWW)?
1.2 What is HTML?
1.3 What is HTTP?
1.4 How HTML, HTTP & Browsers Work Together
1.5 Web Browsers: Types & Features

2. Getting Started with HTML

2.1 What is a Markup Language?
2.2 HTML Document Structure
2.3 Basic Syntax Rules
2.4 Creating Your First HTML File

3. Core HTML Elements: Text & Formatting

3.1 Heading Tags (h1 - h6)
3.2 Paragraphs & Line Breaks
3.3 Text Formatting Tags
3.4 Special Characters & HTML Entities

4. Links & Navigation

4.1 Understanding Hyperlinks
4.2 Linking to Other Pages
4.3 Linking Within the Same Page
4.4 Opening Links in New Tabs

5. Images & Multimedia

5.1 Adding Images to Your Page
5.2 Image Attributes Explained
5.3 Adding Audio & Video
6. Structuring Content: Lists
6.1 Unordered Lists
6.2 Ordered Lists
6.3 Definition Lists

7. Tables
7.1 Creating Tables
7.2 Table Headers, Rows & Cells
7.3 Spanning Rows & Columns

8. HTML Forms
8.1 Understanding Forms
8.2 Input Types
8.3 Labels, Textareas & Select Menus
8.4 Form Submission

9. Semantic HTML5
9.1 What is Semantic HTML?
9.2 Key Semantic Elements
9.3 Page Layout with Semantic Elements

10. Advanced Topics

10.1 Meta Tags & SEO
10.2 The div and span Elements
10.3 HTML Comments
10.4 Best Practices & Common Mistakes

11. Your Learning Path Forward

1. The Foundation: Understanding the Web

1. The Foundation: Understanding the Web

Before we dive into writing HTML code, it is essential to understand the bigger picture: how the
internet works, what role HTML plays, and how all the pieces fit together. Think of HTML as the
language that gives structure to everything you see on websites, from news articles to social
media feeds.

1.1 What is the World Wide Web (WWW)?

D EFI N I T I ON

World Wide Web (WWW) -- commonly called "the Web" -- is a system of interconnected
documents and resources that are accessed through the internet. It was invented by Sir
Tim Berners-Lee in 1989 while working at CERN in Switzerland.

The Web is not the same as the internet. The internet is the global network of connected
computers -- the infrastructure. The Web is a service that runs on top of the internet, allowing us
to view web pages using browsers. Other internet services include email, file sharing (FTP), and
instant messaging.

K EY T ER M S Y OU M U S T K N OW

Webpage -- A single document written in HTML that can be viewed in a browser.

Website -- A collection of related webpages grouped together under one domain name.
Homepage -- The main or first page of a website (usually named [Link]).
Browser -- A software program used to access and view webpages (Chrome, Firefox,
Safari).
URL -- The address you type to visit a webpage (e.g., [Link]).
Hyperlink -- A clickable element that takes you from one webpage to another.

4
1. The Foundation: Understanding the Web

1.2 What is HTML?

D EFI N I T I ON ( S Y L L A B U S R EQU I R EM EN T )

HTML stands for HyperText Markup Language. It is the standard language used to create
and structure content on webpages. HTML is not a programming language -- it is a markup
language, which means it uses special codes called "tags" to describe the structure of a
document.

Let us break down the name:

HyperText -- Text that contains links (hyperlinks) to other documents. Clicking a link "hyper-
jumps" you to another page.
Markup -- The process of annotating text with special codes (tags) to define its structure and
meaning.
Language -- A system of rules and symbols used to communicate instructions.
Think of HTML as the skeleton of a webpage. Just as your skeleton gives your body structure,
HTML gives structure to web content -- defining what is a heading, what is a paragraph, what is
an image, and so on.

W H Y H T M L M AT T ER S

Every website you visit -- from Google to Instagram to Wikipedia -- uses HTML as its
foundation. Without HTML, browsers would not know how to display text, images, links, or
any content. Learning HTML is your first step into the world of web development.

1.3 What is HTTP?

D EFI N I T I ON ( S Y L L A B U S R EQU I R EM EN T )

HTTP stands for HyperText Transfer Protocol. It is the set of rules that allows web
browsers and web servers to communicate with each other. When you type a web address
and press Enter, your browser sends an HTTP request to the server, and the server
responds by sending back the HTML file.

Think of HTTP as the postal service of the web. When you want to visit a website:
1. Your browser (the client) writes a "letter" requesting a webpage

5
1. The Foundation: Understanding the Web

2. The letter travels through the internet to the web server

3. The server reads your request and sends back the HTML file
4. Your browser reads the HTML and displays the webpage
HTTP vs HTTPS: HTTPS (the "S" stands for "Secure") is the encrypted version of HTTP. It
protects data sent between your browser and the server, which is why you should always look for
the padlock icon when entering passwords or credit card information.

1.4 How HTML, HTTP & Browsers Work Together

These three technologies work as a team to bring webpages to your screen:

Table 1 How the Web Technologies Connect

Technology Role Analogy

HTML Creates and structures the content The blueprint of a house

HTTP Transports files between server and browser The delivery truck

Web Browser Reads HTML and displays it visually The builder who reads the blueprint

Web Server Stores website files and responds to requests The warehouse storing materials

Here is the process in action when you visit a website:

S T E P- B Y- S T E P: L O ADI N G A WE B PAGE

Step 1: You type [Link] in your browser

Step 2: The browser sends an HTTP request to the server hosting that website
Step 3: The server finds the HTML file and sends it back via HTTP response
Step 4: The browser reads the HTML code and renders (displays) the webpage
Step 5: If the HTML references images, CSS, or other files, the browser requests those too

1.5 Web Browsers: Types & Features

A web browser is software that interprets HTML code and displays it as a visual webpage.
Different browsers may display the same HTML slightly differently, which is why web developers
test their work in multiple browsers.

6
1. The Foundation: Understanding the Web

Major Web Browsers

Table 2 Popular Web Browsers

Browser Developer Key Feature

Google Chrome Google Fast, extensive extensions, developer tools

Mozilla Firefox Mozilla Privacy-focused, highly customizable

Microsoft Edge Microsoft Built into Windows, good performance

Apple Safari Apple Optimized for Apple devices, energy efficient

Opera Opera Software Built-in VPN, battery saver mode

Common Features of Web Browsers

All modern browsers share several standard features (as noted in your syllabus):
Title Bar -- Displays the title of the current webpage
Address Bar -- Where you type the website URL
Navigation Buttons -- Back, Forward, Refresh, and Home buttons
Bookmarks/Favorites -- Save pages for quick access later
Tabs -- Open multiple webpages in one window
Developer Tools -- Built-in features for viewing and editing HTML code

7
2. Getting Started with HTML

2. Getting Started with HTML

Now that you understand how the web works, it is time to start writing HTML. In this section, you
will learn the basic rules and create your very first webpage.

2.1 What is a Markup Language?

D EFI N I T I ON

A markup language is a system of annotating a document in a way that is syntactically

distinguishable from the text. In simpler terms, it uses special codes (called tags) wrapped
around content to tell the computer what that content is and how it should be displayed.

Think of markup like proofreading marks an editor uses on a manuscript. The editor circles a word
and writes "bold" in the margin -- that is markup. HTML does the same thing with tags: it marks
certain text as a heading, other text as a paragraph, and so on.

2.2 HTML Document Structure

Every HTML document follows a standard structure. Think of it as a template that browsers
expect:

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>

8
2. Getting Started with HTML

Understanding Each Part

Table 3 HTML Document Structure Explained

Element Purpose Required?

<!DOCTYPE html> Tells the browser this is an HTML5 document Yes

<html> The root element that wraps all HTML content Yes

<head> Contains metadata (information about the page) Yes

<title> Sets the text that appears in the browser tab Yes

<body> Contains all the visible content of the webpage Yes

A N AT OM Y OF A N H T M L EL EM EN T

An HTML element consists of three parts:

<tagname>Content goes here</tagname>

Opening tag -- <tagname> marks where the element begins

Content -- The text or other elements inside the tag
Closing tag -- </tagname> marks where the element ends (note the forward slash)

2.3 Basic Syntax Rules

HTML follows specific rules that you must learn. Breaking these rules can cause your page to
display incorrectly.

Rule 1: Tags are enclosed in angle brackets

<h1>This is correct</h1>
h1 This is wrong h1

Rule 2: Closing tags have a forward slash

<p>This is a paragraph.</p>
<p>This is wrong because it has no closing tag

9
2. Getting Started with HTML

Rule 3: Tags can be nested but not overlapped

<p><strong>This is correct nesting</strong></p>

<p><strong>This is wrong nesting</p></strong>

Rule 4: HTML is not case-sensitive but lowercase is standard

<h1>Recommended: lowercase</h1>
<H1>Works but not standard</H1>

Rule 5: Some tags are self-closing

Certain elements do not have closing tags because they do not wrap around content:

<br> -- Line break

<hr> -- Horizontal rule (divider line)
<img> -- Image
<input> -- Form input field

2.4 Creating Your First HTML File

You do not need any special software to write HTML -- just a simple text editor.

S T E P- B Y- S T E P: CR E AT I N G Y O UR F I R S T PAGE

Step 1: Open Notepad (Windows) or TextEdit (Mac, set to plain text)

Step 2: Type the HTML structure shown above
Step 3: Save the file as [Link] (make sure it ends with .html, not .txt)
Step 4: Double-click the file to open it in your web browser
Step 5: You should see "Hello, World!" displayed in the browser window

10
3. Core HTML Elements: Text & Formatting

3. Core HTML Elements: Text & Formatting

Text is the foundation of most web content. HTML provides various tags to structure and format
text, making it readable and meaningful. This section covers every text-related element you need
to master.

3.1 Heading Tags (h1 - h6)

Headings define the hierarchy of your content. They work like the headings in a book or report:

Table 4 HTML Heading Levels

Tag Usage Relative Size

<h1> Main title of the page (use only once) Largest

<h2> Major section headings Large

<h3> Subsection headings Medium

<h4> Sub-subsection headings Small

<h5> Minor headings Smaller

<h6> Least important headings Smallest

<h1>The Solar System</h1>

<h2>The Inner Planets</h2>
<h3>Mercury</h3>
<p>Mercury is the closest planet to the Sun.</p>
<h3>Venus</h3>
<p>Venus is the hottest planet in our solar system.</p>

11
3. Core HTML Elements: Text & Formatting

I M P OR TA N T N OT ES ON H EA D I N G S

Only one h1 per page. The h1 tag represents the main topic of the entire page. Using
multiple h1 tags confuses search engines.
Do not skip levels. After an h2, use h3 for subsections -- do not jump to h4. This maintains
a clear content hierarchy.
Headings are not for styling. Do not use h1 just to make text big, or h6 to make text small.
Use headings to describe structure, and CSS for styling.

3.2 Paragraphs & Line Breaks

Paragraphs: <p>
The paragraph tag is the most basic block of text content. Browsers automatically add space
before and after paragraphs:

<p>This is the first paragraph. It can contain multiple sentences and will
automatically wrap to a new line when it reaches the edge of the browser window.</p>

<p>This is the second paragraph. Notice the space between this and the paragraph
above.</p>

Line Breaks: <br>

When you need to start a new line without creating a new paragraph (and the extra spacing that
comes with it), use the line break tag:

<p>Line One<br>
Line Two<br>
Line Three</p>

Horizontal Rules: <hr>

This creates a horizontal line across the page, useful for separating sections:

<h2>Chapter 1</h2>
<p>Content of chapter 1...</p>
<hr>
<h2>Chapter 2</h2>
<p>Content of chapter 2...</p>

12
3. Core HTML Elements: Text & Formatting

3.3 Text Formatting Tags

HTML provides tags to give text special meaning and appearance. These are divided into logical
(semantic) tags and physical tags:

Table 5 HTML Text Formatting Tags

Tag Visual Effect Meaning Example

<strong> Bold Strong importance <strong>Warning!</strong>

<em> Italic Emphasis <em>This is important</em>

<mark> Highlighted Marked/highlighted text <mark>Search this term</mark>

<small> Smaller text Fine print, disclaimers <small>Terms apply</small>

<del> Strikethrough Deleted text <del>Was $100</del>

<ins> Underlined Inserted text <ins>Now $80</ins>

<sub> Subscript Chemical formulas H₂O

<sup> Superscript Exponents, dates x²

3.4 Special Characters & HTML Entities

Some characters have special meaning in HTML (like < and > which define tags). To display
these characters as text, you use HTML entities:

13
3. Core HTML Elements: Text & Formatting

Table 6 Common HTML Entities

Character Entity Code Usage

< (less than) &lt; Displaying code examples

> (greater than) &gt; Displaying code examples

& (ampersand) &amp; Displaying "&" in text

" (double quote) &quot; Inside attributes

" (non-breaking space) &nbsp; Space that prevents line breaks

© (copyright) &copy; Copyright notices

® (registered) &reg; Trademark symbols

14
4. Links & Navigation

4. Links & Navigation

Links are what make the web a "web" -- they connect pages together. Without links, every
webpage would be an isolated island. This section teaches you everything about creating and
managing hyperlinks.

4.1 Understanding Hyperlinks

D EFI N I T I ON

A hyperlink (or link) is a clickable element on a webpage that takes the user to another
location. This location can be another webpage, a different section of the same page, a file,
or even an email composition window.

The anchor tag <a> creates links. The href attribute specifies the destination:

<a href="[Link] here to visit Example</a>

4.2 Linking to Other Pages

Absolute URLs (External Links)
Use a complete URL starting with http:// or https:// to link to pages on other websites:

<a href="[Link] Wikipedia</a>

<a href="[Link] to Google</a>

Relative URLs (Internal Links)

When linking to pages on your own website, you can use shorter paths:

<!-- Link to a file in the same folder -->

<a href="[Link]">About Us</a>

<!-- Link to a file in a subfolder -->

<a href="products/[Link]">Product Details</a>

<!-- Link to a file in a parent folder -->

<a href="../[Link]">Back to Home</a>

15
4. Links & Navigation

4.3 Linking Within the Same Page

You can create links that jump to specific sections within the same page. This is useful for long
pages with a table of contents:

<!-- Create a link to a section -->

<a href="#section2">Jump to Section 2</a>

<!-- Mark the destination with an id attribute -->

<h2 id="section2">Section 2</h2>
<p>This is the content of section 2...</p>

4.4 Opening Links in New Tabs

The target attribute controls how the linked page opens:

Table 7 Link Target Options

Target Value Behavior

_self Opens in the same tab (default)

_blank Opens in a new tab or window

_parent Opens in the parent frame

_top Opens in the full browser window

<!-- This link opens in a new tab -->

<a href="[Link] target="_blank">Open in New Tab</a>

B ES T P R A C T I C E FOR EX T ER N A L L I N K S

When linking to external websites, always use target="_blank" so visitors do not leave
your site. For links within your own site, use the default (same tab) for a smoother user
experience.

16
5. Images & Multimedia

5. Images & Multimedia

A webpage with only text would be boring. Images, audio, and video make content engaging and
help communicate information more effectively. This section covers how to embed all types of
media.

5.1 Adding Images to Your Page

The <img> tag embeds images. It is a self-closing tag that requires at least two attributes:

<img src="[Link]" alt="A description of the image">

Image Attributes Explained

Table 8 Image Tag Attributes

Attribute Purpose Required? Example

src Source path or URL of the image file Yes src="[Link]"

alt Alternative text (describes image for screen Yes alt="Golden retriever
readers) puppy"

width Width of image in pixels No width="300"

heigh Height of image in pixels No height="200"

t

title Tooltip text on hover No title="My Vacation

Photo"

5.2 Image File Formats

Different image formats serve different purposes:

17
5. Images & Multimedia

Table 9 Web Image Formats

Format Best For Features

JPEG (.jpg) Photographs Compressed, smaller file size, no transparency

PNG (.png) Graphics, logos, icons Supports transparency, lossless quality

GIF (.gif) Simple animations Supports animation, limited colors (256)

SVG (.svg) Icons, logos, illustrations Scalable without losing quality, code-based

WebP (.webp) All purposes Modern format, smaller files, supports transparency

5.3 Adding Audio & Video

Audio: <audio>

<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>

The controls attribute adds play, pause, and volume buttons. Multiple <source> tags provide
fallback formats.

Video: <video>

<video width="400" height="300" controls poster="[Link]">

<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video element.
</video>

The poster attribute specifies an image to show before the video plays.

18
5. Images & Multimedia

W H Y P R OV I D E M U LT I P L E S OU R C E FOR M AT S ?

Different browsers support different media formats. By providing multiple <source> tags,
you ensure your audio or video will play on all browsers. The browser tries each source in
order and uses the first one it supports.

19
6. Structuring Content: Lists

6. Structuring Content: Lists

Lists are one of the most common ways to organize information on webpages. HTML supports
three types of lists, each serving a different purpose.

6.1 Unordered Lists

Unordered lists use bullet points. They are for items where the order does not matter:

<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
<li>Butter</li>
</ul>

Renders as:

Milk
Eggs
Bread
Butter

6.2 Ordered Lists

Ordered lists use numbers or letters. Use them when the sequence matters:

<ol>
<li>Preheat oven to 180 degrees</li>
<li>Mix flour and sugar in a bowl</li>
<li>Add eggs and milk</li>
<li>Bake for 25 minutes</li>
</ol>

Renders as:

20
6. Structuring Content: Lists

1. Preheat oven to 180 degrees

2. Mix flour and sugar in a bowl
3. Add eggs and milk
4. Bake for 25 minutes

Ordered List Type Attribute

<ol type="A"> -- A, B, C (uppercase letters)

<ol type="a"> -- a, b, c (lowercase letters)
<ol type="I"> -- I, II, III (uppercase Roman)
<ol type="i"> -- i, ii, iii (lowercase Roman)
<ol start="5"> -- Starts counting from 5

6.3 Definition Lists

Definition lists are used for term-and-description pairs, like a glossary or dictionary:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for creating webpages.</dd>

<dt>HTTP</dt>
<dd>HyperText Transfer Protocol, the rules for transferring data on the web.</dd>

<dt>URL</dt>
<dd>Uniform Resource Locator, the address of a webpage.</dd>
</dl>

Renders as:

HTML
HyperText Markup Language, the standard language for creating webpages.
HTTP
HyperText Transfer Protocol, the rules for transferring data on the web.
URL
Uniform Resource Locator, the address of a webpage.

21
6. Structuring Content: Lists

QU I C K R EFER EN C E: L I S T TA G S

<ul> -- Unordered list (bullets)

<ol> -- Ordered list (numbers/letters)
<li> -- List item (used inside ul or ol)
<dl> -- Definition list
<dt> -- Definition term
<dd> -- Definition description

22
7. Tables

7. Tables
Tables organize data into rows and columns, making complex information easy to read and
compare. This section covers everything from basic tables to advanced features.

7.1 Creating Tables

A basic table uses three main tags:

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Lagos</td>
</tr>
<tr>
<td>Mary</td>
<td>30</td>
<td>Abuja</td>
</tr>
</table>

Table Structure Tags

Table 10 HTML Table Elements

Tag Purpose

<table> Container for the entire table

<tr> Table row (horizontal line of cells)

<th> Table header cell (bold and centered by default)

<td> Table data cell (standard cell)

23
7. Tables

7.2 Table Headers, Rows & Cells

A well-structured table includes headers and organized data:

<table border="1">
<thead>
<tr>
<th>Subject</th>
<th>Score</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mathematics</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>English</td>
<td>78</td>
<td>B</td>
</tr>
</tbody>
</table>

7.3 Spanning Rows & Columns

Sometimes you need a cell to stretch across multiple columns or rows:

Column Span: colspan

<table border="1">
<tr>
<th colspan="2">Student Information</th>
</tr>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
</table>

24
7. Tables

Row Span: rowspan

<table border="1">
<tr>
<th>Day</th>
<th>Period 1</th>
<th>Period 2</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td>Math</td>
<td>English</td>
</tr>
<tr>
<td>Physics</td>
<td>Chemistry</td>
</tr>
</table>

TA B L E B ES T P R A C T I C ES

Always use headers (<th>) for the first row. This helps screen readers and improves
accessibility.
Use <thead> and <tbody> to separate header from data. This makes styling easier and
improves structure.
Do not use tables for page layout. Tables are for tabular data only. Use CSS for arranging
page elements.
Add captions with the <caption> tag to describe what the table contains.

25
8. HTML Forms

8. HTML Forms
Forms are how websites collect information from users -- login pages, search boxes, registration
forms, and surveys all use HTML forms. This is one of the most practical and important topics in
HTML.

8.1 Understanding Forms

D EFI N I T I ON

An HTML form is a section of a webpage that contains input fields where users can enter
data. When submitted, this data is sent to a server for processing. Forms are the primary
way users interact with websites.

Every form starts with the <form> tag:

<form action="/submit" method="post">

<!-- Form fields go here -->
</form>

Key Form Attributes

Table 11 Form Tag Attributes

Attribute Purpose Example

action URL where form data is sent action="/submit"

method How data is sent: GET or POST method="post"

GET method: Data appears in the URL. Used for searches and non-sensitive data.
POST method: Data is hidden from the URL. Used for passwords, payments, and sensitive
information.

8.2 Input Types

The <input> tag is the most versatile form element. Its type attribute determines what kind of
input it accepts:

26
8. HTML Forms

Table 12 HTML Input Types

Type Description Code Example

text Single-line text input <input type="text" name="username">

passwor Hidden text (shows dots) <input type="password" name="pwd">

d

email Email address with <input type="email" name="email">

validation

number Numeric input only <input type="number" name="age">

tel Telephone number <input type="tel" name="phone">

date Date picker <input type="date" name="dob">

radio Select one option from a <input type="radio" name="gender" value="male">

group

checkbo Select multiple options <input type="checkbox" name="sports"

x value="football">

file Upload files <input type="file" name="photo">

submit Button to submit the form <input type="submit" value="Send">

reset Button to clear all fields <input type="reset" value="Clear">

hidden Invisible field (stores data) <input type="hidden" name="id" value="123">

27
8. HTML Forms

Complete Form Example

<form action="/register" method="post">

<p>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
</p>

<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</p>

<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</p>

<p>
Gender:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</p>

<p>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Select --</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="uk">United Kingdom</option>
</select>
</p>

<p>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="40">
</textarea>
</p>

<p>
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>
</p>

<p>
<input type="submit" value="Register">
<input type="reset" value="Clear">

28
8. HTML Forms

<form action="/register" method="post">

<p>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
</p>

<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</p>

<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</p>

<p>
Gender:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</p>

<p>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Select --</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="uk">United Kingdom</option>
</select>
</p>

<p>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="40">
</textarea>
</p>

<p>
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>
</p>

<p>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</p>
</form>

29
8. HTML Forms

8.3 Labels, Textareas & Select Menus

Labels: <label>
Labels describe what an input field is for. The for attribute connects the label to an input via the
input's id :

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Clicking the label will focus the input field, improving usability.

Textareas: <textarea>
For multi-line text input (comments, messages, essays):

<textarea name="message" rows="5" cols="40">

Type your message here...
</textarea>

Select Menus: <select> and <option>

For dropdown menus where users select one option from a list:

<label for="color">Favorite Color:</label>

<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green" selected>Green</option>
</select>

8.4 Form Submission

When a user clicks the submit button, the browser collects all form data and sends it to the URL
specified in the action attribute using the specified method .

30
8. HTML Forms

I M P OR TA N T FOR M AT T R I B U T ES

required -- Makes a field mandatory before submission

placeholder -- Shows hint text inside an empty field
value -- Sets a default value for the field
name -- Identifies the data when sent to the server
id -- Unique identifier used to connect with a label

31
9. Semantic HTML5

9. Semantic HTML5
HTML5 introduced new elements that describe the meaning of content, not just its appearance.
These semantic elements make your code more readable, improve accessibility, and help search
engines understand your page.

9.1 What is Semantic HTML?

D EFI N I T I ON

Semantic HTML means using HTML tags that convey the meaning and structure of the
content they contain, rather than just how the content should look. For example, using
<header> for introductory content instead of a generic <div> .

Think of semantic HTML like the rooms in a house. A house with labeled rooms (kitchen, bedroom,
bathroom) is much easier to understand than one with just "Room 1," "Room 2," "Room 3."
Semantic tags label the "rooms" of your webpage.

32
9. Semantic HTML5

9.2 Key Semantic Elements

Table 13 HTML5 Semantic Elements

Tag Purpose

<header> Introductory content, usually containing navigation and headings

<nav> Navigation links to other pages or sections

<main> The primary content of the page (use only once)

<article> Self-contained content like a blog post or news article

<section> Thematic grouping of content within an article or page

<aside> Content tangentially related to the main content (sidebars)

<footer> Footer information: copyright, contact info, links

<figure> Self-contained content like images with captions

<figcaption> Caption for a figure element

<time> Represents a specific date or time

<mark> Highlights text for reference purposes

9.3 Page Layout with Semantic Elements

Here is how a modern webpage is typically structured using semantic HTML5:

33
9. Semantic HTML5

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>

<header>
<h1>My Website</h1>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
</header>

<main>
<article>
<header>
<h2>Blog Post Title</h2>
<p>Published on <time datetime="2024-01-15">January 15, 2024</time>
</p>
</header>

<section>
<h3>Introduction</h3>
<p>This is the first section of the article...</p>
</section>

<section>
<h3>Main Content</h3>
<p>This is where the main discussion happens...</p>
<figure>
<img src="[Link]" alt="Diagram">
<figcaption>Figure 1: Diagram of the process</figcaption>
</figure>
</section>
</article>

<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
</ul>
</aside>
</main>

<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>

34
9. Semantic HTML5

W H Y S EM A N T I C H T M L M AT T ER S

Accessibility: Screen readers use semantic tags to help visually impaired users navigate
pages more easily.
SEO: Search engines understand semantic tags better, which can improve your search
rankings.
Maintainability: Other developers can understand your code structure more quickly.
Future-proofing: Semantic tags are designed to work with current and future technologies.

35
10. Advanced Topics

10. Advanced Topics

This section covers additional HTML features that will make you a more capable developer and
prepare you for building professional-quality websites.

10.1 Meta Tags & SEO

Meta tags live in the <head> section and provide information about your webpage. They do not
appear on the page itself but are read by browsers and search engines.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML from scratch with this comprehensive
guide">
<meta name="keywords" content="HTML, web development, learn HTML, coding">
<meta name="author" content="Your Name">
<title>HTML Learning Roadmap</title>
</head>

Essential Meta Tags

Table 14 Common Meta Tags

Meta Tag Purpose

charset="UTF-8" Specifies character encoding (supports all languages)

viewport Makes the page responsive on mobile devices

description Short summary shown in search engine results

keywords Keywords related to page content (less important now)

author Name of the page author

10.2 The div and span Elements

While semantic elements are preferred, two non-semantic tags remain essential:

36
10. Advanced Topics

<div> -- Division (Block-Level)

A <div> is a generic container for grouping elements. It creates a block-level box:

<div style="background: #f0f0f0; padding: 20px;">

<h2>Section Title</h2>
<p>This is a grouped section of content.</p>
</div>

<span> -- Span (Inline)

A <span> is a generic container for small portions of text within a line:

<p>This is a <span style="color: red;">red word</span> in a sentence.</p>

D I V V S S PA N : K EY D I FFER EN C E

<div> is a block-level element. It starts on a new line and takes up the full width available.
Use it to group large sections.
<span> is an inline element. It stays within the flow of text and only takes up as much
width as needed. Use it to style small pieces of text.

10.3 HTML Comments

Comments are notes in your code that browsers ignore. They help you and other developers
understand the code:

<!-- This is a comment. It will not appear on the webpage. -->

<!-- Navigation Menu -->

<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
</nav>

<!--
This is a multi-line comment.
Use comments to explain complex sections of code
or to temporarily disable code without deleting it.
-->

37
10. Advanced Topics

10.4 Best Practices & Common Mistakes

Best Practices to Follow
1. Always use lowercase tags. <p> not <P> -- it is the standard convention.
2. Close all tags. Even though some browsers forgive unclosed tags, always close them
properly.
3. Use alt text on images. This helps visually impaired users and improves SEO.
4. Validate your HTML. Use the W3C Markup Validator ([Link]) to check for errors.
5. Use semantic tags. Prefer <header> , <nav> , <main> over generic <div> tags.
6. Indent your code. Proper indentation (2 or 4 spaces) makes code readable and maintainable.
7. Use meaningful file names. [Link] is better than [Link] .

Common Mistakes to Avoid

1. Forgetting the DOCTYPE. Always start with <!DOCTYPE html> .
2. Skipping the alt attribute on images. Every image should have descriptive alt text.
3. Using headings for styling. Use CSS for font sizes, not heading tags.
4. Nesting tags incorrectly. Close tags in the reverse order you opened them.
5. Using tables for layout. Tables are for tabular data only. Use CSS for layout.
6. Misspelling tag names or attributes. HTML is not forgiving -- <imge> will not work.
7. Using spaces in file names. Use hyphens or underscores: [Link] not my [Link] .

38
11. Your Learning Path Forward

11. Your Learning Path Forward

Congratulations -- you now have a comprehensive understanding of HTML. Here is how your
journey continues as you build on this foundation.

Recommended Next Steps

1 Practice, Practice, Practice

Build 5-10 simple webpages using what you have learned. Create a personal website, a
restaurant menu page, a school timetable, or a photo gallery. The more you write HTML,
the more natural it becomes.

2 Learn CSS (Cascading Style Sheets)

HTML structures content; CSS makes it beautiful. CSS controls colors, fonts, spacing,
layouts, and animations. Together, HTML and CSS form the core of front-end web
development.

3 Learn JavaScript
JavaScript adds interactivity to your pages -- dropdown menus, form validation, image
sliders, and dynamic content. It is the third essential technology for web development.

4 Explore Web Development Tools

Your syllabus mentions Frontpage as web development software. Modern alternatives
include Visual Studio Code (free), Sublime Text, and web-based editors like CodePen.
These tools offer features like auto-completion and error detection.

5 Understand the Full Stack

As you advance, learn about web servers, databases, and server-side programming
(Python, PHP, [Link]). This complete skill set enables you to build fully functional web
applications.

39
11. Your Learning Path Forward

HTML Quick Reference Card

Table 15 Complete HTML Tag Reference

Category Tags

Document <!DOCTYPE>, <html>, <head>, <body>, <title>, <meta>

Structure

Headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Text <p>, <br>, <hr>, <pre>

Formatting <strong>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>

Links <a>

Images & Media <img>, <audio>, <video>, <source>

Lists <ul>, <ol>, <li>, <dl>, <dt>, <dd>

Tables <table>, <tr>, <th>, <td>, <thead>, <tbody>, <caption>

Forms <form>, <input>, <textarea>, <select>, <option>, <label>, <button>

Semantic HTML5 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>,

<figure>, <figcaption>, <time>

Generic <div>, <span>

Containers

R EM EM B ER T H E C OR E P R I N C I P L E

HTML is about structure and meaning, not appearance. Use the right tag for the right
content. How things look is the job of CSS. Start with well-structured, semantic HTML, and
you will build a strong foundation for becoming an excellent web developer.

40