① Building Blocks / HTML Document

1.1 What are HTML Tags?

📖 Concept:

HTML = HyperText Markup Language. Tags define structure:

Opening Tag: <tagname>
Closing Tag: </tagname>
Self-closing: <br> <img> <hr> <input>
Attribute: <tag attribute="value">

<p class="intro">Hello World!</p>
<img src="photo.jpg" alt="Photo">
<a href="https://google.com">Google</a>
<br>
<hr>

🖥 Output:

<p class="intro">Hello World!</p>

(Browser renders: "Hello World!" as a paragraph)

1.2 HTML Document Structure

📖 Concept:

<!DOCTYPE html> — HTML5 declaration
<html> — Root element
<head> — Metadata (title, CSS, meta tags)
<body> — Visible content

<!DOCTYPE html>
<html lang="km">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

🖥 Output:

<!DOCTYPE html> <html lang="km"> <head> <meta charset="UTF-8"> <title>My First Page</title> </head> <body> <h1>Hello World!</h1> <p>This is my first web page.</p> </body> </html>

1.3 Heading Tags (h1–h6)

📖 Concept:

HTML has 6 heading levels. <h1> = largest, <h6> = smallest. Use only one h1 per page for SEO.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

🖥 Output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

② Basic HTML Elements

2.1 Paragraph, Line Break & Horizontal Rule

📖 Concept:

<p> — Paragraph
<br> — Line break (self-closing)
<hr> — Horizontal rule (self-closing)
<div> — Block-level container
<span> — Inline container

<p>This is paragraph one.</p>
<p>This is paragraph two.</p>
<hr>
<p>Line one<br>Line two<br>Line three</p>

<div style="background: #eee; padding: 10px;">
    This is a <span style="color: red;">red text</span> inside a div.
</div>

🖥 Output:

This is paragraph one.

This is paragraph two.

Line one
Line two
Line three

This is a red text inside a div.

2.2 Semantic HTML Tags

📖 Concept:

Semantic tags describe meaning, improving SEO & accessibility:

Tag	Purpose
<header>	Top section (logo, nav)
<nav>	Navigation links
<main>	Primary unique content
<section>	Thematic grouping
<article>	Self-contained content (blog post)
<aside>	Sidebar / related content
<footer>	Bottom section (copyright)
<figure>	Image with caption
<figcaption>	Caption for figure

<header>
    <h1>My Website</h1>
    <nav><a href="#">Home</a> | <a href="#">About</a></nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Content here...</p>
    </article>
    <aside><p>Sidebar info</p></aside>
</main>
<footer><p>&copy; 2026 My Website</p></footer>

💡 Tip: <div> vs Semantic Tags

<div> has no semantic meaning — it is a generic container. Always prefer semantic tags when possible!

③ Formatting Text & Alignment

3.1 Bold, Italic, Underline & More

📖 Concept:

<b> / <strong> — Bold (<strong> = semantic)
<i> / <em> — Italic (<em> = emphasis)
<u> — Underline
<mark> — Highlight
<del> / <ins> — Strikethrough / Inserted
<sub> / <sup> — Subscript / Superscript
<small> — Smaller text
<blockquote> — Block quote
<code> / <pre> — Code / Preformatted

<p><b>Bold text</b></p>
<p><strong>Strong text</strong> (semantic bold)</p>
<p><i>Italic text</i></p>
<p><em>Emphasized text</em></p>
<p><u>Underlined text</u></p>
<p><mark>Highlighted text</mark></p>
<p><del>Deleted</del> <ins>Inserted</ins></p>
<p>H<sub>2</sub>O and 10<sup>2</sup></p>
<p><small>Small text</small></p>
<blockquote>"Knowledge is power." — Francis Bacon</blockquote>
<pre><code>console.log("Hello");</code></pre>

🖥 Output:

Bold text

Strong text (semantic bold)

Italic text

Emphasized text

Underlined text

Highlighted text

~~Deleted~~ Inserted

H₂O and 10² = 100

Small text

"Knowledge is power." — Francis Bacon

console.log("Hello");

3.2 Text Alignment

📖 Concept:

Use CSS text-align property (the old align attribute is deprecated in HTML5):

<p style="text-align: left;">Left aligned</p>
<p style="text-align: center;">Center aligned</p>
<p style="text-align: right;">Right aligned</p>
<p style="text-align: justify;">Justified text stretches to fill the line...</p>

🖥 Output:

Left aligned

Center aligned

Right aligned

Justified text stretches to fill the entire width of the container, adding space between words as needed for a clean edge on both sides.

④ Working with Images

4.1 Image Tag <img>

📖 Concept:

<img> is self-closing. Key attributes:

src — Image path or URL
alt — Alternative text (SEO + accessibility)
width / height — Dimensions
title — Tooltip on hover

<!-- Basic image -->
<img src="https://placehold.co/300x150" alt="Placeholder" width="300">

<!-- Image with title tooltip -->
<img src="https://placehold.co/200x100" alt="Sample" title="Hover me!">

<!-- Image with figure and caption -->
<figure>
    <img src="https://placehold.co/300x200" alt="Scenic View">
    <figcaption>A beautiful scenic view</figcaption>
</figure>

🖥 Output:

4.2 Image Map & Responsive Images

📖 Concept:

style="max-width:100%; height:auto;" — Responsive image
<picture> + <source> — Art direction (different images per screen size)
<map> + <area> — Clickable image map

<!-- Responsive Image -->
<img src="photo.jpg" alt="Responsive" style="max-width:100%; height:auto;">

<!-- Picture element for art direction -->
<picture>
    <source media="(min-width: 768px)" srcset="large.jpg">
    <source media="(min-width: 480px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Art Direction">
</picture>

⑤ Creating Lists

5.1 Unordered, Ordered & Description Lists

📖 Concept:

<ul> — Unordered list (bullets)
<ol> — Ordered list (numbers). Attributes: type="A", start="5", reversed
<dl> — Description list with <dt> (term) and <dd> (definition)
<li> — List item (used inside ul/ol)

<h4>Unordered List:</h4>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<h4>Ordered List (type="A"):</h4>
<ol type="A">
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JS</li>
</ol>

<h4>Nested List:</h4>
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>MySQL</li>
        </ul>
    </li>
</ul>

<h4>Description List:</h4>
<dl>
    <dt>HTML</dt>
    <dd>Structure of web pages</dd>
    <dt>CSS</dt>
    <dd>Styling and layout</dd>
</dl>

🖥 Output:

Unordered List:

HTML
CSS
JavaScript

Ordered List (type="A"):

Learn HTML
Learn CSS
Learn JS

Nested List:

Frontend
- HTML
- CSS
Backend
- PHP
- MySQL

Description List:

HTML: Structure of web pages
CSS: Styling and layout

⑥ HTML5 Multimedia — Audio, Video, Plug-ins & YouTube

6.1 Audio <audio>

📖 Concept:

<audio> — Embed audio player
Attributes: controls, autoplay, loop, muted
Formats: MP3, WAV, OGG

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support audio.
</audio>

<!-- Autoplay (muted required by browsers) -->
<audio controls autoplay muted loop>
    <source src="background.mp3" type="audio/mpeg">
</audio>

6.2 Video <video>

📖 Concept:

<video> — Embed video player
Attributes: controls, width, height, poster, autoplay, muted, loop
Formats: MP4, WebM, OGG

<video width="400" controls poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support video.
</video>

6.3 YouTube Embed & Plug-ins

📖 Concept:

<iframe> — Embed external content (YouTube, Maps, etc.)
<embed> — Embed plug-in content (PDF, Flash)
<object> — Another way to embed external resources

<!-- YouTube Embed -->
<iframe width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
    allowfullscreen>
</iframe>

<!-- Embed PDF -->
<embed src="document.pdf" type="application/pdf" width="600" height="400">

<!-- Object Tag -->
<object data="document.pdf" type="application/pdf" width="600" height="400">
    <p>Your browser does not support PDFs. <a href="document.pdf">Download</a></p>
</object>

🖥 YouTube Demo:

💡 Audio/Video Format Comparison:

Format	Type	Browser Support
MP3	Audio	All modern browsers
WAV	Audio	All modern browsers
OGG	Audio	Chrome, Firefox, Opera
MP4	Video	All modern browsers
WebM	Video	Chrome, Firefox, Opera
OGG	Video	Chrome, Firefox, Opera

⑦ Graphics, Color, Animation & Custom Backgrounds

7.1 HTML Colors

📖 Concept:

Named colors: red, blue, green, etc.
HEX: #FF5733, #3498DB
RGB: rgb(255, 87, 51)
RGBA: rgba(255, 87, 51, 0.5) — with opacity
HSL: hsl(9, 100%, 60%)

<p style="color: red;">Named Color: Red</p>
<p style="color: #3498DB;">HEX Color: #3498DB</p>
<p style="color: rgb(46, 204, 113);">RGB Color</p>
<p style="color: rgba(155, 89, 182, 0.7);">RGBA Color (70% opacity)</p>
<p style="background-color: #F1C40F; padding: 8px;">Background Color</p>

🖥 Output:

Named Color: Red

HEX Color: #3498DB

RGB Color

RGBA Color (70% opacity)

Background Color

7.2 Custom Backgrounds & Gradients

📖 Concept:

background-color — Solid color
background-image — Image background
background-size: cover — Cover entire element
linear-gradient() / radial-gradient() — Gradient backgrounds

<div style="background: linear-gradient(to right, #667eea, #764ba2);
            color: white; padding: 20px; border-radius: 10px;">
    Linear Gradient Background
</div>

<div style="background: radial-gradient(circle, #f093fb, #f5576c);
            color: white; padding: 20px; border-radius: 10px;">
    Radial Gradient Background
</div>

<div style="background-image: url('bg.jpg');
            background-size: cover; background-position: center;
            padding: 40px; color: white;">
    Background Image
</div>

🖥 Output:

Linear Gradient Background

Radial Gradient Background

Background Image (simulated with gradient)

7.3 HTML5 Animation & Canvas

📖 Concept:

<canvas> — Drawing graphics via JavaScript
<svg> — Scalable Vector Graphics
CSS Animations: @keyframes, animation
CSS Transitions: transition

<!-- SVG Example -->
<svg width="200" height="100">
    <circle cx="50" cy="50" r="40" fill="#3498DB" />
    <rect x="100" y="10" width="80" height="80" fill="#E74C3C" rx="10" />
</svg>

<!-- CSS Animation -->
<style>
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.bouncing { animation: bounce 1s infinite; display: inline-block; }
</style>
<span class="bouncing">🏀</span>

<!-- Canvas -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas").getContext("2d");
c.fillStyle = "#2ECC71";
c.fillRect(10, 10, 80, 80);
c.fillStyle = "#9B59B6";
c.beginPath(); c.arc(150, 50, 40, 0, 2*Math.PI); c.fill();
</script>

🖥 Live Demo:

🏀

⑧ Advanced Layout with Tables

8.1 Basic Table Structure

📖 Concept:

<table> — Table container
<caption> — Table title
<thead> / <tbody> / <tfoot> — Semantic grouping
<tr> — Table row
<th> — Header cell (bold, centered)
<td> — Data cell

<table border="1">
  <caption>Student Grades</caption>
  <thead>
    <tr><th>Name</th><th>Subject</th><th>Grade</th></tr>
  </thead>
  <tbody>
    <tr><td>Sokha</td><td>HTML/CSS</td><td>A</td></tr>
    <tr><td>Dara</td><td>JavaScript</td><td>B+</td></tr>
    <tr><td>Maly</td><td>PHP</td><td>A-</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Total: 3 students</td></tr>
  </tfoot>
</table>

🖥 Output:

Student Grades
Name	Subject	Grade
Sokha	HTML/CSS	A
Dara	JavaScript	B+
Maly	PHP	A-
Total: 3 students

8.2 colspan & rowspan — Grouping Rows and Columns

📖 Concept:

colspan="n" — Merge n columns (horizontal)
rowspan="n" — Merge n rows (vertical)
<colgroup> + <col> — Style entire columns

<table border="1">
  <colgroup>
    <col style="background-color: #eef;">
    <col span="2" style="background-color: #ffe;">
  </colgroup>
  <tr><th colspan="3">Student Report 2026</th></tr>
  <tr><th>Name</th><th>Subject</th><th>Grade</th></tr>
  <tr>
    <td rowspan="2">Sokha</td>
    <td>HTML</td><td>A</td>
  </tr>
  <tr><td>CSS</td><td>B+</td></tr>
  <tr>
    <td rowspan="2">Dara</td>
    <td>JavaScript</td><td>B</td>
  </tr>
  <tr><td>PHP</td><td>A-</td></tr>
</table>

🖥 Output:

Student Report 2026
Name	Subject	Grade
Sokha	HTML	A
Sokha	CSS	B+
Dara	JavaScript	B
Dara	PHP	A-

⑨ Hypertext Links, Anchors & URLs

9.1 Anatomy of a URL

📖 Concept:

URL = Uniform Resource Locator. Parts:

https://www.example.com:443/path/page.html?key=value#section

Protocol: https://
Domain: www.example.com
Port: :443 (optional)
Path: /path/page.html
Query: ?key=value
Fragment: #section

9.2 Anchor Tag <a> — Linking to Web Pages

📖 Concept:

href — URL destination
target="_blank" — Open in new tab
target="_self" — Same window (default)
title — Tooltip on hover
download — Download file instead of navigate

<!-- External link -->
<a href="https://www.google.com">Go to Google</a>

<!-- New tab -->
<a href="https://www.google.com" target="_blank">Google (new tab)</a>

<!-- Email link -->
<a href="mailto:info@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+85512345678">Call Us</a>

<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>

🖥 Output:

9.3 Working with Anchors (Internal Links)

📖 Concept:

Use id attribute as anchor target, and href="#id" to jump to it:

<!-- Navigation links -->
<nav>
    <a href="#about">About</a> |
    <a href="#services">Services</a> |
    <a href="#contact">Contact</a>
</nav>

<!-- Target sections -->
<section id="about">
    <h2>About Us</h2>
    <p>Content here...</p>
</section>

<section id="services">
    <h2>Services</h2>
    <p>Content here...</p>
</section>

<!-- Back to top -->
<a href="#">⬆ Back to Top</a>

🖥 Output:

(Click the links above to jump to those sections on this page!)

9.4 Other Hypertext Links & Tips

📖 Concept:

Image as link — Wrap <img> inside <a>
Button as link — Style a link to look like a button
rel="noopener noreferrer" — Security for target="_blank"
Relative vs Absolute paths

<!-- Image as link -->
<a href="https://www.google.com">
    <img src="logo.png" alt="Google Logo" width="100">
</a>

<!-- Styled button link -->
<a href="#" style="background:#3498DB; color:white; padding:10px 20px;
   border-radius:8px; text-decoration:none;">Click Me</a>

<!-- Secure external link -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    External Link (Secure)
</a>

<!-- Relative paths -->
<a href="about.html">Same folder</a>
<a href="../index.html">Parent folder</a>
<a href="pages/contact.html">Subfolder</a>

🖥 Output:

(Image as link)

Click Me (Button link)

💡 Tips & Tricks:

Always add rel="noopener noreferrer" when using target="_blank"
Use descriptive link text (not "Click here")
Use relative paths for internal links, absolute for external
Test all links regularly to avoid broken links
Add title attribute for tooltips on important links

🧪 Interactive Playground

🏗 HTML Tag Builder

Choose a tag, add content & attributes:

📊 Table Generator

Enter headers and rows to build a table:

📝 Practice Questions

Try answering the questions below. Click "Show Answer" to check.

❓ Question 1 (MC):

Which declaration must appear first in every HTML5 document?

A. <html>

B. <head>

C. <!DOCTYPE html>

D. <body>

🔑 Show Answer

C — <!DOCTYPE html> declares the document as HTML5.

❓ Question 2 (Short):

What is the difference between <strong> and <b>?

🔑 Show Answer

Both display bold text. <strong> has semantic importance (meaningful to screen readers/SEO), while <b> is visual only.

❓ Question 3 (MC):

Which tag is self-closing?

A. <p>

B. <img>

C. <div>

D. <a>

🔑 Show Answer

B — <img> is self-closing. Others: <br>, <hr>, <input>.

❓ Question 4 (Short):

What does the alt attribute do on an <img> tag?

🔑 Show Answer

Provides alternative text when the image cannot load. Also helps SEO and screen readers for accessibility.

❓ Question 5 (MC):

Which tag creates a bulleted (unordered) list?

A. <ol>

B. <list>

C. <ul>

D. <dl>

🔑 Show Answer

C — <ul> creates unordered (bullet) list.

❓ Question 6 (Short):

Write the HTML to create a link to Google that opens in a new tab.

🔑 Show Answer

<a href="https://www.google.com" target="_blank">Google</a>

❓ Question 7 (MC):

What does colspan="3" do?

A. Merges 3 rows vertically

B. Merges cell across 3 columns

C. Creates 3 cells

D. Sets column width to 3px

🔑 Show Answer

B — Merges a cell across 3 columns horizontally.

❓ Question 8 (MC):

Which HTML5 tag is used to embed video?

A. <media>

B. <video>

C. <movie>

D. <embed>

🔑 Show Answer

B — <video> is the standard HTML5 video element.

❓ Question 9 (Short):

Name 3 semantic HTML tags and describe each briefly.

🔑 Show Answer

Any 3: <header> (page header), <nav> (navigation), <main> (main content), <section> (thematic group), <article> (self-contained content), <aside> (sidebar), <footer> (page footer).

❓ Question 10 (Short):

What is the difference between an absolute URL and a relative URL? Give an example of each.

🔑 Show Answer

Absolute URL: Full path including protocol and domain.
Example: https://www.google.com/about.html

Relative URL: Path relative to current page.
Example: about.html or ../images/logo.png

#	Type	Answer
1	MC	C — <!DOCTYPE html>
2	Short	<strong> = semantic, <b> = visual only
3	MC	B — <img> (self-closing)
4	Short	alt = alternative text (SEO + accessibility)
5	MC	C — <ul>
6	Short	<a href="..." target="_blank">Google</a>
7	MC	B — Merges across 3 columns
8	MC	B — <video>
9	Short	<header>, <nav>, <main>, <section>, <article>, etc.
10	Short	Absolute = full URL; Relative = path from current page

📚 Introduction

① Building Blocks / HTML Document

1.1 What are HTML Tags?

1.2 HTML Document Structure

1.3 Heading Tags (h1–h6)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

② Basic HTML Elements

2.1 Paragraph, Line Break & Horizontal Rule

2.2 Semantic HTML Tags

③ Formatting Text & Alignment

3.1 Bold, Italic, Underline & More

3.2 Text Alignment

④ Working with Images

4.1 Image Tag <img>

4.2 Image Map & Responsive Images

⑤ Creating Lists

5.1 Unordered, Ordered & Description Lists

Unordered List:

Ordered List (type="A"):

Nested List:

Description List:

⑥ HTML5 Multimedia — Audio, Video, Plug-ins & YouTube

6.1 Audio <audio>

6.2 Video <video>

6.3 YouTube Embed & Plug-ins

⑦ Graphics, Color, Animation & Custom Backgrounds

7.1 HTML Colors

7.2 Custom Backgrounds & Gradients

7.3 HTML5 Animation & Canvas

⑧ Advanced Layout with Tables

8.1 Basic Table Structure

8.2 colspan & rowspan — Grouping Rows and Columns

⑨ Hypertext Links, Anchors & URLs

9.1 Anatomy of a URL

9.2 Anchor Tag <a> — Linking to Web Pages

9.3 Working with Anchors (Internal Links)

9.4 Other Hypertext Links & Tips

🧪 Interactive Playground

🏗 HTML Tag Builder

📊 Table Generator

📝 Practice Questions