✅ TOPIC 1 — Introduction to HTML (HyperText Markup
Language)
(Full exam-ready explanation)
1. Meaning of HTML
HTML stands for HyperText Markup Language.
It is the standard markup language used to create and
structure webpages.
It does not control the appearance (that is CSS) and it does not
control functionality (that is JavaScript).
Its only purpose is to provide the structure, semantics, and
meaning to the content.
Why it is called HyperText?
HyperText means text that contains links to other texts or
resources.
HTML allows linking webpages through the <a> tag, enabling
navigation across the web.
Why it is called Markup Language?
Because HTML uses tags to “mark up” the content.
Example:
<p>This is a paragraph</p>
HTML is not a programming language.
It has no logic, loops, or conditions.
It is a declarative language.
✔ 2. Features of HTML
These points are exam favorites:
1. Simple and easy to learn
Uses plain text and readable tags.
2. Platform independent
Works the same on Windows, Mac, Linux, Android, and all
browsers.
1
3. Structured layout
Allows logical organization of content: headings,
paragraphs, lists, tables, forms.
4. Supports multimedia
Images, audio, video, iframes, SVG, canvas.
5. Compatible with CSS and JavaScript
HTML handles structure; CSS handles presentation; JS
handles behavior.
6. Supports semantics
HTML5 introduced semantic elements like <header>,
<article>, which improve SEO and accessibility.
7. Extensible through APIs
Works with Web Storage, Canvas, Geolocation, etc.
✔ 3. Structure of an HTML Document
This is ALWAYS asked in exams:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>
<body>
Content goes here
</body>
</html>
Breakdown:
1. <!DOCTYPE html>
2
Declares HTML5 document.
Tells the browser to render in standards mode.
2. <html> tag
Root element of the entire HTML document.
Contains <head> and <body>.
3. <head> section
Contains metadata, not visible on the page:
Title
CSS links
Meta tags
Scripts
Character encoding
4. <body> section
Visible content:
Text
Images
Links
Forms
Tables
Buttons etc.
✔ 4. HTML Tags
A tag is a keyword enclosed in < >.
Types of tags:
A. Paired tags (most tags)
3
Have opening and closing tag.
Example:
<h1>Heading</h1>
B. Self-closing (void) tags
Do not require a closing tag.
Examples:
<br>, <img>, <hr>, <input>, <meta>, <link>
✔ 5. HTML Elements
An element = opening tag + content + closing tag.
Example:
<p>Welcome</p> is a paragraph element.
Elements can be:
1. Block-level elements
Occupy full width
Start on a new line
Examples:
<div>, <p>, <h1>, <ul>, <section>, <table>
2. Inline elements
Occupy only the required width
Do not start on a new line
Examples:
<span>, <a>, <img>, <strong>, <em>
✔ 6. Attributes
Attributes provide additional information about an element.
Example:
<img src="[Link]" alt="My photo" width="200">
Common attributes:
4
id – unique identifier
class – grouping for CSS
style – inline styling
title – tooltip text
src – for images/video/audio
href – for links
✔ 7. Advantages of HTML (Exam Points)
1. Simple and easy to understand
2. Supported by all browsers
3. Free and open standard
4. Useful for linking documents
5. Integrates with CSS, JS, and framework.
✔ 8. Limitations of HTML
1. Cannot create dynamic content alone
2. Limited styling control
3. Cannot interact with databases
4. Relies on CSS for design
5. Relies on JavaScript for interactivity
✔ 9. Applications of HTML
Websites
Web applications
Forms
Online documents
Multimedia content
5
Email templates
TOPIC 2 — Basic HTML Tags (Headings, Paragraphs,
Comments, Line Breaks, Horizontal Rules, Text
Formatting)
This is one of the most scoring topics in HTML theory.
1. Heading Tags (<h1> to <h6>)
HTML provides six levels of headings, where <h1> is the
most important and <h6> is the least important.
Syntax
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub part</h3>
Features
Headings are block-level elements.
Each heading starts on a new line.
Browsers automatically add margins to headings.
Headings help with SEO, content structure, and
accessibility.
Important Notes
Ideally only one <h1> is used per page (indicates main
topic).
Headings should follow a hierarchy. Do not skip levels
randomly.
Headings should NOT be used for increasing font size
(use CSS instead).
6
Example
<h1>HTML Notes</h1>
<h2>Basic Tags</h2>
<h3>Heading Tag</h3>
2. Paragraph Tag (<p>)
The <p> tag is used to define a paragraph of text.
Features
Block-level element.
Automatically adds space (margin) above and below.
Browsers wrap text inside <p> by default.
Syntax
<p>This is a paragraph.</p>
Notes
Avoid placing block elements (like <div>, <table>) inside
<p>.
3. Line Break Tag (<br>)
Used to insert a single line break inside text.
Syntax
Hello<br>World
Characteristics
It is a self-closing (void) tag.
Does not create extra spacing like a paragraph does.
Use cases: poems, addresses, form fields, or when you need
manual line breaks.
7
4. Horizontal Rule Tag (<hr>)
Creates a horizontal line across the page.
Syntax
<hr>
Features
Self-closing tag.
Used to visually separate sections.
Can be styled using CSS (width, color, height).
Example:
<h2>Section 1</h2>
<p>Content...</p>
<hr>
<h2>Section 2</h2>
5. Comments (<!-- -->)
Comments are not displayed in the browser.
Syntax
<!-- This is a comment -->
Uses
Explaining code for developers.
Temporarily disabling a part of code.
Adding notes for future reference.
Exam tip:
Comments improve readability but do not affect output.
6. Text Formatting Tags
8
These tags change the appearance or meaning of text.
They are divided into semantic and non-semantic.
6.1 Semantic Formatting Tags
These convey meaning, not just style.
A. <strong>
Represents important text, usually bold.
<strong>Important note</strong>
B. <em>
Represents emphasized text, usually italic.
<em>Read carefully</em>
C. <mark>
Highlights text.
<mark>Highlighted text</mark>
D. <cite>
Used for titles of creative works.
E. <code>
Displays code in monospaced font.
F. <small>
Represents fine print or less important text.
6.2 Non-Semantic Formatting Tags
These change appearance but do not convey meaning.
A. <b>
Bold text (only visual).
B. <i>
9
Italic text (only visual).
C. <u>
Underlined text.
D. <sup>
Superscript.
X<sup>2</sup>
E. <sub>
Subscript.
H<sub>2</sub>O
F. <strike> / <s>
Strike-through text.
7. Preformatted Text (<pre>)
Displays text exactly as written — with spaces, line breaks,
and formatting preserved.
Syntax
<pre>
Line 1
Line 2
Indented Line
</pre>
Useful for displaying poems, code, structured text.
8. Quotations
A. <blockquote>
Used for long quotations (block-level).
10
<blockquote>
This is a long quote.
</blockquote>
B. <q>
Short inline quote.
He said <q>Hello</q>.
9. Entities
Entities represent reserved characters.
Examples:
< → <
> → >
& → &
space →
Entities are important because HTML treats certain characters
as code.
TOPIC 3 — HTML LINKS & IMAGES
(Exam-oriented, fully detailed, with definitions, subtopics,
examples)
PART A — HTML LINKS (<a> tag)
The <a> tag is used to create hyperlinks, which connect one
webpage to another.
1. Syntax of Link Tag
<a href="URL">Link Text</a>
11
Meaning of attributes
href → the location where the link points
Link Text → the visible clickable text
2. Types of Links
A. Absolute Links
These contain the complete URL of a website.
Example:
<a href="[Link] GFG</a>
Use when linking to external websites.
B. Relative Links
These point to pages within the same website/project.
Example:
<a href="[Link]">About Us</a>
Use when files are stored in the same folder or project.
C. Email Links
Used to open the user’s email client.
<a href="[Link] Email</a>
D. Telephone Links
Used on mobile devices to initiate calls.
<a href="[Link] Us</a>
E. Internal Page Links (Anchor Links)
12
Used to jump to another section within the same page.
1. Create an id:
<h2 id="services">Our Services</h2>
2. Link to it:
<a href="#services">Go to Services</a>
Extremely common in documentation pages.
3. target Attribute
Controls where the link opens.
Most common values
Value Meaning
_self Default. Opens link in same tab.
_blank Opens link in NEW tab.
_paren
Opens in parent frame.
t
Opens in full window (removes
_top
frames).
Example:
<a href="[Link] target="_blank">Google</a>
Exam Tip:
Always use rel="noopener noreferrer" for security when using
_blank.
4. Download Attribute
Used to force a file download:
<a href="[Link]" download>Download PDF</a>
13
5. Styling Links (States)
A link has 4 states:
Pseudo-
State
class
Norma
a:link
l
Visited a:visited
Hover a:hover
Active a:active
Example:
a:hover {
color: red;
}
PART B — IMAGES (<img> tag)
Used to display images on a webpage.
1. Syntax of Image Tag
<img src="[Link]" alt="Description">
Attributes of <img>
Attribut
Meaning
e
src Location of the image file
Alternative text for screen readers / when
alt
image fails
width Width of the image
height Height of the image
14
Attribut
Meaning
e
title Tooltip text
loading Lazy loading (lazy, eager)
2. Importance of alt Attribute
Required for accessibility (screen readers).
Helps with SEO.
Displays text if image cannot load.
Example:
<img src="[Link]" alt="Image of a lion roaring">
3. Absolute vs Relative Image Paths
A. Absolute Path
<img src="[Link]
B. Relative Path
<img src="images/[Link]">
Used when image is inside project folder.
4. Common Image Formats
Format Use Case
JPG/JPEG Photographs
PNG Transparent images
GIF Animations
SVG Logos, icons (scalable)
15
Format Use Case
Modern high-quality + small
WEBP
size
Note: SVG is best for logos in responsive designs.
5. Image Linking
Images can be clickable links.
<a href="[Link]">
<img src="[Link]" alt="Phone">
</a>
6. Responsive Images
Use percentage width:
<img src="[Link]" alt="" style="width: 100%;">
Or modern approach:
<picture> element
Used for multiple image versions based on screen size.
<picture>
<source srcset="[Link]" media="(min-width:
800px)">
<source srcset="[Link]" media="(max-width:
799px)">
<img src="[Link]" alt="Responsive image">
</picture>
7. Lazy Loading (HTML5 Feature)
Improves performance by loading images only when needed.
16
<img src="[Link]" alt="" loading="lazy">
8. Image Attributes Often Asked in Exams
src
alt
height
width
loading
align (deprecated but asked in exams)
border (deprecated but asked)
9. Difference Between <img> and <picture>
<img> <picture>
Displays a single Provides multiple versions of
image image
Simple Complex but powerful
Responsive based on screen
Fixed source
conditions
TOPIC 4 — HTML LISTS (UNORDERED, ORDERED, AND
DESCRIPTION LISTS)
This is one of the easiest and most frequently asked theory
topics.
1. What is a List in HTML?
A list is a collection of related items displayed in a structured
manner.
HTML provides three types of lists:
17
1. Unordered List → bullet points
2. Ordered List → numbers / letters
3. Description List → terms and definitions
Lists make content more readable and organized.
----------------------------------------
PART A — UNORDERED LIST (<ul>)
An unordered list displays items with bullets, without any
specific order.
1. Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
The <li> tag defines list items.
2. Bullet Types (type attribute)
Although deprecated in HTML5, still asked in exams.
Types:
disc (default)
circle
square
Example:
<ul type="square">
<li>Apple</li>
<li>Banana</li>
18
</ul>
3. Practical Uses
Menus
Navigation bars
Features list
Short points in documents
----------------------------------------
PART B — ORDERED LIST (<ol>)
An ordered list displays items in a specific order using
numbers or letters.
1. Syntax
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
2. Numbering Styles (type attribute)
Type
Output Style
Value
1, 2, 3…
1
(default)
A A, B, C…
a a, b, c…
I I, II, III…
19
Type
Output Style
Value
i i, ii, iii…
Example:
<ol type="A">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
</ol>
3. start Attribute
Used to start numbering from a custom value.
Example:
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
</ol>
4. reversed Attribute
Displays list in reverse order.
<ol reversed>
<li>First</li>
<li>Second</li>
</ol>
5. Practical Uses
20
Step-by-step procedures
Rankings
Exams / question lists
Top-10 type content
----------------------------------------
PART C — DESCRIPTION LIST (<dl>)
Used to display a term and its description, similar to a
dictionary or glossary.
1. Syntax
<dl>
<dt>HTML</dt>
<dd>A markup language for creating webpages.</dd>
</dl>
Tag meanings:
<dt> → description term
<dd> → description details
2. Features
Block-level list
Used for FAQs, glossaries, definitions
Supports multiple <dd> for one <dt>
3. Example
<dl>
<dt>CPU</dt>
21
<dd>Central Processing Unit</dd>
<dt>RAM</dt>
<dd>Random Access Memory</dd>
</dl>
----------------------------------------
PART D — Nested Lists
A list inside another list.
Example:
<ul>
<li>Fruits
<ol>
<li>Mango</li>
<li>Banana</li>
</ol>
</li>
</ul>
Uses:
Menus → dropdown levels
Document structure → chapters → sections
Question papers → Q1 → subparts
----------------------------------------
PART E — Difference Between UL, OL, DL
22
Feature UL OL DL
Meaning Unordered List Ordered List Description List
Numbers /
Marker Bullets None
letters
Tags
<ul><li> <ol><li> <dl><dt><dd>
used
Items without Items with Terms with
Use
order sequence definitions
✅ TOPIC 5 — HTML TABLES
A very important exam topic. Questions come from syntax,
attributes, merging cells, and structure.
1. What is a Table in HTML?
A table is used to display data in rows and columns.
HTML tables are created using a combination of tags that
define:
Table itself
Table rows
Table cells
Table headings
Table captions
Table sections
Tables are useful for structured data like results, timetables,
product lists, bills, etc.
---------------------------------------
2. Table Tags and Their Meanings
23
Tag Meaning
<table> Defines the table
<tr> Table row
<td> Table data (cell)
Table header cell (bold + centered by
<th>
default)
<caption
Gives a title to the table
>
<thead> Groups header rows
<tbody> Groups main table rows
<tfoot> Groups footer rows
<colgroup
Groups columns for styling
>
<col> Styles individual columns
---------------------------------------
3. Basic Table Structure
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>20</td>
24
</tr>
</table>
Output:
A simple table with two rows and two columns.
---------------------------------------
4. Table Heading vs Table Data
<th>
Header cell
Bold by default
Center-aligned by default
Represents the “label” of a column or row
<td>
Normal data cell
Left-aligned by default
---------------------------------------
5. Row Span (rowspan)
Used to merge multiple rows vertically.
Example:
<td rowspan="2">Science</td>
Meaning:
This cell will occupy 2 rows.
6. Column Span (colspan)
Used to merge multiple columns horizontally.
25
Example:
<th colspan="3">Student Details</th>
Meaning:
The heading covers 3 columns.
---------------------------------------
7. Adding Table Caption
<caption> is used to give a title to the table.
Displayed above the table by default.
Example:
<table border="1">
<caption>Student Marksheet</caption>
...
</table>
---------------------------------------
8. Table Sections: <thead>, <tbody>, <tfoot>
These tags make tables structured, clean, and accessible.
Example:
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
26
<tbody>
<tr>
<td>Book</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>200</td>
</tr>
</tfoot>
</table>
Why use them?
Better for large data tables
Helps screen readers
Useful for styling tables with CSS
---------------------------------------
9. Table Borders (Old Method vs CSS)
Old method (exam-relevant but outdated):
<table border="1">
Modern method:
table, th, td {
border: 1px solid black;
27
border-collapse: collapse;
}
border-collapse: collapse;
makes borders merge neatly (important for clean tables).
---------------------------------------
10. Cell Padding and Spacing
cellpadding → space inside cells
cellspacing → space between cells
Example:
<table border="1" cellpadding="10" cellspacing="5">
Note: Deprecated in HTML5, but examiners still ask.
Replace with CSS today.
---------------------------------------
11. Styling Columns: <colgroup> and <col>
Useful when you want to apply styles to entire columns.
Example:
<table border="1">
<colgroup>
<col style="background-color: lightyellow;">
<col style="background-color: lightblue;">
</colgroup>
<tr>
<th>Name</th>
28
<th>Marks</th>
</tr>
<tr>
<td>Aryan</td>
<td>92</td>
</tr>
</table>
---------------------------------------
12. Complex Example with rowspan & colspan
Example:
<table border="1" cellpadding="5">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Ali</td>
<td>80</td>
<td>85</td>
29
</tr>
</table>
This example is very commonly asked in exams.
---------------------------------------
13. Differences: <td> vs <th> vs <caption>
Tag Meaning Default Style
<td> Table Data Normal text
Table
<th> Bold + Centered
Header
<caption Centered above
Table Title
> table
---------------------------------------
14. Advantages of Tables
1. Organizes large data systematically
2. Easy to read and compare values
3. Supports merging cells
4. Supports styling and formatting
5. Useful in forms, invoices, timetables, marksheets
15. Limitations of Tables
1. Not suitable for page layout
2. Hard to maintain if content is large
3. Bad for responsive design
4. Less flexible compared to CSS layouts (flexbox/grid)
30
✅ TOPIC 6 — HTML FORMS
(One of the most important long-answer questions in exams)
1. What is an HTML Form?
An HTML Form is used to collect user input.
It allows users to enter data like:
Name
Email
Password
Choices (radio/checkbox)
Files
Feedback
Login credentials
Forms are the primary way a website interacts with users.
The data entered inside a form can be sent to a server for
processing.
------------------------------------------------------
2. <form> Tag – The Form Container
All form elements must be placed inside the <form> tag.
Syntax
<form action="server_page" method="post">
form elements...
</form>
3. Important Form Attributes
These are exam points:
31
Attribute Meaning
URL of server script that processes
action
the form
Method used to send data (GET or
method
POST)
name Name of the form
target Where to display the response
autocomplet
Enables/disables browser auto-fill
e
novalidate Disables HTML validation
3.1 action Attribute
Specifies where form data should be sent.
<form action="[Link]">
If blank:
action="" → page submits to itself.
3.2 method Attribute
GET
Appends form data in URL
Not secure
Data length is limited
Good for search queries
Example:
[Link]/form?name=ali
POST
Sends data inside HTTP body
32
Secure
No length limit
Used for login, signup, payments
Exam question:
Difference between GET and POST is ALWAYS asked.
------------------------------------------------------
4. Form Input Elements
All interactive fields inside a form are created using
<input> tag or specialized tags.
4.1 <input> Tag
Syntax
<input type="text">
The type attribute changes the behavior of input.
COMMON INPUT TYPES
1. text
<input type="text" name="username">
2. password
Hides characters using dots.
<input type="password" name="pass">
3. email
Validates email format.
<input type="email" name="email">
4. number
Accepts numeric values.
33
<input type="number" min="1" max="10">
5. date
Displays date picker.
<input type="date">
6. time
<input type="time">
7. checkbox
Allows multiple selections.
<input type="checkbox" name="lang" value="C"> C
8. radio
Allows only one selection from a group.
<input type="radio" name="gender" value="male"> Male
Rule:
All radio buttons in the same group must have the same
name.
9. file
Uploads file.
<input type="file">
10. submit
Submits form data.
<input type="submit" value="Register">
11. reset
Resets all fields to default.
<input type="reset">
34
12. button
Custom button (used with JS).
<input type="button" value="Click Me">
------------------------------------------------------
5. <textarea> Tag
Used for multi-line text.
<textarea rows="5" cols="30">
Write your message...
</textarea>
Attributes:
rows
cols
placeholder
maxlength
6. <select> and <option>
Used for dropdown menus.
Example
<select name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
</select>
Attributes
multiple → allows multiple selections
35
selected → default option selected
7. <label> Tag
Binds text to input field.
Example:
<label for="email">Email:</label>
<input id="email" type="email">
Why important?
Improves accessibility
Helps screen readers
Increases click area
------------------------------------------------------
8. HTML5 Input Types
These are modern and asked in exams:
color
range
tel
url
search
datetime-local
month
week
Example:
<input type="color">
<input type="range" min="0" max="100">
36
------------------------------------------------------
9. Fieldset and Legend
Used to group related fields.
Example:
<fieldset>
<legend>Personal Info</legend>
Name: <input type="text"><br>
Age: <input type="number">
</fieldset>
------------------------------------------------------
10. Placeholder Attribute
Shows hint text inside input.
<input type="text" placeholder="Enter your name">
------------------------------------------------------
11. Required Attribute
Makes a field mandatory.
<input type="email" required>
------------------------------------------------------
12. Pattern Attribute
Validates user input using regular expressions.
Example: phone number (10 digits)
<input type="text" pattern="[0-9]{10}">
37
------------------------------------------------------
13. Form Validation Types
A. Client-side Validation
Done by browser
Uses attributes like required, pattern, min, max, etc.
B. Server-side Validation
Done by server after form submission
More secure
Prevents hacking attempts
14. Complete Example – Registration Form
This is almost guaranteed in exams:
<form action="[Link]" method="post">
<label>Name:</label>
<input type="text" name="name"
required><br><br>
<label>Email:</label>
<input type="email" name="email"><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male">
Male
<input type="radio" name="gender" value="female">
Female<br><br>
<label>Languages:</label>
<input type="checkbox" value="C"> C
<input type="checkbox" value="Java"> Java<br><br>
<label>City:</label>
<select>
<option>Delhi</option>
<option>Mumbai</option>
</select><br><br>
38
<label>Message:</label><br>
<textarea rows="4" cols="40"></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
✅ TOPIC 7 — HTML5 SEMANTIC ELEMENTS
(Full exam-ready explanation + definitions + examples)
1. What Are Semantic Elements?
A semantic element clearly describes its meaning and
purpose both to the browser and to developers.
Example:
<header> → represents a header section
<article> → represents an independent piece of content
Semantic elements improve readability, SEO, and
accessibility.
Non-semantic elements
<div>
<span>
These do not tell what content they contain.
--------------------------------------------------
2. Why Are Semantic Elements Important?
1. Better Structure
39
Semantic tags give proper structure to webpages and make
them easier to maintain.
2. Improved SEO
Search engines understand the meaning of content and rank it
better.
3. Accessibility
Screen readers understand the layout better for visually
impaired users.
4. Cleaner Code
Replacing 20–30 <div> elements with meaningful tags
improves clarity.
5. Standardization
HTML5 introduced semantics to replace messy, div-based
layouts.
--------------------------------------------------
3. List of Major HTML5 Semantic Elements
You MUST memorize these for exams:
1. <header>
Represents introductory content:
Logo
Site title
Navigation
Search bar
<header>
<h1>My Website</h1>
</header>
40
2. <nav>
Contains navigation links.
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
3. <section>
Represents a logical section of a webpage.
Used for chapters, topics, content groups.
<section>
<h2>About Us</h2>
</section>
4. <article>
Represents self-contained, independent content that can
stand alone.
Use for:
Blog post
News article
Forum post
Product description
<article>
<h3>Latest News</h3>
<p>Today something happened…</p>
</article>
41
5. <aside>
Represents side content related to the main content.
Examples:
Ads
Sidebars
Related links
Quotes
Extra info
<aside>
<h4>Related Articles</h4>
</aside>
6. <footer>
Represents the closing or bottom section of a page or article.
Contains:
Copyright
Contact info
Social links
<footer>
<p>© 2025 MySite</p>
</footer>
7. <main>
Represents the main content of the webpage.
Only ONE <main> per page.
<main>
42
<h2>Welcome to Our Website</h2>
</main>
8. <figure> and <figcaption>
Used to show images or illustrations with a caption.
<figure>
<img src="[Link]" alt="Moon">
<figcaption>Image of the Moon</figcaption>
</figure>
9. <mark>
Highlights text.
<p>This is <mark>important</mark> info.</p>
10. <time>
Represents date/time.
<time datetime="2025-11-13">November 13, 2025</time>
11. <summary> and <details> (Interactive semantic
tags)
Expandable/collapsible content:
<details>
<summary>Click to Read More</summary>
<p>This is hidden text.</p>
</details>
--------------------------------------------------
43
4. Difference Between Semantic vs Non-Semantic
Elements
Semantic Non-Semantic
Has meaning No meaning
<header>, <nav>,
<div>, <span>
<footer>
Improves SEO Neutral for SEO
Helps screen readers Gives no context
Hard to
Clean, structured code
understand
HTML5 recommended Old method
--------------------------------------------------
5. Example: Semantic Webpage Layout
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Posts</a>
</nav>
<main>
<article>
<h2>Semantic HTML</h2>
<p>Semantic elements give meaning to content.</p>
44
</article>
<aside>
<h3>Popular Posts</h3>
</aside>
</main>
<footer>
<p>© 2025 Blog</p>
</footer>
This is the standard structure examiners expect.
--------------------------------------------------
6. Advantages of Semantic HTML5 Elements
1. Improves readability of code
2. Enhances SEO
3. Makes sites more accessible
4. Standard layout for modern websites
5. Replaces unclear <div>-heavy code
6. Helps browsers and crawlers understand the page
7. Supports assistive technologies
✅ TOPIC 8 — HTML MEDIA ELEMENTS
(audio, video, iframe)
1. <audio> Tag
45
Used to embed audio files in a webpage.
Syntax
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Attributes
Attribut
Meaning
e
controls Adds play/pause UI
autoplay Plays automatically
loop Repeats audio
muted Starts muted
Hints loading behavior (auto, metadata,
preload
none)
Supported formats: MP3, WAV, OGG.
2. <video> Tag
Used to embed videos.
Syntax
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Attributes
controls
autoplay
loop
46
muted
poster → image shown before video plays
width and height
3. <iframe> Tag
Used to embed another webpage inside current page.
Syntax
<iframe src="[Link] width="500"
height="300"></iframe>
Uses
Embedding maps
Embedding YouTube videos
Embedding forms or other sites
Important Attributes
Attribute Meaning
src URL to embed
width /
Dimensions
height
allowfullscre Allows full-screen
en mode
frameborder Border control (old)
Security note (exam point):
Some websites block iframe embedding using X-Frame-
Options.
---------------------------------------------------
✅ TOPIC 9 — HTML Layout (div, span, id, class)
47
1. <div> Tag
Block-level element
Used as a container to group elements
Used for layout (before semantic tags existed)
Example:
<div class="container">
<h2>Title</h2>
<p>Content...</p>
</div>
2. <span> Tag
Inline element
Used to style part of text
<p>This is <span style="color:red;">important</span>
text.</p>
3. id Attribute
Must be unique
Used to identify a single element
<div id="header"></div>
Used in:
CSS (#header)
JS ([Link]())
Internal linking (href="#header")
4. class Attribute
48
Can be used multiple times
Groups elements for styling
<div class="card"></div>
Used in:
CSS (.card)
JS (getElementsByClassName())
Difference Between id and class
id class
Unique Multiple
Used for one Group of
element elements
Referred with # Referred with .
---------------------------------------------------
✅ TOPIC 10 — GLOBAL ATTRIBUTES
Global attributes work on any HTML element.
Important ones for exams:
1. id
Unique identifier.
2. class
Grouping.
3. style
Inline CSS.
<p style="color: blue;">Hello</p>
4. title
49
Tooltip.
5. hidden
Hides element.
<p hidden>This won't show</p>
6. contenteditable
Makes any element editable.
<div contenteditable="true">Edit me</div>
7. dir
Direction of content (ltr, rtl).
8. tabindex
Controls tab navigation order.
---------------------------------------------------
✅ TOPIC 11 — EVENT ATTRIBUTES
These are used to handle events with JavaScript.
Mouse Events
onclick
onmouseover
onmouseout
ondblclick
Example:
<button onclick="alert('Clicked!')">Click</button>
Keyboard Events
onkeydown
onkeyup
Form Events
50
onfocus
onblur
onchange
onsubmit
---------------------------------------------------
✅ TOPIC 12 — HTML META TAGS (SEO Important)
Meta tags provide metadata about the webpage.
Placed inside <head>.
1. Description
<meta name="description" content="This is a website about
education.">
2. Keywords (deprecated but asked in exams)
<meta name="keywords" content="HTML, CSS, Web">
3. Author
<meta name="author" content="Naieem Qureshi">
4. Viewport (responsive design)
Important in mobile design:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
---------------------------------------------------
✅ TOPIC 13 — HTML BLOCK vs INLINE ELEMENTS
Block-level
Takes full width
Starts new line
Examples: <div>, <p>, <h1>
51
Inline
Takes only needed width
Same line with others
Examples: <span>, <a>, <img>
---------------------------------------------------
✅ TOPIC 14 — HTML FILE PATHS
1. Absolute Path
Full URL.
2. Relative Path
Path relative to current file.
Form Example
Same
[Link]
folder
Child images/
folder [Link]
Parent
../[Link]
folder
---------------------------------------------------
✅ TOPIC 15 — HTML CHARACTER ENTITIES
Used to display reserved characters.
Display Code
< <
> >
&
&
;
52
Display Code
"
"
;
Non-breaking  
space ;
---------------------------------------------------
✅ TOPIC 16 — HTML QUOTATIONS (Expanded)
<q>
Short inline quote.
<blockquote>
Long quotations.
<cite>
References or titles.
---------------------------------------------------
✅ TOPIC 17 — HTML CANVAS (Theory)
Used for drawing graphics with JavaScript.
<canvas id="canvas1" width="300" height="200"></canvas>
Used for:
Games
Charts
Drawings
Requires JS to work.
---------------------------------------------------
✅ TOPIC 18 — HTML SVG (Theory)
53
SVG = Scalable Vector Graphics.
Vector images that don’t lose quality.
Example:
Used for:
Icons
Logos
Shapes
---------------------------------------------------
✅ TOPIC 19 — HTML WEB STORAGE (Theory)
Provides local data storage in the browser.
1. localStorage
Permanent (until cleared)
Stores key–value pairs
2. sessionStorage
Only for one browser session
Example:
[Link]("name", "Naieem");
---------------------------------------------------
✅ TOPIC 20 — HTML GEOLOCATION (Theory)
Allows websites to get user location (with permission).
[Link]();
Used in:
Maps
54
Ride apps
Food delivery
55
