1. What is HTML?
HTML describes the structure of a webpage using elements/tags.
A simple webpage:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
How HTML works
HTML
│
├── Document
│ ├── Head
│ │ ├── Title
│ │ ├── Meta information
│ │ └── CSS links
│ │
│ └── Body
│ ├── Headings
│ ├── Paragraphs
│ ├── Images
│ ├── Links
│ ├── Tables
│ └── Forms
2. Basic HTML Structure
Every normal HTML document should start with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Explanation
<!DOCTYPE html>
Tells the browser that the document uses modern HTML.
<!DOCTYPE html>
<html>
The root element of the webpage.
<html>
</html>
<head>
Contains information about the document.
<head>
<title>My Website</title>
</head>
<body>
Contains the visible webpage content.
<body>
<h1>Hello</h1>
</body>
<title>
Sets the browser tab title.
<title>My Website</title>
3. HTML Elements
Most HTML elements have:
<opening-tag>
Content
</closing-tag>
Example:
<p>Hello World</p>
Here:
<p> → opening tag
Hello → content
</p> → closing tag
The entire thing is an element.
4. HTML Attributes
Attributes provide additional information about an element.
Syntax:
<tag attribute="value">
Example:
<p class="intro">Hello World</p>
Another example:
<a href="https://example.com">Visit Website</a>
Here:
href = attribute
https://example.com = value
5. HTML Comments
Comments are ignored by the browser.
<!-- This is a comment -->
Example:
<!-- Main heading -->
<h1>My Website</h1>
Comments are useful for explaining your code.
6. Headings
HTML provides six heading levels.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Example
<h1>My Website</h1>
<h2>About Me</h2>
<h3>My Skills</h3>
<h4>HTML</h4>
<h5>CSS</h5>
<h6>JavaScript</h6>
Important
Use <h1> for the main page heading and organize lower-level headings logically.
Don’t choose headings only because they look bigger. CSS should control visual appearance.
7. Paragraph
The <p> element creates a paragraph.
<p>This is a paragraph.</p>
Example:
<p>
HTML is used to create the structure of websites.
</p>
8. Line Break
The <br> element creates a line break.
<p>Hello<br>World</p>
Output:
Hello
World
<br> is a void element, so it does not need:
</br>
9. Horizontal Rule
<hr> creates a thematic horizontal line.
<hr>
Example:
<h2>About Me</h2>
<p>I am a web developer.</p>
<hr>
<h2>My Skills</h2>
10. Bold Text
<strong>
Use <strong> when the content has strong importance.
<strong>Important information</strong>
<b>
<b> visually draws attention without implying importance.
<b>Bold text</b>
Prefer semantic elements such as <strong> when appropriate.
11. Italic Text
<em>
Used for emphasis.
<em>This text is emphasized.</em>
<i>
Used for text in an alternate voice or style where emphasis isn’t the meaning.
<i>This is italic text.</i>
12. Underline
<u>Underlined text</u>
Example:
<p>This is <u>underlined</u> text.</p>
Don’t use <u> just for decoration when CSS is more appropriate.
13. Other Text Formatting Tags
<mark>
Highlights text.
<mark>Important text</mark>
<small>
Displays side comments or small print.
<small>Terms and conditions apply.</small>
<del>
Represents deleted content.
<del>$100</del>
<ins>
Represents inserted content.
<ins>$80</ins>
<sub>
Subscript.
H<sub>2</sub>O
<sup>
Superscript.
x<sup>2</sup>
Complete example
<p>
<strong>Important:</strong>
Water is H<sub>2</sub>O.
</p>
<p>
Old price:
<del>$100</del>
</p>
<p>
New price:
<ins>$80</ins>
</p>
<p>
E = mc<sup>2</sup>
</p>
<p>
<mark>HTML is important.</mark>
</p>
14. Links
The <a> element creates hyperlinks.
<a href="https://example.com">Visit Example</a>
Open in a new tab
<a href="https://example.com" target="_blank">
Visit Example
</a>
For external links opened in a new tab, you can also use:
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
>
Visit Example
</a>
15. Email Links
<a href="mailto:example@example.com">
Email Me
</a>
16. Telephone Links
<a href="tel:+1234567890">
Call Me
</a>
17. Download Links
<a href="files/notes.pdf" download>
Download Notes
</a>
18. Images
The <img> element displays an image.
<img src="image.jpg" alt="A beautiful landscape">
Important attributes:
src → image location
alt → alternative text
width → width
height → height
Example:
<img
src="cat.jpg"
alt="A white cat sitting on a chair"
width="400"
>
Why alt matters
Alternative text helps users who:
use screen readers
have images disabled
experience image loading problems
19. Figure and Figcaption
Use <figure> for self-contained visual content.
<figure>
<img
src="mountain.jpg"
alt="Snow covered mountain"
>
<figcaption>
A beautiful mountain.
</figcaption>
</figure>
20. Lists
HTML has three main types of lists:
Unordered list
Ordered list
Description list
Unordered List
Uses <ul> and <li>.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List
Uses <ol> and <li>.
<ol>
<li>Open your editor.</li>
<li>Create an HTML file.</li>
<li>Write your code.</li>
<li>Open it in a browser.</li>
</ol>
Ordered List with Different Start
<ol start="5">
<li>Five</li>
<li>Six</li>
<li>Seven</li>
</ol>
Description List
Uses:
<dl> → description list
<dt> → term
<dd> → description
Example:
<dl>
<dt>HTML</dt>
<dd>Structures web pages.</dd>
<dt>CSS</dt>
<dd>Styles web pages.</dd>
<dt>JavaScript</dt>
<dd>Adds behavior to web pages.</dd>
</dl>
21. Nested Lists
Lists can contain other lists.
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>
22. div
<div> is a generic block-level container.
<div>
<h2>About Me</h2>
<p>I am learning HTML.</p>
</div>
It is commonly used with CSS and JavaScript.
23. span
<span> is a generic inline container.
<p>
My favorite color is
<span>blue</span>.
</p>
Example with CSS:
<style>
.red {
color: red;
}
</style>
<p>
This is
<span class="red">red text</span>.
</p>
24. HTML Tables
A table uses:
<table>
<tr> → table row
<th> → table header
<td> → table data
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>20</td>
</tr>
<tr>
<td>Ahmed</td>
<td>22</td>
</tr>
</table>
25. Better Table Structure
Use:
<table>
<caption>Student Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>20</td>
<td>HTML</td>
</tr>
<tr>
<td>Ahmed</td>
<td>22</td>
<td>CSS</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">2 Students</td>
</tr>
</tfoot>
</table>
26. colspan
Allows a cell to span multiple columns.
<table border="1">
<tr>
<th colspan="2">Student</th>
</tr>
<tr>
<td>Ali</td>
<td>20</td>
</tr>
</table>
27. rowspan
Allows a cell to span multiple rows.
<table border="1">
<tr>
<th rowspan="2">Name</th>
<td>Ali</td>
</tr>
<tr>
<td>Ahmed</td>
</tr>
</table>
28. Forms
Forms collect user information.
Basic example:
<form>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
>
<button type="submit">
Submit
</button>
</form>
29. <label>
A label describes an input.
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
>
The for value should match the input’s id.
30. Text Input
<input
type="text"
name="username"
placeholder="Enter your username"
>
31. Password Input
<input
type="password"
name="password"
placeholder="Enter password"
>
32. Email Input
<input
type="email"
name="email"
placeholder="you@example.com"
>
33. Number Input
<input
type="number"
name="age"
min="1"
max="100"
>
34. Date Input
<input
type="date"
name="birthday"
>
35. Time Input
<input
type="time"
name="appointment"
>
36. Color Input
<input
type="color"
name="favoriteColor"
>
37. Range Input
<input
type="range"
min="0"
max="100"
value="50"
>
38. Checkbox
Checkboxes allow multiple selections.
<label>
<input type="checkbox" name="skills" value="html">
HTML
</label>
<label>
<input type="checkbox" name="skills" value="css">
CSS
</label>
<label>
<input type="checkbox" name="skills" value="js">
JavaScript
</label>
39. Radio Buttons
Radio buttons are commonly used when the user should select one option.
<p>Gender:</p>
<label>
<input
type="radio"
name="gender"
value="male"
>
Male
</label>
<label>
<input
type="radio"
name="gender"
value="female"
>
Female
</label>
The same name groups the radio buttons.
40. Select Dropdown
<label for="country">
Country:
</label>
<select id="country" name="country">
<option value="pakistan">
Pakistan
</option>
<option value="india">
India
</option>
<option value="usa">
USA
</option>
</select>
41. Textarea
Used for multiple lines of text.
<label for="message">
Message:
</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
></textarea>
42. Button
<button type="button">
Click Me
</button>
Submit button:
<button type="submit">
Submit
</button>
Reset button:
<button type="reset">
Reset
</button>
43. Complete Form
<form action="/submit" method="post">
<div>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
required
>
</div>
<br>
<div>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
required
>
</div>
<br>
<div>
<label for="password">Password:</label>
<input
type="password"
id="password"
name="password"
required
>
</div>
<br>
<div>
<label for="country">Country:</label>
<select
id="country"
name="country"
>
<option value="pk">Pakistan</option>
<option value="in">India</option>
<option value="us">USA</option>
</select>
</div>
<br>
<div>
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
></textarea>
</div>
<br>
<button type="submit">
Register
</button>
</form>
44. Important Form Attributes
required
Makes a field required.
<input type="text" required>
placeholder
Shows temporary guidance.
<input
type="text"
placeholder="Enter your name"
>
value
Sets an initial value.
<input
type="text"
value="Ali"
>
disabled
Disables an input.
<input
type="text"
disabled
>
readonly
Prevents editing while keeping the value available.
<input
type="text"
value="User123"
readonly
>
min and max
<input
type="number"
min="1"
max="100"
>
minlength and maxlength
<input
type="text"
minlength="3"
maxlength="20"
>
45. fieldset and legend
Useful for grouping related form controls.
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
>
<br><br>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
>
</fieldset>
</form>
46. Semantic HTML
Semantic HTML gives elements meaningful names.
Instead of:
<div class="header">
use:
<header>
Instead of:
<div class="navigation">
use:
<nav>
Semantic HTML improves:
accessibility
document structure
maintainability
search-engine understanding
47. <header>
Represents introductory content.
<header>
<h1>My Website</h1>
<p>Welcome to my website.</p>
</header>
48. <nav>
Represents navigation links.
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
49. <main>
Contains the main content of the page.
<main>
<h1>Welcome</h1>
<p>
This is the main content.
</p>
</main>
A document normally has one main content region.
50. <section>
Represents a thematic section.
<section>
<h2>About Us</h2>
<p>
We build websites.
</p>
</section>
51. <article>
Represents independent content.
<article>
<h2>How to Learn HTML</h2>
<p>
Start with HTML structure,
then learn CSS and JavaScript.
</p>
</article>
Good examples include:
blog posts
news articles
forum posts
product cards
52. <aside>
Represents related or secondary content.
<aside>
<h2>Related Articles</h2>
<ul>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
</aside>
53. <footer>
Represents footer content.
<footer>
<p>
© 2026 My Website
</p>
</footer>
54. Complete Semantic Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Semantic Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Latest Articles</h2>
<article>
<h3>Learning HTML</h3>
<p>
HTML is the foundation
of the web.
</p>
</article>
<article>
<h3>Learning CSS</h3>
<p>
CSS is used to style
web pages.
</p>
</article>
</section>
<aside>
<h2>Advertisement</h2>
<p>
Related content goes here.
</p>
</aside>
</main>
<footer>
<p>
© 2026 My Website
</p>
</footer>
</body>
</html>
55. Audio
The <audio> element embeds audio.
<audio controls>
<source
src="music.mp3"
type="audio/mpeg"
>
Your browser does not support audio.
</audio>
56. Video
<video
controls
width="600"
>
<source
src="video.mp4"
type="video/mp4"
>
Your browser does not support video.
</video>
Useful attributes:
controls
autoplay
muted
loop
poster
width
height
Example:
<video
controls
muted
loop
poster="thumbnail.jpg"
width="600"
>
<source
src="video.mp4"
type="video/mp4"
>
</video>
57. YouTube / External Video
You can embed external content with <iframe>.
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
allowfullscreen
></iframe>
58. <iframe>
An iframe embeds another webpage or document.
<iframe
src="https://example.com"
width="600"
height="400"
title="Example website"
></iframe>
Be careful with third-party content and security.
59. <details> and <summary>
Creates a built-in expandable section.
<details>
<summary>
What is HTML?
</summary>
<p>
HTML is HyperText Markup Language.
</p>
</details>
Very useful for FAQs.
60. <dialog>
Represents a dialog box.
<dialog open>
<h2>Hello!</h2>
<p>
This is a dialog.
</p>
<button>
Close
</button>
</dialog>
In real applications, JavaScript is commonly used to open and close dialogs.
61. <progress>
Shows progress.
<label for="progress">
Download progress:
</label>
<progress
id="progress"
value="70"
max="100"
>
70%
</progress>
62. <meter>
Represents a measurement within a known range.
<label for="storage">
Storage:
</label>
<meter
id="storage"
min="0"
max="100"
value="75"
>
75%
</meter>
63. <time>
Represents a date or time.
<time datetime="2026-09-21">
September 21, 2026
</time>
Another example:
<time datetime="2026-09-21T10:30">
10:30 AM
</time>
64. <abbr>
Represents an abbreviation.
<abbr title="HyperText Markup Language">
HTML
</abbr>
65. <address>
Represents contact information.
<address>
Written by Ali.<br>
Email:
<a href="mailto:ali@example.com">
ali@example.com
</a>
</address>
66. <blockquote>
For longer quotations.
<blockquote cite="https://example.com">
Learning never stops.
</blockquote>
67. <q>
For short inline quotations.
<p>
He said,
<q>Practice makes progress.</q>
</p>
68. <cite>
Used for the title of a creative work or source.
<p>
I am reading
<cite>Clean Code</cite>.
</p>
69. <code>
Represents computer code.
<p>
Use <code>console.log()</code>
to print something in JavaScript.
</p>
70. <pre>
Preserves whitespace and line breaks.
<pre>
Hello
World
HTML
</pre>
Often combined with <code>:
<pre><code>
const name = "Ali";
console.log(name);
</code></pre>
71. <kbd>
Represents keyboard input.
<p>
Press <kbd>Ctrl</kbd> +
<kbd>S</kbd> to save.
</p>
72. <samp>
Represents sample output from a program.
<p>
Program output:
<samp>Hello World</samp>
</p>
73. <var>
Represents a variable.
<p>
The value of
<var>x</var>
is 10.
</p>
74. HTML Entities
Some characters have special meanings in HTML.
For example:
<
>
&
"
'
Meaning:
< <
> >
& &
" "
' '
space
Example:
<p>
5 < 10
</p>
75. Common Symbols
©
®
™
€
£
¥
$
Example:
<p>
© 2026 My Company
</p>
76. Character Encoding
Use UTF-8.
<meta charset="UTF-8">
This allows the page to correctly represent a large range of characters.
Example:
<p>Hello — مرحبا — नमस्ते — 你好</p>
77. Responsive Viewport
Important for mobile devices:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
Without the correct viewport configuration, responsive pages can behave poorly on mobile devices.
78. Meta Description
A description can be provided for search engines and link previews.
<meta
name="description"
content="Learn HTML from beginner to advanced level."
>
79. Favicon
You can add a favicon using:
<link
rel="icon"
href="favicon.ico"
>
For PNG:
<link
rel="icon"
type="image/png"
href="favicon.png"
>
80. External CSS
Connect CSS using <link>.
<link
rel="stylesheet"
href="style.css"
>
Usually placed inside <head>.
81. Internal CSS
You can write CSS inside <style>.
<style>
body {
background: lightblue;
}
h1 {
color: darkblue;
}
</style>
82. Inline CSS
CSS can be added directly to an element.
<p style="color: red;">
Red text
</p>
For larger projects, external CSS is generally easier to maintain.
83. JavaScript
JavaScript can be added with <script>.
<script>
alert("Hello World!");
</script>
External JavaScript:
<script src="script.js"></script>
A common approach is:
<script src="script.js" defer></script>
84. data-* Attributes
Custom data attributes begin with data-.
<button
data-user-id="123"
data-role="admin"
>
User
</button>
JavaScript can access these values.
const button = document.querySelector("button");
console.log(button.dataset.userId);
console.log(button.dataset.role);
85. Global HTML Attributes
Many HTML elements can use global attributes.
Common ones include:
id
class
title
style
hidden
lang
dir
data-*
tabindex
contenteditable
spellcheck
86. id
Identifies one specific element.
<h1 id="main-title">
My Website
</h1>
An ID should normally be unique within the document.
87. class
Groups elements.
<p class="text">First paragraph.</p>
<p class="text">Second paragraph.</p>
One element can have multiple classes:
<div class="card featured">
Product
</div>
88. title
Provides additional advisory information.
<button title="Save your document">
Save
</button>
89. hidden
Hides an element.
<p hidden>
This content is hidden.
</p>
90. contenteditable
Makes content editable by the user.
<p contenteditable="true">
You can edit this text.
</p>
91. spellcheck
Controls spell checking.
<textarea spellcheck="true"></textarea>
92. dir
Controls text direction.
<p dir="ltr">
Left to right text.
</p>
Right-to-left:
<p dir="rtl">
هذا نص عربي
</p>
93. lang
Specifies the language.
<html lang="en">
For Urdu:
<html lang="ur">
For Arabic:
<html lang="ar">
94. <template>
Defines HTML that is not rendered immediately.
<template id="card-template">
<article class="card">
<h2>Product</h2>
<p>Product description.</p>
</article>
</template>
JavaScript can later clone the template.
95. <picture>
Provides different images for different conditions.
<picture>
<source
media="(min-width: 800px)"
srcset="large.jpg"
>
<source
media="(min-width: 400px)"
srcset="medium.jpg"
>
<img
src="small.jpg"
alt="Landscape"
>
</picture>
96. Responsive Images with srcset
<img
src="small.jpg"
srcset="
small.jpg 400w,
medium.jpg 800w,
large.jpg 1200w
"
sizes="
(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px
"
alt="Landscape"
>
This allows the browser to choose an appropriate image resource.
97. Lazy Loading Images
<img
src="photo.jpg"
alt="A photo"
loading="lazy"
>
Useful for images that are initially outside the viewport.
98. HTML Accessibility
Accessible HTML helps more people use your website.
Use semantic HTML
Prefer:
<button>Submit</button>
instead of:
<div onclick="submitForm()">
Submit
</div>
Use labels
<label for="email">
Email
</label>
<input
id="email"
type="email"
>
Use alt text
<img
src="logo.png"
alt="Company logo"
>
Use buttons for actions
<button type="button">
Open Menu
</button>
Use links for navigation:
<a href="/about">
About
</a>
99. ARIA Basics
ARIA can provide additional accessibility information when native HTML semantics are insufficient.
Example:
<button
aria-label="Close menu"
>
X
</button>
Another example:
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
Prefer native HTML semantics first.
100. HTML Form Validation
HTML provides built-in validation.
<form>
<input
type="email"
required
>
<input
type="password"
minlength="8"
required
>
<button type="submit">
Register
</button>
</form>
101. Pattern Validation
You can use pattern for certain text formats.
<input
type="text"
pattern="[A-Za-z]{3,20}"
title="Use 3 to 20 letters."
required
>
The browser can validate the input before submitting.
102. Autocomplete
<input
type="email"
name="email"
autocomplete="email"
>
Other useful values include:
name
given-name
family-name
email
tel
street-address
postal-code
country
username
new-password
current-password
103. Form action and method
<form
action="/submit"
method="post"
>
GET
<form
action="/search"
method="get"
>
Often used for requests where the parameters can appear in the URL.
POST
<form
action="/register"
method="post"
>
Commonly used for submitting form data that should not be placed in the URL.
104. <datalist>
Provides suggestions for an input.
<label for="browser">
Browser:
</label>
<input
list="browsers"
id="browser"
name="browser"
>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
105. <output>
Represents the result of a calculation or user action.
<form
oninput="result.value = Number(a.value) + Number(b.value)"
>
<input
id="a"
name="a"
type="number"
value="10"
>
+
<input
id="b"
name="b"
type="number"
value="20"
>
=
<output name="result">
30
</output>
</form>
106. <canvas>
Canvas provides a drawing surface controlled by JavaScript.
<canvas
id="myCanvas"
width="400"
height="200"
>
Your browser does not support canvas.
</canvas>
<script>
const canvas =
document.getElementById("myCanvas");
const ctx =
canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
</script>
107. SVG
SVG is used for scalable vector graphics.
Simple SVG:
<svg
width="200"
height="200"
viewBox="0 0 200 200"
>
<circle
cx="100"
cy="100"
r="50"
fill="blue"
/>
</svg>
108. HTML Links to Page Sections
Give an element an ID:
<h2 id="contact">
Contact
</h2>
Then link to it:
<a href="#contact">
Go to Contact
</a>
109. Navigation Menu
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<section id="home">
<h2>Home</h2>
</section>
<section id="about">
<h2>About</h2>
</section>
<section id="services">
<h2>Services</h2>
</section>
<section id="contact">
<h2>Contact</h2>
</section>
110. Complete Beginner HTML Project
Here is a complete beginner-friendly webpage.
<!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="My first HTML website"
>
<title>My First Website</title>
</head>
<body>
<header>
<h1>My First Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>
Hello! I am learning HTML.
</p>
<img
src="profile.jpg"
alt="Profile photo"
width="200"
>
</section>
<section id="about">
<h2>About Me</h2>
<p>
I am learning web development
and building my first website.
</p>
</section>
<section id="skills">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form>
<label for="name">
Name:
</label>
<input
id="name"
type="text"
name="name"
required
>
<br><br>
<label for="email">
Email:
</label>
<input
id="email"
type="email"
name="email"
required
>
<br><br>
<label for="message">
Message:
</label>
<br>
<textarea
id="message"
name="message"
rows="5"
cols="30"
></textarea>
<br><br>
<button type="submit">
Send Message
</button>
</form>
</section>
</main>
<footer>
<p>
© 2026 My Website
</p>
</footer>
</body>
</html>
111. Intermediate HTML Project
<!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="A personal portfolio website"
>
<title>My Portfolio</title>
<link
rel="stylesheet"
href="style.css"
>
</head>
<body>
<header>
<h1>Ali's Portfolio</h1>
<nav aria-label="Main navigation">
<a href="#about">
About
</a>
<a href="#projects">
Projects
</a>
<a href="#skills">
Skills
</a>
<a href="#contact">
Contact
</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>
I am a beginner web developer
learning HTML, CSS and JavaScript.
</p>
</section>
<section id="projects">
<h2>Projects</h2>
<article>
<h3>Personal Website</h3>
<p>
A personal portfolio website
created using HTML and CSS.
</p>
<a href="/projects/portfolio">
View Project
</a>
</article>
<article>
<h3>Todo App</h3>
<p>
A simple todo application.
</p>
<a href="/projects/todo">
View Project
</a>
</article>
</section>
<section id="skills">
<h2>Skills</h2>
<table>
<caption>
My Skills
</caption>
<thead>
<tr>
<th>Technology</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>Advanced</td>
</tr>
<tr>
<td>CSS</td>
<td>Intermediate</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Beginner</td>
</tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<fieldset>
<legend>
Contact Information
</legend>
<div>
<label for="name">
Name
</label>
<input
id="name"
name="name"
type="text"
autocomplete="name"
required
>
</div>
<br>
<div>
<label for="email">
Email
</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
>
</div>
<br>
<div>
<label for="message">
Message
</label>
<textarea
id="message"
name="message"
rows="6"
required
></textarea>
</div>
<br>
<button type="submit">
Send
</button>
</fieldset>
</form>
</section>
</main>
<footer>
<p>
© 2026 Ali's Portfolio
</p>
</footer>
</body>
</html>
112. Advanced HTML Page Structure
A more complete document can look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Mobile responsiveness -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<!-- Search description -->
<meta
name="description"
content="Advanced HTML example"
>
<!-- Page title -->
<title>Advanced HTML</title>
<!-- CSS -->
<link
rel="stylesheet"
href="style.css"
>
<!-- JavaScript -->
<script
src="script.js"
defer
></script>
</head>
<body>
<header>
<h1>Website Name</h1>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/about">
About
</a>
<a href="/services">
Services
</a>
<a href="/contact">
Contact
</a>
</nav>
</header>
<main>
<section>
<h2>Featured Content</h2>
<article>
<header>
<h3>Article Title</h3>
<p>
Published:
<time datetime="2026-09-21">
September 21, 2026
</time>
</p>
</header>
<figure>
<img
src="article.jpg"
alt="Description of article image"
loading="lazy"
>
<figcaption>
Article image caption.
</figcaption>
</figure>
<p>
Article content goes here.
</p>
<footer>
<p>
Written by Ali.
</p>
</footer>
</article>
</section>
<aside>
<h2>Related Content</h2>
<ul>
<li>
<a href="/article-1">
Article 1
</a>
</li>
<li>
<a href="/article-2">
Article 2
</a>
</li>
</ul>
</aside>
</main>
<footer>
<p>
© 2026 Website Name
</p>
</footer>
</body>
</html>
113. Important HTML Tags Cheat Sheet
| Tag | Purpose |
|---|---|
html | Root of HTML document |
head | Document metadata |
body | Visible content |
title | Browser tab title |
meta | Metadata |
link | External resources |
style | Internal CSS |
script | JavaScript |
h1–h6 | Headings |
p | Paragraph |
br | Line break |
hr | Thematic break |
a | Hyperlink |
img | Image |
figure | Self-contained figure |
figcaption | Figure caption |
ul | Unordered list |
ol | Ordered list |
li | List item |
dl | Description list |
dt | Description term |
dd | Description |
div | Generic block container |
span | Generic inline container |
table | Table |
caption | Table caption |
thead | Table header group |
tbody | Table body |
tfoot | Table footer group |
tr | Table row |
th | Table header cell |
td | Table data cell |
form | Form |
label | Form label |
input | Form input |
textarea | Multiline input |
select | Dropdown |
option | Dropdown option |
button | Button |
fieldset | Form grouping |
legend | Fieldset caption |
datalist | Input suggestions |
output | Calculation/output |
header | Header content |
nav | Navigation |
main | Main content |
section | Thematic section |
article | Independent content |
aside | Related content |
footer | Footer content |
audio | Audio |
video | Video |
source | Media source |
track | Media text tracks |
iframe | Embedded page/content |
details | Expandable section |
summary | Details heading |
dialog | Dialog |
progress | Progress indicator |
meter | Measurement |
time | Date/time |
code | Code |
pre | Preformatted text |
kbd | Keyboard input |
abbr | Abbreviation |
address | Contact information |
blockquote | Long quotation |
q | Short quotation |
cite | Work/source title |
mark | Highlight |
strong | Strong importance |
em | Emphasis |
small | Small print |
del | Deleted content |
ins | Inserted content |
sub | Subscript |
sup | Superscript |
picture | Responsive images |
canvas | Scriptable drawing area |
svg | Vector graphics |
template | Inert HTML template |
114. Void Elements
Some HTML elements don’t have closing tags.
Common examples:
<img>
<br>
<hr>
<input>
<meta>
<link>
<source>
<track>
<area>
<base>
<embed>
<wbr>
Example:
<img
src="photo.jpg"
alt="Photo"
>
Do not write:
<img></img>
115. Block vs Inline Elements
HTML elements traditionally behave as block-level or inline elements, although CSS can change their display behavior.
Common block elements
<div>
<p>
<h1>
<h2>
<section>
<article>
<header>
<footer>
<main>
<ul>
<ol>
<table>
<form>
Common inline elements
<a>
<span>
<strong>
<em>
<code>
<small>
<mark>
Example:
<p>
This is a
<strong>very important</strong>
sentence.
</p>
116. HTML File Structure
A common project structure:
my-website/
│
├── index.html
│
├── about.html
│
├── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
└── images/
├── logo.png
└── hero.jpg
117. Relative Paths
If the image is in the same folder:
<img src="photo.jpg" alt="Photo">
If it is inside an images folder:
<img src="images/photo.jpg" alt="Photo">
Go up one folder:
<img src="../photo.jpg" alt="Photo">
118. Absolute URLs
You can use a complete URL:
<img
src="https://example.com/images/photo.jpg"
alt="Photo"
>
For links:
<a href="https://example.com">
Example
</a>
119. Best HTML Practices
1. Use lowercase
Prefer:
<p>Hello</p>
instead of:
<P>Hello</P>
2. Quote attributes
Prefer:
<img src="photo.jpg" alt="Photo">
3. Use meaningful indentation
<section>
<h2>About</h2>
<p>
About information.
</p>
</section>
4. Use semantic elements
Prefer:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
when they match the meaning of the content.
5. Always provide useful image alt text
<img
src="dog.jpg"
alt="Golden retriever playing in a park"
>
6. Associate labels with form controls
<label for="email">
Email
</label>
<input
id="email"
type="email"
>
7. Don’t use HTML for visual styling
Don’t write:
<font color="red">
Hello
</font>
Use CSS instead:
<p class="red">
Hello
</p>
120. HTML vs CSS vs JavaScript
Think of a website like a house:
HTML
↓
Structure
"The walls, rooms and doors"
CSS
↓
Appearance
"The colors, furniture and decoration"
JavaScript
↓
Behavior
"The switches, automatic doors and interactions"
Example:
HTML
<button id="button">
Click Me
</button>
CSS
button {
background: blue;
color: white;
}
JavaScript
const button =
document.getElementById("button");
button.addEventListener(
"click",
function () {
alert("Button clicked!");
}
);
121. HTML Learning Roadmap
Level 1 — Beginner
Learn:
HTML document structure
DOCTYPE
html
head
body
headings
paragraphs
links
images
lists
comments
attributes
Build:
Personal profile page
Simple blog page
Recipe page
Level 2 — Intermediate
Learn:
Tables
Forms
Inputs
Labels
Buttons
Semantic HTML
Audio
Video
Iframes
Meta tags
HTML entities
Accessibility basics
Build:
Registration form
Contact page
Portfolio
Blog layout
Product page
Level 3 — Advanced
Learn:
Responsive images
picture
srcset
Accessibility
ARIA
form validation
data attributes
template
dialog
canvas
SVG
SEO-related metadata
semantic document structure
Build:
Complete portfolio
Blog website
Dashboard structure
E-commerce product page
Documentation website
122. HTML Practice Project
Create a file named:
index.html
Then build this:
<!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="HTML practice project"
>
<title>HTML Practice Project</title>
</head>
<body>
<header>
<h1>My HTML Project</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>
Welcome to my HTML practice project.
</p>
</section>
<section id="about">
<h2>About Me</h2>
<figure>
<img
src="profile.jpg"
alt="My profile picture"
width="200"
>
<figcaption>
My profile picture.
</figcaption>
</figure>
<p>
I am learning web development.
</p>
</section>
<section id="services">
<h2>My Services</h2>
<ul>
<li>Web Design</li>
<li>HTML Development</li>
<li>Frontend Development</li>
</ul>
</section>
<section>
<h2>My Skills</h2>
<table>
<caption>
Skills
</caption>
<thead>
<tr>
<th>Skill</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>Advanced</td>
</tr>
<tr>
<td>CSS</td>
<td>Intermediate</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Beginner</td>
</tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form>
<fieldset>
<legend>
Contact Form
</legend>
<p>
<label for="name">
Name:
</label>
<input
id="name"
name="name"
type="text"
required
>
</p>
<p>
<label for="email">
Email:
</label>
<input
id="email"
name="email"
type="email"
required
>
</p>
<p>
<label for="message">
Message:
</label>
<br>
<textarea
id="message"
name="message"
rows="6"
cols="40"
required
></textarea>
</p>
<button type="submit">
Send Message
</button>
</fieldset>
</form>
</section>
</main>
<footer>
<p>
© 2026 My HTML Project
</p>
</footer>
</body>
</html>
123. Final HTML Cheat Sheet
Document
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Text
<h1>Heading</h1>
<p>Paragraph</p>
<strong>Important</strong>
<em>Emphasis</em>
<mark>Highlight</mark>
<small>Small text</small>
<del>Deleted</del>
<ins>Inserted</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
Links & Media
<a href="...">Link</a>
<img
src="..."
alt="..."
>
<audio controls>
<source src="audio.mp3">
</audio>
<video controls>
<source src="video.mp4">
</video>
<iframe src="..."></iframe>
Lists
<ul>
<li>Item</li>
</ul>
<ol>
<li>Item</li>
</ol>
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
Tables
<table>
<caption>Table</caption>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
Forms
<form>
<label for="name">
Name
</label>
<input
id="name"
type="text"
>
<textarea></textarea>
<select>
<option>Option</option>
</select>
<button type="submit">
Submit
</button>
</form>
Semantic HTML
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
124. The Most Important Things to Remember
If you are completely new to HTML, learn these first:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>My Website</title>
</head>
<body>
<header>
<h1>Website Title</h1>
</header>
<nav>
<a href="/">Home</a>
</nav>
<main>
<section>
<h2>Section Title</h2>
<p>
This is a paragraph.
</p>
<img
src="image.jpg"
alt="Description"
>
</section>
</main>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
Then master:
1. Elements
2. Attributes
3. Headings
4. Paragraphs
5. Links
6. Images
7. Lists
8. Tables
9. Forms
10. Semantic HTML
11. Accessibility
12. Responsive images
13. Multimedia
14. Metadata
15. HTML + CSS
16. HTML + JavaScript