TOPIC 1 OF 12

HTML MASTERY NOTES SERIES

Introduction
to HTML
Structure · Tags · Attributes · Comments

✦ Clear Theory for Every Subtopic

✦ Syntax-Highlighted Code Examples

✦ Exercises After Every Subtopic

✦ Mini Projects + Full Final Test

Beginner Friendly · Self-Study Ready · Exam Prepared

TABLE OF CONTENTS

1.1 What is HTML?

1.2 HTML History and Versions

1.3 Setting Up the Environment

1.4 HTML Document Structure

1.5 HTML Elements and Tags

1.6 HTML Attributes

1.7 HTML Comments

— Mini Projects

— Final Test

— Answer Key

✦ Clear Theory for Every Subtopic

✦ Syntax-Highlighted Code Examples

✦ Exercises After Every Subtopic

✦ Mini Projects + Full Final Test

Beginner Friendly · Self-Study Ready · Exam Prepared

 1.1 What is HTML?

Fig 1.1a – Raw data (binary) is structured by HTML tags and rendered as a visual webpage in the browser.

HTML stands for HyperText Markup Language. It is the universal language used to create and
structure content on the World Wide Web. Every webpage you visit — a news article, a social media
feed, an online store, or a blog — is built on a foundation of HTML.

LIGHTBULB TIP
Think of HTML as the SKELETON of a webpage.
Just like a skeleton gives structure to the human body, HTML gives structure to a page.
CSS adds style (the skin), and JavaScript adds behaviour (the muscles).

Fig 1.1b – HTML code displayed holographically, showing how tags like , , form a structured document.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 2
 Breaking Down the Full Form:

Word Meaning What It Means for Us

HyperText Beyond / Super text Links that jump between pages (hyperlinks)

Markup Adding tags/markers We wrap content in tags to give it meaning

Language A set of rules HTML has its own grammar and syntax rules

What HTML is NOT:

● NOT a programming language — it cannot perform logic or calculations.

● NOT a styling language — CSS handles fonts, colours, and layout.
● NOT a scripting language — JavaScript handles interactivity.
● It is a markup language — it describes structure and meaning of content.

What Can You Build With HTML?

● Personal portfolio and resume websites

● Business landing pages and e-commerce stores
● Blogs, news articles, and documentation pages
● Online forms — login, registration, contact pages
● Data tables — schedules, price lists, comparison charts
● Email newsletter templates

FUN FACT
FUN FACT: HTML was invented by Tim Berners-Lee, a British scientist at CERN in 1991.
He needed a way for scientists to share documents across the world.
The very first website is still live today at: [Link]

EXERCISE 1.1 — What is HTML? (Answers on the last page)

MCQ Questions:

Q1 What does HTML stand for?

A) High Transfer Markup Language

B) HyperText Markup Language

C) HyperText Making Language

D) HyperText Management Language

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 3
 Q2 HTML is best described as a __________.

A) Programming Language

B) Database Language

C) Markup Language

D) Scripting Language

Q3 Who invented HTML?

A) Bill Gates

B) Linus Torvalds

C) Tim Berners-Lee

D) Mark Zuckerberg

Q4 Which of these CANNOT be done with HTML alone?

A) Create a heading

B) Add an image

C) Validate a form automatically

D) Write a paragraph

Practice Problems:

■ P1 — Explain what HTML does on a web page in your own words. (2-3 sentences)

■ P2 — List THREE things HTML cannot do without CSS or JavaScript.

■ P3 — Create a comparison table: Language | Role | Example. Fill it for HTML, CSS, JavaScript.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 4
 1.2 HTML History and Versions

Fig 1.2a – HTML has evolved through many versions since 1991, each adding more power to web development.

HTML has evolved significantly since its creation. Understanding its history helps you appreciate why
things work the way they do — and why HTML5 is such a powerful upgrade over earlier versions.

HTML Version Timeline:

Version Year Key Features Added

HTML 1.0 1991 First version. ~18 tags. Basic text and hyperlinks only.

HTML 2.0 1995 First official standard. Added forms and image support.

HTML 3.2 1997 Added tables, Java applets, text flow around images.

HTML 4.01 1999 CSS support, frames, scripting, improved forms. Used for a decade.

XHTML 1.0 2000 Strict XML-based HTML — all tags must be lowercase and closed.

HTML5 2014 Current standard: audio/video, Canvas, semantic tags, Web APIs.

Living HTML Now HTML is a Living Standard — continuously updated by WHATWG.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 5
 Fig 1.2b – HTML5 brought a new era of web development: rich media, semantic layout, and powerful browser APIs.

Key Improvements in HTML5 vs HTML4:

● Semantic elements — <header>, <footer>, <article>, <nav> make code self-describing.

● Native audio / video — No Flash plugin needed; use <audio> and <video> tags.
● Canvas API — Draw graphics and animations directly in the browser.
● Geolocation API — Detect user location (with permission).
● Local Storage — Store data in the browser without a server.
● New form input types — email, date, number, range, color, and more.
● Responsive images — srcset and <picture> element for different screen sizes.

NOTE
XHTML tried to make HTML stricter (like XML) but failed because it was too unforgiving.
HTML5 went the opposite direction — browsers are designed to handle imperfect code gracefully.
Always write clean HTML anyway — valid code is faster and works on more devices!

EXERCISE 1.2 — HTML History (Answers on the last page)

Q5 In which year was the very first version of HTML created?

A) 1985

B) 1991

C) 1999

D) 2004

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 6
 Q6 Which HTML version is the current living standard?

A) HTML 4.01

B) XHTML 1.0

C) HTML5

D) HTML 3.2

Q7 What major feature did HTML5 add that HTML4 lacked?

A) Basic text formatting

B) Native audio and video without plugins

C) Hyperlinks between pages

D) Table support

Practice Problems:

■ P1 — Draw a simple timeline showing HTML versions from 1991 to now.

■ P2 — List THREE features HTML5 added that HTML4 did not have.

■ P3 — What is WHATWG and how is it different from W3C? (2-3 sentences)

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 7
 1.3 Setting Up the Environment

The beauty of HTML is that you need almost nothing to get started — just a text editor and a web
browser. Both are already on your computer! However, a professional code editor makes the process
much faster and helps you avoid mistakes.

Step 1 — Choose a Text Editor:

Editor Platform Best For Cost

VS Code (RECOMMENDED) Win / Mac / Linux All levels — best choice Free

Sublime Text Win / Mac / Linux Intermediate users Free/Paid

Notepad++ Windows only Quick beginner use Free

Atom Win / Mac / Linux Beginners Free

Notepad / TextEdit Built-in Quick tests only Free

LIGHTBULB TIP
We strongly recommend VS Code (Visual Studio Code) by Microsoft — it is FREE.
It works on Windows, Mac, and Linux, and is used by millions of professionals daily.
Download it at: [Link]

Step 2 — Install These VS Code Extensions:

● Live Server — Auto-refreshes your browser every time you save the HTML file.
● Prettier — Automatically formats your code to look clean and consistent.
● HTML CSS Support — Auto-completes HTML tags and CSS properties as you type.
● Auto Rename Tag — Changing an opening tag automatically updates the closing tag.
Step 3 — Create Your First HTML File:

● Create a folder on your Desktop called html-projects.

● Open VS Code and open that folder via: File > Open Folder.
● Click "New File" and name it [Link].
● Type ! and press Tab — VS Code auto-generates the full HTML5 skeleton!
● Click Go Live in the bottom bar to open the page live in your browser.
Step 4 — Use a Good Browser for Testing:

Browser Dev Tools Shortcut Notes

Google Chrome (Recommended) F12 or Ctrl+Shift+I Best developer tools

Firefox F12 or Ctrl+Shift+I Great privacy + dev tools

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 8
 Chrome-based, good on
Microsoft Edge F12
Windows

Safari (Mac) Cmd+Option+I Required for iOS device testing

WARNING
Always test in at least TWO browsers — Chrome and Firefox is a great combination.
Press F12 in any browser to open Developer Tools and inspect your HTML live.

EXERCISE 1.3 — Environment Setup (Answers on the last page)

Q8 Which keyboard shortcut opens Developer Tools in Chrome?

A) Ctrl+D

B) F12

C) Ctrl+H

D) Alt+F4

Q9 What does the "Live Server" VS Code extension do?

A) Uploads files to the internet

B) Auto-refreshes browser on save

C) Checks for spelling errors

D) Connects to a remote database

Q10 What is the standard name for a website's first / home page?

A) [Link]

B) [Link]

C) [Link]

D) [Link]

Practice Problems:

■ P1 — Install VS Code. Take a screenshot of the welcome screen.

■ P2 — Create [Link], type ! then Tab. Write exactly what VS Code generates.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 9
 ■ P3 — Why should you test HTML in multiple browsers? Give a real-world example.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 10
 1.4 HTML Document Structure

Fig 1.4a – The HTML document as glowing stacked blocks: at the top, then wrapping (metadata) and (visible content).

Every HTML document follows the same basic skeleton — no matter how simple or complex the page
is. Think of it like building a house: there is always a foundation, walls, and rooms. Learning this
skeleton is the FIRST thing every web developer must master.

The Complete HTML5 Skeleton:

HTML

1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>My First Webpage</title>
8 </head>
9
10 <body>
11 <h1>Hello, World!</h1>
12 <p>This is my very first webpage.</p>
13 </body>
14
15 </html>

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 11
 Fig 1.4b – The HTML parsing sequence: Declaration → Root Container (html) → Metadata (head) + Visible Content
(body) → Browser renders the page.

Line-by-Line Explanation:

Tag / Line What It Does Visible?

<!DOCTYPE html> Tells browser this is HTML5. Must be the very first line. No

<html lang="en"> Root element wrapping everything. lang="en" = English. No

<head> Container for invisible page info — metadata, title, CSS. No

Sets character encoding. Allows special chars: e, n,

<meta charset="UTF-8"> No
Chinese.

<meta name="viewport"...> Makes page scale correctly on mobile screens. No

<title>...</title> Text shown in browser tab, bookmarks, Google results. Tab only

</head> Closes the head section. No

<body> Everything the user SEES — text, images, forms, videos. Yes

<h1>...</h1> A large main heading visible on the page. Yes

<p>...</p> A paragraph of visible text. Yes

</body> </html> Close the body and the whole document. No

IMPORTANT
IMPORTANT: The <head> is the BRAIN — invisible but very important.
The <body> is the FACE — everything users can see and interact with.
NEVER put visible content (text, images, buttons) inside the <head> section!

Correct vs Incorrect Nesting:

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 12
 HTML

1 <!-- CORRECT: Inner tag closes before outer tag closes -->
2 <p><strong>This is bold text inside a paragraph.</strong></p>
3
4 <!-- WRONG: Tags overlap — this is INVALID HTML -->
5 <p><strong>Wrong nesting</p></strong>
6
7 <!-- TIP: Use 2-space or Tab indentation for nested elements -->
8 <body>
9 <div>
10 <p>Each level is indented. This makes code readable!</p>
11 </div>
12 </body>

EXERCISE 1.4 — HTML Document Structure (Answers on the last page)

Q11 Which line MUST appear at the very top of an HTML5 document?

A) &lt;html&gt;

B) &lt;!DOCTYPE html&gt;

C) &lt;head&gt;

D) &lt;meta charset="UTF-8"&gt;

Q12 Where should you place the visible content of your webpage?

A) Inside &lt;head&gt;

B) Inside &lt;meta&gt;

C) Inside &lt;body&gt;

D) Inside &lt;title&gt;

Q13 The &lt;title&gt; tag content appears where on screen?

A) As a large heading on the page

B) In the browser tab

C) Inside the body section

D) In the page footer

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 13
 Q14 What does lang="en" tell the browser?

A) Page should be left-aligned

B) The page language is English

C) Page loads in English mode

D) Use English fonts only

Practice Problems:

■ P1 — Write the complete HTML5 skeleton from memory. Include all essential tags.

■ P2 — Find and fix ALL errors: [html][title]My Page[head][/head][/title][body][p]Hi[/body][/html]

■ P3 — What happens if you forget the DOCTYPE? Research and explain in 2 sentences.

■ P4 — Create an HTML file with your name as title, h1 heading "About Me", paragraph about
yourself.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 14
 1.5 HTML Elements and Tags

Fig 1.5 – HTML elements are the fundamental building blocks of every webpage. Each tag — h1, p, div, img — wraps a
specific type of content.

Understanding the exact difference between a Tag and an Element is fundamental. Many beginners
confuse them — let's clear this up once and for all.

Tags vs Elements — The Clear Difference:

HTML

1 <!-- A TAG is just the marker surrounded by angle brackets -->

2 <h1> ← OPENING TAG
3 </h1> ← CLOSING TAG (has a forward slash /)
4
5 <!-- An ELEMENT = opening tag + content + closing tag -->
6 <h1>Welcome to My Website</h1>
7 ↑ ↑ ↑
8 Open tag Content Close tag
9
10 <!-- Content can be TEXT or other ELEMENTS (nesting) -->
11 <p>Click <a href="[Link]">here</a> to go to page 2.</p>

Anatomy of an HTML Element:

Part Example Description

Opening Tag <p> Marks where the element begins.

Content This is my text Text or nested elements inside.

Closing Tag </p> Marks where the element ends. Has a /.

Full Element <p>Text</p> Opening + Content + Closing = Element.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 15
 Self-Closing (Void) Elements:

Some HTML elements have no content and no closing tag. They are called void elements or
self-closing elements.

HTML

1 <!-- VOID ELEMENTS — No closing tag needed -->

2 <br> <!-- Line break -->
3 <hr> <!-- Horizontal dividing line -->
4 <img src="[Link]" alt="Photo"> <!-- Image display -->
5 <input type="text"> <!-- User input field -->
6 <meta charset="UTF-8"> <!-- Page metadata -->
7 <link rel="stylesheet" href="[Link]"> <!-- CSS file link -->
8
9 <!-- Both styles are accepted in HTML5 -->
10 <br> ← preferred HTML5 style
11 <br /> ← also valid (XHTML style)

Common HTML Elements — Quick Reference:

Tag Name Purpose Void?

<h1> to <h6> Headings Page/section headings (h1=biggest) No

<p> Paragraph A block of text No

<a> Anchor Create a hyperlink No

<img> Image Display an image YES

<div> Division Group block-level elements No

<span> Span Group inline text/elements No

<ul>/<ol> Lists Unordered / Ordered lists No

<li> List Item A single item in a list No

<br> Line Break Force a new line YES

<hr> H-Rule A thematic dividing line YES

<strong> Strong Bold text with importance No

<em> Emphasis Italic text with emphasis No

<table> Table Tabular data grid No

<form> Form Container for user inputs No

<input> Input User input field YES

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 16
 EXERCISE 1.5 — Elements and Tags (Answers on the last page)

Q15 Which of the following is a SELF-CLOSING (void) element?

A) &lt;p&gt;

B) &lt;div&gt;

C) &lt;img&gt;

D) &lt;section&gt;

Q16 An HTML ELEMENT consists of:

A) Only the opening tag

B) Only the content

C) Opening tag + content + closing tag

D) Just the tag name

Q17 Which tag creates the LARGEST heading on a page?

A) &lt;h6&gt;

B) &lt;heading&gt;

C) &lt;h1&gt;

D) &lt;big&gt;

Practice Problems:

■ P1 — Label the three parts of this element: [p]Hello World[/p]

■ P2 — From this list, identify which are void: div, br, span, img, input, p

■ P3 — Write HTML with heading "My Hobbies" and 3 paragraphs about different hobbies.

■ P4 — Fix the incorrect nesting: [p][strong]Important text[/p][/strong]

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 17
 1.6 HTML Attributes

Fig 1.6 – Attributes (id, class, href) are like connectors that plug extra configuration into HTML elements, controlling their
behaviour and identity.

If HTML elements are the building blocks, then attributes are the settings and properties of those
blocks. Attributes provide extra information to elements — such as where to find an image, where a
link should go, or how wide something should be.

Attribute Syntax — The Basic Rule:

HTML

1 <!-- Syntax: attribute-name="value" inside the OPENING tag -->

2 <tagname attribute="value">Content</tagname>
3
4 <!-- Real Examples -->
5 <a href="[Link] to visit Google</a>
6
7 <img src="[Link]" alt="A cute cat" width="300" height="200">
8
9 <!-- Multiple attributes separated by SPACES — no commas -->
10 <input type="email" placeholder="your@[Link]" required>
11
12 <!-- Boolean attributes — just the name, no value needed -->
13 <input type="checkbox" checked> <!-- starts pre-checked -->
14 <input type="text" disabled> <!-- greyed out, user cannot type -->
15 <input type="email" required> <!-- must be filled before submit -->

Golden Rules for Attributes:

● Always in the opening tag — never in the closing tag.

● Format: name="value" — name, equals sign, value in double quotes.
● Multiple attributes separated by spaces (not commas).

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 18
 ● Boolean attributes (required, disabled, checked) need no value — just the name.
● Attribute names should always be lowercase (standard practice).
Global Attributes — Work on ANY HTML Element:

Attribute Purpose Example

id Unique identifier for one element on the page. <div id="header">

class Groups elements for CSS styling or JavaScript. <p class="intro">

style Applies inline CSS style directly to the element. <p style="color:red">

title Shows a tooltip when hovering over the element. <img title="Logo">

lang Declares the content language. <p lang="fr">

hidden Hides element from view (still in DOM). <div hidden>

tabindex Sets keyboard Tab focus order (accessibility). <button tabindex="1">

contenteditable Makes the element content editable by user. <div contenteditable>

data-* Custom data attributes for storing extra info. <div data-id="42">

WARNING
The id attribute MUST be unique — no two elements on the same page can share the same id.
The class attribute CAN be shared by many elements — that is its purpose.
Rule: id = ONE specific element. class = GROUP of similar elements.

EXERCISE 1.6 — HTML Attributes (Answers on the last page)

Q18 In [img src="[Link]" alt="My dog"], what is "alt"?

A) A tag

B) An element

C) An attribute

D) A value

Q19 Which attribute gives an element a UNIQUE identifier?

A) class

B) name

C) id

D) title

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 19
 Q20 Which of the following is a BOOLEAN attribute?

A) href

B) src

C) alt

D) required

Q21 Where should HTML attributes always be placed?

A) In the closing tag

B) Between the tags as content

C) In the opening tag

D) In a separate CSS file

Practice Problems:

■ P1 — Write an img tag: loads [Link], alt "Beautiful sunset", 400px wide, lazy loading.

■ P2 — Write an anchor: links to [Link] opens in a NEW tab.

■ P3 — What is the difference between id and class? Give one code example of each.

■ P4 — Fix errors: [INPUT Type=text Name="email" PLACEHOLDER=Enter Email Required]

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 20
 1.7 HTML Comments

An HTML comment is a note inside your code that the browser completely ignores. Comments are
visible only to developers looking at the source code. Writing good comments is one of the most
important professional habits you can build.

Comment Syntax:

HTML

1 <!-- This is a single-line HTML comment -->

2
3 <!--
4 This is a multi-line comment.
5 It can span as many lines as you need.
6 Use it to explain complex sections of code.
7 -->
8
9 <!-- You can DISABLE code by commenting it out -->
10 <!-- <p>This paragraph is hidden from users</p> -->
11
12 <p>This paragraph IS visible to the user.</p>

When and Why to Use Comments:

Use Case Example Comment

Label a section [!-- ===== NAVIGATION MENU ===== --]

Mark end of long section [!-- END of hero section --]

Disable code temporarily [!-- [img src="[Link]"] --]

Leave a TODO reminder [!-- TODO: Add contact form here --]

Explain tricky code [!-- This loop generates all product cards --]

Warn other developers [!-- WARNING: Do not change the id below! --]

Credit and dates [!-- Author: Jane | Updated: 2025-01-01 --]

A Well-Commented HTML Page (Professional Style):

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 21
 HTML

1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <!-- === PAGE SETTINGS === -->
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>My Portfolio</title>
9 <link rel="stylesheet" href="[Link]">
10 </head>
11
12 <body>
13
14 <!-- ===== HEADER SECTION ===== -->
15 <header>
16 <h1>Jane Doe</h1>
17 <p>Full Stack Web Developer</p>
18 </header>
19
20 <!-- ===== MAIN NAVIGATION ===== -->
21 <nav>
22 <a href="#about">About</a>
23 <a href="#projects">Projects</a>
24 <!-- TODO: Add Blog link when blog is ready -->
25 <a href="#contact">Contact</a>
26 </nav>
27
28 </body>
29 </html>

WARNING
NEVER put passwords, API keys, or secret information inside HTML comments!
Anyone can press Ctrl+U (View Source) in any browser and read all your comments.
Comments are also visible in the F12 Developer Tools panel.

EXERCISE 1.7 — HTML Comments (Answers on the last page)

Q22 What is the correct HTML comment syntax?

A) // This is a comment

B) /* This is a comment */

C) [!-- This is a comment --]

D) # This is a comment

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 22
 Q23 What does the browser do when it sees an HTML comment?

A) Displays it in a grey box

B) Shows an error message

C) Completely ignores it

D) Reads it aloud for screen readers

Q24 Which is the BEST use of an HTML comment?

A) Storing backup passwords

B) Labelling sections like [!-- END of header --]

C) Writing CSS styles in HTML

D) Making text bold for users

Practice Problems:

■ P1 — Add 5 meaningful comments to a basic HTML page with header, nav, and body.

■ P2 — Comment out the second paragraph so it does not show: [p]Visible[/p] [p]Hide this[/p]
[p]Also visible[/p]

■ P3 — Why should you NEVER store a password in an HTML comment? (2 sentences)

■ P4 — Write a fully commented version of the HTML skeleton from section 1.4.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 23
 MINI PROJECTS — Topic 1

Project 1: My First Web Page [Difficulty: Beginner]

Goal: Create a complete, valid HTML5 page using all core concepts from Topic 1. Build it about
something you love — a favourite game, food, sport, or hobby!

Requirements Checklist:

● Correct HTML5 structure: DOCTYPE, html, head, body

● Meaningful <title> tag shown in browser tab
● Both meta tags: charset and viewport
● An <h1> main heading on the page
● At least 2 paragraphs of text using <p>
● At least 1 image with src and alt attributes
● One clickable link using <a href="...">
● At least 3 meaningful HTML comments labelling sections
● Proper indentation throughout the file
Starter Code Template:

HTML

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <!-- Add meta tags and title here -->
5 </head>
6 <body>
7 <!-- Add your content here -->
8
9 </body>
10 </html>

Bonus Challenges:

● Add a favicon using <link rel="icon" href="[Link]"> in the head.

● Use at least 6 different HTML elements on the page.
● Add a description meta tag for better SEO.

Project 2: Personal Profile Page [Difficulty: Intermediate]

Goal: Build a structured personal profile page using all seven subtopics. This should be a page you
could genuinely show to others!

Page Must Include:

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 24
 ● Header: Your name (h1), a tagline (p), profile photo (img with alt).
● About Section: h2 heading, 2-3 paragraphs describing yourself.
● Skills Section: h2 heading, list your top 5 skills using ul and li.
● Contact Section: h2 heading, email link ([Link] optional phone ([Link]
● Attributes: id on each section, class on 3+ elements, title on the photo.
● Comments: Label every major section with a clear HTML comment.
● Metadata: A description meta tag mentioning your name and skills.
Grading Rubric:

Criteria Points

Correct HTML5 document structure 20

All required sections present and complete 20

Proper use of attributes (id, class, alt, etc.) 20

Meaningful HTML comments (minimum 5) 15

Valid code with good indentation 15

Bonus: Extra elements or creative content 10

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 25
 FINAL TEST — Topic 1: Introduction to HTML

Section Content Marks

Part A: MCQ 15 multiple choice questions 30 marks

Part B: Short Answer 5 explanatory questions 25 marks

Part C: Code Writing 3 coding tasks 30 marks

Part D: Error Finding 2 fix-the-bugs tasks 15 marks

TOTAL 25 questions 100 marks

PART A — Multiple Choice (2 marks each)

Circle the correct letter. Do NOT look at the Answer Key yet!

Q1 HTML is a __________ language.

A) Programming

B) Markup

C) Database

D) Scripting

Q2 Which tag defines the VISIBLE part of an HTML document?

A) &lt;head&gt;

B) &lt;meta&gt;

C) &lt;html&gt;

D) &lt;body&gt;

Q3 Which of these is a VOID (self-closing) element?

A) &lt;div&gt;

B) &lt;p&gt;

C) &lt;br&gt;

D) &lt;section&gt;

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 26
 Q4 The &lt;!DOCTYPE html&gt; declaration must appear __________.

A) Inside &lt;head&gt;

B) Inside &lt;body&gt;

C) Before &lt;html&gt;

D) After &lt;html&gt;

Q5 Attributes are placed inside the __________ tag.

A) Closing

B) Opening

C) Body

D) Head

Q6 Which attribute makes an input field mandatory?

A) disabled

B) readonly

C) required

D) checked

Q7 What is the purpose of the alt attribute in &lt;img&gt;?

A) Changes image size

B) Provides alternative text if image cannot load

C) Links to the image file

D) Sets the image background colour

Q8 HTML comments are written using __________.

A) // comment

B) /* comment */

C) [!-- comment --]

D) # comment

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 27
 Q9 Which attribute uniquely identifies ONE element on the page?

A) class

B) id

C) name

D) type

Q10 The &lt;title&gt; tag content appears __________.

A) In the body of the page

B) In the browser tab

C) As a heading on screen

D) In the footer

Q11 Which version of HTML is the current web standard?

A) HTML 4.01

B) XHTML 1.0

C) HTML 3.2

D) HTML5

Q12 Which tag creates the SMALLEST heading?

A) &lt;h1&gt;

B) &lt;h3&gt;

C) &lt;h6&gt;

D) &lt;small&gt;

Q13 Which editor is most recommended for beginner developers?

A) Notepad

B) VS Code

C) Microsoft Word

D) Excel

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 28
 Q14 What does lang="en" in &lt;html lang="en"&gt; tell the browser?

A) Load page in landscape mode

B) The page language is English

C) Use English CSS styles

D) Format text as English

Q15 Where should you NEVER store sensitive information like passwords?

A) In the &lt;body&gt;

B) In a &lt;p&gt; tag

C) In HTML comments

D) In the &lt;head&gt;

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 29
 PART B — Short Answer (5 marks each)

Answer each question clearly in complete sentences.

■ B1. Explain the difference between <head> and <body>. What content belongs in each? Give
TWO examples for each.

■ B2. What is the difference between an HTML Element and an HTML Attribute? Show a code
example with BOTH.

■ B3. Name and briefly explain FIVE features that HTML5 added which HTML4 lacked.

■ B4. What are "boolean attributes"? Give THREE examples and explain what each does.

■ B5. Why is writing HTML comments important? List FOUR specific situations where they are
useful.

PART C — Code Writing (10 marks each)

■ C1. Write a COMPLETE valid HTML5 document for a "Restaurant Menu" page. Include:
DOCTYPE, html with lang, head with charset + viewport + title, body with: h1 heading, TWO h2
section headings, at least two p food items per section, one img with alt, a link to
"[Link]". Add comments for each section.

■ C2. Create an HTML "User Registration" form with: full name (text, required), email (email,
required), age (number, min=13, max=120), password (password, required, minlength=8), terms
checkbox (required), and a submit button. All inputs must have labels and proper attributes.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 30
 ■ C3. Create a page "My Learning Journey" with: proper HTML5 structure, at least 5 different
HTML elements, at least 4 different attributes, 3 section comments, and a table with columns: Topic
| What I Learned | Difficulty.

PART D — Find and Fix Errors (7.5 marks each)

Find ALL errors. Write the corrected version below each snippet.

D1. (Hint: 5 errors)

HTML

1 <DOCTYPE html>
2 <HTML lang=EN>
3 <head>
4 <title>My Page</title>
5 <body>
6 <H1>Welcome</H1>
7 <img src="[Link]">
8 <a href=[Link] target="blank">Google</A>
9 <!-- This is a comment ->
10 </body>

Write your corrected version here:

D2. (Hint: 5 errors)

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 31
 HTML

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charSet="utf-8">
5 <meta name="viewport content="width=device-width">
6 </head>
7 <body>
8 <p><strong>Bold Text</p></strong>
9 <img alt="Logo" widht="200">
10 <input type="email" require>
11 </body>
12 </html>

Write your corrected version here:

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 32
 ANSWER KEY — Topic 1: Introduction to HTML

WARNING
Check answers ONLY after attempting ALL questions yourself.
Looking at answers before trying significantly reduces your learning.
Be honest with yourself — that is the foundation of real skill-building!

Section Exercises — MCQ Answers

Ex 1.1 Q1 Answer: B
HyperText Markup Language — the full form.

Ex 1.1 Q2 Answer: C
HTML describes structure — it is a Markup Language.

Ex 1.1 Q3 Answer: C
Tim Berners-Lee created HTML at CERN in 1991.

Ex 1.1 Q4 Answer: C
Form validation logic requires JavaScript — HTML alone cannot do it.

Ex 1.2 Q5 Answer: B
HTML 1.0 was created in 1991 by Tim Berners-Lee.

Ex 1.2 Q6 Answer: C
HTML5 (2014) is the current standard, now a Living Standard.

Ex 1.2 Q7 Answer: B
HTML5 added native audio/video support — no Flash plugin needed.

Ex 1.3 Q8 Answer: B
F12 opens Developer Tools in Chrome, Firefox, and Edge.

Ex 1.3 Q9 Answer: B
Live Server auto-refreshes the browser every time you save.

Ex 1.3 Q10 Answer: C

[Link] is the standard default homepage filename.

Ex 1.4 Q11 Answer: B

!DOCTYPE html must be the very first line before anything else.

Ex 1.4 Q12 Answer: C

All visible content goes inside the body tag.

Ex 1.4 Q13 Answer: B

The title tag content shows in the browser tab, not the page.

Ex 1.4 Q14 Answer: B

lang="en" declares English as the page language.

Ex 1.5 Q15 Answer: C

img is a void/self-closing element — no closing tag needed.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 33
 Ex 1.5 Q16 Answer: C
Element = opening tag + content + closing tag (all three parts).

Ex 1.5 Q17 Answer: C

h1 creates the largest heading; h6 creates the smallest.

Ex 1.6 Q18 Answer: C

alt is an attribute of the img element.

Ex 1.6 Q19 Answer: C

id must be unique — only one element can use the same id per page.

Ex 1.6 Q20 Answer: D

required is boolean — just the word, no value needed.

Ex 1.6 Q21 Answer: C

All attributes are written in the opening tag only.

Ex 1.7 Q22 Answer: C

HTML comment syntax: [!-- comment text --]

Ex 1.7 Q23 Answer: C

The browser completely ignores HTML comments.

Ex 1.7 Q24 Answer: B

Labelling sections is excellent professional practice.

Final Test — Part A: MCQ Answers

FT Q1 Answer: B
Markup — HTML describes structure, not logic or calculation.

FT Q2 Answer: D
body — all visible content lives inside the body tag.

FT Q3 Answer: C
br is a void/self-closing element (no closing tag).

FT Q4 Answer: C
!DOCTYPE html must come before anything — even the html tag.

FT Q5 Answer: B
Opening tag — attributes are always placed in the opening tag.

FT Q6 Answer: C
required makes a field mandatory before form can be submitted.

FT Q7 Answer: B
alt provides alternative text when image fails to load.

FT Q8 Answer: C
[!-- comment --] is the correct HTML comment syntax.

FT Q9 Answer: B
id must be unique — no two elements share the same id on a page.

FT Q10 Answer: B
title content appears in the browser tab, not in the page body.

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 34
 FT Q11 Answer: D
HTML5 is the current living standard.

FT Q12 Answer: C
h6 = smallest heading; h1 = largest heading.

FT Q13 Answer: B
VS Code is free, cross-platform, and used by millions of professionals.

FT Q14 Answer: B
en is the ISO language code for English.

FT Q15 Answer: C
HTML comments are visible in View Source — never store secrets there!

Final Test — Part D: Corrected Code

D1 — Corrected Version (5 fixes):

HTML

1 <!DOCTYPE html> FIX 1: was [DOCTYPE html] — missing !

2 <html lang="en"> FIX 2: lowercase + quotes on attribute value
3 <head>
4 <title>My Page</title>
5 </head> FIX 3: missing [/head] closing tag before [body]
6 <body>
7 <h1>Welcome</h1> FIX 4: was [H1] — tags must be lowercase in HTML5
8 <img src="[Link]" alt=""> FIX 5: alt attribute was missing
9 <a href="[Link] target="_blank">Google</a>
10 Bonus: href unquoted; target was "blank" not "_blank"; [/A] uppercase
11 <!-- This is a comment --> Bonus: was [-- comment ->] wrong syntax
12 </body>
13 </html>

D2 — Corrected Version (5 fixes):

HTML

1 <!DOCTYPE html>
2 <html lang="en"> FIX 1: lang attribute was missing
3 <head>
4 <meta charset="utf-8"> FIX 2: charSet -> charset (lowercase)
5 <meta name="viewport" content="width=device-width">
6 FIX 3: missing closing quote after "viewport
7 </head>
8 <body>
9 <p><strong>Bold Text</strong></p> FIX 4: wrong nesting — fixed order
10 <img alt="Logo" width="200"> FIX 5: widht typo -> width
11 <input type="email" required> FIX 6: require -> required
12 </body>
13 </html>

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 35
 Congratulations on completing Topic 1! You now know the foundational building blocks of every website
on the internet. Google, YouTube, Netflix — they all use these exact same HTML structures. Next up:
Topic 2 — Basic Text Formatting

HTML MASTERY NOTES | Topic 1: Introduction to HTML © HTML Mastery Series Page 36