0% found this document useful (0 votes)

2 views94 pages

HTML Complete Master Guide

Uploaded by

rakeshenugula2255

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2 views94 pages

HTML Complete Master Guide

Uploaded by

rakeshenugula2255

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

HTML Complete Master Guide | Beginner to Advanced | HTML5

HTML
COMPLETE MASTER GUIDE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Beginner to Advanced • HTML5 • Frontend Development
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

25+ Chapters 300+ Examples 100+ Exercises 50+ Projects

🎯 Perfect For:
Students • Job Seekers • Bootcamp Learners • Self-Learners • Software Engineers
Professional Edition | 2025
Modern HTML5 • Web Standards • Accessibility • SEO

© 2025 HTML Complete Master Guide | Page 1 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

How to Use This Book

This book is designed to take you from zero knowledge of HTML to a confident, job-ready web
developer. Here is how to get the most out of it:

📖 Reading Order
Follow the chapters in order if you are a complete beginner. Each chapter builds on the previous one. If
you are revising specific topics, jump directly to the chapter you need.

💻 Practice as You Read

Do NOT just read. Open your code editor and type every single code example. This is the single most
important habit for learning programming.

🎨 Colour Legend

Colour Meaning
Blue Text HTML keywords, definitions, and key concepts
Orange Text HTML tags (e.g. <html>, <body>, <div>)
Purple Text HTML attributes (e.g. class, id, src)
Green Text Attribute values (e.g. "center", "submit")
Dark Background Code blocks — copy and practise these

💡 TIP BOX
Green boxes contain pro tips that will save you time.

⚠️ WARNING BOX
Red/yellow boxes warn you about common mistakes.

🎯 INTERVIEW QUESTIONS
Purple boxes contain real interview questions from companies.

🚀 BEST PRACTICE
Cyan boxes show the professional way to write code.

© 2025 HTML Complete Master Guide | Page 2 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

🏆 Complete All Exercises

At the end of every chapter there are exercises, quizzes, and assignments. Always complete them
before moving on.

© 2025 HTML Complete Master Guide | Page 3 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 01

Introduction to HTML
What is HTML? How does the web work? Let's find out!

1.1 What is HTML?

Imagine you want to build a house. Before you paint the walls or add furniture, you need to build the
basic structure — the walls, the roof, the floors. HTML is exactly that for a website.

HyperText Markup Language — the standard language used to

HTML
create the structure and content of web pages.

Every website you have ever visited — Google, YouTube, Amazon, Instagram — is built using HTML at
its core. HTML tells the browser: "Here is a heading", "Here is a paragraph", "Here is an image", "Here
is a button".
HTML is NOT a programming language. It is a markup language. The difference is:
• Programming languages perform logic: if, loops, calculations.
• Markup languages describe and structure content.

🧠 DID YOU KNOW?

The first web page ever created was on 6 August 1991 by Sir Tim Berners-Lee.
It was a simple HTML page about the World Wide Web project!
You can still visit it at: [Link]/hypertext/WWW/[Link]

1.2 History of HTML

HTML did not appear overnight. It evolved over decades:

Year Milestone
1991 Tim Berners-Lee creates HTML at CERN. Only 18 tags existed.
1993 HTML 1.0 — basic text, links, images.
1995 HTML 2.0 — first official standard. Added forms.
1997 HTML 3.2 — tables, scripting, applets added.
1999 HTML 4.01 — style sheets (CSS) separation. Still used today.
2000–2006 XHTML — stricter version of HTML based on XML.

© 2025 HTML Complete Master Guide | Page 4 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

2014 HTML5 — the modern version. Audio, video, canvas, semantic

tags.
Today HTML5 is the living standard, updated continuously by
WHATWG.

1.3 HTML vs HTML5 — What Changed?

HTML5 is the current version. Here is a quick comparison:

Feature Old HTML HTML5

Video/Audio Plugin needed (Flash) Built-in <video> <audio>
Drawing Not possible <canvas> element
Semantic Tags None <header> <footer> <nav>
<article>
Storage Cookies only localStorage, sessionStorage
Forms Basic inputs only Date, range, color, search
inputs
DOCTYPE Long declaration <!DOCTYPE html> — simple!

1.4 How Websites Work

Let us trace the journey of what happens when you type [Link] in your browser and press
Enter. Understanding this will help you understand where HTML fits in.

Step-by-Step Journey (Simplified)

1. You type a URL (website address) in the browser address bar.

2. Your browser asks a DNS server: "What is the IP address for [Link]?"
3. The DNS server replies with an IP address like [Link]
4. Your browser connects to that server (Google's web server)
5. The browser requests the HTML file: "Give me [Link] please"
6. The server sends back the HTML file
7. Your browser reads the HTML and displays the web page

💡 PRO TIP
DNS stands for Domain Name System. Think of it like a phone book for the internet.
It converts human-readable names ([Link]) into computer-readable IP addresses.

Client vs Server — The Two Sides of the Web

© 2025 HTML Complete Master Guide | Page 5 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

Term Meaning
CLIENT Your browser (Chrome, Firefox, Safari). It REQUESTS web
pages.
SERVER A powerful computer that STORES and SENDS web pages.
REQUEST The message your browser sends to the server asking for a
page.
RESPONSE The HTML, CSS, and JavaScript the server sends back.
HTTP/HTTPS The protocol (language) used for web communication.

1.5 How Browsers Read HTML

When your browser receives HTML, it does not just show it as text. It converts the HTML into
something called the DOM and then paints it on your screen.

What is the DOM?

Document Object Model — a tree-like structure the browser builds
DOM
from your HTML. Every tag becomes a "node" in this tree.

Imagine your HTML is a family tree. The <html> tag is the grandparent. Inside it are two children:
<head> and <body>. Inside <body> are many children like <h1>, <p>, <img>. The browser builds this
tree structure to understand your page.

Browser Rendering Steps

8. Parse HTML — Read and understand the HTML code
9. Build DOM Tree — Create the family tree structure
10. Load CSS — Apply styling from CSS files
11. Apply Styles — Paint colours, fonts, sizes
12. Load JavaScript — Run any scripts
13. Display — Show the final page to the user

📌 IMPORTANT NOTE
Modern browsers use rendering engines to convert HTML to pixels:
Chrome and Edge use 'Blink'
Firefox uses 'Gecko'
Safari uses 'WebKit'
Different engines may occasionally display pages slightly differently.

© 2025 HTML Complete Master Guide | Page 6 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

1.6 Key Web Terms You Must Know

Term Definition
URL Uniform Resource Locator — the address of a web page (e.g.
[Link]
Domain The human-readable name of a website (e.g. [Link],
[Link])
Web Hosting A service that stores your website files on a server accessible to
everyone
IP Address A unique number identifying a server (e.g. [Link])
Browser Software that displays web pages (Chrome, Firefox, Safari,
Edge)
HTML File A text file ending in .html that contains HTML code
Frontend The part of a website users see (HTML, CSS, JavaScript)
Backend The server side that processes data ([Link], Python, Java,
PHP)

1.7 What Can You Build With HTML?

HTML alone creates the structure and content. Combined with CSS (design) and JavaScript
(behaviour), you can build:
• Personal portfolio websites
• Company and business websites
• E-commerce / shopping websites
• Blog and news websites
• Login pages, sign-up forms, contact pages
• Government and education portals
• Landing pages and product pages

⚠️ WARNING
HTML alone cannot make a website interactive or styled.
You will need CSS for design and JavaScript for behaviour.
But HTML is ALWAYS the starting point. Master it first!

❓ QUICK QUIZ
Q1. What does HTML stand for?
Q2. Who created HTML and in which year?
Q3. What is the difference between HTML and HTML5?

© 2025 HTML Complete Master Guide | Page 7 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

Q4. What is the DOM?

Q5. Is HTML a programming language? Why or why not?
Q6. What is the role of a web browser?
Q7. What is DNS and why is it needed?

🎯 INTERVIEW QUESTIONS
What is HTML? Why is it called a markup language?
Explain the difference between HTML and HTML5 with at least 3 examples.
What is the DOM? How does the browser build it?
What is the difference between client-side and server-side?
What is a rendering engine? Name two examples.

Chapter 1 Summary
• HTML = HyperText Markup Language — the structure of every web page.
• Created by Tim Berners-Lee in 1991. HTML5 is the current version (2014+).
• HTML is NOT a programming language — it is a markup language.
• When you visit a website, your browser requests HTML from a server.
• The browser parses HTML and builds a DOM tree to display the page.
• Key terms: URL, Domain, Web Hosting, Client, Server, Frontend, Backend.

© 2025 HTML Complete Master Guide | Page 8 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 02

Setting Up Your Environment

Install the tools you need to start coding HTML today

2.1 What Tools Do You Need?

To write HTML, you only need two things:

Tool Purpose
Code Editor A program where you write your HTML code (like VS Code)
Web Browser A program that displays your HTML page (Chrome is
recommended)

That is it! Unlike many programming languages, you do NOT need to install anything complex. HTML
runs directly in the browser.

2.2 Installing Visual Studio Code (VS Code)

VS Code (Visual Studio Code) is the most popular free code editor in the world. It is made by Microsoft
and used by millions of developers.

Why VS Code?
• Completely free and open source
• Works on Windows, Mac, and Linux
• Has colour-coding (syntax highlighting) for HTML
• Has extensions to make coding faster
• Has a built-in terminal
• Trusted by professional developers worldwide

Installation Steps
14. Go to [Link] in your browser
15. Click the big Download button for your operating system
16. Open the downloaded file and follow the installation wizard
17. Click Next → Next → Install → Finish
18. Open VS Code from your Desktop or Start Menu

© 2025 HTML Complete Master Guide | Page 9 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

💡 PRO TIP
Download the Stable Build version, not Insiders, for a more reliable experience.

2.3 Essential VS Code Extensions

Extensions add extra features to VS Code. Install these to make HTML development much easier:

Extension What It Does

Live Server Automatically refreshes your browser when you save HTML
HTML CSS Support Adds smart suggestions for HTML and CSS
Prettier Auto-formats your code to look clean and professional
Auto Rename Tag When you rename an opening tag, it renames the closing tag too
Path Intellisense Helps you type file paths quickly
Material Icon Theme Adds icons to your file list for easier navigation

How to Install Extensions

19. Open VS Code
20. Click the Extensions icon on the left sidebar (looks like 4 squares)
21. Search for the extension name (e.g. "Live Server")
22. Click Install on the first result

📌 IMPORTANT NOTE
The most important extension is Live Server.
It automatically updates your browser every time you save your HTML file.
This saves you from manually refreshing the browser hundreds of times!

2.4 Creating Your First HTML Project

Let us create a proper folder structure for your HTML project. Professional developers always organise
their files in folders.

Recommended Folder Structure

my-website/
├── [Link] ← Main home page
├── [Link] ← About page
├── [Link] ← Contact page
├── css/
│ └── [Link] ← All your styles

© 2025 HTML Complete Master Guide | Page 10 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

├── js/
│ └── [Link] ← All your JavaScript
└── images/
├── [Link]
└── [Link]

Creating the Project in VS Code

23. Create a new folder on your Desktop called my-website
24. Open VS Code → File → Open Folder → Select my-website
25. Right-click in the Explorer panel → New File → Type [Link]
26. Your first HTML file is ready!

2.5 Using Live Server

Once you have installed Live Server, here is how to use it:
27. Open your [Link] file in VS Code
28. Right-click anywhere in the code editor
29. Select Open with Live Server
30. Your browser will open automatically showing your HTML page
31. Now save your file (Ctrl+S / Cmd+S) — the browser updates instantly!

💡 PRO TIP
You can also click the 'Go Live' button at the very bottom right of VS Code to start Live Server.

2.6 Using Developer Tools

Every browser has built-in Developer Tools. This is one of the most powerful tools for learning and
debugging HTML.

How to Open Developer Tools

• Windows: Press F12 or Ctrl+Shift+I
• Mac: Press Cmd+Option+I
• Right-click anywhere on a web page → Inspect

Key Tabs in Developer Tools

Tab What It Shows
Elements Shows the HTML structure of the page. Click any element to
highlight it.
Console Shows JavaScript errors and lets you run JS code.

© 2025 HTML Complete Master Guide | Page 11 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

Network Shows all files loaded by the page (HTML, CSS, images, JS).
Sources Shows the source code files of the page.
Application Shows cookies, localStorage, and session storage.

🚀 BEST PRACTICE
Get into the habit of using Developer Tools from Day 1.
Inspect other websites to learn how they are built!
Right-click on ANY web page → Inspect → look at the HTML. This is how many developers learn.

2.7 Useful VS Code Keyboard Shortcuts

Shortcut (Win/Linux) Action

Ctrl+S Save the current file
Ctrl+Z Undo last action
Ctrl+Shift+P Open the command palette
Alt+Shift+F Format (beautify) your code
Ctrl+/ Toggle comment on selected line
Ctrl+D Select next occurrence of selected text
Ctrl+Shift+K Delete the current line
Alt+Up/Down Move line up or down
! + Tab Auto-generate HTML boilerplate in VS Code

💡 PRO TIP
Type ! and press Tab in an empty .html file — VS Code will auto-generate a complete HTML
boilerplate for you!

❓ QUICK QUIZ
Q1. What are the two minimum tools needed to write HTML?
Q2. What does Live Server do?
Q3. How do you open Developer Tools in a browser?
Q4. What is the shortcut to format code in VS Code?
Q5. What is the name of the main/home page HTML file by convention?

Chapter 2 Summary
• You only need a Code Editor (VS Code) and a Browser (Chrome) to write HTML.

© 2025 HTML Complete Master Guide | Page 12 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

• Install VS Code from [Link] — it is free.

• Install the Live Server extension for automatic browser refresh.
• Organise your project into folders: css/, js/, images/.
• Always name your main page [Link].
• Use F12 to open Developer Tools and inspect any web page.

© 2025 HTML Complete Master Guide | Page 13 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 03

HTML Document Structure

Every HTML page has a skeleton — let us learn it inside out

3.1 The Basic HTML Template

Every HTML file starts with the same basic structure. Think of it as a skeleton. Every web page you
build will have this skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>

<h1>Hello, World!</h1>
<p>This is my first web page.</p>

</body>
</html>

Now let us understand every single line of this template:

3.2 Line-by-Line Explanation

Line 1: <!DOCTYPE html>
This is NOT an HTML tag. It is a declaration that tells the browser: 'This file is HTML5, please read it as
modern HTML.'

Document Type Declaration — tells the browser which version of

DOCTYPE
HTML to use. In HTML5, it is simply: <!DOCTYPE html>

⚠️ WARNING
Always put <!DOCTYPE html> as the very FIRST line of every HTML file.
Without it, browsers may enter 'quirks mode' and display your page incorrectly.

© 2025 HTML Complete Master Guide | Page 14 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

Line 2: <html lang="en">

This is the root element. Every other element in the page must be inside the <html> tag.
• The lang attribute tells the browser and search engines what language the page is in.
• lang="en" means English. For Hindi: lang="hi", for Telugu: lang="te".
• This is important for accessibility and SEO.

Lines 3-7: The <head> Section

The <head> section contains METADATA — information about the page. This information is NOT
displayed on the page itself. It is used by:
• The browser (to know the charset and viewport)
• Search engines (for the title and description)
• Social media (for sharing previews)

Head Tag Purpose

Lines 8-13: The <body> Section

Everything inside <body> is what the user SEES on the web page. This is where you put your
headings, paragraphs, images, buttons, forms — all the visible content.

<body> The body element contains all the visible content of the HTML page.

3.3 HTML Tags — How They Work

HTML uses TAGS to define elements. Most tags come in pairs: an opening tag and a closing tag.

<h1>This is a Heading</h1>

© 2025 HTML Complete Master Guide | Page 15 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

Part Example
Opening Tag <h1>
Closing Tag </h1> — note the forward slash /
Content The text or elements between the tags
Attribute Extra information inside the opening tag: href="...", src="..."
Self-Closing Tags that do not need a closing tag: <br> <img> <hr> <input>

3.4 HTML Comments

Comments are notes in your code that the browser ignores. They are only visible in the source code.
Use them to explain your code.

<h1>Welcome</h1>

💡 PRO TIP
Use Ctrl+/ (Windows) or Cmd+/ (Mac) in VS Code to quickly toggle a comment.
Comments are very useful for leaving notes when working in a team.

3.5 Meta Tags — Complete Reference

Meta tags are important for SEO and proper page behaviour. Here are the ones you will use most:

© 2025 HTML Complete Master Guide | Page 16 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

3.6 Adding a Favicon

A favicon is the tiny icon you see in the browser tab next to the page title. For example, Google has a
colourful G icon.

<head>
<title>My Website</title>

📌 IMPORTANT NOTE
Favicon files are usually 16x16 or 32x32 pixels.
Common formats: .ico, .png, .svg
Put your [Link] in the root folder (same level as [Link]) for it to work automatically.

3.7 Your Complete First HTML Page

Let us put everything together and create a complete, properly structured HTML page:

<!DOCTYPE html>
<html lang="en">

© 2025 HTML Complete Master Guide | Page 17 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="My first HTML web page - learning HTML
basics">
<meta name="author" content="Your Name">
<title>My First Web Page | HTML Learning</title>
<link rel="icon" type="image/png" href="[Link]">
</head>

<body>

<h1>Welcome to My First Web Page!</h1>

<p>Hello! My name is [Your Name]. I am learning HTML and this is my first web
page.</p>

<h2>What I Am Learning</h2>
<p>I am currently learning HTML, which is the foundation of every website.</p>

</body>

</html>

🚀 BEST PRACTICE
Always indent nested elements with 2 spaces for readability.
Write one element per line.
Use lowercase for all tag names: <body> not <BODY>.
Always close your tags: </p> </div> </html>
Save files with the .html extension.

❓ QUICK QUIZ
Q1. What does <!DOCTYPE html> do?
Q2. What is the difference between <head> and <body>?
Q3. What is the purpose of the charset meta tag?
Q4. How do you write a comment in HTML?
Q5. What is a favicon?
Q6. What does the viewport meta tag do?
Q7. Is the <html> tag required? Why?

© 2025 HTML Complete Master Guide | Page 18 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

🎯 INTERVIEW QUESTIONS
Explain the complete structure of an HTML document.
What is the purpose of <!DOCTYPE html>? What happens if you omit it?
What are meta tags? List the most important ones.
What does the viewport meta tag do and why is it important?
What is the difference between the <head> and <body> tags?

Chapter 3 Summary
• Every HTML page starts with <!DOCTYPE html> to declare HTML5.
• The <html> tag is the root — everything goes inside it.
• <head> contains metadata (title, charset, viewport) not visible to users.
• <body> contains everything the user sees on the page.
• Tags come in pairs: <p>content</p>. Some are self-closing: <br> <img>.
• Attributes add extra info to tags: <img src="..." alt="...">.
• Comments:  — hidden from users.
• Meta tags help with SEO, character encoding, and responsiveness.

© 2025 HTML Complete Master Guide | Page 19 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 04

HTML Elements
Block, Inline, Empty, Nested — understanding every type

4.1 What is an HTML Element?

An HTML element is everything from the opening tag to the closing tag including all the content in
between. Think of an element as a 'unit' of HTML.

<p>This is a paragraph element.</p>
^ ^
Opening tag Closing tag
|_________Content__________|

An HTML element consists of: Opening Tag + Content + Closing Tag.

HTML Element
The content can be text or other elements.

4.2 Block Elements vs Inline Elements

This is one of the most important concepts in HTML and CSS. Every HTML element is either block-
level or inline-level.

Block Elements
Block elements start on a NEW LINE and take up the FULL width available — like a box that stretches
across the entire page.

<div>This is a block element</div>

<p>This paragraph is a block element</p>
<h1>Headings are block elements</h1>
<ul>Lists are block elements</ul>

Common block elements:

Tag Purpose
<div> A generic container for grouping elements
<p> Paragraph of text
<h1> to <h6> Headings of different sizes

© 2025 HTML Complete Master Guide | Page 20 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<ul> <ol> Lists

<table> Tables
<form> Forms
<header> <footer> Semantic containers
<section> <article> Semantic content areas

Inline Elements
Inline elements do NOT start on a new line. They only take up as much space as their content — like
words flowing in a sentence.

<p>This is a paragraph with

<strong>bold text</strong> and
<a href="#">a link</a> inside it.
</p>

Common inline elements:

Tag Purpose
<span> A generic inline container
<a> Hyperlinks
<strong> Bold text (semantic)
<em> Italic text (semantic)
<img> Images
<input> Form input fields
<button> Buttons
<code> Inline code snippets

📌 IMPORTANT NOTE
Golden Rule: Block elements can contain inline elements.
Inline elements should NOT contain block elements.
Correct: <p>Text with <strong>bold</strong> word</p>
WRONG: <span><p>Paragraph inside span</p></span> ← NEVER do this

4.3 Empty Elements (Self-Closing Tags)

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

© 2025 HTML Complete Master Guide | Page 21 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

💡 PRO TIP
In HTML5, you do NOT need to self-close void elements: <br> is fine.
In older XHTML style, you would write <br /> — both work in modern browsers.

4.4 Nested Elements

Nesting means putting elements inside other elements. This is how you build complex page structures.
Think of it like Russian nesting dolls — each element can contain other elements.

<div>
<h2>My Section</h2>
<p>
This paragraph has <strong>bold</strong> and
<em>italic</em> text inside it.
</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

⚠️ WARNING
WRONG nesting (overlapping tags) — NEVER do this:
<p><strong>Bold text</p></strong>

CORRECT nesting:
<p><strong>Bold text</strong></p>

Tags must be closed in the REVERSE order they were opened.

© 2025 HTML Complete Master Guide | Page 22 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

4.5 The <div> and <span> Elements

These two are the most widely used elements in HTML. They have no visual appearance on their own
but are used to group and style other elements using CSS.

Division — a BLOCK-level container for grouping elements. Used to

<div>
divide the page into sections.

A generic INLINE container for wrapping a small portion of text or

<span>
inline elements for styling.

<div class="product-card">
<h3>Product Name</h3>
<p>Price: <span class="price">₹999</span></p>
<button>Add to Cart</button>
</div>

<p>My favourite colour is <span style="color: orange;">orange</span>.</p>

🚀 BEST PRACTICE
Use <div> for layout sections and grouping.
Use <span> for styling small portions of text.
Prefer semantic HTML5 tags (<section>, <article>) over <div> where possible.
Give every div a meaningful class name: class="hero-section" not class="div1".

4.6 HTML Attributes

Attributes give extra information about elements. They are always written in the OPENING TAG and
come in name="value" pairs.

<img src="[Link]" alt="My photo" width="300">
^^^ ^^^ ^^^^^
src attr alt attr width attr

<a href="[Link] target="_blank" title="Open Google">

^^^^ ^^^^^^ ^^^^^
href attr target attr title attr
>Google</a>

Attribute Purpose

© 2025 HTML Complete Master Guide | Page 23 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

id Unique identifier for ONE element: id="header"

class Reusable name for styling multiple elements: class="card"
src Source file: used in <img> and <script>
href Hyperlink reference: used in <a> tags
alt Alternative text for images: used in <img>
style Inline CSS styling: style="color: red;"
title Tooltip text shown on hover
target Where to open a link: _blank = new tab
type Type of input or button
placeholder Grey hint text inside input fields

❓ QUICK QUIZ
Q1. What is the difference between a block element and an inline element?
Q2. Give 3 examples of block elements and 3 examples of inline elements.
Q3. What is a void/empty element? Give 3 examples.
Q4. What does nesting mean in HTML?
Q5. What is the difference between <div> and <span>?
Q6. What are HTML attributes? Give 3 examples.

🎯 INTERVIEW QUESTIONS
Explain block-level vs inline elements with examples.
What are void elements in HTML? List at least 5.
What is the difference between id and class attributes?
Can you put a <div> inside a <span>? Explain.
What are global attributes in HTML?

Chapter 4 Summary
• An HTML element = Opening Tag + Content + Closing Tag.
• Block elements start on a new line, take full width: <div>, <p>, <h1>.
• Inline elements flow within text, take only needed space: <span>, <a>, <strong>.
• Void elements have no content or closing tag: <br>, <hr>, <img>, <input>.
• Nesting = putting elements inside elements. Close in reverse order.
• <div> groups block content. <span> groups inline content.
• Attributes add information to elements: src, href, class, id, alt, style.

© 2025 HTML Complete Master Guide | Page 24 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 05

Text & Formatting

Headings, paragraphs, and all the ways to style your text

5.1 Headings — h1 to h6
HTML has 6 levels of headings, from <h1> (most important, largest) to <h6> (least important, smallest).
Think of them like a newspaper: the main story has a big headline, smaller stories have smaller
headlines.

<h1>Chapter Heading (Biggest) - Use ONCE per page</h1>

<h2>Section Heading</h2>
<h3>Sub-Section Heading</h3>
<h4>Sub-Sub-Section</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

📌 IMPORTANT NOTE
Use only ONE <h1> per page — it is the main title.
<h1> is the most important for SEO (Search Engine Optimisation).
Do not skip heading levels: go h1 → h2 → h3, NOT h1 → h4.
Do NOT use headings just to make text big — use CSS for size instead.

5.2 Paragraphs
The <p> tag defines a paragraph of text. Browsers automatically add space above and below
paragraphs.

<p>This is the first paragraph. Browsers add space below it automatically.</p>

<p>This is the second paragraph. Notice the gap between paragraphs.</p>

<p>Paragraph one<br><br></p>

💡 PRO TIP
Use <p> tags for paragraphs, NOT the <br> tag.

© 2025 HTML Complete Master Guide | Page 25 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<br> is for a line break within the same paragraph.

Use CSS margin/padding to control spacing between paragraphs.

5.3 Line Break and Horizontal Rule

<p>First line of text.<br>
Second line in the same paragraph.<br>
Third line.</p>

<h2>Section One</h2>
<p>Content of section one.</p>
<hr>
<h2>Section Two</h2>
<p>Content of section two.</p>

Tag Purpose
<br> Line break inside a paragraph. Self-closing.
<hr> Horizontal rule — a visual divider line across the page. Self-
closing.

5.4 Text Formatting Tags — Complete Guide

HTML has many tags for formatting text. Some are VISUAL (they just change appearance) and some
are SEMANTIC (they carry meaning).

Bold and Strong

<p>This is <b>bold</b> text.</p>

<p>Do NOT touch: <strong>High Voltage!</strong></p>

Italic and Emphasis

<p>This is <i>italic</i> text.</p>

© 2025 HTML Complete Master Guide | Page 26 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<p>You <em>must</em> complete this step first.</p>

Mark, Small, Deleted, Inserted

<p>Remember to submit by <mark>Friday 5 PM</mark>.</p>

<p>Price: ₹999 <small>(inclusive of GST)</small></p>

<p>Old price: <del>₹1499</del> New price: ₹999</p>

<p>Meeting changed to <del>Monday</del> <ins>Tuesday</ins>.</p>

Superscript and Subscript

<p>E = mc<sup>2</sup></p>
<p>Note<sup>1</sup></p>
<p>10<sup>th</sup> September</p>

<p>H<sub>2</sub>O (water)</p>
<p>CO<sub>2</sub> (carbon dioxide)</p>

Quotes and Blockquote

<p>Einstein said: <q>Imagination is more important than knowledge.</q></p>

<p>From the book <cite>The Alchemist</cite> by Paulo Coelho.</p>

Code, Pre, and Keyboard

<p>Use the <code>[Link]()</code> function to debug.</p>

© 2025 HTML Complete Master Guide | Page 27 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<pre>
function hello() {
return 'Hello World';
}
</pre>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<p>Output: <samp>File saved successfully.</samp></p>

5.5 Complete Text Formatting Reference Table

Tag Visual Effect Best Use

<b> Bold Visual emphasis only, no meaning
<strong> Bold Important content (use over <b>)
<i> Italic Visual — foreign words, book titles
<em> Italic Stressed emphasis (use over <i>)
<mark> Yellow highlight Highlighted or searched terms
<small> Smaller text Fine print, captions, notes
<del> Strikethrough Removed or outdated content
<ins> Underline Added or corrected content
<sup> Superscript raised Footnotes, exponents, ordinals
<sub> Subscript lowered Chemical formulas, footnotes
<q> Inline quote marks Short quotations
<blockquote> Indented block Long quotations
<code> Monospace font Inline code snippets
<pre> Monospace, preserves spaces Multi-line code blocks
<kbd> Monospace Keyboard shortcuts
<samp> Monospace Computer output

⚠️ WARNING
Never use <b> or <i> when you mean <strong> or <em>.
Screen readers (for blind users) treat <strong> and <em> as IMPORTANT.
<b> and <i> are purely visual — they carry no meaning for accessibility.

© 2025 HTML Complete Master Guide | Page 28 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

🚀 BEST PRACTICE
Use <strong> for important content, not just to make text bold.
Use <em> for emphasis, not just to italicize.
Use <mark> to highlight key terms in articles.
Use <del> and <ins> for showing document revisions.
Use <code> for technical terms and inline code.

❓ QUICK QUIZ
Q1. What is the difference between <b> and <strong>?
Q2. What is the difference between <i> and <em>?
Q3. How many heading levels does HTML have? Which is most important?
Q4. What does <pre> do differently from a normal paragraph?
Q5. What is the difference between <sup> and <sub>? Give examples.
Q6. What does <mark> do?
Q7. What is <blockquote> used for?

🎯 INTERVIEW QUESTIONS
What is the semantic difference between <b>/<i> and <strong>/<em>?
Why should you use only one <h1> tag per page?
What is the purpose of the <pre> tag?
How would you display a keyboard shortcut in HTML?
What is the difference between <q> and <blockquote>?

Chapter 5 Summary
• Headings h1-h6 define the page hierarchy. Use only ONE h1 per page.
• <p> for paragraphs. <br> for line breaks. <hr> for dividers.
• <strong> = bold + important. <em> = italic + emphasised.
• <mark> = highlight. <small> = fine print. <del> = strikethrough. <ins> = inserted.
• <sup> = superscript (exponents). <sub> = subscript (chemical formulas).
• <blockquote> for long quotes. <q> for short inline quotes.
• <code> = inline code. <pre> = preformatted multi-line code. <kbd> = keyboard input.

© 2025 HTML Complete Master Guide | Page 29 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 06

Lists
Ordered, Unordered, Description — and how to nest them

6.1 Types of Lists in HTML

HTML supports three types of lists. Lists are used everywhere: navigation menus, step-by-step
instructions, bullet-point content, and data definitions.

Tag Type
<ul> Unordered List — bullet points (no specific order)
<ol> Ordered List — numbered list (order matters)
<dl> Description List — term + definition pairs (like a glossary)

6.2 Unordered List

Use an unordered list when the ORDER does not matter. For example: a list of ingredients, features, or
menu items.

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>

By default, unordered lists show bullet points (•). You can change the bullet style with CSS:

<style>
ul { list-style-type: disc; } /* default bullet */
ul { list-style-type: circle; } /* hollow circle */
ul { list-style-type: square; } /* filled square */
ul { list-style-type: none; } /* no bullet - great for nav menus */
</style>

6.3 Ordered List

Use an ordered list when the ORDER matters. For example: a recipe's steps, a ranking, or instructions.

© 2025 HTML Complete Master Guide | Page 30 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<ol>
<li>Boil water</li>
<li>Add pasta</li>
<li>Cook for 10 minutes</li>
<li>Drain and serve</li>
</ol>

<ol reversed>
<li>Third place</li>
<li>Second place</li>
<li>First place!</li>
</ol>

The list-style-type of ordered lists can also be changed:

<ol style="list-style-type: upper-roman;"> 
<li>Chapter One</li>
<li>Chapter Two</li>
</ol>

<ol style="list-style-type: upper-alpha;">

<li>Option A</li>
<li>Option B</li>
</ol>

6.4 Description List

A description list is used to display term-definition pairs, like a dictionary or glossary.

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — used to create web pages</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets — used to style web pages</dd>

<dt>JavaScript</dt>
<dd>A programming language that makes web pages interactive</dd>
</dl>

© 2025 HTML Complete Master Guide | Page 31 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

Tag Role
<dl> Description List container
<dt> Description Term (the word or title)
<dd> Description Definition (the explanation, indented by default)

6.5 Nested Lists

You can put a list inside another list. This is called nesting. It is perfect for creating multi-level content
like course syllabi, table of contents, or sub-menus.

<ul>
<li>Frontend Development
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Flexbox</li>
<li>Grid</li>
</ul>
</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ul>
<li>[Link]</li>
<li>Python</li>
</ul>
</li>
</ul>

📌 IMPORTANT NOTE
When nesting lists, put the inner <ul> or <ol> INSIDE the <li> element.
The inner list is part of the list item, not a sibling of it.
Browsers automatically indent nested lists.

6.6 Real Project — Navigation Menu Using Lists

Navigation menus on almost every website are actually HTML lists styled with CSS. Here is a basic
navigation structure:

<nav>

© 2025 HTML Complete Master Guide | Page 32 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li>
<a href="[Link]">Courses</a>
<ul>
<li><a href="[Link]">HTML</a></li>
<li><a href="[Link]">CSS</a></li>
<li><a href="[Link]">JavaScript</a></li>
</ul>
</li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>

💡 PRO TIP
Navigation menus are always built with <nav> + <ul> + <li> + <a>.
CSS then transforms this list into a horizontal menu bar.
This pattern is used on literally every website you visit!

❓ QUICK QUIZ
Q1. What is the difference between <ul> and <ol>?
Q2. What does <dl>, <dt>, and <dd> stand for?
Q3. How do you start an ordered list from number 5?
Q4. How do you create a list without bullet points?
Q5. What does a nested list mean? Give an example.
Q6. How are navigation menus built using HTML lists?

Chapter 6 Summary
• <ul> = unordered list with bullets. <ol> = ordered list with numbers.
• <li> = list item — used inside both <ul> and <ol>.
• <dl> <dt> <dd> = description list for term-definition pairs (glossaries).
• Nested lists: put a <ul> or <ol> inside an <li> element.
• Navigation menus are built with <nav><ul><li><a> structure.
• Use list-style-type in CSS to change or remove bullet/number styles.

© 2025 HTML Complete Master Guide | Page 33 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 07

Links & Hyperlinks

Connect pages and the entire world wide web

7.1 What is a Hyperlink?

The 'HT' in HTML stands for HyperText — text that contains links to other text. Hyperlinks (links) are
the backbone of the web. They let users navigate from one page to another with a click.

Anchor tag — creates a hyperlink. The href attribute holds the

<a>
destination URL.

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

^^^^ ^^^^^^^^^^^^
href = destination URL Link text (what users see and click)

7.2 Absolute vs Relative URLs

Type Description
Absolute URL Full complete address: [Link]
Relative URL Partial path relative to current file: [Link] or
../images/[Link]

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

<a href="[Link]">About</a>
<a href="courses/[Link]">HTML Course</a>
<a href="../[Link]">Back to Home</a>

💡 PRO TIP
Use relative URLs for links within your own website.
Use absolute URLs for links to other websites.
../ means go up one folder level.

© 2025 HTML Complete Master Guide | Page 34 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

./ means the current folder (optional, same as no prefix).

7.3 Opening Links in a New Tab

<a href="[Link] target="_blank">Open Google in new tab</a>

<a href="[Link] target="_blank" rel="noopener noreferrer">
Google (secure new tab)
</a>

⚠️ WARNING
ALWAYS add rel="noopener noreferrer" when using target="_blank".
Without it, the new page can access and manipulate your page via JavaScript.
This is a security vulnerability called 'reverse tabnabbing'.

7.4 Email and Phone Links

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

<a href="[Link] team">Send
Email</a>

7.5 Download Links

<a href="files/[Link]" download>Download My Resume</a>

<a href="files/[Link]" download="[Link]">
Download Resume
</a>

© 2025 HTML Complete Master Guide | Page 35 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

7.6 Page Anchors / Bookmarks

Anchors let you create links that jump to a specific section of the SAME PAGE. Very useful for long
pages with a Table of Contents.

<h2 id="contact">Contact Section</h2>
<h2 id="services">Our Services</h2>

<a href="#contact">Jump to Contact</a>
<a href="#services">Jump to Services</a>

7.7 Link Attributes Reference

Attribute Purpose
href The destination URL or anchor id
target Where to open: _blank=new tab, _self=same tab (default),
_parent, _top
rel Relationship to linked page. noopener noreferrer for security.
download Triggers file download. Can specify filename.
title Tooltip text shown when hovering over link.
type MIME type of the linked resource: type="application/pdf"

7.8 Styling Links — CSS States

/* When hovered */
a:hover { color: orange; }

/* Already visited */
a:visited { color: purple; }

/* When being clicked */

© 2025 HTML Complete Master Guide | Page 36 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

a:active { color: red; }

/* Remove underline (common in navigation menus) */

nav a { text-decoration: none; }
</style>

🚀 BEST PRACTICE
Always use descriptive link text. NOT: click here. YES: Download the PDF brochure.
Add rel="noopener noreferrer" to all external links that open in new tabs.
Use meaningful anchor IDs: id="contact-form" not id="f1".
Test all links regularly to avoid dead (404) links on your website.

❓ QUICK QUIZ
Q1. What is the difference between an absolute URL and a relative URL?
Q2. How do you open a link in a new tab?
Q3. Why should you use rel="noopener noreferrer" with target="_blank"?
Q4. How do you create a link that opens the email app?
Q5. How do you make a link jump to a section on the same page?
Q6. What does the download attribute do on an anchor tag?

Chapter 7 Summary
• <a href="..."> creates a hyperlink. href is the destination.
• Absolute URLs: full path for external links. Relative URLs: partial path for internal links.
• target="_blank" opens link in new tab. Always add rel="noopener noreferrer".
• mailto: links open email clients. tel: links open phone dialers.
• download attribute triggers file download instead of navigation.
• Page anchors use id attributes and #id in href to jump to page sections.

© 2025 HTML Complete Master Guide | Page 37 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 08

Images
Add visuals that enhance your web pages

8.1 The <img> Tag

The <img> tag embeds images into your HTML page. It is a void element (no closing tag). The two
most important attributes are src (where the image is) and alt (description of the image).

8.2 Image Attributes

Attribute Purpose
src Source — the path or URL of the image. REQUIRED.
alt Alternative text — describes the image for screen readers and
SEO. REQUIRED.
width Width in pixels or percentage. Only set width OR height (not
both) to preserve aspect ratio.
height Height in pixels.
title Tooltip text shown when user hovers over the image.
loading loading="lazy" defers loading until image is near viewport —
improves performance.
decoding decoding="async" improves page rendering performance.

8.3 The alt Attribute — Why It Matters

The alt attribute is the most important attribute for images. NEVER skip it.

• Accessibility: Screen readers (used by visually impaired users) read the alt text.

© 2025 HTML Complete Master Guide | Page 38 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

• SEO: Search engines cannot see images — they read alt text to understand the image.
• Fallback: If the image fails to load, the alt text is displayed instead.

🚀 BEST PRACTICE
Write alt text as if you are describing the image to someone on a phone call.
For decorative images (backgrounds, dividers), use alt="" (empty) to skip them.
Never start alt text with 'Image of...' or 'Photo of...' — screen readers already say 'image'.
Keep alt text under 125 characters.

8.4 Image File Formats

Format Best For

JPEG / JPG Photos and complex images. Small file size. No transparency.
PNG Graphics with transparency. Logos, icons. Larger file size than
JPG.
GIF Simple animations. Limited colours (256). Mostly replaced by
WebP.
SVG Vector graphics. Scales to any size without quality loss. Great for
logos and icons.
WebP Google's modern format. Better compression than JPG and
PNG. Use when possible.
AVIF Very new. Excellent compression. Not supported by all browsers
yet.

8.5 Responsive Images

On modern websites, you want different image sizes to load depending on the device. Here is how to
do it in HTML:

© 2025 HTML Complete Master Guide | Page 39 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<img
src="[Link]"
srcset="
[Link] 400w,
[Link] 800w,
[Link] 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Responsive beach photo"
>

8.6 The <picture> Element

The <picture> element gives you even more control over responsive images — you can serve
completely different images based on screen size or format support.

8.7 The <figure> and <figcaption> Elements

Use <figure> to group an image with its caption. This is the semantic HTML5 way to add image
captions.

<figure>
<img src="[Link]" alt="Eiffel Tower at night">
<figcaption>
The Eiffel Tower illuminated at night in Paris, France. Photo taken in 2023.
</figcaption>
</figure>

<figure>
<pre><code>[Link]('Hello');</code></pre>
<figcaption>Figure 1: Hello World in JavaScript</figcaption>
</figure>

© 2025 HTML Complete Master Guide | Page 40 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

8.8 Image Performance Tips

<img src="[Link]" alt="..." loading="lazy">

❓ QUICK QUIZ
Q1. What are the two REQUIRED attributes of an <img> tag?
Q2. Why is the alt attribute important?
Q3. What is the difference between JPG and PNG?
Q4. When would you use an SVG image?
Q5. What does loading="lazy" do?
Q6. What is the purpose of the <figure> element?

Chapter 8 Summary
• <img src="..." alt="..."> embeds images. Both src and alt are required.
• alt text describes images for screen readers, SEO, and when images fail to load.
• Common formats: JPG (photos), PNG (transparency), SVG (vectors), WebP (modern).
• Responsive images: use srcset for multiple sizes, <picture> for art direction.
• <figure> + <figcaption> = semantic image with caption.
• Always add loading="lazy" and specify width/height for performance.

© 2025 HTML Complete Master Guide | Page 41 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 09

HTML Tables
Present data in rows and columns like a spreadsheet

9.1 When to Use HTML Tables

HTML tables are used to display TABULAR DATA — data that belongs in rows and columns. Think of a
spreadsheet, a schedule, a price comparison, or a data report.

⚠️ WARNING
NEVER use tables for page layout! This was common in the 1990s but is now bad practice.
Use CSS Flexbox and Grid for page layouts.
Use tables ONLY for actual tabular data: schedules, prices, statistics, etc.

9.2 Complete Table Tags Reference

Tag / Attribute Purpose

<table> Container for the entire table
<thead> Table Header — groups the header rows
<tbody> Table Body — groups the data rows
<tfoot> Table Footer — groups summary/total rows
<tr> Table Row — one horizontal row
<th> Table Header Cell — bold, centered by default
<td> Table Data Cell — regular data cell
<caption> Table caption/title (placed at top)
colspan Attribute to merge cells horizontally: colspan="2"
rowspan Attribute to merge cells vertically: rowspan="3"

9.3 A Complete Table Example

<table border="1">
<caption>Student Marks Report - June 2025</caption>

<thead>

© 2025 HTML Complete Master Guide | Page 42 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<tr>
<th>Name</th>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
<th>Total</th>
</tr>
</thead>

<tbody>
<tr>
<td>Rakesh</td>
<td>95</td>
<td>88</td>
<td>92</td>
<td>275</td>
</tr>
<tr>
<td>Priya</td>
<td>90</td>
<td>93</td>
<td>87</td>
<td>270</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="4">Class Average</td>
<td>272.5</td>
</tr>
</tfoot>
</table>

9.4 Merging Cells with colspan and rowspan

<table border="1">
<tr>
<th colspan="3">Full Name</th> 
</tr>
<tr>
<td>First</td>
<td>Middle</td>
<td>Last</td>
</tr>
</table>

© 2025 HTML Complete Master Guide | Page 43 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<table border="1">
<tr>
<td rowspan="2">Weekend</td> 
<td>Saturday</td>
</tr>
<tr>
<td>Sunday</td>
</tr>
</table>

📌 IMPORTANT NOTE
colspan="2" merges 2 columns into 1.
rowspan="3" merges 3 rows into 1.
When you use rowspan or colspan, remove the cells that the span covers from other rows.

9.5 Styling Tables with CSS

th, td {
border: 1px solid #ddd;
padding: 12px 16px;
text-align: left;
}

th {
background-color: #1A1A2E;
color: white;
}

/* Zebra striping - alternate row colours */

tr:nth-child(even) {
background-color: #f5f5f5;
}

/* Hover effect */
tr:hover {
background-color: #FFF3E0;

© 2025 HTML Complete Master Guide | Page 44 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

}
</style>

❓ QUICK QUIZ
Q1. What is the difference between <th> and <td>?
Q2. What do <thead>, <tbody>, and <tfoot> do?
Q3. How do you merge two columns together?
Q4. How do you merge two rows together?
Q5. What CSS property removes double borders between table cells?
Q6. Should you use tables for page layout? Why or why not?

Chapter 9 Summary
• Tables are for tabular data ONLY — not for layout.
• Structure: <table> → <thead>/<tbody>/<tfoot> → <tr> → <th>/<td>.
• colspan merges cells horizontally. rowspan merges cells vertically.
• Use border-collapse: collapse; in CSS to remove double borders.
• <caption> adds a title above the table.
• Use nth-child(even) for zebra-striped rows.

© 2025 HTML Complete Master Guide | Page 45 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 10

HTML Forms
Collect user input — the foundation of all web interaction

10.1 What is an HTML Form?

Forms allow users to INPUT data into your website. Every login page, sign-up form, search bar,
shopping checkout, and contact form uses HTML forms. Forms collect data and send it to a server for
processing.

The container for all form elements. The action attribute specifies
<form> where to send the data. The method attribute specifies how (GET or
POST).

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

</form>

10.2 Complete Input Types Reference

Input Type Description

type="text" Single-line text input. For names, usernames, addresses.
type="password" Password field — hides characters as dots.
type="email" Email input — validates email format automatically.
type="number" Number input with up/down arrows. Can set min, max, step.
type="tel" Phone number input. Shows numeric keyboard on mobile.
type="url" URL input — validates URL format.
type="search" Search field — shows clear (x) button.
type="date" Date picker — shows calendar UI.
type="time" Time picker.
type="datetime-local" Date + time picker combined.
type="month" Month and year picker.
type="week" Week picker.
type="range" Slider for a numeric range.

© 2025 HTML Complete Master Guide | Page 46 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

type="color" Colour picker — shows colour palette.

type="file" File upload input.
type="checkbox" Tick box. For selecting multiple options.
type="radio" Radio button. Select ONE from a group.
type="submit" Submit button — sends the form.
type="reset" Reset button — clears all form fields.
type="button" Generic button — use with JavaScript.
type="image" Image that acts as a submit button.
type="hidden" Hidden field — not shown to user, but data is sent.

10.3 Form Attributes Reference

Attribute Purpose
placeholder Grey hint text inside the field: placeholder="Enter your name"
required Makes the field mandatory — form won't submit if empty
name Identifies the field when data is sent to server. REQUIRED for
form submission.
id Used to link <label> to the input via for attribute
value Default pre-filled value of the input
disabled Greys out and disables the input — cannot be edited
readonly Value shown but cannot be changed
min / max Minimum/maximum value for number, date, range inputs
step Step increment for number and range inputs
maxlength Maximum number of characters allowed
minlength Minimum number of characters required
pattern Regular expression for custom validation: pattern="[0-9]{10}"
autocomplete Browser auto-complete: autocomplete="on" or "off"
multiple Allow multiple values (for email and file inputs)
accept Filter file types for file upload: accept="image/*"

10.4 Complete Registration Form — Code Example

<label for="email">Email Address *</label>

© 2025 HTML Complete Master Guide | Page 47 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<input type="email" id="email" name="email"

placeholder="your@[Link]" required autocomplete="email">

<label for="password">Password *</label>

<label for="phone">Phone Number</label>

<label for="dob">Date of Birth</label>

<label for="course">Select Course</label>
<select id="course" name="course" required>
<option value="">-- Choose a course --</option>
<option value="html">HTML & CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
<option value="fullstack">Full Stack</option>
</select>

<fieldset>
<legend>Preferred Learning Mode</legend>
<input type="radio" id="online" name="mode" value="online">
<label for="online">Online</label>

<input type="radio" id="offline" name="mode" value="offline">

<label for="offline">Offline (Hyderabad)</label>

<input type="radio" id="hybrid" name="mode" value="hybrid" checked>

<label for="hybrid">Hybrid</label>
</fieldset>

<label>
<input type="checkbox" name="newsletter" value="yes">
Subscribe to newsletter
</label>

<label>
<input type="checkbox" name="terms" value="agreed" required>
I agree to the Terms and Conditions *
</label>

© 2025 HTML Complete Master Guide | Page 48 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<label for="bio">About Yourself</label>
<textarea id="bio" name="bio" rows="4" cols="50"
placeholder="Tell us about yourself..."></textarea>

<label for="photo">Upload Profile Photo</label>
<input type="file" id="photo" name="photo" accept="image/*">

<button type="submit">Create Account</button>
<button type="reset">Clear Form</button>

</form>

10.5 Label, Fieldset, and Legend

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

<fieldset>
<legend>Personal Details</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</fieldset>

10.6 HTML5 Form Validation

<input type="email" name="email" required>

© 2025 HTML Complete Master Guide | Page 49 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

💡 PRO TIP
HTML5 validation happens automatically — no JavaScript needed for basic validation.
Use the pattern attribute with a regex for custom formats like PIN codes and phone numbers.
Add novalidate to the <form> tag to disable HTML5 validation (if you're using custom JS
validation).

❓ QUICK QUIZ
Q1. What is the difference between method="GET" and method="POST"?
Q2. What does the required attribute do?
Q3. How do you connect a <label> to an <input>?
Q4. What is <fieldset> used for?
Q5. What does the placeholder attribute do?
Q6. What input type would you use for a date picker?
Q7. How do you restrict a text field to exactly 10 digits?

🎯 INTERVIEW QUESTIONS
Explain the difference between GET and POST in forms.
What is the purpose of the name attribute on form inputs?
How does HTML5 form validation work?
What is the difference between disabled and readonly attributes?
How would you create a group of radio buttons where only one can be selected?

Chapter 10 Summary
• <form action method> is the container. action=destination, method=GET or POST.
• All inputs need a name attribute for their data to be sent to the server.
• Use <label for="id"> to link labels to inputs — important for accessibility.
• 22+ input types: text, password, email, number, date, range, color, file, checkbox, radio...
• Validation attributes: required, minlength, maxlength, min, max, pattern.
• <fieldset> and <legend> group related form fields visually.

© 2025 HTML Complete Master Guide | Page 50 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 11

Semantic HTML
Write code that means something — for humans and machines

11.1 What is Semantic HTML?

Semantic HTML means using HTML tags that describe the MEANING of the content, not just how it
looks. Before HTML5, developers used <div> for everything. HTML5 introduced semantic tags that tell
the browser and search engines exactly what the content is.

The semantic code is easier to read, better for SEO, and more accessible for screen readers.

11.2 Complete Semantic Tags Reference

Tag Meaning
<header> Page or section header. Usually contains logo, title, and nav.
<nav> Navigation links — main menus, breadcrumbs, table of contents.
<main> Main content area. Only ONE per page. Screen readers jump
here.
<section> A thematic grouping of content. Like a chapter in a book.
<article> Self-contained content: blog post, news article, product card.
<aside> Sidebar content related to the main content. Ads, tips, related
posts.
<footer> Page or section footer. Copyright, links, contact info.
<figure> Groups an image with its caption.

© 2025 HTML Complete Master Guide | Page 51 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<figcaption> Caption for a <figure>. Must be inside <figure>.

<details> Expandable/collapsible section. Toggle without JavaScript!
<summary> Title for a <details> element (the visible clickable part).
<time> Represents a date or time. Use datetime attribute for machines.
<address> Contact information for the nearest <article> or document author.
<mark> Highlighted text — like search results or important terms.

11.3 A Fully Semantic HTML Page Layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10000 Coders | Learn to Code</title>
</head>
<body>

<header>
<h1>10000 Coders</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>

<main>
<section id="hero">
<h2>Learn Coding from Zero to Hero</h2>
<p>Join over 10,000 students who have launched their tech careers.</p>
</section>

<section id="courses">
<h2>Our Popular Courses</h2>

<article class="course-card">
<h3>HTML & CSS Masterclass</h3>
<p>Build beautiful websites from scratch.</p>
<time datetime="2025-07-01">Starts July 1, 2025</time>
</article>

<article class="course-card">
<h3>JavaScript Full Course</h3>
<p>From basics to advanced JavaScript and ES6+.</p>

© 2025 HTML Complete Master Guide | Page 52 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<time datetime="2025-08-01">Starts August 1, 2025</time>

</article>
</section>

<aside>
<h3>Quick Links</h3>
<ul>
<li><a href="/placement">Placement Support</a></li>
<li><a href="/testimonials">Student Reviews</a></li>
</ul>
</aside>
</main>

<footer>
<address>
10000 Coders | Hyderabad, Telangana, India<br>
<a href="[Link]
</address>
<p><small>© 2025 10000 Coders. All rights reserved.</small></p>
</footer>

</body>
</html>

11.4 Details and Summary — No JavaScript Needed!

The <details> and <summary> tags create a collapsible section without needing any JavaScript:

<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language. It is the standard language
used to create the structure of web pages.</p>
</details>

<details>
<summary>Do I need to know programming to learn HTML?</summary>
<p>No! HTML is a markup language, not a programming language.
It is perfect for complete beginners.</p>
</details>

<details open>
<summary>This section is expanded by default</summary>
<p>Content visible without clicking.</p>
</details>

© 2025 HTML Complete Master Guide | Page 53 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

🧠 DID YOU KNOW?

The <details> and <summary> tags create a native accordion/FAQ without any CSS or
JavaScript!
Many websites use JavaScript libraries just to do what these HTML5 tags do natively.

11.5 Why Semantic HTML Matters

For SEO (Search Engine Optimisation)
• Google and other search engines understand the structure of your page better.
• Content in <article> gets higher priority than content in generic <div> tags.
• Proper heading hierarchy (h1, h2, h3) helps search engines understand importance.

For Accessibility
• Screen readers (software used by visually impaired people) navigate by semantic tags.
• Pressing Tab should cycle through landmarks: header → main → footer.
• <nav> lets screen readers jump directly to navigation.

For Developer Experience

• Semantic HTML is much easier to read and maintain.
• New developers joining a project immediately understand the page structure.

🚀 BEST PRACTICE
Use <header>, <main>, <footer> on every page for proper structure.
Use <article> for self-contained content that could stand alone.
Use <section> for thematic groupings WITHIN a page.
Use <aside> for content related to but separate from the main content.
Use <nav> ONLY for major navigation blocks, not every group of links.

❓ QUICK QUIZ
Q1. What is Semantic HTML and why is it important?
Q2. What is the difference between <section> and <article>?
Q3. What is <aside> used for?
Q4. How many <main> tags can a page have?
Q5. What do <details> and <summary> create without JavaScript?
Q6. Why is Semantic HTML better for SEO?

© 2025 HTML Complete Master Guide | Page 54 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

Chapter 11 Summary
• Semantic HTML uses tags that carry meaning — <header>, <main>, <footer>, <nav>.
• <section> = thematic group. <article> = self-contained content. <aside> = sidebar.
• <details> + <summary> = native collapsible content — no JavaScript needed.
• <time datetime> = machine-readable date/time.
• Semantic HTML improves SEO, accessibility, and code readability.
• Always prefer semantic tags over generic <div> and <span>.

© 2025 HTML Complete Master Guide | Page 55 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 12

Multimedia
Audio, Video, iFrames, and Embedding Content

12.1 HTML5 Audio

HTML5 introduced the <audio> tag, making it possible to embed audio files without any plugins. Before
HTML5, you needed Flash Player.

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

Attribute Effect
controls Shows play/pause, volume, and progress controls
autoplay Starts playing automatically (browsers may block this)
loop Repeats the audio when it ends
muted Starts muted (useful with autoplay)
preload preload="auto" loads file immediately. "metadata" loads only info.

12.2 HTML5 Video

<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video element.
</video>

© 2025 HTML Complete Master Guide | Page 56 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<source src="course-intro.mp4" type="video/mp4">

</video>

💡 PRO TIP
Always provide multiple source formats: mp4 and webm for maximum compatibility.
Use muted with autoplay — browsers block autoplay with sound.
Add playsinline for iOS Safari to play videos inline instead of fullscreen.

12.3 Embedding YouTube Videos

<iframe
width="560"
height="315"
src="[Link]
title="YouTube video: Introduction to HTML"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-
picture"
allowfullscreen>
</iframe>

12.4 The <iframe> Element

An iframe (Inline Frame) embeds another HTML page or external content inside your page. Use it for
YouTube, Google Maps, payment widgets, and more.

© 2025 HTML Complete Master Guide | Page 57 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

⚠️ WARNING
Be careful with iframes — only embed content from trusted sources.
Some websites block embedding with the X-Frame-Options header.
Iframes can slow down your page — use loading="lazy" where possible.

❓ QUICK QUIZ
Q1. What HTML5 tags replaced Flash for audio and video?
Q2. Why should you provide multiple <source> formats for audio/video?
Q3. What does the poster attribute do on a <video>?
Q4. How do you embed a YouTube video in HTML?
Q5. What is an <iframe>?
Q6. Why should you use muted with autoplay?

Chapter 12 Summary
• <audio controls> and <video controls> play media natively in HTML5.
• Provide multiple <source> formats: mp3+ogg for audio, mp4+webm for video.
• Video attributes: controls, autoplay, muted, loop, poster, playsinline.
• Embed YouTube with <iframe src="[Link]/embed/ID">.
• Google Maps embeds also use <iframe>. Get the code from Maps → Share → Embed.

© 2025 HTML Complete Master Guide | Page 58 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 13

HTML5 APIs
Canvas, SVG, Storage, Geolocation, and More

13.1 HTML5 Canvas

The <canvas> element is a blank drawing area. You draw shapes, lines, text, and images on it using
JavaScript. It is used for games, charts, animations, and image editors.

<canvas id="myCanvas" width="400" height="300"
style="border: 2px solid #E8650A;">
Your browser does not support canvas.
</canvas>

// Draw a filled orange rectangle

[Link] = '#E8650A';
[Link](50, 50, 200, 100);

// Draw a blue circle

[Link] = '#1A73E8';
[Link]();
[Link](300, 100, 50, 0, [Link] * 2);
[Link]();

// Draw text
[Link] = 'white';
[Link] = '20px Arial';
[Link]('Hello Canvas!', 60, 105);
</script>

13.2 Inline SVG

SVG (Scalable Vector Graphics) defines graphics in XML format. Unlike canvas, SVG is part of the
DOM and can be styled with CSS and manipulated with JavaScript.

© 2025 HTML Complete Master Guide | Page 59 of 94

HTML Complete Master Guide | Beginner to Advanced | HTML5

<svg width="200" height="200" xmlns="[Link]

<circle cx="100" cy="80" r="60" fill="#E8650A" stroke="#C0500A" stroke-
width="3"/>

<text x="100" y="175" text-anchor="middle" fill="white" font-size="16">
SVG Element
</text>

Feature Canvas vs SVG

Canvas Pixel-based. Faster for complex animations. Not in DOM.
SVG Vector-based. Scales perfectly. In DOM — CSS and JS
accessible.

13.3 Web Storage — localStorage and sessionStorage

Web Storage lets you store data in the user's browser. No server needed. Data is stored as key-value
pairs of strings.

const user = [Link]('username'); // 'Rakesh'

[Link]('Welcome back, ' + user);

[Link]('theme'); // Remove one item

[Link](); // Remove ALL items

// sessionStorage: data is cleared when the tab is closed

[Link]('cart', [Link]([1, 2, 3]));
const cart = [Link]([Link]('cart'));
</script>

Storage Characteristics
localStorage Persists after browser close. Up to ~5MB. Same origin only.

HTML Complete Master Guide | Beginner to Advanced | HTML5

sessionStorage Cleared when tab closes. Up to ~5MB. Same tab only.

Cookies Old method. Sent with every HTTP request. Up to 4KB.

13.4 Geolocation API

The Geolocation API lets you get the user's current location (with their permission). Used in maps,
delivery apps, and location-based features.

<button onclick="getLocation()">Get My Location</button>

function showPosition(position) {
const lat = [Link];
const lon = [Link];
[Link]('location-output').textContent =
'Latitude: ' + lat + ' | Longitude: ' + lon;
}

function showError(error) {
[Link]('location-output').textContent =
'Error: ' + [Link];
}
</script>

📌 IMPORTANT NOTE
The browser always asks the user for PERMISSION before sharing location.
Geolocation only works on HTTPS websites (not plain HTTP) for security.
Users can always deny location access — always handle the error case.

13.5 Drag and Drop API

<div draggable="true" ondragstart="drag(event)" id="drag1">
Drag me!

HTML Complete Master Guide | Beginner to Advanced | HTML5

</div>

❓ QUICK QUIZ
Q1. What is the <canvas> element used for?
Q2. What is the difference between Canvas and SVG?
Q3. What is the difference between localStorage and sessionStorage?
Q4. Does the Geolocation API require user permission?
Q5. Can the Geolocation API work on HTTP (non-secure) sites?
Q6. What attribute makes an element draggable?

Chapter 13 Summary
• <canvas> is a pixel-based drawing area. Draw with JavaScript using getContext('2d').
• SVG = Scalable Vector Graphics. Inline SVG is in the DOM and CSS/JS accessible.
• localStorage: persists across sessions. sessionStorage: clears when tab closes.
• Geolocation API: [Link]() — requires permission + HTTPS.
• Drag and Drop: draggable="true" + ondragstart, ondrop, ondragover events.

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 14

Accessibility (a11y)
Build websites that everyone can use

14.1 What is Web Accessibility?

Web accessibility means building websites that EVERYONE can use — including people with visual,
auditory, motor, or cognitive disabilities. Approximately 1 in 6 people worldwide has some form of
disability.

Short form for 'accessibility' — 'a', then 11 letters, then 'y'. Widely
a11y
used in the web development community.

Disability Type How HTML Helps

Visual Blindness, colour blindness, low vision → use screen readers
Auditory Deafness, hard of hearing → need captions for video/audio
Motor Limited hand movement → use keyboard navigation, not just
mouse
Cognitive Dyslexia, ADHD → need clear language and simple layouts

14.2 ARIA — Accessible Rich Internet Applications

ARIA attributes add extra accessibility information to HTML elements. They are used when semantic
HTML alone is not enough, especially for complex interactive widgets.

<button aria-label="Close menu">✕</button>
<a href="/" aria-label="Go to Home Page">🏠</a>

<div role="navigation" aria-label="Main navigation">...</div>
<div role="alert">Form submitted successfully!</div>

HTML Complete Master Guide | Beginner to Advanced | HTML5

<ul id="menu" hidden>...</ul>

<div aria-live="polite" id="status">Loading...</div>

14.3 Keyboard Navigation

Every function on your website should be usable with a keyboard only — many disabled users cannot
use a mouse.

<div tabindex="0">This div is now focusable by Tab key</div>
<a href="/about" tabindex="1">First in tab order</a>
<button tabindex="-1">Removed from tab order</button>

<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">...</main>

⚠️ WARNING
NEVER use outline: none; on focused elements without providing an alternative!
This makes the site unusable for keyboard and screen reader users.
Focus indicators are a legal accessibility requirement in many countries.

14.4 Alt Text Best Practices

<img src="[Link]" alt="Rakesh Gora, CEO of 10000 Coders, presenting at TEDx
Hyderabad">

<figure>
<img src="[Link]" alt="Bar chart showing student placement rates">
<figcaption>
Student placement rates: 2022 (72%), 2023 (85%), 2024 (91%)

HTML Complete Master Guide | Beginner to Advanced | HTML5

</figcaption>
</figure>

14.5 Accessibility Checklist

• ✅ All images have meaningful alt text

• ✅ Colour contrast ratio is at least 4.5:1 for normal text
• ✅ All form inputs have associated <label> elements
• ✅ The page can be fully navigated using keyboard only (Tab, Enter, Space, Arrow keys)
• ✅ Focus indicators are clearly visible on all interactive elements
• ✅ Videos have captions. Audio content has transcripts.
• ✅ Semantic HTML is used (not just <div> for everything)
• ✅ Page language is set: <html lang="en">
• ✅ Links have descriptive text (not just 'click here')
• ✅ Error messages identify the specific field with the error

🚀 BEST PRACTICE
Test your website with a screen reader — NVDA (Windows) and VoiceOver (Mac/iOS) are free.
Use browser extensions like axe DevTools or Lighthouse to audit accessibility.
Design with colour blind users in mind — don't rely on colour alone to convey information.
WCAG 2.1 is the international accessibility standard. Aim for AA compliance at minimum.

❓ QUICK QUIZ
Q1. What does a11y stand for?
Q2. What are ARIA attributes used for?
Q3. Why should you never remove focus outlines?
Q4. What does aria-label do?
Q5. What is a 'skip navigation' link?
Q6. When should alt="" (empty alt) be used?

Chapter 14 Summary
• Accessibility (a11y) ensures everyone can use your website, including disabled users.
• ARIA attributes (aria-label, role, aria-hidden) add context for screen readers.
• All interactive elements must be keyboard accessible (tabindex, focus styles).
© 2025 HTML Complete Master Guide | Page 65 of 94
HTML Complete Master Guide | Beginner to Advanced | HTML5

• Never remove :focus outline — provide a clear visible focus indicator.

• Always set <html lang="en"> and use semantic HTML for built-in accessibility.
• Test with Lighthouse in Chrome DevTools for a free accessibility audit.

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 15

SEO in HTML
Optimise your pages to rank on Google

15.1 What is SEO?

SEO stands for Search Engine Optimisation — the process of making your web pages appear higher in
Google (and other search engine) results. Good HTML structure is the FOUNDATION of SEO.

Search Engine Optimisation — techniques to improve a website's

SEO position in search engine results pages (SERPs) for relevant
keywords.

15.2 Essential SEO Meta Tags

<head>


<title>Learn HTML in 2025 | Complete Beginner Guide | 10000 Coders</title>

<meta name="description"
content="Learn HTML from scratch with our complete beginner guide.
Covers structure, forms, semantic HTML, and real projects. Free course.">

<link rel="canonical" href="[Link]

HTML Complete Master Guide | Beginner to Advanced | HTML5

15.3 Open Graph — Social Media Meta Tags

Open Graph tags control how your page looks when shared on Facebook, WhatsApp, LinkedIn, and
Telegram.

💡 PRO TIP
Use Facebook's Sharing Debugger to see how your OG tags look when shared.
OG images should be 1200x630 pixels for best results.
Every page should have unique title and description tags.

15.4 HTML Structure for SEO

<h1>Learn HTML for Beginners (ONE per page)</h1>
<h2>Chapter 1: HTML Basics</h2>
<h3>1.1 What is HTML?</h3>
<h3>1.2 HTML Tags</h3>
<h2>Chapter 2: HTML Structure</h2>

HTML Complete Master Guide | Beginner to Advanced | HTML5

<a href="/css-course">Learn CSS after HTML</a> 
<a href="/css-course">Click here</a>

15.5 SEO Checklist for Every HTML Page

• ✅ Unique, keyword-rich <title> tag (50-60 characters)
• ✅ Compelling <meta description> (150-160 characters)
• ✅ One <h1> per page with main keyword
• ✅ Proper heading hierarchy (h1 → h2 → h3)
• ✅ All images have descriptive alt text
• ✅ Semantic HTML (header, main, article, footer)
• ✅ Mobile-friendly (viewport meta tag)
• ✅ Open Graph tags for social sharing
• ✅ Canonical tag to avoid duplicate content
• ✅ Fast loading (lazy images, optimised files)

❓ QUICK QUIZ
Q1. What is SEO?
Q2. What is the most important HTML element for SEO?
Q3. What do Open Graph meta tags do?
Q4. What is a canonical tag?
Q5. Why is alt text important for SEO?
Q6. How long should a meta description be?

HTML Complete Master Guide | Beginner to Advanced | HTML5

Chapter 15 Summary
• SEO = making your page appear higher in Google search results.
• Most important SEO tag: <title> — unique, 50-60 characters, includes keyword.
• <meta name="description"> is shown in search results — write it to attract clicks.
• Open Graph tags control social media previews when sharing links.
• Use semantic HTML, one h1 per page, proper hierarchy, and descriptive alt text.
• Google uses Lighthouse (in Chrome DevTools) to score your page for SEO.

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 16

Performance Optimisation
Make your pages load faster

16.1 Why Performance Matters

Google research shows that 53% of mobile users leave a website if it takes more than 3 seconds to
load. Every 100ms delay in loading time reduces conversions by 1%.

🧠 DID YOU KNOW?

Amazon found that every 100ms of latency costs them 1% in sales.
Google uses page speed as a ranking factor — faster pages rank higher.
You can check your page speed at: [Link]

16.2 Lazy Loading Images and iFrames

<img src="[Link]" alt="Product" loading="lazy" width="400" height="300">

<img src="[Link]" alt="Banner" loading="lazy" width="1200" height="400">

16.3 Preloading Critical Resources

HTML Complete Master Guide | Beginner to Advanced | HTML5

<link rel="prefetch" href="[Link]" as="image">

16.4 Script Loading Best Practices

<head>
<script src="[Link]"></script> 
</head>

<script src="[Link]" async></script>
</head>

Method Behaviour
Normal <script> Blocks page rendering. Avoid in <head>.
defer Loads while parsing HTML. Runs after HTML is done. Keeps
order.
async Loads while parsing HTML. Runs as soon as ready. Order not
guaranteed.

16.5 Image Optimisation Tips

• Compress images before uploading: use TinyPNG, Squoosh, or ImageOptim
• Use WebP format: 25-35% smaller than JPG with same quality
• Use srcset for responsive images: serve small images to mobile
• Always set explicit width and height on images to prevent layout shifts
• Use CSS for decorative shapes instead of images where possible
• Use SVG for logos and icons — scales to any size, tiny file size

HTML Complete Master Guide | Beginner to Advanced | HTML5

16.6 Performance Checklist

• ✅ Images have loading="lazy" (except above-the-fold hero images)
• ✅ Images have explicit width and height
• ✅ Scripts use defer or async in <head>
• ✅ Critical resources are preloaded
• ✅ Images are compressed and in WebP format where possible
• ✅ CSS is minified (remove spaces and comments for production)
• ✅ Lighthouse score is 90+ for Performance

Chapter 16 Summary
• Page speed is critical: 53% of users leave if it takes more than 3 seconds.
• loading="lazy" on images and iframes defers loading until needed.
• Always set width and height on images to prevent Cumulative Layout Shift (CLS).
• Use defer for app scripts, async for independent scripts (analytics).
• Compress and convert images to WebP. Use srcset for responsive images.
• Audit with Lighthouse in Chrome DevTools (press F12 → Lighthouse tab).

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 17

Responsive HTML
Build pages that work on any screen size

17.1 What is Responsive Web Design?

Responsive Web Design (RWD) means creating web pages that look good and work correctly on ALL
devices — desktops, laptops, tablets, and mobile phones — without needing separate versions.

🧠 DID YOU KNOW?

In India, over 75% of internet traffic comes from mobile phones.
Google uses 'mobile-first indexing' — it ranks the mobile version of your site first.
A responsive website needs only ONE codebase for all devices.

17.2 The Viewport Meta Tag — REQUIRED

<meta name="viewport" content="width=device-width, initial-scale=1.0">

⚠️ WARNING
If you forget the viewport meta tag, your page will look zoomed out and tiny on mobile.
This is the single most common mistake beginners make when building their first pages.

17.3 Responsive Images

<style>
img { max-width: 100%; height: auto; }
</style>

<img
src="[Link]"

HTML Complete Master Guide | Beginner to Advanced | HTML5

srcset="
[Link] 320w,
[Link] 640w,
[Link] 800w,
[Link] 1280w"
sizes="
(max-width: 480px) 320px,
(max-width: 768px) 640px,
800px"
alt="Responsive landscape photo"
>

17.4 CSS Media Queries — Breakpoints

/* Tablet: 768px and above */

@media (min-width: 768px) {
.container { max-width: 960px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Desktop: 1024px and above */

@media (min-width: 1024px) {
.grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Large desktop: 1280px and above */

@media (min-width: 1280px) {
.container { max-width: 1200px; }
}
</style>

Breakpoint Device Type

< 576px Extra small / mobile phones
576px - 767px Small / large phones
768px - 1023px Medium / tablets
1024px - 1279px Large / laptops
1280px+ Extra large / desktops

HTML Complete Master Guide | Beginner to Advanced | HTML5

17.5 HTML Responsive Best Practices

• Always include the viewport meta tag
• Use relative units: %, vw, vh, em, rem — avoid fixed px for layouts
• Use max-width instead of width for images and containers
• Test on real mobile devices, not just browser resize
• Use Chrome DevTools mobile emulation (F12 → Toggle Device Toolbar)
• Use CSS Flexbox and Grid for layouts — they are naturally responsive

🚀 BEST PRACTICE
Design MOBILE FIRST: start with mobile styles, then add media queries for larger screens.
Google's mobile-first indexing means mobile experience directly impacts your search ranking.
Use the Chrome DevTools Device Toolbar to test your page on different phone sizes.

Chapter 17 Summary
• Responsive design = pages that adapt to any screen size automatically.
• The viewport meta tag is REQUIRED: <meta name="viewport" content="width=device-width,
initial-scale=1.0">.
• Responsive images: max-width:100%; height:auto; or use srcset attribute.
• Media queries: @media (min-width: 768px) change layout at different sizes.
• Mobile-first: write mobile styles first, then enhance for larger screens.
• Test on real devices and Chrome DevTools Device Toolbar.

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 18

Real-World Projects
Build complete websites from scratch

18.1 Project 1 — Personal Portfolio Website

Your portfolio is the most important website you will build. It showcases your skills, projects, and
contact information to potential employers.

Pages Required
• [Link] — Home page with hero section, skills, and featured projects
• [Link] — Your story, education, experience
• [Link] — Grid of your projects with links
• [Link] — Contact form and social links

Home Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rakesh Gora | Frontend Developer</title>
</head>
<body>

<header>
<nav>
<div class="logo">RG</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

HTML Complete Master Guide | Beginner to Advanced | HTML5

<h1>Hi, I'm Rakesh Gora</h1>

<p>Frontend Developer | HTML, CSS, JavaScript</p>
<a href="#projects" class="btn">View My Work</a>
<a href="[Link]" download class="btn-outline">Download CV</a>
</section>

<section id="skills">
<h2>My Skills</h2>
<ul class="skills-grid">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</section>

<section id="projects">
<h2>Featured Projects</h2>
<article class="project-card">
<img src="[Link]" alt="E-commerce website screenshot">
<h3>E-commerce Website</h3>
<p>A full product listing page with cart functionality.</p>
<a href="[Link] target="_blank"
rel="noopener">GitHub</a>
<a href="[Link] target="_blank" rel="noopener">Live Demo</a>
</article>
</section>

<section id="contact">
<h2>Get In Touch</h2>
<form action="/contact" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</main>

</body>
</html>

HTML Complete Master Guide | Beginner to Advanced | HTML5

18.2 Project 2 — Restaurant Website

Restaurants are one of the most common client projects. Build a 3-page restaurant website.

Key Sections
• Hero section with full-width food image
• Menu section with categories: Starters, Mains, Desserts
• About the restaurant with story and chef photo
• Reservation form
• Location with embedded Google Map
• Contact details with phone link and email link

Menu Section HTML

<details open>
<summary>🍤 Starters</summary>
<table>
<thead>
<tr><th>Item</th><th>Description</th><th>Price</th></tr>
</thead>
<tbody>
<tr>
<td>Samosa Chaat</td>
<td>Crispy samosas with tangy chutneys</td>
<td>₹99</td>
</tr>
<tr>
<td>Paneer Tikka</td>
<td>Grilled cottage cheese with spices</td>
<td>₹199</td>
</tr>
</tbody>
</table>
</details>

<details>
<summary>🍛 Main Course</summary>

</details>
</section>

HTML Complete Master Guide | Beginner to Advanced | HTML5

18.3 Project 3 — Landing Page

Landing pages are used to promote a product, course, or event. They have a single goal: get the user
to take ONE action.

Landing Page Structure

32. Hero Section — Headline + Sub-headline + CTA button (the most important section)
33. Benefits Section — 3-6 key benefits with icons
34. Social Proof — Testimonials or student count
35. Features Section — What is included
36. Pricing Section — Clear pricing table
37. FAQ Section — using <details> and <summary>
38. Final CTA — One more call to action before footer
39. Footer — Links, social media, copyright

18.4 More Project Ideas

Project Pages/Sections
College Website Home, Departments, Faculty, Admissions, Contact
Blog Website Index page with articles, individual blog post page
E-commerce Product Product images, description, price, add to cart
Page
Hotel Website Rooms, Amenities, Gallery, Booking form, Location
Hospital Website Services, Doctors, Appointment form, Emergency contact
Job Board Job listings, job details, application form
News Website Hero news, category sections, featured articles
Resume/CV Page Skills, Experience, Education, Projects, Contact

🚀 BEST PRACTICE
Always build real projects — they are 10x more valuable than exercises.
Host your projects on GitHub Pages (free) to share with employers.
Add your projects to a portfolio website.
Document your projects: add a README with screenshots and description.

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 19

Interview Preparation
100+ Real HTML Interview Questions

19.1 Beginner Level Questions

🎯 INTERVIEW QUESTIONS
What is HTML? What does it stand for?
What is the difference between HTML and HTML5?
What is the purpose of <!DOCTYPE html>?
What is the difference between <head> and <body>?
What is a tag? What is an element? What is an attribute?
What is a void element? Give 5 examples.
What is the difference between <b> and <strong>?
What is the difference between <i> and <em>?
How do you create a comment in HTML?
What is the purpose of the alt attribute in images?
What is the difference between <ol> and <ul>?
How do you open a link in a new tab?
What is the href attribute? What is its purpose?
What is the viewport meta tag? Why is it important?
What is the difference between id and class attributes?

19.2 Intermediate Level Questions

🎯 INTERVIEW QUESTIONS
What is the difference between block-level and inline elements? Give examples.
Explain the HTML5 semantic elements. Why are they important?
What is the difference between <section> and <article>?
What is the difference between GET and POST methods in forms?
What is HTML5 form validation? Give 4 validation attributes.
What is the DOM? How does the browser build it?
What is the difference between localStorage and sessionStorage?

HTML Complete Master Guide | Beginner to Advanced | HTML5

How does the <picture> element work? When would you use it?
What is the purpose of the <figure> and <figcaption> elements?
What is the difference between colspan and rowspan in tables?
What is the srcset attribute on images? Why is it important?
Explain the <details> and <summary> elements.
What is the purpose of the name attribute in form inputs?
What is ARIA? Name 3 ARIA attributes.
What is the difference between absolute and relative URLs?

19.3 Advanced Level Questions

🎯 INTERVIEW QUESTIONS
What is the difference between Canvas and SVG?
Explain the Geolocation API in HTML5.
What are Web Workers and why are they useful?
What is the Drag and Drop API in HTML5?
Explain the difference between preload, prefetch, and dns-prefetch.
What is a critical rendering path?
What is the difference between defer and async on script tags?
What is Cumulative Layout Shift (CLS) and how do you prevent it?
What is structured data in HTML? What format is it in?
What are Open Graph meta tags? List 5 of them.
What is a canonical URL? When would you use it?
Explain WCAG accessibility standards.
What is tabindex? When would you use -1 vs 0?
How do you implement keyboard navigation in HTML?
What is the Content Security Policy (CSP) meta tag?

19.4 Scenario Questions

🎯 INTERVIEW QUESTIONS
You have to build a login form. What security attributes would you add?
How would you make a navigation menu accessible for keyboard users?
A client needs their website to show an image gallery. Which HTML approach would you choose?
Your page has 50 images below the fold. How do you optimise this?
How would you embed a Google Map on a contact page?
How do you create a FAQ section without using JavaScript?

HTML Complete Master Guide | Beginner to Advanced | HTML5

What HTML would you use for a product price that shows old and new price?

19.5 Common MCQs

❓ QUICK QUIZ
Q1. Which element is used to group list items in an ordered list? a)<li> b)<ul> c)<ol> d)<dl>
Q2. Which attribute is used to make a form field required? a)validate b)required c)mandatory
d)must
Q3. What does <br> do? a)Bold text b)Line break c)Border d)Button reset
Q4. Which semantic tag is for the site footer? a)<bottom> b)<foot> c)<footer> d)<end>
Q5. What is the correct DOCTYPE declaration? a)<!doctype> b)<!DOCTYPE HTML5> c)<!
DOCTYPE html> d)<DOCTYPE>
Q6. Which attribute specifies alternate text for an image? a)src b)alt c)title d)name
Q7. Which input type creates a date picker? a)type=calendar b)type=date c)type=datetime
d)type=picker
Q8. What does the target="_blank" do? a)Opens in same tab b)Opens in new tab c)Downloads
file d)Closes tab

Chapter 19 Summary
Review all these questions before your interview. Practice writing the code examples from memory.
The best preparation is building real projects — the confidence you gain from completing real websites
is invaluable in interviews.
• Beginner questions focus on: tags, elements, attributes, basic structure.
• Intermediate questions focus on: semantic HTML, forms, tables, APIs.
• Advanced questions focus on: performance, accessibility, SEO, Canvas, SVG.
• Always explain your reasoning — interviewers want to know HOW you think.

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 20

HTML Cheat Sheet

Quick Reference for Every HTML Tag

20.1 Document Structure

Tag Purpose
<!DOCTYPE html> HTML5 document type declaration
<html> Root element of HTML page
<head> Contains meta information
<body> Contains visible page content
<title> Browser tab title and SEO title
<meta charset> Character encoding
<meta viewport> Responsive design setup
<link> Links CSS files, favicon, preloads
<script> Links JavaScript files
<style> Inline CSS in HTML

20.2 Text & Formatting

Tag Purpose
<h1>–<h6> Headings (h1=largest, h6=smallest)
<p> Paragraph
<br> Line break (self-closing)
<hr> Horizontal rule/divider
<strong> Bold + important (semantic)
<em> Italic + emphasised (semantic)
<b> Bold (visual only)
<i> Italic (visual only)
<mark> Highlighted text
<small> Smaller text (fine print)
<del> Strikethrough (deleted text)
<ins> Underline (inserted text)

HTML Complete Master Guide | Beginner to Advanced | HTML5

<sup> Superscript (raised, e.g. cm²)

<sub> Subscript (lowered, e.g. H₂O)
<blockquote> Long block quotation
<q> Short inline quotation
<code> Inline code
<pre> Preformatted text
<kbd> Keyboard input
<abbr> Abbreviation with title tooltip

20.3 Links and Navigation

Tag/Attribute Purpose
<a href=""> Hyperlink
<a target="_blank"> Open in new tab
<a href="[Link] Email link
<a href="[Link] Phone link
<a href="#id"> Jump to page section
<a download> Download file

20.4 Images

Tag/Attribute Purpose
<img src alt> Embed image (src and alt required)
loading="lazy" Lazy load image
srcset="" Multiple image sizes for responsiveness
<picture> Art direction responsive images
<figure> Group image with caption
<figcaption> Caption for <figure>

20.5 Lists

Tag Purpose
<ul><li> Unordered (bullet) list
<ol><li> Ordered (numbered) list
<ol start="5"> Start list from 5

HTML Complete Master Guide | Beginner to Advanced | HTML5

<ol reversed> Reverse order list

<dl><dt><dd> Description list

20.6 Tables

Tag Purpose
<table> Table container
<thead>/<tbody>/ Semantic table sections
<tfoot>
<tr> Table row
<th> Table header cell (bold, centered)
<td> Table data cell
colspan="n" Merge n columns
rowspan="n" Merge n rows
<caption> Table title

20.7 Forms

Tag/Attribute Purpose
<form action method> Form container
<input type="text"> Text input
<input type="email"> Email input
<input Password input
type="password">
<input Checkbox
type="checkbox">
<input type="radio"> Radio button
<input type="date"> Date picker
<input type="file"> File upload
<input type="range"> Slider
<input type="color"> Colour picker
<input type="submit"> Submit button
<textarea> Multi-line text input
<select><option> Dropdown list
<label for> Label for input
<fieldset><legend> Group form inputs
required Make field mandatory

HTML Complete Master Guide | Beginner to Advanced | HTML5

placeholder Grey hint text

pattern Regex validation

20.8 Semantic HTML5 Elements

Tag Meaning
<header> Page or section header
<nav> Navigation links
<main> Main content (one per page)
<section> Thematic content group
<article> Self-contained content
<aside> Sidebar content
<footer> Page or section footer
<figure> Image with caption
<figcaption> Caption for figure
<details> Collapsible content
<summary> Title of <details>
<time> Date or time
<address> Contact information
<mark> Highlighted text

20.9 Multimedia

Tag Purpose
<audio controls> HTML5 audio player
<video controls> HTML5 video player
<source src type> Media source (inside audio/video)
<iframe src> Embedded webpage or video
<canvas> Drawing area (with JavaScript)
<svg> Inline vector graphics

20.10 Global Attributes

Attribute Purpose
id Unique identifier for element

HTML Complete Master Guide | Beginner to Advanced | HTML5

class CSS/JS class name(s)

style Inline CSS
title Hover tooltip text
lang Language of element content
hidden Hides element (like display:none)
tabindex Tab focus order
draggable Enable drag behaviour
contenteditable Allow inline editing
data-* Custom data attributes
aria-* Accessibility attributes

HTML Complete Master Guide | Beginner to Advanced | HTML5

CHAPTER 25

Capstone Project
Build a complete professional multi-page website

Project: 10000 Coders Training Institute Website

This capstone project puts everything you have learned into one complete, professional, multi-page
website. You will build a fully functional tech training institute website with 6 pages.

Pages to Build
40. [Link] — Home page with hero, courses, testimonials, and CTA
41. [Link] — All courses listed with details and pricing
42. [Link] — About the institute, team, and mission
43. [Link] — Placement statistics and company logos
44. [Link] — Blog/articles listing page
45. [Link] — Contact form, location map, phone, and email

Features to Implement
• Responsive navigation bar with logo and mobile hamburger menu
• Hero section with headline, subheading, and two CTA buttons
• Courses section using <article> cards in a grid layout
• Testimonials with student photos, names, and quotes (<blockquote>)
• Statistics section (students trained, placement rate, companies)
• FAQ using <details> and <summary> — no JavaScript required
• Complete registration/enquiry form with full validation
• Embedded Google Maps on contact page
• Footer with sitemap links, social media links, and copyright
• All images lazy-loaded with proper alt text
• Complete SEO meta tags on every page
• Open Graph tags for social sharing

Technology Requirements
Technology Requirement
HTML5 Semantic structure, all elements from this book
Accessibility ARIA labels, keyboard nav, proper alt text

HTML Complete Master Guide | Beginner to Advanced | HTML5

SEO Title, meta desc, OG tags, structured data

Performance Lazy images, defer scripts, specified dimensions
Responsiveness Viewport tag, responsive images, CSS media queries

Home Page ([Link]) — Complete Starter Code

<!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="10000 Coders — Learn coding, get placed. HTML, CSS, JavaScript,
React, and more. Located in Hyderabad.">
<meta property="og:title" content="10000 Coders | Learn to Code, Get Placed">
<meta property="og:description"
content="Join 10000+ students who launched their tech careers.">
<meta property="og:image" content="[Link]
<link rel="canonical" href="[Link]
<title>10000 Coders | Learn Coding in Hyderabad</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>

<header>
<div class="container">
<a href="/" class="logo" aria-label="10000 Coders - Home">
<img src="images/[Link]" alt="10000 Coders logo" width="160"
height="40">
</a>
<button class="mobile-menu-btn" aria-expanded="false"
aria-controls="main-nav" aria-label="Toggle navigation">
☰
</button>
<nav id="main-nav" aria-label="Main navigation">
<ul>
<li><a href="[Link]" aria-current="page">Home</a></li>
<li><a href="[Link]">Courses</a></li>
<li><a href="[Link]">Placements</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</div>
</header>

HTML Complete Master Guide | Beginner to Advanced | HTML5

<section id="hero" class="hero">
<div class="container">
<h1>Launch Your Tech Career in 6 Months</h1>
<p>Learn HTML, CSS, JavaScript, React and get placed in top companies.
Join 10,000+ students already coding!</p>
<div class="cta-buttons">
<a href="[Link]" class="btn-primary">Explore Courses</a>
<a href="[Link]" class="btn-secondary">Free Counselling</a>
</div>
<div class="hero-stats">
<div>
<strong>10,000+</strong>
<span>Students Trained</span>
</div>
<div>
<strong>500+</strong>
<span>Companies Hiring</span>
</div>
<div>
<strong>92%</strong>
<span>Placement Rate</span>
</div>
</div>
</div>
</section>

<section id="courses">
<div class="container">
<h2>Our Popular Courses</h2>
<div class="courses-grid">

<article class="course-card">
<img src="images/[Link]"
alt="HTML CSS course preview" loading="lazy" width="400"
height="250">
<h3>HTML & CSS Masterclass</h3>
<p>Build beautiful responsive websites from scratch.</p>
<ul>
<li>8 Weeks</li>
<li>Live Classes</li>
<li>Certificate</li>
</ul>
<p class="price">₹4,999 <del>₹8,999</del></p>
<a href="[Link]#html-css" class="btn-card">Learn More</a>

HTML Complete Master Guide | Beginner to Advanced | HTML5

</article>

<article class="course-card">
<img src="images/[Link]"
alt="JavaScript course preview" loading="lazy" width="400"
height="250">
<h3>JavaScript Full Course</h3>
<p>From basics to advanced — ES6, DOM, APIs and more.</p>
<ul>
<li>12 Weeks</li>
<li>Live Classes</li>
<li>Projects</li>
</ul>
<p class="price">₹7,999 <del>₹14,999</del></p>
<a href="[Link]#javascript" class="btn-card">Learn More</a>
</article>

</div>
<div class="center">
<a href="[Link]" class="btn-primary">View All Courses</a>
</div>
</div>
</section>

<section id="faq">
<div class="container">
<h2>Frequently Asked Questions</h2>

<details>
<summary>Do I need prior coding knowledge?</summary>
<p>Absolutely not! Our courses start from the very basics.
All you need is a computer and the willingness to learn.</p>
</details>

<details>
<summary>Do you provide placement assistance?</summary>
<p>Yes! We have a dedicated placement team. 92% of our students
get placed within 3 months of completing their course.</p>
</details>

</div>
</section>

</main>

HTML Complete Master Guide | Beginner to Advanced | HTML5

<address>
<strong>10000 Coders</strong><br>
Hyderabad, Telangana, India<br>
<a href="[Link] 98765 43210</a><br>
<a href="[Link]
</address>
<nav aria-label="Footer navigation">
<ul>
<li><a href="[Link]">Privacy Policy</a></li>
<li><a href="[Link]">Terms of Use</a></li>
</ul>
</nav>
<p><small>© 2025 10000 Coders. All rights reserved.</small></p>
</div>
</footer>

<script src="js/[Link]" defer></script>

</body>
</html>

🚀 BEST PRACTICE
Build ALL 6 pages of this project before calling it complete.
Push your completed project to GitHub and host it on GitHub Pages.
Share the link on LinkedIn with a post about what you learned.
This project alone can land you a junior frontend developer job!

Congratulations!
You have completed the HTML Complete Master Guide. You now know:
• The complete HTML document structure from DOCTYPE to closing html tag
• Every HTML5 element, attribute, and semantic tag
• How to build complete responsive, accessible, SEO-optimised web pages
• Forms, tables, multimedia, Canvas, SVG, and Web Storage APIs
• How to prepare for HTML interview questions at any level

Your HTML journey does not end here. The next steps are:
46. CSS (Cascading Style Sheets) — to style and design your pages
47. JavaScript — to make pages interactive
48. A CSS framework like Tailwind CSS
49. A JavaScript framework like React
50. Git and GitHub — for version control

HTML Complete Master Guide | Beginner to Advanced | HTML5

🚀 You are now HTML-certified. Go build something amazing!

HyperText Markup Language
No ratings yet
HyperText Markup Language
74 pages
Step-by-Step HTML Tutorial Guide
No ratings yet
Step-by-Step HTML Tutorial Guide
3 pages
Learn HTML: A Comprehensive Guide
No ratings yet
Learn HTML: A Comprehensive Guide
74 pages
Front en DRoad Map
No ratings yet
Front en DRoad Map
86 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
12 pages
HTML Basics for Beginners and Pros
No ratings yet
HTML Basics for Beginners and Pros
72 pages
HTML Learning Roadmap
No ratings yet
HTML Learning Roadmap
40 pages
Learn HTML: A Comprehensive Guide
No ratings yet
Learn HTML: A Comprehensive Guide
113 pages
HTML Handbook for Beginners and Pros
No ratings yet
HTML Handbook for Beginners and Pros
87 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
34 pages
Centered Titles with CSS Formatting
No ratings yet
Centered Titles with CSS Formatting
33 pages
HTML Handbook for Beginners and Pros
No ratings yet
HTML Handbook for Beginners and Pros
75 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
17 pages
HTML Handbook
No ratings yet
HTML Handbook
74 pages
HTML Basics Handbook for Beginners
No ratings yet
HTML Basics Handbook for Beginners
72 pages
Understanding HTML Basics and History
No ratings yet
Understanding HTML Basics and History
8 pages
Comprehensive HTML Guide 2024
No ratings yet
Comprehensive HTML Guide 2024
86 pages
HTML Handbook for Beginners and Pros
No ratings yet
HTML Handbook for Beginners and Pros
75 pages
HTML Basics: Structure and History
No ratings yet
HTML Basics: Structure and History
20 pages
Mastering HTML & CSS for Beginners
100% (1)
Mastering HTML & CSS for Beginners
87 pages
HTML CSS JavaScript Bootstrap Overview
No ratings yet
HTML CSS JavaScript Bootstrap Overview
90 pages
Understanding HTML: Basics and Uses
No ratings yet
Understanding HTML: Basics and Uses
5 pages
Web Technologies & HTML Essentials Guide
No ratings yet
Web Technologies & HTML Essentials Guide
8 pages
Computer Awareness Bundle PDF Course Web Technologies & HTML Essentials
No ratings yet
Computer Awareness Bundle PDF Course Web Technologies & HTML Essentials
60 pages
Learn HTML: A Comprehensive Guide
89% (9)
Learn HTML: A Comprehensive Guide
87 pages
Understanding HTML: Basics and History
No ratings yet
Understanding HTML: Basics and History
5 pages
HTML5 Figure Element Guidelines
No ratings yet
HTML5 Figure Element Guidelines
58 pages
Learnwebdevelopmentwithvegibit PDF
100% (1)
Learnwebdevelopmentwithvegibit PDF
2,135 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
79 pages
Summer Frontend Development Training Report
No ratings yet
Summer Frontend Development Training Report
9 pages
Learn HTML: A Comprehensive Guide
No ratings yet
Learn HTML: A Comprehensive Guide
87 pages
Lesson 2 Intro. To HTML 5
No ratings yet
Lesson 2 Intro. To HTML 5
36 pages
HTML and CSS Basics Overview
No ratings yet
HTML and CSS Basics Overview
31 pages
History and Basics of HTML
No ratings yet
History and Basics of HTML
42 pages
Web Architecture and HTML Basics
No ratings yet
Web Architecture and HTML Basics
13 pages
Comprehensive Guide to HTML Basics
No ratings yet
Comprehensive Guide to HTML Basics
6 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
12 pages
Evolution of HTML: A Historical Overview
No ratings yet
Evolution of HTML: A Historical Overview
42 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
92 pages
HTML Editor Experiment Assignment
No ratings yet
HTML Editor Experiment Assignment
52 pages
HTML Fundamentals and History Overview
No ratings yet
HTML Fundamentals and History Overview
54 pages
Web Essentials: HTML & CSS Overview
No ratings yet
Web Essentials: HTML & CSS Overview
23 pages
Web Design and Development Basics
No ratings yet
Web Design and Development Basics
147 pages
Comprehensive Guide to HTML Basics
No ratings yet
Comprehensive Guide to HTML Basics
37 pages
Web Development Web Development For Beginners in HTML by Vickler, Andy (Vickler, Andy)
No ratings yet
Web Development Web Development For Beginners in HTML by Vickler, Andy (Vickler, Andy)
240 pages
Frontend Web Development Lab Manual
No ratings yet
Frontend Web Development Lab Manual
111 pages
Introduction to Internet and HTML Basics
No ratings yet
Introduction to Internet and HTML Basics
20 pages
HTML5 Course
No ratings yet
HTML5 Course
31 pages
HTML Basics: Structure and Importance
No ratings yet
HTML Basics: Structure and Importance
11 pages
Basics of HTML for Web Design
100% (1)
Basics of HTML for Web Design
127 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
27 pages
HTML and DHTML
No ratings yet
HTML and DHTML
13 pages
HTML Basics and Features Explained
No ratings yet
HTML Basics and Features Explained
13 pages
What Is HTML WPS Office
No ratings yet
What Is HTML WPS Office
4 pages
Introduction to HTML5 Basics
No ratings yet
Introduction to HTML5 Basics
28 pages
Wt-Unit-2 Part-1
No ratings yet
Wt-Unit-2 Part-1
107 pages
Introduction to HTML, CSS, and JS
No ratings yet
Introduction to HTML, CSS, and JS
14 pages
HTML Basics: Learn from Scratch
No ratings yet
HTML Basics: Learn from Scratch
5 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
61 pages