HTML Basics: Structure & Tags Guide
Uploaded by
anonymousvoidloop7xHTML Basics: Structure & Tags Guide
Uploaded by
anonymousvoidloop7xHTML Hand Book
09.04.20XX
─
Akarsh Shukla
Shed Hybrid Academy
1 23 Your Street
Your City, ST 12345
CHAPTER 1: Introduction & Evolution of HTML
🔹 1.1 What is HTML?
TML (HyperText Markup Language) is thestandard languagefor building web pages.
H
It is not a programming language but amarkup language,meaning it defines the
structure and meaning of content.
Every site you visit—Facebook, YouTube, Wikipedia—is built on HTML as its foundation.
💡
Real-Life Example:
Imagine you are writing aresearch paper. You haveheadings, paragraphs, tables, and
images. Without structure, your paper would just be a messy blob of words. HTML provides
that structure for web content.
💻 Code Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page in HTML.</p>
</body>
</html>
🔹 1.2 Brief History of HTML
● 1991 – HTML 1.0: Created byTim Berners-Lee, verylimited.
● 1995 – HTML 2.0: Standardized, supported forms.
● 1997 – HTML 3.2: Added scripting, tables, multimedia.
● 1999 – HTML 4.01: Widely used for years.
● 2000s – XHTML: Stricter syntax.
● 2014 – HTML5: Modern features (video, audio, canvas,semantic tags, APIs).
⚠️
Problem Example:
In the early days, developers used
<table>for entirepage layouts. This made websites
slow and inaccessible. Today we usesemantic tagslike <header> , ,
<nav> ,
<section>
<footer>
.
🔹 1.3 Why Learn HTML?
TML is thebackbone of the web. Without masteringit, you cannot master web
H
development.
Even frameworks likeReact, Angular, Djangoeventuallyoutput HTML.
💡
Real-Life Example:
Think of ahouse:
● HTML = Skeleton 🦴
● CSS = Paint & Decoration 🎨
● JavaScript = Electricity ⚡
Without the skeleton, nothing else can exist.
📝 Exercises – Chapter 1 (10 Questions)
1. Define HTML in your own words.
2. Who invented HTML and in which year?
3. Explain the difference between HTML and a programming language.
4. Write the basic HTML structure of a webpage.
5. What is the purpose of ?
<!DOCTYPE html>
6. CompareHTML 4.01andHTML5features.
7. Why is using
<table>for layout a bad practice?
8. Explain the real-world analogy of HTML, CSS, and JavaScript.
9. What happens if you remove
<!DOCTYPE html>from adocument?
10.Write an HTML page that displays yourname and age.
CHAPTER 2 : HTML Document Structure & Anatomy
🔹 2.1 The Anatomy of an HTML Document
Every HTML page follows astandard structure. Thinkof it as a human body:
!DOCTYPE html>→ Thebirth certificate(tells thebrowser what kind of
● <
document it is).
<html>→ Thebody(wraps everything).
●
<head>→ Thebrain(stores metadata, title, linksto CSS/JS).
●
<body>→ Theorgans & muscles(content that userssee).
●
💡
Real-Life Example:
Anewspaper:
● Header = Title of newspaper
● Body = Articles and images
● F
ooter = Page number & copyright
Just like a newspaper has structure, an HTML document follows a hierarchy.
💻 Code Example – Basic Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
meta name="viewport" content="width=device-width,
<
initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is the beginning of my HTML journey.</p>
</body>
</html>
🔹 2.2 The DOCTYPE Declaration
<!DOCTYPE html>tells the browser this is anHTML5document.
●
● Without it, browsers may use“quirks mode”, causinginconsistent rendering.
⚠️
Problem Example:
If you forget , your layout may breakdifferently in Chrome, Firefox, and
<!DOCTYPE html>
Safari.
✅Best Practice:Always start your HTML files with .
<!DOCTYPE html>
🔹 2.3 The
<html>Tag
● Root element that wrapseverything.
● Common attribute:
lang="en"(important for accessibility & SEO).
💡
Real-Life Example:
Think of
<html>as theouter shell of a laptopthatholds all the parts inside.
🔹 2.4 The
<head>Section
The brain of the document — containsinformation forthe browser, not the user.
Common tags inside :
<head>
<title>→ Title of the webpage (shown in browser tab).
●
meta charset="UTF-8">→ Ensures all languages (English,Hindi, Arabic, emojis)
● <
display correctly.
<meta name="viewport">→ Makes website responsiveon mobile.
●
<link>→ Connects external CSS files.
●
<script>→ Loads JavaScript.
●
💻 Code Example – Head Section
<head>
<title>Student Portal</title>
<meta charset="UTF-8">
<meta name="description" content="A student learning platform">
meta name="viewport" content="width=device-width,
<
initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
</head>
🔹 2.5 The
<body>Section
verythingvisible to the usergoes inside
E .
<body>
Examples: headings, paragraphs, images, tables, forms.
💡
Real-Life Example:
If
<head>is therecipe instructions,
<body>is thefinished dishserved on the table.
🔹 2.6 Comments in HTML
● Comments are ignored by the browser.
● Written as:
<!-- This is a comment -->
● Used for notes, debugging, or disabling code temporarily.
⚠️
Problem Example:
Leaving passwords or sensitive notes in comments is dangerous — users can see them in
page source.
📝 Exercises – Chapter 2 (12 Questions)
1. What is the purpose of ?
<!DOCTYPE html>
2. Explain the role of the
<html>tag.
3. Why should you use the
langattribute in ?
<html>
4. What is the difference between
<head>and ?
<body>
5. W
rite an HTML page with atitle “My Blog”and a headingin
<body>saying
“Welcome to My Blog”.
6. What happens if you remove the
<meta charset="UTF-8">tag?
7. Explain the importance of .
<meta name="viewport">
8. Create a webpage with an external CSS link in the .
<head>
9. Write a comment in HTML saying “This is my homepage”.
10.Why is putting CSS in
<head>better than inline CSS?
11.How is
<title>different from ?
<h1>
12.Design a simple HTML document withhead + body, wherethe head includes a title
and meta tags, and the body includes at least one heading and a paragraph.
CHAPTER 3 : Text & Typography Tags
3.1 Headings in HTML (
<h1>– )
<h6>
● Headings define thehierarchy of content.
<h1>→ most important (like a book title).
●
<h6>→ least important (like a footnote heading).
●
💡
Real-Life Example:
Think of auniversity thesis:
● Title →
<h1>
● Chapter name →
<h2>
● Section title →
<h3>
● Sub-section →
<h4>
● Notes →
<h5>/
<h6>
💻Code Example:
<h1>World News</h1>
<h2>Politics</h2>
<h3>India Elections</h3>
<h4>Voter Turnout</h4>
<h5>Urban Areas</h5>
<h6>Footnote</h6>
🔹 3.2 Paragraphs ( )
<p>
● Defines blocks of text.
● Browser automatically addsspace before & afteraparagraph.
💻Code Example:
<p>HTML is the standard markup language for creating web pages.</p>
<p>It is the backbone of every website you see online.</p>
💡
Real-Life Example:
Anovelis divided into paragraphs to make readingeasier.
🔹 3.3 Line Breaks & Horizontal Rules
<br>→ Adds aline break(without starting a new paragraph).
●
<hr>→ Adds ahorizontal rule/line, often used toseparate sections.
●
💻Code Example:
<p>Hello!<br>How are you?</p>
<hr>
<p>End of section</p>
🔹 3.4 Text Formatting Tags
These tags addemphasis or styleto text:
Tag Meaning Example Output
<b>
Bold (visual only) Bold
stron Strong importance (semantic)
< Important
g>
<i>
Italic (visual only) Italic
<em>
Emphasis (semantic) Emphasized
<u>
Underlined Underlined
<mark> Highlighted
Highlighted
small Smaller text
< small text
>
<sup>
Superscript X²
<sub>
Subscript H₂O
<del>
Deleted text (strikethrough) Deleted
<ins>
Inserted text (underline semantic) Inserted text
💡Real-Life Example:
● Bold→ Teacher shouting your name in class.
● Italic→ Whispering something.
<mark>→ Yellow highlighter in your notes.
●
<del>→ Crossed-out mistake in a notebook.
●
🔹 3.5 Quotation & Citation Tags
<blockquote>→ For large quoted text (block).
●
<q>→ For short inline quotes.
●
<cite>→ For citing a source.
●
<abbr>→ Abbreviation with tooltip.
●
💻Code Example:
<blockquote>
"The best way to predict the future is to invent it."
</blockquote>
p><q>Code is like humor.</q> It’s better when you <cite>explain
<
less.</cite></p>
p><abbr title="World Health Organization">WHO</abbr> was founded in
<
1948.</p>
🔹 3.6 Preformatted & Code Tags
<pre>→ Preserves spaces and line breaks.
●
<code>→ Displays inline code.
●
💻Code Example:
<pre>
for (let i = 0; i < 5; i++) {
[Link]("Hello World");
}
</pre>
<p>Inline code: <code>[Link]("Hello");</code></p>
📝 Exercises – Chapter 3 (15 Questions)
1. What is the difference between
<h1>and ?
<h6>
2. Why should you only useone
<h1>per page?
3. Write an HTML page with:
○ A main heading: “My Portfolio”
○ A subheading: “Projects”
○ A smaller heading: “Web Apps”
4. Write 2 paragraphs describing your hobby.
5. Create aline breakbetween two sentences using .
<br>
6. Create ahorizontal lineto separate “Chapter 1” and“Chapter 2”.
7. Write a sentence where one word isboldand anotherword isitalic.
8. Show the chemical formula for water using .
<sub>
9. Show the equation “E = mc²” using .
<sup>
10.Write a paragraph with one word highlighted using .
<mark>
11.Create a blockquote with your favorite motivational quote.
12.Add a short inline quote using .
<q>
13.Use<abbr>to show the abbreviationNASAwith tooltip“National Aeronautics and
Space Administration”.
14.Write a
<pre>block showing a small piece of Pythoncode.
15.Explain why
<strong>is better than
<b>for accessibility.
CHAPTER 4 :Links & Navigation
🔹 4.1 Introduction to Links
Links are theroads and highways of the web.
● W
ithout links, the internet would be like acity withmillions of houses but no
roads.
● E
very
<a>(anchor tag) creates a clickable connectionto another page, section, or
resource.
💡
Real-Life Analogy:
Imagine youruniversity library:
● Bookshelves = Websites
● Books = Webpages
● Index cards = Links that guide you to the right page.
🔹 4.2 The
<a>Tag – Anchor of the Web
Basic structure:
<a href="URL">Clickable Text</a>
href(Hypertext REFerence) → The destination of thelink.
●
● The text between
<a> ... </a>→ What users click on.
💻Code Example:
<a href="[Link] Wikipedia</a>
🔹 4.3 Absolute vs Relative Links
1. Absolute Link→ Full URL, used to link to externalwebsites.
<a href="[Link]
2. Relative Link→ Path relative to the current file,used within your own website.
<a href="[Link]">About Us</a>
💡Real-Life Example:
● Absolute→ “Go to my friend’s house in another city(full address).”
● Relative→ “Go to my kitchen (inside the same house).”
🔹 4.4 Linking to Sections (Internal Page Jumps)
You can link to a specific section usingIDs.
💻Code Example:
<a href="#contact">Go to Contact Section</a>
<h2 id="contact">Contact Us</h2>
<p>Email: support@[Link]</p>
💡
Real-Life Example:Like atable of contents ina book, where clicking on a chapter
takes you directly there.
🔹 4.5 Anchor Tag Attributes
Attribute Purpose Example
href
Destination URL <a href="[Link]">Home</a>
target
Where to open link _self(same tab),
_blank(new tab)
download D
ownload file instead of a href="[Link]"
<
opening download>Download PDF</a>
title
Tooltip on hover a href="[Link]" title="Learn
<
more about us">About</a>
rel
Relationship (security/SEO) ,
nofollow
,
noopener noreferrer
type
IME type of linked
M a href="[Link]"
<
document type="text/css">
🔹 4.6 The
targetAttribute
1.
_self→ Default, opens in same tab.
2.
_blank→ Opens in anew tab/window.
3.
_parent→ Opens in parent frame.
4.
_top→ Opens in full window, breaking out of frames.
💻Code Example:
<a href="[Link] target="_blank">OpenAI (New Tab)</a>
⚠️
Problem Example:
Overusing
_blankcan annoy users by opening too manytabs.
🔹 4.7 Downloading Files with Links
The
downloadattribute lets users download a fileinstead of opening it.
💻Code Example:
<a href="[Link]" download="Akarsh_Resume">Download My Resume</a>
💡
Real-Life Example:Clicking a link todownloada song or bookinstead of opening it in
the browser.
🔹 4.8 Email & Phone Links
You can make links trigger anemail apporphone call.
💻Code Example – Email:
<a href="[Link] Us</a>
💻Code Example – Phone:
<a href="[Link] Us</a>
💡Real-Life Example:Clicking acontact buttonona website opens Gmail or your dialer.
🔹 4.9 Linking to Other File Types
You can link toPDF, DOCX, images, audio, video, ZIPfiles, etc.
💻Code Example:
<a href="[Link]">View Report</a>
<a href="music.mp3">Play Music</a>
<a href="[Link]">Download Project</a>
🔹 4.10 Security & SEO Best Practices
1. A
lways use rel="noopener noreferrer"with
target="_blank"→ prevents
tab hijacking.
2. Use descriptive link text (instead of “Click here”).
3. Internal linking improves SEO by connecting related pages.
4. Broken links harm user trust and ranking → check links regularly.
📝 Exercises – Chapter 4 (20 Questions)
1. Write a link to[Link] opensin a new tab.
2. Create a relative link to .
[Link]
3. Make an internal jump link from top of page to a section with .
id="faq"
4. Add a tooltip “Company Info” to a link pointing to .
[Link]
5. Make a download link for .
[Link]
6. Create a mail link to .
jobs@[Link]
7. Create a phone link for +91-9876543210.
8. Write a link to
[Link]with .
type="text/css"
9. What’s the difference between absolute and relative links?
10.Why is
rel="noopener noreferrer"important with ?
_blank
11.Create a link to aZIP filethat users can download.
12.Explain when you’d use
_parentvs .
_top
13.Make a navigation menu with links to Home, About, and Contact pages.
14.Explain the difference between
<a href="[Link]">and
<a href="[Link]"
download>
.
15.Write a link that jumps directly to the “Contact Us” section of .
[Link]
16.Why should descriptive link text be used instead of “Click here”?
17.Create a link to a YouTube video that opens in new tab.
18.Make a button-styled link (using
<a>+ CSS).
19.Create a link that downloads an image instead of opening it.
20.What are broken links and why are they harmful?
🔥 Additional Content to Deepen Chapter 4
🔹 4.11 Styling Links (CSS Basics for Anchors)
Links have4 statesin CSS:
a:link→ Normal, unvisited link
●
a:visited→ Already visited link
●
a:hover→ When the mouse pointer is over it
●
a:active→ When the link is clicked
●
💻Code Example:
<style>
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}
</style>
<a href="[Link]
💡
Real-Life Analogy:
Imagine link colors as afriendship tracker:
● Blue = New friend
● Purple = Old friend you’ve already visited
● Red = Friend waving at you when you hover
● Orange = Friend you’re actively talking to
🔹 4.12 Link Buttons
You can style
<a>tags to look likebuttons.
💻Code Example:
<a href="[Link]"
tyle="display:inline-block; padding:10px 20px; background:blue;
s
color:white; border-radius:5px; text-decoration:none;">
Sign Up
</a>
💡 Used widely inlanding pages→ “Sign Up”, “DownloadNow”.
🔹 4.13 Image Links
You can use an image instead of text inside .
<a>
💻Code Example:
<a href="[Link]">
<img src="[Link]" alt="Website Logo">
</a>
💡
Real-Life Example:Clicking thelogo in top-leftcornerof a website → usually takes
you to homepage.
🔹 4.14 Links & Accessibility (A11y)
● Always usedescriptive textinstead of “Click here”.
● Add
aria-labelwhen needed.
● Keyboard users navigate withTab→ ensure links arefocusable.
💻Code Example:
<a href="[Link]" aria-label="Go to Contact Page">Contact Us</a>
🔹 4.15 Links in Navigation Menus
Most websites use lists ( ) + links (
<ul><li> ) fornavigation.
<a>
💻Code Example:
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
💡Real-Life Example:Like amall directory boardshowing all sections.
🔹 4.16 Advanced Protocols in Links
Besides
[Link] , links can use:
[Link]
[Link] File Transfer Protocol
●
[Link] Local files (not recommended for publicsites)
●
[Link] Opens SMS app
●
geo:→ Opens maps with coordinates
●
💻Code Example:
<a href="[Link] via FTP</a>
<a href="[Link] SMS</a>
<a href="geo:28.6139,77.2090">Open Location</a>
🔹 4.17 SEO & Link Juice
● Internal linksspread authorityacross your site.
● Outbound links should berelevant and trusted.
● Use
rel="nofollow"for paid/sponsored links.
💡
Real-Life Example:Think oflink juiceas passingrecommendation powerfrom one
page to another.
🔹 4.18 Common Mistakes with Links
❌
Linking to
C:\Users\files → works only on yourPC, not online.
❌
Forgetting
/in relative links → leads to 404 errors.
❌
Using “Click here” everywhere → bad for accessibility + SEO.
✅ Always test your links before publishing.
🔹 Expanded Exercises – Chapter 4 (Additional 15 Qs)
21.Style a link so that it changes color on hover.
22.Create a button-style link to “Register Now”.
23.Make an image ([Link]) link to homepage.
24.Why should “Click here” not be used as link text?
25.Create a navigation bar with 4 links: Home, Blog, Projects, Contact.
26.Write a link that opens Google Maps at your city location.
27.Make a link that starts an SMS message.
28.Create an FTP link to download .
[Link]
29.Add
aria-label="Learn More About Services"to a serviceslink.
30.Explain the use of .
rel="nofollow"
31.Write a link that looks like a green button with white text.
32.Create a link inside a paragraph that says:
“Visit our <a href=‘[Link]’>Privacy Policy</a> page.”
33.Write 3 examples ofbad linksand correct them.
34.Why do broken links harm SEO?
35.Create a webpage with bothabsolute, relative, internal,and downloadlinks in
one page.
CHAPTER 5 :Images & Multimedia
🔹 5.1 Why Images and Multimedia Matter
● A webpage without images or media is like anewspaperwith only text.
● M
ultimedia (images, audio, video) makes websitesengaging,interactive, and
user-friendly.
● Butwrong usagecan slow down websites or make theminaccessible.
💡
Real-Life Example:
Imagine reading atravel blog→ if it has only words,it’s boring. But if it hasphotos,
videos, maps, you feel like you’re traveling too.
🔹 5.2 The
<img>Tag – Displaying Images
Basic syntax:
<img src="[Link]" alt="Description of image">
src→ Path of image (source).
●
alt→ Alternative text (for screen readers, or ifimage fails to load).
●
width/
● height→ Controls image size (pixels or %).
💻Example:
img src="[Link]" alt="Beautiful sunset over the ocean"
<
width="600" height="400">
💡Alt text importance:
● Helps blind users (screen readers read it out).
● Improves SEO → Google “sees” the alt text.
🔹 5.3 Image File Formats
● JPEG/JPG→ Best for photos (compressed, smaller size).
● PNG→ Supports transparency (logos, icons).
● GIF→ Simple animations, low quality.
● SVG→ Vector graphics (logos, shapes, scalable).
● WEBP→ Modern, lightweight, high quality (recommended).
💡Analogy:
● JPEG =Family photo
● PNG =Logo with transparent background
● GIF =Funny meme animation
● SVG =Company logo (scales without blur)
● WEBP =Hybrid, best of both worlds
🔹 5.4 Relative vs Absolute Image Paths
1. Relative Path(image in same folder):
<img src="[Link]" alt="Relative Path Example">
2. Absolute Path(full web address):
img src="[Link] alt="Absolute Path
<
Example">
🔹 5.5 Responsive Images
Use
%or
max-widthfor mobile-friendly images.
💻Code Example:
<img src="[Link]" alt="Car" style="max-width:100%; height:auto;">
💡
Real-Life Example:
Like aflexible balloon→ it adjusts size dependingon the container (desktop, tablet,
mobile).
🔹 5.6
<figure>and
<figcaption>
<figure>→ Groups image with caption.
●
<figcaption>→ Describes the image.
●
💻Example:
<figure>
<img src="[Link]" alt="Taj Mahal in India">
<figcaption>The Taj Mahal - Wonder of the World</figcaption>
</figure>
🔹 5.7 Advanced:
<picture>Element (Responsive Images)
Lets you loaddifferent imagesfor different devices.
💻Code Example:
<picture>
<source srcset="[Link]" media="(min-width: 800px)">
<source srcset="[Link]" media="(max-width: 799px)">
<img src="[Link]" alt="Website Banner">
</picture>
💡
Real-Life Example:
Like amenu with small/large portion options. Desktopgets big image, mobile gets small
one.
🔹 5.8 Background Images (with CSS)
Sometimes you don’t want inline images but abackgroundimage.
💻Code Example:
<style>
body {
background-image: url("[Link]");
background-size: cover;
}
</style>
🔹 5.9 The
<audio>Tag
Plays sound/music in webpage.
💻Code Example:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
controls→ Adds play/pause buttons.
●
● Formats: MP3, OGG, WAV.
💡Real-Life Example:Podcasts, background music,pronunciation guides.
🔹 5.10 The
<video>Tag
Plays videos inside webpage.
💻Code Example:
<video width="600" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video.
</video>
● Formats: MP4 (best), WebM, Ogg.
● Attributes:
controls→ Play/pause
○
autoplay→ Starts automatically (⚠️ may annoy users)
○
loop→ Repeats video
○
muted→ Starts muted
○
🔹 5.11 Captions & Subtitles with
<track>
Makes video accessible.
💻Code Example:
<video controls>
<source src="lecture.mp4" type="video/mp4">
track src="[Link]" kind="subtitles" srclang="en"
<
label="English">
</video>
🔹 5.12 Embedding External Media
You can embed YouTube, Spotify, Google Maps, etc. using .
<iframe>
💻Code Example – YouTube:
<iframe width="560" height="315"
src="[Link]
title="YouTube video player" frameborder="0" allowfullscreen>
</iframe>
🔹 5.13 Accessibility Tips
● Always add
altto .
<img>
● Provide captions for .
<video>
● Avoid autoplay with sound → bad for users.
🔹 5.14 SEO Best Practices for Images & Media
● Usedescriptive filenames(e.g.,
[Link]not ).
[Link]
● Addalt text.
● Uselazy loading( ) to speed up pageload.
loading="lazy"
💻Example:
<img src="[Link]" alt="Snow covered mountain" loading="lazy">
📝 Exercises – Chapter 5 (35 Questions)
1. Insert an image
[Link]with alt text “Cute Dog”.
2. What’s the difference between JPEG and PNG?
3. Insert an image with width .
500px
4. Create an image withrelative pathand one withabsolutepath.
5. Why is
alttext important?
6. Add a background image to .
<body>
7. Use
<figure>and
<figcaption>for an image of EiffelTower.
8. Make a responsive image using .
max-width:100%
9. Create a
<picture>element with small and large versionsof .
[Link]
10.Insert an audio file
song.mp3with controls.
11.Add a video
movie.mp4with width .
400
12.Make a video autoplay and loop.
13.Add English subtitles to a video.
14.Why should autoplay with sound be avoided?
15.Embed a YouTube video into a webpage.
16.Add
loading="lazy"to an image.
17.Why is
webpbetter than ?
jpg
18.What happens if you don’t use
alttext?
19.Create an image link ([Link] → homepage).
20.Show H₂O using image vs. text.
21.Add a transparent PNG logo to a dark background.
22.Which format is best for animations?
23.Which format is scalable without losing quality?
24.Add a
<track>subtitle file to .
lecture.mp4
25.Create a music player for .
bg-music.mp3
26.Why is SVG preferred for logos?
27.Add 3 images in a row, each responsive.
28.Add a caption under a historical photo.
29.Why is lazy loading good for SEO?
30.Which attribute makes videos repeat automatically?
31.Create an iframe with Google Maps location.
32.Why should you compress images before uploading?
33.Add a favicon (icon) to your website.
34.Why is
alt="image"a bad practice?
35.Create a portfolio page with 3 images, one audio file, and one video.
CHAPTER 6 :Lists & Tables
🔹 6.1 Why Lists & Tables Matter
ists and tables aren’t just for presentation—they structure information so users and
L
search engines can read it easily. Proper use of lists and tables improves:
● User Experience– Content becomes scannable
● Accessibility– Screen readers interpret content correctly
● SEO– Search engines can parse structured data
● Visual Organization– Clean layout, hierarchy, andclarity
💡Real-Life Examples:
● Menu items →
<ul>
● Step-by-step tutorial →
<ol>
● Price charts →
<table>
● FAQ →
<dl>
🔹 6.2 HTML Lists (Expanded)
6.2.1 Unordered List
<ul>
● Represents itemswithout a specific order
● Default bullet points; can be styled with CSS
Basic Example:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
Advanced Styling:
ul {
list-style-type: circle; /* disc, circle, square, none */
padding-left: 25px;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
li {
margin-bottom: 8px;
}
💡
Real-Life Scenario:
A website shopping list uses icons instead of bullets:
<ul style="list-style-image: url('[Link]');">
<li>Milk</li>
<li>Bread</li>
</ul>
6.2.2 Ordered List
<ol>
● Represents itemsin a specific sequence
● Supports numbers, letters, Roman numerals
Example with Roman Numerals:
<ol type="I">
<li>Wake up</li>
<li>Brush teeth</li>
<li>Have breakfast</li>
</ol>
CSS Styling:
ol {
counter-reset: step;
}
ol li {
counter-increment: step;
margin-bottom: 10px;
}
ol li::before {
content: counter(step) ". ";
font-weight: bold;
color: #4CAF50;
}
💡Pro Tip:Use ordered lists for instructions, tutorials,or steps in processes.
6.2.3 Nested Lists (Multi-Level Lists)
Example:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Advanced Styling:
ul ul {
margin-left: 20px;
list-style-type: square;
}
✅ Best Practices:
● Keep≤3 levelsdeep
● Use CSS for indentation, not spaces
6.2.4 Description List
<dl>
Used forterms and definitions, FAQs, or glossaries.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style HTML elements.</dd>
</dl>
CSS Styling:
dl dt {
font-weight: bold;
color: #2E8B57;
}
dl dd {
margin-left: 20px;
margin-bottom: 10px;
}
💡
Real-Life Example:
A glossary page or FAQ section on a website.
🔹 6.3 HTML Tables (Expanded)
Tables are used todisplay data in rows & columns.Key concepts:
<table>→ container
●
<tr>→ table row
●
<th>→ table header
●
<td>→ table data
●
6.3.1 Basic Table
<table border="1">
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
<td>5</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
<td>10</td>
</tr>
</table>
6.3.2 Table Caption
<table border="1">
<caption>Fruit Prices for September 2025</caption>
...
</table>
💡
Accessibility Tip:
Screen readers read captions first, helping users understand table content.
6.3.3 Colspan & Rowspan
Merge columns (colspan) & rows (rowspan)
<tr>
<th colspan="2">Fruit</th>
<th>Price</th>
</tr>
<tr>
<td rowspan="2">Apple</td>
<td>Red</td>
<td>$1</td>
</tr>
<tr>
<td>Green</td>
<td>$1.2</td>
</tr>
💡Use Case:Price comparisons or multi-category tables.
6.3.4 Advanced Styling with CSS
table {
border-collapse: collapse;
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
💡Pro Tip:Addhover effectsto make tables interactive.
6.3.5 Accessibility Best Practices
● Use
<caption>for table description
● Use
scope="col"for header columns,
scope="row"forheader rows
● Avoid using tables forpage layout
● Providesummaryfor complex tables (optional)
<th scope="col">Item</th>
<th scope="row">Apple</th>
🔹 6.4 SEO & Accessibility Tips (God-Level)
1. Usesemantic tagsfor lists and tables
2. Add
<caption>for tables
3. Use
scopeattributes for headers
4. Avoid using
<br>for spacing
5. Ensurenested listsare properly indented and styled
6. Use CSS for styling instead of inline
stylewheneverpossible
🔹 6.5 Common Mistakes
❌
Using
<br>or spaces instead of
<ul>/
<ol>
❌
Tables for layout purposes
❌
Missing table headers ( )
<th>
❌
Unreadable nested lists without proper indentation
📝 Exercises – Advanced
1. Create ashopping listusing
<ul>and addcustom icons.
2. Create astep-by-step tutorialusing
<ol>and stylenumbers with CSS.
3. Create anested list of courses and topics(3 levels).
4. Make adescription listof 5 web technologies withdefinitions.
5. Create atable for 5 studentsincluding Name, Age,Marks, Grade.
6. Addtable captionandalternate row colors.
7. Merge 2 columns in a header row usingcolspan.
8. Merge 2 rows in a table usingrowspan.
9. Addhover effectfor a table.
10.Add
scope="col"and
scope="row"in your table headers.
11.Create acomparison tablefor 3 programming languages.
12.Create a table withgrouped headers.
13.Style anunordered listwith square bullets and customfont.
14.Nestordered list inside unordered listwith 3 levels.
15.Make aresponsive tablethat fits mobile screens usingCSS.
CHAPTER 7 : Forms & Input Elements
🔹 7.1 Why Forms Are Essential
orms arethe bridge between users and your website.They collect data, trigger actions,
F
and enable interaction. Proper form design improves:
● User Experience– Clear, intuitive fields
● Accessibility– Screen readers and assistive techcan interpret forms
● Data Validation– Ensures clean input
● Security– Proper forms prevent spam and injectionattacks
💡Real-Life Examples:
● Contact forms
● Registration/login forms
● Survey forms
● E-commerce checkout forms
🔹 7.2 Form Basics
Form Tag Syntax:
<form action="[Link]" method="post">
<!-- Input fields go here -->
</form>
Attributes:
Attribute Purpose
action
URL where form data is sent
method
GET (visible in URL) or POST (hidden)
enctype
Type of data encoding (useful for files)
name
Identifier for form (used in JS)
id
Unique form ID for CSS/JS
🔹 7.3 Input Types & Controls
7.3.1 Text Input
<input type="text">
● Single-line text input
● Attributes: ,
placeholder ,
maxlength ,
required pattern
Example:
<label for="username">Username:</label>
input type="text" id="username" name="username" placeholder="Enter
<
username" required maxlength="20">
7.3.2 Password Input
<input type="password">
<label for="password">Password:</label>
input type="password" id="password" name="password"
<
placeholder="Enter password" required>
💡Pro Tip:Use
minlengthand
patternto enforce strongpasswords.
7.3.3 Email Input
<input type="email">
● Automatically validates email format
<label for="email">Email:</label>
input type="email" id="email" name="email"
<
placeholder="example@[Link]" required>
7.3.4 Number Input
<input type="number">
● Restrict input to numbers only
● Attributes: ,
min ,
max step
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100" required>
7.3.5 Radio Buttons
<input type="radio">
● Forsingle-choiceselection
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
7.3.6 Checkboxes
<input type="checkbox">
● Formultiple-choiceselection
<p>Select your hobbies:</p>
<input type="checkbox" id="reading" name="hobbies" value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobbies" value="Sports">
<label for="sports">Sports</label>
7.3.7 Textarea
<textarea>
● Multi-line text input
<label for="message">Message:</label>
textarea id="message" name="message" rows="5" cols="40"
<
placeholder="Type your message here..." required></textarea>
7.3.8 Select Dropdown
<select>
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select country</option>
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
💡Advanced Tip:Add
optgroupto group related options:
<select name="fruits">
<optgroup label="Citrus">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
</optgroup>
<optgroup label="Berries">
<option value="strawberry">Strawberry</option>
<option value="blueberry">Blueberry</option>
</optgroup>
</select>
7.3.9 File Input
<input type="file">
● Allows file uploads
● Attributes:
accept(file type),
multiple
<label for="resume">Upload your resume:</label>
input type="file" id="resume" name="resume" accept=".pdf,.docx"
<
required>
7.3.10 Button Controls
Type Function
ubm Submits the form
s
it
ese Clears all inputs
r
t
utt Custom JS actions
b
on
<button type="submit">Submit</button>
<button type="reset">Reset</button>
🔹 7.4 Form Validation
● H
TML5 Built-in Validation: ,
required ,
minlength ,
maxlength ,
pattern
type="email"
● Custom JS Validation:
<form id="signupForm">
<label for="username">Username:</label>
<input type="text" id="username" required>
<button type="submit">Submit</button>
</form>
<script>
[Link]('signupForm').addEventListener('submit',
d
function(e){
const username = [Link]('username').value;
if([Link] < 5){
alert('Username must be at least 5 characters long!');
[Link]();
}
});
</script>
💡Pro Tip:Always combineHTML5 + JS validationforbest UX and security.
🔹 7.5 Form Layout & Styling
● Flexbox Layout:
form {
display: flex;
flex-direction: column;
max-width: 400px;
margin: auto;
gap: 15px;
}
input, textarea, select {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
● Grid Layout for Advanced Forms:
form {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px 20px;
}
label {
text-align: right;
padding-right: 10px;
}
🔹 7.6 Accessibility Best Practices
1. Use
<label>for every input and link via
forattribute.
2. Use
aria-labelor
aria-describedbyfor extra clarity.
3. Use keyboard-friendly tab order.
4. Provide clear error messages.
5. Group related inputs with
<fieldset>and .
<legend>
<fieldset>
<legend>Personal Info</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
🔹 7.7 Security Best Practices
● UsePOSTmethod for sensitive data
● Sanitize user input server-side
● UseCAPTCHAfor bots
● Validatefileson server before saving
● Avoid auto-complete for sensitive fields ( )
autocomplete="off"
🔹 7.8 Advanced Input Types (HTML5)
Input Type Description
date
Calendar picker
time
Time picker
atetime- Date + time picker
d
local
url
URL validation
tel
Phone numbers
range
Slider input
color
Color picker
Example:
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
📝 Exercises – Advanced
1. Create aregistration formwith all HTML5 input types.
2. Addvalidationfor username, password, and email.
3. Style the form usingflexboxorgrid.
4. Addradio buttonsfor gender andcheckboxesfor hobbies.
5. Create afile uploadfield for resume with type restrictions.
6. Addsubmit & reset buttonswith hover effects.
7. Grouprelated fieldsusing
<fieldset>and .
<legend>
8. Add acolor pickerinput and default value.
9. Add asliderinput with min/max values.
10.Make the formmobile responsiveusing CSS media queries.
11.Addcustom JS validationfor password strength.
12.Implementaccessible error messagesusing .
aria-describedby
13.Add adate pickerfor birthdate with min/max limits.
14.Create adropdown for country selectionwith groupedcontinents.
15.AddCAPTCHA or simple math verificationbefore submission.
Chapter 8: Multimedia in HTML – Images, Audio, Video & Embedding
🔹 8.1 Introduction to Multimedia in Web Pages
Multimedia elements make websitesinteractive, engaging, and dynamic. They include:
● Images– Logos, illustrations, photos
● Audio– Music, podcasts, sound effects
● Video– Tutorials, animations, streaming content
● Embedded Content– Maps, documents, social media posts
💡Why Multimedia Matters:
● Enhancesuser experience (UX)
● Communicates ideasfaster than text
● Increasestime spent on site
● Makes contentmore memorable
🔹 8.2 Images in HTML
Syntax:
<img src="[Link]" alt="Description" width="300" height="200">
Attributes Explained:
Attribute Purpose
src
Path to image file
alt
Alternative text for accessibility
/
idth
w ei Size of the image in pixels
h
ght
title
Tooltip text
loading
Lazy loading (
lazyor )
eager
💡Tips:
● Always use
altfor accessibility and SEO.
● P
referoptimized formats: JPG (photos), PNG (transparent),WebP (high quality &
small size).
Example: Responsive Image with CSS
<img src="[Link]" alt="Mountain view" class="responsive-img">
<style>
.responsive-img {
width: 100%;
height: auto;
border-radius: 10px;
}
</style>
🔹 8.3 Image Maps
● Clickable areas on an image
● Uses
<map>and
<area>
<img src="[Link]" usemap="#planmap" alt="House Plan">
<map name="planmap">
area shape="rect" coords="34,44,270,350" href="[Link]"
<
alt="Kitchen">
area shape="circle" coords="337,300,44" href="[Link]"
<
alt="Garden">
</map>
🔹 8.4 Audio in HTML
Basic Syntax:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Attributes:
Attribute Purpose
controls Show play, pause, volume
autoplay Start automatically on page load
loop
Play repeatedly
muted
Start muted
Supported Formats: ,
.mp3 ,
.wav .ogg
🔹 8.5 Video in HTML
Basic Syntax:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Attributes:
Attribute Purpose
controls Show playback controls
autoplay Start automatically
loop
Replay automatically
muted
Video starts muted
poster
Placeholder image before video starts
Responsive Video with CSS:
video {
max-width: 100%;
height: auto;
border-radius: 10px;
}
🔹 8.6 Embedding External Content
8.6.1 Iframes
● Embed external websites or content
iframe src="[Link] width="600" height="400"
<
title="Example Site"></iframe>
Attributes:
Attribute Purpose
src
URL to embed
/
idth
w eig Size of the iframe
h
ht
title
Accessibility description
llowfulls Enable fullscreen video
a
creen
oading="l Lazy load for performance
l
azy"
8.6.2 Google Maps Embedding
<iframe
src="[Link]
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
🔹 8.7 Picture Element (Responsive Images)
● Servedifferent images based on screen size or resolution
<picture>
<source media="(max-width: 600px)" srcset="[Link]">
<source media="(max-width: 1200px)" srcset="[Link]">
<img src="[Link]" alt="Responsive Example">
</picture>
💡Pro Tip:Use
picture+
srcsetfor performance optimization on mobile devices.
🔹 8.8 Accessibility Best Practices for Multimedia
1. Always use
altfor images.
2. Providecaptions or transcriptsfor audio/video.
3. Use
<figure>and
<figcaption>for images with descriptions.
4. Ensurekeyboard navigationfor interactive multimedia.
5. Avoid autoplay for audio/video unless muted.
Example: Figure with Caption
<figure>
<img src="[Link]" alt="Snowy mountains">
<figcaption>Beautiful snowy mountains in Switzerland</figcaption>
</figure>
🔹 8.9 Multimedia Performance Tips
● Optimize image/video/audio file sizes.
● Uselazy loadingfor images/videos ( ).
loading="lazy"
● Prefermodern formats: WebP (images), MP4/H.264 (video),MP3/AAC (audio).
● Compress assets using tools like TinyPNG, HandBrake, or Audacity.
● Minimize number of HTTP requests by using sprites or combining assets.
🔹 8.10 Advanced Multimedia Features
1. Background Video:
<video autoplay muted loop id="bg-video">
<source src="background.mp4" type="video/mp4">
</video>
<style>
#bg-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
</style>
2. Custom Audio/Video Controls (JS)– Create buttonsfor play, pause, volume.
3. Interactive Image Maps– Clickable regions triggeranimations or popups.
4. Animated GIFs/WebP– Lightweight animations for quickinteractions.
📝 Exercises – Advanced
1. Embedthree imagesin a responsive layout with captions.
2. Create anaudio playerthat loops a music track.
3. Embed avideo tutorialwith poster image and autoplaymuted.
4. Use
<picture>element to serve different images for mobile and desktop.
5. Embed aGoogle Mapshowing your city location.
6. Create animage maplinking different parts of a singleimage to pages.
7. Implement abackground videowith full-screen coverage.
8. Addtranscripts or captionsfor an embedded video.
9. Optimize all images for web performance.
10.Experiment withcustom JS video controls: play, pause,stop, volume.
Chapter 9: HTML Tables and Advanced Layouts
9.1 Introduction to Tables
Tables in HTML are used todisplay data in rows andcolumns. They are ideal for:
● Organizing numerical data
● Comparing values
● Creating schedules or timetables
● Structuring content in agrid layout
💡
Key Idea:Tables arefor data, not for layout design.For layouts, we useCSS Grid or
Flexbox.
9.2 Basic Table Structure
HTML Syntax:
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Explanation of Tags:
Tag Purpose
tabl Creates the table container
<
e>
<tr>
Table row
<th>
Table header cell (bold & centered)
<td>
Table data cell (regular content)
9.3 Table Attributes
Attribute Purpose
border
Adds border to the table
ellpadd Space inside cells
c
ing
ellspac Space between cells
c
ing
width
Width of the table
height
Height of the table
Example:
<table border="1" cellpadding="10" cellspacing="5" width="80%">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Akarsh</td>
<td>17</td>
<td>Delhi</td>
</tr>
<tr>
<td>Riya</td>
<td>16</td>
<td>Mumbai</td>
</tr>
</table>
9.4 Advanced Table Features
9.4.1 Rowspan and Colspan
● : Merge rows vertically
rowspan
● : Merge columns horizontally
colspan
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Akarsh</td>
<td>95</td>
<td>90</td>
</tr>
</table>
9.4.2 Table Captions
<table border="1">
<caption>Student Scores</caption>
<tr>
<th>Name</th>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Akarsh</td>
<td>95</td>
<td>90</td>
</tr>
</table>
<caption>gives atitle for the table
●
● Positionedabove the table by default
9.4.3 Styling Tables with CSS
<table class="styled-table">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Akarsh</td>
<td>17</td>
<td>Delhi</td>
</tr>
</table>
<style>
.styled-table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.styled-table th, .styled-table td {
border: 1px solid #333;
padding: 12px;
text-align: center;
}
.styled-table th {
background-color: #4CAF50;
color: white;
}
.styled-table tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
Pro Tips:
● Use
border-collapse: collapsefor a clean look
● Highlightalternate rowswith
nth-child(even)
9.5 HTML Layouts – Organizing Web Pages
Tables were historically used for layouts, butmodernwebsites use CSS.
9.5.1 Div and CSS
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Main Content</div>
<div class="footer">Footer</div>
</div>
<style>
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
gap: 10px;
}
header { grid-area: header; background: #4CAF50; padding: 20px;
.
color: white; text-align: center; }
.sidebar { grid-area: sidebar; background: #f2f2f2; padding: 20px; }
.content { grid-area: content; background: #e6e6e6; padding: 20px; }
footer { grid-area: footer; background: #333; color: white; padding:
.
10px; text-align: center; }
</style>
Benefits:
● Clean, responsive design
● Easy to modify layout
● Avoids nested tables for design
9.5.2 Flexbox Layout Example
<div class="flex-container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<style>
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
background: #f4f4f4;
padding: 10px;
}
.box {
background: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
💡Difference between Grid and Flexbox:
● Flexbox: 1D layout (row or column)
● Grid: 2D layout (rows + columns)
9.6 Responsive Tables
Tables can bescrollable on small screens:
<div class="table-responsive">
<table>
<tr>
<th>Name</th><th>Math</th><th>Science</th><th>English</th>
</tr>
<tr>
<td>Akarsh</td><td>95</td><td>90</td><td>88</td>
</tr>
</table>
</div>
<style>
.table-responsive {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
</style>
9.7 Table Accessibility
● Use
scope="col"or
scope="row"in
<th>for screenreaders
● Addcaptionfor table title
● Avoid merged cells if possible for simpler navigation
Example:
<th scope="col">Name</th>
<th scope="col">Math</th>
<th scope="col">Science</th>
9.8 Exercises – Advanced
1. Create atable of studentswith Name, Age, City, andMarks. Apply CSS styling.
2. Userowspanandcolspanfor a timetable.
3. Create aresponsive tablethat scrolls horizontallyon mobile.
4. Build apage layoutusingCSS Grid: header, sidebar,content, footer.
5. Make aFlexbox navigation barwith 4 links alignedevenly.
6. Addcaptions and accessibility featuresto all tables.
7. Convert acomplex tableinto a mobile-friendly scrollableversion.
8. CompareFlexbox vs Gridby building the same layoutin both methods.
Chapter 10: HTML Forms and Input Elements
hapter 10: HTML Forms and Input
C
Elements
10.1 Introduction to HTML Forms
TML forms areinteractive sections on a webpagewhereusers can input data. Forms
H
are essential for:
● Logging in or signing up
● Submitting feedback or surveys
● Searching for information
● Completing online purchases
A form acts as acontainer for input elements, buttons,and labels.
10.2 Basic Form Structure
<form action="submit_form.php" method="post">
<label for="username">Username:</label>
input type="text" id="username" name="username" placeholder="Enter
<
your username">
<label for="password">Password:</label>
input type="password" id="password" name="password"
<
placeholder="Enter your password">
<input type="submit" value="Login">
</form>
Explanation of Attributes:
Attribute Purpose
action
URL where the form data is sent
method
How data is sent (
getor )
post
id
Unique identifier for label association
name
Name of input used to identify form data
lacehol Text displayed inside empty input field
p
der
value
Default or button text
Note:
method="get"→ sends data in URL (visible)
●
method="post"→ sends data securely in the requestbody
●
10.3 Input Types and Examples
HTML supportsmany input types:
10.3.1 Text Input
<input type="text" name="fullname" placeholder="Full Name">
● Used forsingle-line text
● Can set
maxlengthto limit input length
10.3.2 Password Input
<input type="password" name="pwd" placeholder="Password">
● Hides user input forsecurity
10.3.3 Email Input
<input type="email" name="email" placeholder="Enter your email">
● Validatesemail format automatically
10.3.4 Number Input
<input type="number" name="age" min="1" max="120">
● Acceptsonly numbers
● Can setminimum and maximumvalues
10.3.5 Radio Buttons
<label><input type="radio" name="gender" value="male"> Male</label>
label><input type="radio" name="gender" value="female">
<
Female</label>
● Selectonly one optionper group
10.3.6 Checkboxes
label><input type="checkbox" name="hobby" value="reading">
<
Reading</label>
label><input type="checkbox" name="hobby" value="sports">
<
Sports</label>
● Selectmultiple options
10.3.7 Dropdown Lists ( )
<select>
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
● Offers aselectable list of options
● Can use
multipleattribute for multiple selection
10.3.8 Textarea
textarea name="message" rows="5" cols="40" placeholder="Type your
<
message here"></textarea>
● Multi-line input area
● Used forcomments or messages
10.3.9 File Upload
<input type="file" name="profile_pic">
● Allows users toupload files
● Can restrict with
accept="image/*"for images only
10.3.10 Submit and Reset Buttons
<input type="submit" value="Submit">
<input type="reset" value="Clear">
submit→ sends form data
●
reset→ clears all inputs
●
10.4 Labels and Accessibility
Always associate labels with inputs:
<label for="email">Email:</label>
<input type="email" id="email" name="email">
for="id"links the label to input
●
● Improvesaccessibility for screen readers
10.5 Form Attributes in Detail
Attribute Description
action
URL to send form data
method
getor
post
utocompl Suggests previously entered data (
a on/ )
off
ete
enctype
ncoding type for file upload
E
(
multipart/form-data )
target
Where to open response ( ,
_blank )
_self
10.6 HTML5 Form Validation
HTML5 providesbuilt-in validation:
required→ input cannot be empty
●
pattern→ regex pattern matching
●
min/
● max→ for numbers
type="email"or
● type="url"→ format validation
Example:
<input type="text" name="username" required pattern="[A-Za-z0-9]{5,}">
● Must bealphanumericandat least 5 characters
10.7 Styling Forms with CSS
input, select, textarea {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
● Addsmodern lookto forms
● Hover effect improvesuser experience
10.8 Common Mistakes
● Forgetting
nameattribute → data not sent
● Using inline styles instead of CSS
● Not validating user input
● Poor label association → reduces accessibility
10.9 Exercises
1. C
reate aregistration formwith: Name, Email, Password,Gender, Hobbies,
Country, Profile Picture.
2. AddHTML5 validationfor email and password length.
3. Style the form usingCSSto make it responsive andvisually appealing.
4. Add asubmit and reset button, and aform caption.
10.10 Summary
● Forms collectuser inputthrough various fields
● Use
labelforaccessibility
● Modern HTML5 supportsbuilt-in validation
● CSS makes formsresponsive and beautiful
● Avoiddeprecated practiceslike table-based formsor inline styling
10.9 Exercises – Expanded (Practice Questions)
Level 1 – Basic Practice
1. Create a simple login form withusernameandpasswordfields.
2. Add asubmit buttonto the login form.
3. Create a form to collectfull nameandemail.
4. Add aplaceholderto each input field.
5. Create asingle checkboxasking “I accept terms andconditions”.
6. Createtwo radio buttonsfor “Male” and “Female”.
7. Add areset buttonto your form.
Level 2 – Intermediate Practice
8. Create a registration form with: Name, Email, Password, Confirm Password.
9. AddHTML5 validationto ensure email format is correct.
10.Addminimum length validationto the password field.
11.Create atextareafor user feedback.
12.Create adropdown menufor selecting a country.
13.Combinecheckboxesfor hobbies (reading, sports, music).
14.Create afile uploadfield for profile picture.
15.Create aform captiondescribing your form.
16.Style the form withCSS borders, padding, and colors.
17.Addhover effectsto the submit button.
Level 3 – Advanced Practice
18.Create asurvey formwith 5 multiple-choice questionsusing radio buttons.
19.Create acontact formwith Name, Email, Phone Number,Message.
20.Addpattern validationto the phone number field.
21.Make your formresponsiveusing CSS width percentages.
22.Create anewsletter signup formwith email input andcheckbox “Subscribe me”.
23.Build alogin formthat validates password lengthand email format.
24.Create afeedback formthat allows users to selectmultiple interests using
checkboxes.
25.Addrequired attributesto all critical input fields.
26.Addautocomplete offto password fields for security.
27.Create amulti-step form(simulate steps with fieldsets).
Mini-Project Exercises
28.Build aregistration formfor an online course platform.Include:
● Name, Email, Password, Confirm Password
● Gender (radio buttons)
● Skills (checkboxes)
● Country (dropdown)
● Profile Picture Upload
● Submit and Reset buttons
29.Build ajob application formwith:
● Name, Email, Phone
● Resume Upload
● Cover Letter (textarea)
● Job Position (dropdown)
● Preferred Interview Date (date picker)
30.Build asurvey formwith:
● 5 multiple-choice questions
● Rating scale (1–5 using radio buttons)
● Feedback (textarea)
Error-Finding Exercises
31.Identify errors in the following code:
<form action="[Link]">
<input type="text" name="username" placeholder="Enter username">
<input type="submit" "Login">
</form>
32.Find mistakes in this form code (missing labels, required attributes, wrong input
types).
CSS & Styling Exercises
33.Style your login form withrounded corners, hovereffects, and shadows.
34.Make aregistration form responsiveon mobile screens.
35.Addzebra-striping effectto your survey form rows.
36.Highlightrequired fieldswith a red border usingCSS.
Validation & HTML5 Exercises
37.Addemail pattern validationto a newsletter form.
38.Addminimum and maximum age validationin a registrationform.
39.Make the password fieldrequired and at least 8 characters.
40.Create aphone inputwith pattern .
[0-9]{10}
41.Combine multiplevalidation rulesin a registrationform.
Extra Challenges
42.Build afeedback formthat validates all inputs andshows an alert on submit.
43.Build alogin formwithremember me checkbox.
44.Create aform for event registrationincluding name,email, number of attendees,
and dietary preferences (checkboxes).
45.Create asurvey form with rating scale (1–5)usingradio buttons.
46.Build aprofile update formthat allows users to changeemail, password, and
profile picture.
47.Create aform that calculates agefrom a date of birth input using JavaScript
(optional).
48.Create aform with grouped fieldsusing
<fieldset>and .
<legend>
49.Create alogin form with floating labelsusing CSS.
50.Build acomplete multi-step registration formusingHTML, CSS, and minimal JS
for step navigation.
Chapter 11: HTML Media Elements – Audio, Video, and Embedding
11.1 Introduction to HTML Media
TML provides ways toembed media contentdirectlyinto web pages. Media elements
H
make websitesinteractive and engaging.
Common media types:
● Audio→ music, podcasts, sound effects
● Video→ tutorials, promotional videos, movies
● Embedded content→ maps, YouTube videos, other websites
11.2 The
<audio>Element
The
<audio>tag embeds audio files.
Basic Syntax:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Attributes of :
<audio>
Attribute Description
controls Displays play, pause, volume controls
autoplay Starts playing automatically
loop
Repeats audio continuously
muted
Starts audio muted
preload
,
auto
,
metadata none
Notes:
source>can include multiple formats (MP3, OGG, WAV)for cross-browser
● <
support.
● Fallback text is displayed if browser doesn’t support audio.
11.3 The
<video>Element
The
<video>tag embeds videos.
Basic Syntax:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Attributes of :
<video>
Attribute Description
controls
Show play, pause, volume, fullscreen
autoplay
Video starts automatically
loop
Video repeats continuously
muted
Video starts muted
poster
Image displayed before video starts
/
idth
w ei Sets video dimensions
h
ght
Notes:
● Always providemultiple video formatsfor browsercompatibility.
● You can embed captions using :
<track>
track src="captions_en.vtt" kind="subtitles" srclang="en"
<
label="English">
11.4 Embedding External Content
11.4.1
<iframe>Element
Used to embed content likeYouTube videos, GoogleMaps, or other websites.
Syntax:
iframe src="[Link] width="560"
<
height="315" frameborder="0" allowfullscreen></iframe>
Attributes:
Attribute Description
src
URL of the embedded page
/
idth
w eig Size of the frame
h
ht
rameborde Border thickness (0 = no border)
f
r
llowfulls Allows fullscreen mode
a
creen
loading
lazyfor deferred loading
Notes:
● Avoid embedding untrusted sites.
● Use
loading="lazy"to improve page speed.
11.5 Media Best Practices
1. Usecompressed formatsto reduce load time.
2. Always includecontrolsfor usability.
3. Providefallback contentfor unsupported browsers.
4. Keepautoplay mutedto avoid annoying users.
5. Useposter imagesfor video previews.
11.6 Exercises – Expanded Practice
Level 1 – Basic Practice
1. Embed an audio file on a web page with play controls.
2. Embed a video file and set width to 640px.
3. Embed a YouTube video using .
<iframe>
4. Add fallback text for unsupported browsers.
5. Addautoplayto an audio file.
Level 2 – Intermediate Practice
6. Embed a video withposter image.
7. Make the videoloopcontinuously.
8. Add captions to a video using .
<track>
9. Embed multiple audio formats (MP3 + OGG) for cross-browser support.
10.Usemuted autoplayfor a background audio track.
11.Embed a Google Map using .
<iframe>
12.Embed a Twitch stream using
<iframe>and allow fullscreen.
13.Addwidth and heightattributes to your embedded video.
14.Create an audio player withvolume control.
15.Embed a video andstyle itwith CSS border and shadow.
Level 3 – Advanced Practice
16.Create aplaylistwith three audio files using
<audio>tags.
17.Build avideo gallerywith 3 videos in a grid layout.
18.Embed a YouTube playlist using .
<iframe>
19.Create abackground videothat plays silently behinda webpage header.
20.Make avideo with interactive captionsusing .
<track>
21.Embed multiple
<iframe>elements and style them responsively.
22.Addlazy loadingfor an iframe video to improve performance.
23.Create a video section thatswitches videobased onscreen size (responsive media).
24.Build amedia-rich landing pagewith audio, video,and embedded content.
25.Test your page ondifferent browsersand make sureall media works.
Mini-Project Exercises
26.Build amusic player pagewith 5 songs and controls.
27.Build amovie trailer gallerywith 4 embedded YouTubevideos.
28.Create aportfolio pagewith video demos and audiobackground.
29.Embed amap and videoon a travel website page.
30.Build amedia tutorial pagethat includes text, audionarration, and video
demonstrations.
Error-Finding Exercises
31.Identify why the following audio is not working:
<audio>
<source src="[Link]" type="audio/mp3">
</audio>
32.Fix the
<iframe>that does not allow fullscreen.
33.Correct a
<video>tag that shows “unsupported format”error.
CSS & Styling Exercises
34.Style the audio player to havecustom width and border.
35.Addshadow and rounded cornersto embedded videos.
36.Make aresponsive video gridusing CSS flexbox.
37.Align audio controlscenteredon the page.
38.Overlay text on a background video usingabsolutepositioning.
Validation & Best Practices
39.Ensure all
<audio>and
<video>tags havefallbacktext.
40.Compress videos and check pageloading speed.
41.Test all media onmobile devices.
42.Ensure autoplay audio ismutedto prevent annoyance.
43.Validate all URLs in
<iframe>for security and correctness.
Extra Challenges
44.Create amedia dashboard pagecombining audio, video,and embedded maps.
45.Build avideo tutorial pagewith step-by-step videosegments and text instructions.
46.Create amusic playlistwith autoplay next track functionalityusing minimal JS.
47.Build aresponsive iframe gridof multiple embeddedvideos.
48.Embedlive streamsand style the page for modern look.
49.Create amedia gallery pagewith hover effects onvideos and audios.
50.Make afull media landing pagethat can be used foran online course or tutorial
site.
Chapter 12: HTML Semantic Elements
12.1 Introduction to Semantic HTML
emantic HTMLusesmeaningful tagsthat describe thepurpose of content. Unlike
S
generic tags like
<div>or , semantic elementsimprove accessibility, SEO, and
<span>
readability.
Examples of Semantic Elements:
<header>– Defines page or section header
●
<footer>– Defines page or section footer
●
<main>– Main content of the page
●
<article>– Self-contained content like blog posts
●
<section>– Sections of a page
●
<aside>– Sidebar or related content
●
<nav>– Navigation links
●
<figure>&
● <figcaption>– Media with captions
12.2 Common Semantic Elements
12.2.1
<header>
● Usually containslogo, site title, navigation
● Appears at top of the page or section
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
12.2.2
<footer>
● Usually containscopyright, links, contact info
<footer>
<p>© 2025 My Website</p>
</footer>
12.2.3
<main>
● Contains theprimary contentof the document
<main>
<h2>Welcome to My Blog</h2>
<p>This is the main content area.</p>
</main>
12.2.4
<article>
● Representsindependent content, e.g., blog posts,news articles
<article>
<h2>Learning HTML</h2>
<p>HTML is the foundation of the web.</p>
</article>
12.2.5
<section>
● Groupsrelated contentin a page
<section>
<h2>Services</h2>
<p>We provide web development and design services.</p>
</section>
12.2.6
<aside>
● Representsside content, e.g., ads, tips, or relatedlinks
<aside>
<h3>Tip:</h3>
<p>Use semantic HTML for better SEO.</p>
</aside>
12.2.7
<nav>
● Navigation links for the site
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
12.2.8
<figure>&
<figcaption>
● Embeds media with captions
<figure>
<img src="[Link]" alt="Beautiful landscape">
<figcaption>Sunset view of mountains</figcaption>
</figure>
12.3 Why Use Semantic HTML?
1. Accessibility– Screen readers understand contentstructure
2. SEO friendly– Search engines prioritize semanticcontent
3. Maintainable code– Easier to read and manage
4. Styling advantages– Target specific elements in CSS
12.4 Exercises – Expanded Practice
Level 1 – Basic Practice
1. Create a page with ,
<header> , and
<main> .
<footer>
2. Add a navigation menu using
<nav>with 3 links.
3. Add a
<section>for “About Us”.
4. Add a
<section>for “Services”.
5. Create an
<article>for a sample blog post.
6. Add an
<aside>with a tip related to your article.
7. Embed an image with
<figure>and .
<figcaption>
Level 2 – Intermediate Practice
8. Build a multi-section page using ,
<header> ,
<main> , and
<section> .
<footer>
9. Add multiple
<article>elements to represent blogposts.
10.Include an
<aside>in the sidebar with related links.
11.Add
<figure>images for each article with captions.
12.Use
<nav>with
<ul>and
<li>for site navigation.
13.Create a
<footer>containing contact info and socialmedia links.
14.Build a
<main>with at least 3
<section>blocks.
15.Nest
<article>elements inside
<section>for a newspage.
16.Create an HTML page that uses semantic elementsonly,avoiding s.
<div>
17.AddHTML commentsexplaining each semantic elementused.
Level 3 – Advanced Practice
18.Create ablog homepagewith 3
<article>blocks, eachwith
<figure>images.
19.Create anews pagewith
<section>blocks for differentcategories.
20.Add an
<aside>for “Most Read Articles” on the side.
21.Build aportfolio pagewith
<header>logo and navigation,
<main>project sections,
and
<footer>contact info.
22.Create a multi-page layout with semantic HTML for all pages.
23.Build alanding pagewith
<section>for features,testimonials, and contact.
24.Add
<figure>and
<figcaption>for team members’ photos.
25.Usesemantic HTML with CSS Gridto make a responsivelayout.
26.Build adocumentation pageusing ,
<article> ,
<section> ,
<aside> .
<nav>
27.Create a semanticFAQ pageusing
<section>for eachquestion.
Mini-Project Exercises
28.Create apersonal portfolio pageusing semantic HTML.
29.Build anews blog pagewith multiple s andsidebar
<article> .
<aside>
30.Create aproduct landing pageusing ,
<header> ,
<section> ,
<article>
<aside>
, .
<footer>
31.Build amulti-section educational pagefor tutorialsusing semantic tags.
32.Build amulti-column layoutusing
<section>and .
<aside>
Error-Finding Exercises
33.Identify why this
<article>is incorrectly used inside
<header>and fix it.
34.Fix an HTML page that uses only
<div>and
<span>butshould be semantic.
35.Find errors in a page where
<footer>is placed before .
<main>
CSS & Styling Exercises
36.Style
<header>with background color and padding.
37.Style
<footer>with text centered and contrastingcolor.
38.Make
<nav>horizontal with CSS flexbox.
39.Style
<aside>with sidebar layout using CSS grid.
40.Add borders and shadows to
<article>blocks.
41.Style
<figure>captions to appear centered below images.
42.Make the semantic layoutresponsivefor mobile devices.
Validation & Best Practices
43.Validate your semantic HTML using W3C Validator.
44.Ensure all
<figure>elements have captions.
45.Make navigation links accessible with descriptive text.
46.Test
<article>and
<section>hierarchy in screen readers.
47.Ensure
<aside>content is clearly differentiated frommain content.
48.Make
<header>and
<footer>consistent across all pages.
Extra Challenges
49.Build asemantic one-page websitewith multiple sectionsand media.
50.Build asemantic blog pagewith nested articles, sections,and asides.
Chapter 13: HTML Tables
13.1 Introduction to HTML Tables
TML tables are used todisplay data in rows and columns.They are essential for
H
presenting structured information such as schedules, pricing, comparisons, and statistics.
Key Tags in HTML Tables:
<table>– Defines the table
●
<tr>– Table row
●
<th>– Table header (bold, centered by default)
●
<td>– Table data (normal cell)
●
<caption>– Title or description of the table
●
<thead>– Table header group
●
<tbody>– Table body group
●
<tfoot>– Table footer group
●
13.2 Basic Table Structure
<table border="1">
<caption>Student Marks</caption>
<tr>
<th>Name</th>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>John</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>Mary</td>
<td>92</td>
<td>88</td>
</tr>
</table>
Explanation:
<caption>gives the table a title.
●
<tr>creates a row.
●
<th>defines headers.
●
<td>defines cell data.
●
13.3 Advanced Table Features
13.3.1 Table Sections
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$800</td>
</tr>
<tr>
<td>Mouse</td>
<td>$20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$820</td>
</tr>
</tfoot>
</table>
<thead>– Table header group
●
<tbody>– Main table content
●
<tfoot>– Table footer
●
13.3.2 Merging Cells
● Colspan– Merge columns
● Rowspan– Merge rows
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>John</td>
<td>85</td>
<td>90</td>
</tr>
</table>
13.3.3 Styling Tables
● UseCSSto style tables:
<table style="border-collapse: collapse; width: 50%;">
<tr>
<th style="background-color: #4CAF50; color: white;">Name</th>
<th style="background-color: #4CAF50; color: white;">Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
</tr>
</table>
13.4 Exercises – Expanded Practice
Level 1 – Basic Practice
1. Create a table with 3 columns: Name, Age, City.
2. Add 5 rows of data.
3. Add a table caption “Student Information”.
4. Add
<th>to the first row.
5. Create a table showing 4 fruits and their colors.
6. Create a table showing 3 products and their prices.
7. Create a table showing days of the week and tasks.
Level 2 – Intermediate Practice
8. Create a table with ,
<thead> , and
<tbody> .
<tfoot>
9. Merge two columns usingcolspan.
10.Merge two rows usingrowspan.
11.Create a timetable for classes (Time vs Subject).
12.Create a table showing marks for 5 students in 3 subjects.
13.Add a total row using .
<tfoot>
14.Style your table withborders, padding, and backgroundcolor.
15.Make your table width 100% using CSS.
16.Add alternating row colors using CSS ( ).
nth-child
17.Center-align table headings and data using CSS.
Level 3 – Advanced Practice
18.Create aprice comparison tablewith merged headersfor product categories.
19.Build aweekly schedule tablewith rowspan for multi-hourevents.
20.Create asports tournament tableshowing team, matches,wins, losses, and
points.
21.Create amovie schedule tablewith date, movie, showtime,and ticket price.
22.Build arestaurant menu tablewith merged rows forcategories and columns for
prices.
23.Create ahotel room availability tableshowing roomtype, available rooms, and
price.
24.Build atable with imagesin some cells using .
<img>
25.Make aresponsive tableusing CSS for mobile devices.
26.Build amonthly expense tablewith totals and averages.
27.Create atable for a class leaderboardwith students,marks, and ranks.
Mini-Project Exercises
28.Build aschool timetable tablewith rowspan and colspan.
29.Build aproduct catalog tablewith categories andprices.
30.Build acomparison tablefor 3 mobile phones withfeatures and prices.
31.Build ateam leaderboard tablefor a sports league.
32.Build amonthly budget tablewith income, expenses,and savings.
Error-Finding Exercises
33.Fix the table missing closing
<tr>or
<td>tags.
34.Find errors in a table with incorrect rowspan or colspan values.
35.Correct a table where
<th>is used in data rows insteadof headings.
CSS & Styling Exercises
36.Style a table withborder-collapse: collapse.
37.Addhover effecton table rows.
38.Usezebra stripesusing CSS
nth-childselector.
39.Style
<th>with background color and bold text.
40.Make the tableresponsiveusing .
overflow-x: auto
41.Add padding and center-align all table data.
42.UseCSS gradientsfor table headers.
Validation & Best Practices
43.Validate tables usingW3C HTML Validator.
44.Ensurerowspanandcolspanvalues are correct.
45.Make tables accessible with
<caption>and proper headers.
46.Avoid using tables for page layout; use them only fordata.
47.Ensure responsive tables formobile devices.
Extra Challenges
48.Build afull-page HTML table layoutfor a companydirectory.
49.Create asports tournament scoreboardwith dynamictotals.
50.Build amulti-category product tablewith merged rowsand columns, images, and
styled headers.
Chapter 14: HTML Multimedia (Images, Audio, Video)
14.1 Introduction to HTML Multimedia
TML allows you toembed multimedia contentsuch asimages, audio, and video to
H
make your websiteinteractive and visually appealing.
● Images– Add pictures using
<img>tag.
● Audio– Embed music, podcasts, or sound effects using
<audio>tag.
● Video– Display videos using
<video>tag.
ultimedia enhancesuser engagement, improvesvisualstorytelling, and makes your
M
web pagesdynamic.
14.2 HTML Images
Basic Image Syntax
<img src="[Link]" alt="Description" width="300" height="200">
Attributes:
src– Path to the image file
●
alt– Alternate text (important for accessibility)
●
width/
● height– Image size
Advanced Image Features
● Image links
<a href="[Link]
<img src="[Link]" alt="Clickable Image">
</a>
● Image with CSS styling
img src="[Link]" alt="Styled Image" style="border-radius: 10px;
<
box-shadow: 5px 5px 10px grey;">
● Responsive imagesusing CSS
img {
max-width: 100%;
height: auto;
}
14.3 HTML Audio
Basic Audio Syntax
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Attributes:
controls– Show play, pause, volume
●
autoplay– Play automatically
●
loop– Play repeatedly
●
muted– Start muted
●
14.4 HTML Video
Basic Video Syntax
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Attributes:
controls– Play, pause, volume
●
autoplay– Play automatically
●
loop– Repeat video
●
muted– Start muted
●
poster– Image shown before video starts
●
Advanced Video Features
● EmbedYouTube video:
iframe width="560" height="315"
<
src="[Link]
frameborder="0" allowfullscreen></iframe>
● Addcaption tracksfor accessibility:
<video controls>
<source src="video.mp4" type="video/mp4">
track src="[Link]" kind="subtitles" srclang="en"
<
label="English">
</video>
14.5 Exercises – Expanded Practice
Level 1 – Basic Practice
1. Add an image of your favorite animal.
2. Add an image with a width of 200px and height of 150px.
3. Add
alttext to all images.
4. Create an image that links to another website.
5. Add an audio file that can be played by users.
6. Add a video file that can be played with controls.
7. Add an image with a border and padding using CSS.
Level 2 – Intermediate Practice
8. Make an imageresponsiveusing CSS.
9. Addautoplay audiothat loops continuously.
10.Add a video withautoplay and muted attributes.
11.Embed a YouTube video using .
<iframe>
12.Add aposter imagefor your video.
13.Addcaption tracksto a video.
14.Style images withrounded corners and shadows.
15.Embed multiple audio files on a page.
16.Create a photo gallery usingmultiple imagesin atable or grid.
17.Add a background audio thatplays automatically.
Level 3 – Advanced Practice
18.Create avideo gallerywith 3 videos using
<video>tag.
19.Create amusic player pagewith multiple audio tracks.
20.Make aslideshow of imagesusing CSS and HTML.
21.Embed aYouTube playliston your page.
22.Add afull-width responsive banner image.
23.Add multiple images withhover effectsusing CSS.
24.Create avideo player with custom width and height.
25.Addsubtitles in multiple languagesto a video.
26.Combineimage, video, and audioon a single page.
27.Make all multimedia elementsresponsive for mobiledevices.
Mini-Project Exercises
28.Build amedia gallerypage with images, audio, andvideo.
29.Build aportfolio pagewith video introduction andimage samples.
30.Build amusic album pagewith multiple songs and albumcover images.
31.Create amovie trailer pagewith embedded video, posterimages, and audio
effects.
32.Create aslideshow presentation pagewith captionsfor each image.
Error-Finding Exercises
33.Fix an image tag with missing
altattribute.
34.Fix an audio tag that does not play due to missing source or wrong type.
35.Fix a video tag with broken path or missing closing tag.
36.Correct multiple images not showing due to wrong
srcpaths.
CSS & Styling Exercises
37.Style all images withrounded corners, shadows, and hover effects.
38.Make a videocentered and responsiveon the page.
39.Addoverlay texton an image using CSS.
40.Create ahover effectfor audio or video elements.
41.Build agrid layoutfor image gallery using CSS
display: .
grid
42.Addcaptions below imagesstyled with CSS.
43.UseCSS animationsto fade in images or videos.
Validation & Best Practices
44.Always add
altattributes to images.
45.Providefallback contentfor audio and video.
46.Ensurefile formatsare supported by most browsers(mp4, mp3, jpg, png).
47.Optimize images forfaster page load.
48.Useresponsive designfor all multimedia elements.
49.Test audio and video onmultiple devices.
50.Avoid autoplaying audio without user consent (best practice).
Chapter 15: HTML Semantic Elements
15.1 Introduction
emantic elements in HTMLdescribe the meaning of the content. They make your web
S
pagemore readablefor both humans and search engines.
Benefits of Semantic Elements:
● ImprovesSEO(Search Engine Optimization)
● Enhancesaccessibilityfor screen readers
● Makescode more readable and maintainable
Common Semantic Elements:
<header>– Header of a page or section
●
<nav>– Navigation links
●
<main>– Main content of a page
●
<section>– Section of content
●
<article>– Independent article or post
●
<aside>– Sidebar content
●
<footer>– Footer of a page or section
●
15.2 HTML Header Elements
<header>
<h1>My Website</h1>
<p>Welcome to my homepage</p>
</header>
● Often containslogo, page title, navigation links
● Usually appears at thetop of the page
15.3 Navigation Element
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
● Holdslinks to important sections
● Improvesusability and accessibility
15.4 Main Content Elements
● : Contains theprimary content
<main>
<main>
<h2>Latest Articles</h2>
<p>Welcome to our blog section.</p>
</main>
● : Groupsrelated content
<section>
<section>
<h3>Technology</h3>
<p>All about latest tech trends.</p>
</section>
● : Representsself-contained content
<article>
<article>
<h4>New HTML5 Features</h4>
<p>HTML5 introduces semantic elements...</p>
</article>
● : Sidebar orrelated content
<aside>
<aside>
<h4>Popular Posts</h4>
<ul>
<li>CSS Tips</li>
<li>JavaScript Tricks</li>
</ul>
</aside>
15.5 Footer Element
<footer>
<p>© 2025 My Website. All Rights Reserved.</p>
</footer>
● Appears at thebottom of the page
● Often containscontact info, copyright, social links
15.6 Exercises – Expanded Practice
Level 1 – Basic Practice
1. Create a simple web page with
<header>and .
<footer>
2. Add a
<nav>with 3 links: Home, About, Contact.
3. Create a
<main>section with a paragraph.
4. Add a
<section>inside
<main>with a heading and paragraph.
5. Create an
<article>with a blog post title and content.
6. Add an
<aside>with related links.
7. Style the
<header>and
<footer>with background colors.
Level 2 – Intermediate Practice
8. Create a web page withheader, nav, main, section,aside, footer.
9. Addmultiple sectionsinside
<main>for differenttopics.
10.Add2 articlesinside one section.
11.Style the
<aside>withdifferent width and background.
12.Create a
<footer>withsocial media links.
13.Use
<nav>to create ahorizontal menu.
14.Add
<header>withlogo image and website title.
15.Make
<main>contentcenteredusing CSS.
16.Create a
<section>withimages and captions.
17.Add a
<footer>withcontact email and phone number.
Level 3 – Advanced Practice
18.Build ablog pageusing ,
<header> ,
<nav> ,
<main> ,
<section> ,
<article>
<aside>
,
<footer>.
19.Addmultiple blog postsusing .
<article>
20.Create anews website layoutusing semantic elements.
21.Stylesections differentlyusing CSS classes.
22.Use
<aside>for advertisements or related posts.
23.Make thenavigation bar stickyusing CSS.
24.Addicons or images inside footer links.
25.Createnested sectionswith headings and paragraphs.
26.Implement amulti-column layoutusing
<section>and .
<aside>
27.Make theheader responsivefor mobile devices.
Mini-Project Exercises
28.Build apersonal portfolio pageusing all semanticelements.
29.Build anews website homepagewith multiple articlesand sidebars.
30.Create aschool website layoutusing semantic tags.
31.Build atravel blog pagewith multiple sections andarticles.
32.Design arestaurant websitelayout using semantic HTML.
Error-Finding Exercises
33.Identify missing semantic tags in a given HTML layout.
34.Correct improper nesting of
<section>and .
<article>
35.Replace
<div>tags with proper semantic elements.
36.Correct
<header>and
<footer>placement on the page.
CSS & Styling Exercises
37.Style
<header>and
<footer>withgradient backgrounds.
38.Addhover effectsto navigation links.
39.Style
<aside>withfloating layout.
40.Make
<main>contentcenter-aligned.
41.Addbackground imagesto
<section>elements.
42.Createresponsive columnsfor
<article>using CSSgrid.
43.Animate
<header>or
<footer>using CSS transitions.
Validation & Best Practices
44.Use semantic elementsinstead of
<div>whenever possible.
45.Ensure all
<nav>links are accessible.
46.Keep
<main>unique on the page (only one ).
<main>
47.Use
<article>forindependent, self-contained content.
48.Avoid using
<aside>for primary content.
49.Make sureall headings follow hierarchy(
h1→
h2→ ).
h3
50.Test page layout onmultiple devices for responsiveness.
Chapter 16 : HTML Tables
TML tables are used to display structured data, but advanced tables go beyond simple
H
rows and columns. This chapter teachesgrouping, multi-levelheaders, merged cells,
captions, styling, responsive tables, and more, withpractical examples and exercises.
16.1 Grouping Table Rows and Columns
o improve readability and maintainability, HTML provides
T ,
<thead> , and
<tbody>
<tfoot>
.
● : Groups header rows
<thead>
● : Groups main content
<tbody>
● : Groups footer rows (e.g., totals or summaries)
<tfoot>
Example:
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$800</td>
<td>5</td>
</tr>
<tr>
<td>Tablet</td>
<td>$400</td>
<td>10</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total Items</td>
<td>15</td>
</tr>
</tfoot>
</table>
Key Points:
● Easier styling with CSS
● Improves accessibility
● Semantic structure for complex tables
xercise 1:Create a table of 5 students with marksfor 3 subjects using
E ,
<thead> ,
<tbody>
and
<tfoot>showing total marks.
16.2 Multi-Level Headers
Tables may requiregrouped headersusing
colspanand .
rowspan
Example:
<table border="1">
<tr>
<th rowspan="2">Student</th>
<th colspan="3">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td>Akarsh</td>
<td>95</td>
<td>90</td>
<td>88</td>
</tr>
<tr>
<td>Riya</td>
<td>89</td>
<td>92</td>
<td>85</td>
</tr>
</table>
Explanation:
rowspanextends “Student” header
●
colspangroups subjects under “Marks”
●
Exercise 2:Create a table for 4 students with 5 subjectsusing multi-level headers.
16.3 Styling Advanced Tables
16.3.1 Professional Styling
table {
border-collapse: collapse;
width: 90%;
margin: 20px auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
border-radius: 8px;
}
th, td {
padding: 12px 15px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #d1f0d1;
}
xercise 3:Style your student marks table with alternating row colors, hover effect, and
E
shadows.
16.3.2 Responsive Tables
Wrap tables for horizontal scrolling on smaller screens:
<div class="table-container">
<table>
<tr><th>Name</th><th>Score</th><th>Grade</th></tr>
<tr><td>Akarsh</td><td>95</td><td>A</td></tr>
</table>
</div>
.table-container {
overflow-x: auto;
}
table {
width: 100%;
min-width: 600px;
}
Exercise 4:Make your student score table responsive.
16.4 Captions and Footers
● : Adds a title to a table
<caption>
● : Adds a summary or totals row
<tfoot>
<table border="1">
<caption>Student Exam Scores</caption>
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Akarsh</td><td>95</td></tr>
<tr><td>Riya</td><td>89</td></tr>
</tbody>
<tfoot>
<tr><td>Total Students</td><td>2</td></tr>
</tfoot>
</table>
Exercise 5:Add captions and footers to your multi-subjectstudent table.
16.5 Advanced Mini Projects
1. E
-commerce Inventory Table: Product, Category, Stock,Price, Supplier, Action
(Buy/Add). Include multi-level headers.
2. W
eekly Timetable: Days (Mon–Fri), Time slots, Rowspanfor classes spanning
multiple periods.
3. Pricing Table: 3 plans (Basic, Standard, Premium),features, price, purchase link.
4. R
estaurant Menu Table: Merge rows for same category,caption “Restaurant
Menu,” alternating colors, hover effect.
5. S
tudent Dashboard Table: Multi-level headers for subjects,rowspan for names,
footer for averages, highlight top performers with CSS.
16.6 Challenge Exercise
Combineall techniquesin onemega table project:
● Multi-level headers
● Rowspan & Colspan
● CSS styling: shadows, colors, padding, hover effects
● Responsive design
● Caption and footer row
● Suggested ideas: School Dashboard, Business Inventory, Event Planner
Chapter 17: HTML Forms Advanced
TML forms are essential for collecting user data. This chapter coversadvanced form
H
elements, input types, attributes, validation techniques, and form styling, with
practical examples and exercises.
17.1 Advanced Input Types
HTML5 introducednew input typesto make forms moreinteractive and user-friendly.
Input Type Purpose
email
Ensures a valid email format
url
Ensures a valid URL format
number
Accepts numeric values with min, max, step
range
Slider input for numeric values
date
Calendar date picker
time
Time picker
color
Color picker
Example:
<form>
<label>Email:</label>
<input type="email" placeholder="Enter your email" required><br><br>
<label>Website:</label>
<input type="url" placeholder="[Link]
<label>Age:</label>
<input type="number" min="1" max="100"><br><br>
<label>Choose a color:</label>
<input type="color"><br><br>
<input type="submit" value="Submit">
</form>
xercise 1:Create a form that collectsName, Email,Phone Number, Favorite Color, and
E
Birth Dateusing advanced input types.
17.2 Form Attributes
Key Attributes:
● : Ensures the field is not empty
required
● : Shows hint text inside input
placeholder
● : Limits the number of characters
maxlength
min/
● : For numeric or date inputs
max
● : Regex pattern validation
pattern
readonly/
● : Prevents user editing
disabled
Example:
<form>
<label>Username:</label>
input type="text" placeholder="Enter username" maxlength="15"
<
required><br><br>
<label>Password:</label>
<input type="password" required pattern=".{6,}"><br><br>
<input type="submit" value="Register">
</form>
xercise 2:Create aregistration formwith validationforusername, password, and
E
emailusing attributes like
required ,
maxlength, andpattern .
17.3 Form Validation
16.3.1 Browser Validation
● HTML5 can validate inputwithout JavaScript
● Example:
type="email"checks for valid email automatically
16.3.2 Custom Validation with Pattern
<label>Phone Number:</label>
input type="text" pattern="\d{10}" title="Enter 10 digit number"
<
required>
pattern="\d{10}"allows exactly 10 digits
●
titleshows a tooltip for guidance
●
xercise 3:Addphone number and postal codevalidationto your registration form using
E
pattern
.
17.4 Fieldsets and Legends
Fieldsets helpgroup related form elementsvisuallyand semantically.
Example:
<form>
<fieldset>
<legend>Personal Information</legend>
<label>Name:</label>
<input type="text"><br><br>
<label>Age:</label>
<input type="number">
</fieldset>
<br>
<fieldset>
<legend>Account Details</legend>
<label>Email:</label>
<input type="email"><br><br>
<label>Password:</label>
<input type="password">
</fieldset>
<br>
<input type="submit" value="Register">
</form>
xercise 4:Create amulti-section formforpersonalinfo, account info, and
E
preferencesusing<fieldset>and <legend> .
17.5 Form Styling
● Use CSS to style forms for better UX:
input, select, textarea {
padding: 10px;
margin: 5px 0;
width: 300px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
xercise 5:Style yourregistration formwith padding,colors, hover effects, and rounded
E
inputs.
17.6 Mini Projects
1. J ob Application Form: Fields for personal info, education,work experience, skills,
resume upload.
2. F
eedback Form: Name, Email, Rating (1–5), Comments,Submit button with
validation.
3. E
vent Registration Form: Name, Email, Phone, Eventselection (dropdown), Date
picker, and checkbox for terms.
4. E
-commerce Checkout Form: Shipping address, paymentinfo, email validation,
postal code pattern validation.
17.7 Challenge Exercise
● Combineall advanced techniques:
○ Multiple input types (email, number, date, color, range)
○ Validations with ,
required ,
pattern /
min ax
m
○ Grouping with
<fieldset>
○ Styled inputs, buttons, and hover effects
● Example:Conference Registration FormorOnline StoreSignup Form
Chapter 18: HTML5 APIs
TML5 introduced powerful APIs that allow interactive, dynamic, and
H
storage-enabled web applications without external plugins. This chapter covers
Canvas, Geolocation, LocalStorage, with practical examples and exercises.
18.1 HTML5 Canvas
he
T <canvas>element is used for drawing graphics,shapes, charts, and animations
via JavaScript.
Basic Syntax:
canvas id="myCanvas" width="400" height="200" style="border:1px
<
solid #000000;">
Your browser does not support the canvas element.
</canvas>
Drawing on Canvas
const canvas = [Link]("myCanvas");
const ctx = [Link]("2d");
// Draw a rectangle
[Link] = "blue";
[Link](50, 50, 150, 100);
// Draw a circle
[Link]();
[Link](250, 100, 50, 0, 2 * [Link]);
[Link] = "red";
[Link]();
[Link]();
Key Points:
getContext("2d")gives 2D drawing context
●
● Use ,
fillRect ,
arc ,
lineTo strokefor shapes
● Canvas is dynamic and interactive with JavaScript
Exercise 1: Draw a house with a rectangle and triangle roof using Canvas.
18.2 Canvas Advanced Features
1. Gradients:
let grd = [Link](0,0,200,0);
[Link](0,"red");
[Link](1,"yellow");
[Link] = grd;
[Link](10,10,200,100);
2. Images on Canvas:
let img = new Image();
[Link] = '[Link]
[Link] = () => [Link](img, 50, 50, 150, 100);
3. Text on Canvas:
[Link] = "20px Arial";
[Link] = "green";
[Link]("Hello Canvas!", 50, 180);
Exercise 2: Create a banner with gradient background, an image, and text.
18.3 Geolocation API
he Geolocation API allows websites to get the user’s location (latitude and
T
longitude) with permission.
Example:
function getLocation() {
if ([Link]) {
[Link](showPosition,
n
showError);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("Latitude: " + [Link] +
"\nLongitude: " + [Link]);
}
function showError(error) {
alert("Error: " + [Link]);
}
Key Points:
[Link]()gets location
●
● User must allow access
● Errors handled by
showError
Exercise 3: Display user’s location on Google Maps using Geolocation API.
18.4 LocalStorage
ocalStorage allows storing key-value data in the browser that persists even after
L
closing the tab.
Set and Get Data:
// Store data
[Link]("username", "Akarsh");
// Retrieve data
let name = [Link]("username");
alert("Welcome, " + name);
// Remove data
[Link]("username");
// Clear all
[Link]();
Use Case: Saving user preferences, theme selection, or shopping cart items.
xercise 4: Create a theme switcher that stores the selected theme in LocalStorage
E
and applies it on page load.
18.5 Combining APIs
You can combine Canvas, Geolocation, and LocalStorage to create interactive apps.
Mini Project Example: Weather Dashboard
1. User enters city → Store in LocalStorage
2. Display location coordinates → Use Geolocation
3. Draw weather chart → Use Canvas
18.6 Mini Projects
1. Digital Clock: Use Canvas to draw analog clock
2. Drawing App: Draw shapes and lines with mouse events
3. Location Tracker: Show current coordinates and mark on a map
4. LocalStorage Todo App: Add, delete, and save tasks in LocalStorage
18.7 Challenge Exercise
● Build a personal dashboard that:
○ Saves user data/preferences in LocalStorage
○ Shows location on a small map
○ Displays statistics with Canvas charts
○ Include buttons, inputs, and interactive elements
Chapter 19: Responsive HTML
esponsive design ensures that websites look good and function well on all devices
R
— desktops, tablets, and mobile phones. This chapter covers media queries,
mobile-first design, flexible layouts, and responsive images with examples and
exercises.
19.1 What is Responsive Design?
esponsive design adapts the layout and content of a website based on the screen
R
size and device type.
Key Concepts:
● Fluid grids: Layout adapts to screen width
● Flexible images: Images resize automatically
● Media queries: Apply CSS rules based on device characteristics
Example:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
padding: 20px;
}
19.2 Media Queries
edia queries allow you to apply CSS styles conditionally based on screen width,
M
resolution, or device type.
Syntax:
@media only screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
Explanation:
● : Target screen devices
only screen
● : Styles apply when screen width≤ 768px
(max-width: 768px)
Example: Responsive Text Size
p {
font-size: 18px;
}
@media only screen and (max-width: 600px) {
p {
font-size: 14px;
}
}
xercise 1: Create a paragraph that changes color and font size on screens smaller
E
than 600px.
19.3 Mobile-First Design
obile-first means designing for small screens first, then adding styles for larger
M
screens using media queries.
Example:
/* Mobile first */
.container {
padding: 10px;
background-color: lightgray;
}
/* Tablets and larger screens */
@media (min-width: 768px) {
.container {
padding: 20px;
background-color: lightgreen;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
padding: 30px;
background-color: lightyellow;
}
}
xercise 2: Create a mobile-first layout that changes background color and padding
E
for tablets and desktops.
19.4 Flexible Grids
Instead of fixed widths, use percentage-based widths for columns.
Example: Two-column layout
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 50%; /* 50% width */
padding: 10px;
}
@media (max-width: 600px) {
.column {
flex: 100%; /* stack on small screens */
}
}
xercise 3: Create a three-column layout that becomes a single column on screens
E
smaller than 600px.
19.5 Responsive Images
Images should resize automatically to fit their containers.
img {
max-width: 100%;
height: auto;
}
xercise 4: Insert an image and make it responsive. Test by resizing the browser
E
window.
19.6 Navigation Menu for Mobile
A common technique is a hamburger menu that appears on small screens.
Example:
<nav>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
.menu {
display: flex;
list-style-type: none;
background-color: #333;
padding: 0;
}
.menu li {
padding: 14px 20px;
color: white;
}
@media (max-width: 600px) {
.menu {
flex-direction: column;
}
}
xercise 5: Create a responsive navigation bar that switches from horizontal to
E
vertical on small screens.
19.7 Mini Projects
1. Portfolio Website: Responsive home page, projects grid, and contact section
2. Blog Layout: Flexible post cards, stacked layout on mobile
3. E
-commerce Product Page: Product images resize, product details stacked on
small screens
4. Landing Page: Hero image, text, and buttons responsive to screen size
19.8 Challenge Exercise
● Create a responsive multi-section website with:
○ Flexible grid layout
○ Images and videos that scale
○ Navigation bar changing layout on small devices
○ Mobile-first media queries
Chapter 20: Best Practices, Accessibility, and SEO in HTML
reating websites isn’t just about code — it’s about usability, accessibility, and
C
discoverability. This chapter teaches how to write clean HTML, make websites
accessible to everyone, and optimize for search engines (SEO).
20.1 HTML Best Practices
Writing clean HTML ensures maintainable, readable, and error-free code.
Key Guidelines:
1. Use semantic tags ( ,
<header> ,
<footer> ,
<article> )
<section>
2. Indent properly for readability
3. Close all tags
4. Use lowercase for tags and attributes
5. Avoid inline styles — use CSS files
6. Use meaningful class and ID names
Example: Clean Semantic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am a web developer.</p>
</section>
<section>
<h2>Projects</h2>
<article>
<h3>Project 1</h3>
<p>Description...</p>
</article>
</section>
</main>
<footer>
<p>© 2025 My Portfolio</p>
</footer>
</body>
</html>
Exercise 1: Rewrite an old HTML page using semantic tags and proper indentation.
20.2 HTML Accessibility (a11y)
Accessibility ensures websites are usable by people with disabilities.
Key Techniques:
1. Alt text for images:
<img src="[Link]" alt="Profile picture of Akarsh">
2. Labels for form inputs:
<label for="email">Email:</label>
<input type="email" id="email" name="email">
3. Keyboard navigation: Use
<button>instead of clickable
<div>
4. ARIA roles for advanced accessibility:
<nav role="navigation">...</nav>
5. Contrast and font size: Ensure text is readable
xercise 2: Make a login form accessible with proper labels, placeholders, and ARIA
E
attributes.
20.3 HTML SEO (Search Engine Optimization)
SEO improves website visibility on search engines.
Best Practices:
1. Title tag — descriptive and unique
<title>Learn HTML for Beginners | MyWebsite</title>
2. Meta description — short summary for search engines
meta name="description" content="Comprehensive HTML guide with
<
examples and exercises for beginners.">
3. Headings hierarchy —
<h1>only once, then ,
<h2> <h3>
4. Alt attributes for images
5. Clean URLs — e.g.,
[Link]/html-tutorial
6. Internal linking — link related pages
7. Responsive design — Google favors mobile-friendly sites
Exercise 3: Add SEO-friendly titles, meta descriptions, and headings to a sample page.
20.4 Combining Best Practices, Accessibility, and SEO
Example: Accessible and SEO-optimized article
<article>
<h1>HTML Best Practices</h1>
p>Writing clean, semantic, and accessible HTML improves website
<
usability.</p>
<img src="[Link]" alt="Code example of semantic HTML">
</article>
Checklist:
● Semantic structure ✅
● Alt text for images ✅
● Proper headings ✅
● Mobile-friendly ✅
● Descriptive title & meta ✅
20.5 Mini Projects
1. Accessible Portfolio Website
○ Use semantic tags
○ Keyboard-friendly navigation
○ Alt text for all images
2. SEO-optimized Blog Page
○ Titles, meta descriptions, heading hierarchy
○ Mobile-friendly layout
3. Responsive Form with Accessibility
○ Labels, placeholders, ARIA roles
○ Validate inputs with proper messages
20.6 Challenge Exercise
● Build a complete website that:
○ Uses semantic HTML structure
○ Fully accessible for screen readers and keyboard users
○ SEO-optimized with titles, meta, alt attributes, and headings
○ Responsive on all devices
✅ Chapter Summary:
● Clean, semantic HTML improves readability and maintainability
● Accessibility ensures everyone can use your website
● SEO increases visibility and traffic
● Combining all three leads to professional-quality websites
HTML Summary
TML (HyperText Markup Language) is the standard language for creating web
H
pages. It uses tags to structure content like text, images, links, forms, tables, and
multimedia.
Key Points:
1. H
TML Documents start with
<!DOCTYPE html>and are wrapped in
<html>
tags.
2. Structure:
<head>(metadata) +
<body>(visible content)
3. Elements can be block-level ( ,
<div> ) or inline(
<p> span>
< , ).
<a>
4. Attributes provide additional info: ,
id ,
class ,
src ,
href ,
alt , etc.
title
5. S
emantic tags ( ,
<header> ,
<footer> ) improvereadability,
<article>
accessibility, and SEO.
6. F
orms gather user input with ,
<form> ,
<input> ,
<textarea> ,
<button>
<select>
7. T
ables display data with ,
<table> ,
<tr> ,
<td> ,
<th> ,
<thead> ,
<tbody>
<tfoot>
8. Media & Multimedia use ,
<img> ,
<audio> ,
<video> <canvas>
9. Responsive Design uses CSS +
<meta name="viewport">+ media queries
10.HTML5 APIs include Geolocation, LocalStorage, Drag & Drop, Web Workers, and
Canvas
ist of HTML Tags and Their Uses
L
(Single-Line)
Tag Use
<!DOCTYPE html>
Defines HTML version of the document
<html>
Root element of an HTML page
<head>
Container for metadata and links
<body>
Contains all visible content
<title>
Page title shown in browser tab
<meta>
Metadata, charset, viewport, SEO info
<link>
Link external CSS files or resources
<style>
Internal CSS styling
<script>
JavaScript code or link
<base>
Base URL for relative links
<header>
Header section of page or section
<footer>
Footer section of page or section
<nav>
Navigation menu or links
<main>
Main content area
<section>
Thematic grouping of content
<article>
Self-contained content (blog, post)
<aside>
Side content, sidebar, ads
<h1>to
<h6> Headings of different levels
<p>
Paragraph
<br>
Line break
<hr>
Horizontal rule / separator
<a>
Hyperlink
<img>
Image insertion
<figure>
Container for images and captions
<figcaption>
Caption for figure
<ul>
Unordered list
<ol>
Ordered list
<li>
List item
<dl>
Description list
<dt>
Term in description list
<dd>
Definition in description list
<div>
Generic block container
<span>
Generic inline container
<em>
Emphasized text (italic)
<strong>
Important text (bold)
<b>
Bold text
<i>
Italic text
<mark>
Highlight text
<small>
Smaller text
<sub>
Subscript text
<sup>
Superscript text
<q>
Inline quotation
<blockquote>
Block quotation
<code>
Inline code snippet
<pre>
Preformatted text
<abbr>
Abbreviation
<cite>
Citation/reference
<time>
Date or time
<address>
Contact information
<form>
Form container
<input>
User input field
<textarea>
Multi-line text input
<button>
Clickable button
<select>
Dropdown list
<option>
Dropdown item
<label>
Label for input
<fieldset>
Group form elements
<legend>
Title for fieldset
<table>
Table container
<tr>
Table row
<td>
Table cell
<th>
Table header cell
<thead>
Table header section
<tbody>
Table body section
<tfoot>
Table footer section
<col>
Table column styling
<colgroup>
Group table columns
<caption>
Table caption
<iframe>
Embed external page
<audio>
Audio content
<video>
Video content
<source>
Media source for audio/video
<canvas>
Drawing graphics via JavaScript
<svg>
Scalable vector graphics
<picture>
Responsive images
<track>
Subtitles/captions for video
<details>
Collapsible content
<summary>
Summary/title for details
<dialog>
Modal or popup dialog
<progress>
Progress bar
<meter>
Gauge or scalar measurement
<script>
JavaScript code
<noscript>
Fallback content if JS disabled
<template>
Client-side template
<slot>
Web component placeholder
<meta charset>
Character encoding (UTF-8)
meta
< Mobile screen scaling
name="viewport">
HTML Mega Projects Using All Chapters
roject 1: Personal Portfolio Website (Full HTML + CSS +
P
Responsive + Accessibility)
bjective: Build a personal portfolio showcasing your profile, projects, contact form,
O
and blog.
Key HTML Features:
● S
emantic structure: ,
<header> ,
<footer> ,
<main> ,
<section> ,
<article>
<aside>
● Forms:
<form>with ,
<input> ,
<textarea> <button>andvalidation
● Tables: Experience timeline or skills chart
● Media:
<img>portfolio images,
<video>introduction
● HTML5 APIs:
<canvas>for interactive skills chart
● Accessibility:
alttext,
ariaroles, proper labels
● SEO: ,
<title> , heading hierarchy
<meta>
Example Structure:
[Link]
├─ header (logo, nav menu)
├─ main
│
├─ section "About Me"
│
├─ section "Skills" (table + canvas)
│
├─ section "Projects" (article + images)
│
└─ section "Contact" (form)
├─ footer (social links + copyright)
Mini Exercises:
● Add animations with CSS
● Make table responsive
● Include a modal popup for project details
Project 2: Netflix Clone (Landing Page)
bjective: Build a Netflix homepage clone with movies section, navigation, sign-in
O
form, and responsive design.
Key HTML Features:
● : logo + navigation menu
<header>
● : Featured movies, categories
<section>
● : Each movie card (
<article> ,
<img> ,
<h3> )
<p>
● F
orms: Login form with ,
<input type="email"> <input ,
type="password">
<button>
● : Background trailer autoplay
<video>
● Responsive layout: Media queries for mobile and tablet
● Accessibility:
altattributes for all images,
aria-labelfor buttons
● SEO: Meta description, title
Example Layout:
<header>
<nav>Netflix Logo | Home | TV Shows | Movies | Sign In</nav>
</header>
<main>
<section class="hero">
<video autoplay muted loop></video>
<h1>Unlimited movies, TV shows, and more.</h1>
<form>
<input type="email" placeholder="Enter your email">
<button>Get Started</button>
</form>
</section>
<section class="categories">
article class="movie-card"><img src="[Link]"><h3>Movie
<
Title</h3></article>
article class="movie-card"><img src="[Link]"><h3>Movie
<
Title</h3></article>
</section>
</main>
<footer>Netflix Footer</footer>
Project 3: Flipkart Clone (E-commerce Homepage)
bjective: Build a responsive e-commerce website like Flipkart with product listing,
O
search bar, filter sidebar, and cart form.
Key HTML Features:
● Semantic tags: ,
<header> ,
<nav> ,
<main> <footer>
● Forms: Search bar , newslettersubscription
<input type="search"> <form>
● Tables: Price comparison or cart summary
● Media:
<img>for product images
● HTML5 APIs: LocalStorage to save cart data
● Accessibility: ARIA roles for navigation, labels for search and filters
● SEO: Product page meta tags, structured headings
Example Layout:
<header>
<nav>Flipkart Logo | Search Bar | Cart</nav>
</header>
<main>
<aside class="filters">Category filters (checkboxes)</aside>
<section class="products">
<article class="product-card">
<img src="[Link]" alt="Product 1">
<h3>Product Name</h3>
<p>Price: ₹999</p>
<button>Add to Cart</button>
</article>
</section>
</main>
<footer>Flipkart Footer</footer>
roject 4: Navkamna Bio Fertilizers Clone (Corporate
P
Website)
bjective: Create a corporate website for a company, including about, products,
O
services, contact form, and map integration.
Key HTML Features:
● Semantic structure: ,
<header> ,
<main> ,
<section> <footer>
● Forms: Inquiry/contact
<form>with validation
● Tables: Product list with specifications
● Media: Images for products,
<video>for company promo
● HTML5 APIs:
<iframe>for Google Map, LocalStoragefor newsletter signup
● Accessibility:
altfor images, proper label for forms
● SEO: Title, meta description, structured headings
Example Layout:
<header>
<nav>Logo | Home | About | Products | Contact</nav>
</header>
<main>
<section class="hero">Banner Image + Mission Statement</section>
<section class="products">
<table>
<thead><tr><th>Product</th><th>Type</th><th>Price</th></tr></thead>
<tbody>
tr><td>Bio Fertilizer
<
1</td><td>Organic</td><td>₹500</td></tr>
</tbody>
</table>
</section>
<section class="contact">
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</section>
section class="map"><iframe
<
src="google-map-link"></iframe></section>
</main>
<footer>Company Footer</footer>
roject 5: Advanced HTML5 Web App (Interactive
P
Dashboard)
bjective: Build a dashboard for analytics, charts, and user interaction using all
O
advanced HTML5 features.
Key HTML Features:
● : Charts or graphs
<canvas>
● : Tutorials or background
<video>
● : Notifications or alerts
<audio>
<details>+
● : Collapsible sections
<summary>
● Forms: Filters, search, and input validation
● Tables: Analytics tables with sorting
● LocalStorage: Save user preferences or data
● Responsive design + media queries
● Accessibility + SEO
Example Layout:
<header>Dashboard Navigation</header>
<main>
<section class="analytics">
<canvas id="salesChart"></canvas>
<table>
<thead><tr><th>Month</th><th>Revenue</th></tr></thead>
<tbody><tr><td>Jan</td><td>₹50000</td></tr></tbody>
</table>
</section>
<section class="user-settings">
<details>
<summary>Update Profile</summary>
<form>...</form>
</details>
</section>
</main>
<footer>Dashboard Footer</footer>
NETFLIX[ HTML+CSS ] :
erfect! Let’s create a full HTML + CSS Netflix Clone project that uses all the concepts
P
we learned:
● Semantic HTML ( ,
<header> ,
<main> ,
<section> ,
<article> )
<footer>
● Forms ( ,
<input> <button>for sign-in)
● Tables (e.g., subscription plans)
● Media ( ,
<img> )
<video>
● Responsive design (media queries)
● Accessibility ( ,
alt )
aria-label
● SEO ( ,
<title> )
<meta>
Here’s the complete code for a Netflix clone landing page:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
meta name="viewport" content="width=device-width,
<
initial-scale=1.0">
meta name="description" content="Netflix Clone Landing Page
<
Project using HTML and CSS">
<title>Netflix Clone</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- HEADER -->
<header>
<div class="logo">Netflix</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">TV Shows</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</nav>
</header>
<!-- HERO SECTION -->
<section class="hero">
<video autoplay muted loop class="hero-video">
<source src="trailer.mp4" type="video/mp4">
</video>
<div class="hero-content">
<h1>Unlimited movies, TV shows, and more.</h1>
<p>Watch anywhere. Cancel anytime.</p>
<form>
<input type="email" placeholder="Enter your email"
required>
<button type="submit">Get Started</button>
</form>
</div>
</section>
<!-- FEATURED MOVIES SECTION -->
<section class="featured">
<h2>Featured Movies</h2>
<div class="movie-grid">
<article class="movie-card">
<img src="[Link]" alt="Movie 1">
<h3>Movie Title 1</h3>
</article>
<article class="movie-card">
<img src="[Link]" alt="Movie 2">
<h3>Movie Title 2</h3>
</article>
<article class="movie-card">
<img src="[Link]" alt="Movie 3">
<h3>Movie Title 3</h3>
</article>
</div>
</section>
<!-- SUBSCRIPTION PLANS TABLE -->
<section class="plans">
<h2>Subscription Plans</h2>
<table>
<thead>
<tr>
<th>Plan</th>
<th>Price</th>
<th>Quality</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>₹199/month</td>
<td>SD</td>
</tr>
<tr>
<td>Standard</td>
<td>₹499/month</td>
<td>HD</td>
</tr>
<tr>
<td>Premium</td>
<td>₹799/month</td>
<td>Ultra HD</td>
</tr>
</tbody>
</table>
</section>
<!-- FOOTER -->
<footer>
<p>© 2025 Netflix Clone. All rights reserved.</p>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</footer>
</body>
</html>
[Link]
/* GENERAL STYLES */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #141414;
color: #fff;
}
a {
text-decoration: none;
color: white;
}
/* HEADER */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background-color: rgba(0,0,0,0.7);
position: fixed;
width: 100%;
z-index: 1000;
}
header .logo {
font-size: 2rem;
font-weight: bold;
}
header nav ul {
display: flex;
list-style: none;
gap: 20px;
}
/* HERO SECTION */
.hero {
position: relative;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
opacity: 0.6;
}
.hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
}
.hero-content p {
font-size: 1.5rem;
margin-bottom: 20px;
}
.hero-content form input {
padding: 10px;
font-size: 1rem;
width: 250px;
}
.hero-content form button {
padding: 10px 20px;
font-size: 1rem;
background-color: #e50914;
border: none;
color: white;
cursor: pointer;
}
/* FEATURED MOVIES */
.featured {
padding: 50px;
}
.movie-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.movie-card img {
width: 100%;
border-radius: 5px;
}
/* TABLE */
.plans {
padding: 50px;
text-align: center;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
background-color: #222;
}
th, td {
padding: 15px;
border: 1px solid #444;
}
th {
background-color: #e50914;
}
/* FOOTER */
footer {
padding: 30px 50px;
background-color: #141414;
text-align: center;
}
footer ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
padding: 0;
}
footer a:hover {
text-decoration: underline;
}
/* RESPONSIVE */
@media(max-width: 768px){
header {
flex-direction: column;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
.hero-content form input {
width: 180px;
}
}
END
THANK YOU FOR READING
~AKARSH
You might also like
- Understanding HTML: Structure & ElementsNo ratings yetUnderstanding HTML: Structure & Elements5 pages
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure107 pages
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure11 pages
- HTML Overview: History, Features, and CodeNo ratings yetHTML Overview: History, Features, and Code5 pages
- Fusion Applications - Security FAQ (Doc ID 1383852.1)No ratings yetFusion Applications - Security FAQ (Doc ID 1383852.1)10 pages
- Grade 11 Empowerment Tech Activity SheetNo ratings yetGrade 11 Empowerment Tech Activity Sheet5 pages
- 6av6 640 0ca11 0ax0 Touchpanel TP177 Micro Siemens ManualNo ratings yet6av6 640 0ca11 0ax0 Touchpanel TP177 Micro Siemens Manual32 pages
- JavaScript Basics: Variables, Objects, and FunctionsNo ratings yetJavaScript Basics: Variables, Objects, and Functions13 pages
- Python Programming Solutions by ChapterNo ratings yetPython Programming Solutions by Chapter12 pages
- Rewind Video After Playback in PowerPointNo ratings yetRewind Video After Playback in PowerPoint38 pages
- Access Control Models and Policies OverviewNo ratings yetAccess Control Models and Policies Overview54 pages
- Bootstrap Advanced Web Programming MCQsNo ratings yetBootstrap Advanced Web Programming MCQs21 pages
- Exploiting Spectra: A Linux Machine GuideNo ratings yetExploiting Spectra: A Linux Machine Guide16 pages
- Java Topics: Applets, AWT, Servlets, NetworkingNo ratings yetJava Topics: Applets, AWT, Servlets, Networking5 pages
- OIC Application Integration Student GuideNo ratings yetOIC Application Integration Student Guide17 pages
- Web-Based Aesthetic Clinic Management SystemNo ratings yetWeb-Based Aesthetic Clinic Management System33 pages
