HTML គឺជាអ្វី?

HyperText Markup Language · Browser · Web Page Structure

Beginner

HTML (HyperText Markup Language) គឺជាភាសា Markup ដែលប្រើបង្កើត Structure និង Content នៃទំព័រ Web។ HTML ប្រើ Tags (ស្លាក) ដើម្បីកំណត់ប្រភេទ Content។

HTML ≠ Programming Language — HTML គ្រាន់តែពណ៌នា Structure ប៉ុណ្ណោះ មិនមែន Logic ដូច C++, Java ទេ។

<html>ឯកសារ HTML ទាំងមូល

<head>ព័ត៌មាន Metadata

<body>Content ដែលបង្ហាញ

<title>ចំណងជើង Tab

🌐

Web Browser (Chrome, Firefox, Edge) ដែក HTML ហើយបង្ហាញជា Page ដែលយើងឃើញ។ Browser អានពីលើចុះក្រោម Tag ម្ដង ៗ។

index.html

<!-- HTML Document Structure -->
<!DOCTYPE html>           <!-- HTML5 Declaration -->
<html lang="km">           <!-- Root Element -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ទំព័រ Web ដំបូងរបស់ខ្ញុំ</title>
</head>

<body>
    Content ទាំងអស់ត្រូវដាក់ក្នុង body...
</body>

</html>

💡

<!DOCTYPE html> — ប្រាប់ Browser ថា Document នេះជា HTML5
lang="km" — ប្រាប់ Browser ថា Content ជាភាសាខ្មែរ
charset="UTF-8" — Support ភាសាទាំងអស់ រួមទាំងខ្មែរ

2

HTML Tags, Elements & Attributes

Opening/Closing Tags · Self-closing · Attributes · Nesting

Beginner

ប្រភេទ	ឧទាហរណ៍	ន័យ
Opening Tag	`<p>`	ចាប់ផ្ដើម Element
Closing Tag	`</p>`	បញ្ចប់ Element
Self-closing	`<br>` `<img>` `<input>`	Tag ដែលមិនចាំបាច់ Close
Attribute	`href="url"` `class="name"`	ព័ត៌មានបន្ថែមទៅ Tag
Nesting	`<div><p>Text</p></div>`	Tags ដាក់ក្នុង Tags

tags.html

<!-- Element ធម្មតា —  Opening + Closing -->
<p>នេះជា Paragraph</p>

<!-- Attribute — ពត៌មានបន្ថែម -->
<a href="https://google.com" target="_blank">
    Google
</a>

<!-- Self-closing Tags -->
<br>                         <!-- ចុះបន្ទាត់ -->
<hr>                         <!-- បន្ទាត់ Horizontal -->
<img src="photo.jpg" alt="Photo">

<!-- Nesting — Tags ក្នុង Tags -->
<div>
    <h2>ចំណងជើង</h2>
    <p>Paragraph ម្ដង</p>
    <p>Paragraph ពីរ</p>
</div>

⚠️

ត្រូវ Close Tags ជានិច្ច! Tags ដែល Nest ត្រូវ Close ជំហានៗ — Child ត្រូវ Close មុន Parent។

3

Headings & Paragraphs

h1–h6 · p · br · hr · Text Structure

Beginner

headings.html

<!-- Headings h1 ធំបំផុត → h6 តូចបំផុត -->
<h1>ចំណងជើង ១ — ធំបំផុត (SEO ចម្បង)</h1>
<h2>ចំណងជើង ២</h2>
<h3>ចំណងជើង ៣</h3>
<h4>ចំណងជើង ៤</h4>
<h5>ចំណងជើង ៥</h5>
<h6>ចំណងជើង ៦ — តូចបំផុត</h6>

<!-- Paragraphs -->
<p>នេះជា Paragraph ទីមួយ។ HTML ជា Language ដែលបង្កើត Structure ។</p>
<p>នេះជា Paragraph ទីពីរ។ Browser បន្ថែម Spacing ដោយស្វ័យប្រវត្តិ។</p>

<!-- Line Break -->
<p>បន្ទាត់ទីមួយ<br>បន្ទាត់ទីពីរ (ជាប់គ្នា)</p>

<!-- Horizontal Rule -->
<hr>

<!-- Preformatted Text -->
<pre>    Text       ដែលរក្សា
    Spacing    ដើម</pre>

🖥 Preview

ចំណងជើង ១ — ធំបំផុត

ចំណងជើង ២

ចំណងជើង ៣

នេះជា Paragraph ទីមួយ។ HTML ជា Language ដែលបង្កើត Structure ។

នេះជា Paragraph ទីពីរ។ Browser បន្ថែម Spacing ដោយស្វ័យប្រវត្តិ។

បន្ទាត់ទីមួយ
បន្ទាត់ទីពីរ (ជាប់គ្នា)

4

Links & Images

<a> · href · target · <img> · src · alt · width/height

Beginner

links_images.html

<!-- === LINKS === -->

<!-- External Link -->
<a href="https://www.google.com" target="_blank">
    ចូល Google
</a>

<!-- Internal Link -->
<a href="about.html">អំពីយើង</a>

<!-- Anchor Link (ចូលទៅ Section ក្នុងទំព័រ) -->
<a href="#contact">ទំនាក់ទំនង</a>

<!-- Email Link -->
<a href="mailto:info@example.com">ផ្ញើ Email</a>

<!-- Phone Link -->
<a href="tel:+85512345678">ទូរស័ព្ទ</a>

<!-- === IMAGES === -->

<!-- Image ធម្មតា -->
<img
    src="photo.jpg"
    alt="ពណ៌នារូបភាព (ចាំបាច់!)"
    width="300"
    height="200"
>

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

<!-- Image as Link -->
<a href="home.html">
    <img src="logo.png" alt="Logo" width="120">
</a>

✅

alt="" ចាំបាច់ណាស់! — ប្រើសម្រាប់ Screen Readers (Accessibility) និង SEO ។ ត្រូវពណ៌នារូបភាពជានិច្ច។
target="_blank" — បើក Link ក្នុង Tab ថ្មី

5

Lists (បញ្ជី)

ul · ol · li · dl · dt · dd · Nested Lists

Beginner

lists.html

<!-- Unordered List (bullets) -->
<ul>
    <li>ផ្លែប៉ោម</li>
    <li>ផ្លែស្វាយ</li>
    <li>ផ្លែក្រូច</li>
</ul>

<!-- Ordered List (numbers) -->
<ol>
    <li>ជំហានទីមួយ</li>
    <li>ជំហានទីពីរ</li>
    <li>ជំហានទីបី</li>
</ol>

<!-- Ordered — start attribute -->
<ol start="5" type="A">
    <li>ចាប់ពី E</li>
    <li>F</li>
</ol>

<!-- Nested List -->
<ul>
    <li>ភេសជ្ជៈ
        <ul>
            <li>ទឹកក្រូច</li>
            <li>ទឹកដំណើក</li>
        </ul>
    </li>
    <li>អាហារ</li>
</ul>

<!-- Description List -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

🖥 Preview

Unordered (ul)

ផ្លែប៉ោម
ផ្លែស្វាយ
ផ្លែក្រូច

Ordered (ol)

ជំហានទីមួយ
ជំហានទីពីរ
ជំហានទីបី

6

Tables (តារាង)

table · tr · th · td · colspan · rowspan · thead · tbody

Beginner

table.html

<table border="1">

    <!-- Table Header -->
    <thead>
        <tr>
            <th>ឈ្មោះ</th>
            <th>អាយុ</th>
            <th>ពិន្ទុ</th>
        </tr>
    </thead>

    <!-- Table Body -->
    <tbody>
        <tr>
            <td>វណ្ណា</td>
            <td>20</td>
            <td>95</td>
        </tr>
        <tr>
            <td>សុភា</td>
            <td>22</td>
            <td>88</td>
        </tr>
    </tbody>

    <!-- colspan/rowspan -->
    <tfoot>
        <tr>
            <td colspan="2">មធ្យម</td>
            <td>91.5</td>
        </tr>
    </tfoot>

</table>

💡

colspan="2" — Cell ត្រូបដែន 2 Column
rowspan="2" — Cell ត្រូបដែន 2 Row
ប្រើ CSS ជំនួស border="1" ក្នុង Project ពិតប្រាកដ

7

Text Formatting Tags

strong · em · mark · del · ins · sup · sub · blockquote · code

Beginner

អក្សរ Bold (សំខាន់ Semantic)

អក្សរ Italic (Emphasized)

Highlight អក្សរ

<del>អក្សរ Strikethrough (លុប)

<ins>អក្សរ Underline (បន្ថែម)

អក្សរ Superscript ‌(ខាងលើ)

អក្សរ Subscript (ខាងក្រោម)

<code>Code snippet

<blockquote>ដក Quote ពីប្រភព

<abbr>ពាក្យអក្សរកាត់

text_formatting.html

<p>
    <strong>អត្ថបទ Bold</strong> និង
    <em>អត្ថបទ Italic</em> និង
    <mark>អត្ថបទ Highlight</mark>
</p>

<p>តម្លៃ <del>$20</del> <ins>$15</ins></p>

<p>H<sub>2</sub>O និង E=mc<sup>2</sup></p>

<blockquote cite="https://source.com">
    ការអប់រំគឺជាអាវុធដ៏មានថាមពលបំផុត
    ដែលអ្នកអាចប្រើដើម្បីផ្លាស់ប្ដូរពិភពលោក។
</blockquote>

<p>ប្រើ <code>console.log("Hello")</code> ក្នុង JavaScript</p>

<abbr title="HyperText Markup Language">HTML</abbr>

🖥 Preview

អត្ថបទ Bold និង អត្ថបទ Italic និង អត្ថបទ Highlight

តម្លៃ ~~$20~~ $15

H₂O និង E=mc²

ការអប់រំគឺជាអាវុធដ៏មានថាមពលបំផុត ដែលអ្នកអាចប្រើដើម្បីផ្លាស់ប្ដូរពិភពលោក។

ប្រើ console.log("Hello") ក្នុង JavaScript

8

Forms & Input Elements

form · input types · textarea · select · button · label

Inter

form.html

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

    <!-- Text Input -->
    <label for="name">ឈ្មោះ:</label>
    <input type="text" id="name" name="name"
           placeholder="បញ្ចូលឈ្មោះ" required>

    <!-- Email -->
    <label for="email">អ៊ីម៉ែល:</label>
    <input type="email" id="email" name="email">

    <!-- Password -->
    <input type="password" name="pass" minlength="8">

    <!-- Number -->
    <input type="number" name="age" min="1" max="120">

    <!-- Date -->
    <input type="date" name="birthday">

    <!-- Radio Buttons -->
    <input type="radio" name="gender" value="male"> ប្រុស
    <input type="radio" name="gender" value="female"> ស្រី

    <!-- Checkbox -->
    <input type="checkbox" name="agree" checked> យល់ព្រម

    <!-- Dropdown -->
    <select name="city">
        <option value="pp">ភ្នំពេញ</option>
        <option value="sr">សៀមរាប</option>
    </select>

    <!-- Textarea -->
    <textarea name="msg" rows="4" cols="40"
              placeholder="សរសេរសាររបស់អ្នក..."></textarea>

    <!-- Submit Button -->
    <button type="submit">ផ្ញើ</button>
    <button type="reset">សូន្យ</button>

</form>

9

Semantic HTML5

header · nav · main · section · article · aside · footer

Inter

Semantic HTML ប្រើ Tags ដែលមានន័យ Meaningful — ប្រាប់ Browser និង Search Engine ពី Purpose នៃ Content។

Semantic Tag	ន័យ	ប្រើនៅ
`<header>`	ផ្នែកខាងលើ	Logo, Navigation, Banner
`<nav>`	Navigation Menu	Links Menu Bar
`<main>`	Content ចម្បង	Main content area (1 ក្នុង Page)
`<section>`	ផ្នែក	Group content ដែលពាក់ព័ន្ធ
`<article>`	អត្ថបទ/Post	Blog post, News article
`<aside>`	ខ្ទង់ Sidebar	Related links, Widgets
`<footer>`	ផ្នែកខាងក្រោម	Copyright, Contact
`<figure>`	Media Container	Image + Caption

semantic.html

<body>
    <header>
        <h1>ឈ្មោះ Website</h1>
        <nav>
            <ul>
                <li><a href="/">ទំព័រដើម</a></li>
                <li><a href="/about">អំពីយើង</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h2>សូមស្វាគមន៍</h2>
            <p>នេះជា Hero Section</p>
        </section>

        <section id="blog">
            <article>
                <h2>ចំណងជើង Post</h2>
                <time datetime="2025-01-15">ថ្ងៃទី ១៥ មករា</time>
                <p>Content នៃ Post...</p>
                <figure>
                    <img src="post.jpg" alt="Post Image">
                    <figcaption>ពណ៌នារូបភាព</figcaption>
                </figure>
            </article>
        </section>

        <aside>
            <h3>Related Posts</h3>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 ឈ្មោះ Company</p>
    </footer>
</body>

10

Div & Span — Container Elements

div (block) · span (inline) · Generic Containers

Inter

	<div>	<span>
ប្រភេទ	Block Element	Inline Element
Display	ចាប់ Line ថ្មី, Width 100%	ស្ថិតក្នុង Text
ប្រើ	Group Sections, Layout	Style Text ផ្នែកក្នុង Paragraph

div_span.html

<!-- div — Block Container -->
<div class="card" style="background:#f0f; padding:10px;">
    <h3>ចំណងជើង Card</h3>
    <p>Content ក្នុង Card...</p>
</div>

<!-- span — Inline Container -->
<p>
    ពណ៌ 
    <span style="color: red;">ក្រហម</span>
     និង 
    <span style="color: blue; font-weight: bold;">ខៀវ</span>
     ស្អាត!
</p>

<!-- Layout ជាមួយ div -->
<div style="display:flex; gap:10px;">
    <div style="flex:1; background:#e3f2fd; padding:15px;">
        Column ១
    </div>
    <div style="flex:1; background:#f3e5f5; padding:15px;">
        Column ២
    </div>
</div>

11

CSS Intro — Styling HTML

Inline · Internal · External · Selectors · Box Model

Inter

CSS (Cascading Style Sheets) ប្រើដើម្បី Style HTML Elements — ការប្ដូរពណ៌, ទំហំ, Font, Layout...

css_intro.html

<!-- 1. INLINE CSS -->
<p style="color: red; font-size: 18px;">Text ក្រហម</p>

<!-- 2. INTERNAL CSS -->
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }

    h1 {
        color: #0891b2;
        font-size: 2rem;
        text-align: center;
    }

    .card {             /* Class Selector */
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 16px;
    }

    #hero {            /* ID Selector */
        background: linear-gradient(135deg, #0891b2, #06b6d4);
        color: white;
        padding: 60px;
    }
</style>

<!-- 3. EXTERNAL CSS — Best Practice -->
<link rel="stylesheet" href="style.css">

✅

External CSS (link stylesheet) គឺ Best Practice — Code CSS នៅ File ឯករ ហើយ Reuse បានគ្រប់ Pages

12

CSS Classes & IDs

class · id · Multiple Classes · CSS Specificity

Inter

classes_ids.html + style.css

<!-- HTML -->

<!-- Multiple classes -->
<div class="card featured">
    Card ពិសេស
</div>

<button class="btn btn-primary">Click</button>
<button class="btn btn-danger">Delete</button>

<p id="intro">Unique Element</p>

/* CSS */

.card { border: 1px solid #ddd; padding: 16px; }
.featured { border-color: #0891b2; background: #e0f7fa; }

/* Base button */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* Variant buttons */
.btn-primary { background: #0891b2; color: white; }
.btn-danger  { background: #dc2626; color: white; }

/* Hover state */
.btn:hover { opacity: 0.85; transform: translateY(-1px); }

#intro { font-size: 1.2rem; color: #0e7490; }

13

Multimedia — Video & Audio

video · audio · source · iframe · embed · YouTube

Inter

multimedia.html

<!-- VIDEO -->
<video
    width="640"
    height="360"
    controls          <!-- បង្ហាញ Play/Pause/Volume -->
    autoplay          <!-- ចាប់ផ្ដើម Auto -->
    muted             <!-- Silent ដើមដំបូង -->
    loop              <!-- Loop ម្ដងម្ដងៗ -->
    poster="thumb.jpg" <!-- Cover Image -->
>
    <source src="video.mp4"  type="video/mp4">
    <source src="video.webm" type="video/webm">
    Browser ចាស់មិន Support Video
</video>

<!-- AUDIO -->
<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
</audio>

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

<!-- Google Map Embed -->
<iframe
    src="https://maps.google.com/maps?q=Phnom+Penh&output=embed"
    width="100%" height="300"
    style="border:0;"
    loading="lazy"
></iframe>

14

CSS Flexbox Layout

display:flex · justify-content · align-items · flex-wrap · gap

Advanced

Flexbox ជា Layout System ដ៏ល្អ សម្រាប់ បែងចែក Space នៅក្នុង Container — Row ឬ Column.

flexbox.html

<!-- HTML -->
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

/* CSS */

.flex-container {
    display:          flex;
    flex-direction:   row;       /* row | column | row-reverse */
    justify-content: center;    /* center | space-between | flex-start */
    align-items:      center;    /* center | flex-start | stretch */
    flex-wrap:        wrap;      /* wrap | nowrap */
    gap:              16px;
    min-height:       200px;
    background:       #f0f9ff;
    border-radius:    10px;
    padding:          20px;
}

.flex-item {
    flex:          1;             /* ចែក Space ស្មើ */
    min-width:    120px;
    background:   #0891b2;
    color:        white;
    text-align:   center;
    padding:      24px;
    border-radius: 8px;
    font-size:    1.2rem;
    font-weight:  bold;
}

/* Navbar with Flexbox */
nav {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0 24px;
    background:      #0e7490;
    height:          60px;
}

🖥 Flexbox Preview

1

2

3

15

CSS Grid Layout

display:grid · grid-template · grid-area · auto-fill

Advanced

grid.html

<!-- HTML -->
<div class="grid-layout">
    <header class="g-header">Header</header>
    <nav    class="g-nav">Sidebar</nav>
    <main   class="g-main">Main Content</main>
    <footer class="g-footer">Footer</footer>
</div>

/* CSS Grid */

.grid-layout {
    display:               grid;
    grid-template-areas:
        "header  header"
        "nav     main  "
        "footer  footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows:    auto 1fr auto;
    gap:                   12px;
    min-height:            100vh;
}

.g-header { grid-area: header; background: #0891b2; color: white; padding: 16px; }
.g-nav    { grid-area: nav;    background: #e0f7fa; padding: 16px; }
.g-main   { grid-area: main;   background: white;   padding: 20px; }
.g-footer { grid-area: footer; background: #0e7490; color: white; padding: 12px; }

/* Card Grid — Auto-fill */
.card-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:                   20px;
}

🖥 Grid Layout Preview

Header

Nav

Main Content

Footer

16

Responsive Web Design

viewport · Media Queries · Mobile First · Breakpoints

Advanced

responsive.html

<!-- ចាំបាច់! Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* === MOBILE FIRST APPROACH === */

/* Default (Mobile) */
.container {
    width:   100%;
    padding: 0 16px;
}

.grid {
    display:               grid;
    grid-template-columns: 1fr;   /* 1 column on mobile */
    gap:                   16px;
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
    .container { max-width: 768px; margin: 0 auto; }
    .grid      { grid-template-columns: 1fr 1fr; }
    .sidebar   { display: block; }  /* Show sidebar */
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
    .container { max-width: 1200px; }
    .grid      { grid-template-columns: 1fr 1fr 1fr; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body { background: #121212; color: #ffffff; }
}

/* Print */
@media print {
    nav, footer { display: none; }
    body         { font-size: 12pt; }
}

17

CSS Animations & Transitions

transition · @keyframes · animation · transform

Advanced

animations.css

/* === TRANSITIONS === */
.btn {
    background:  #0891b2;
    color:       white;
    padding:     12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;  /* Smooth change */
}

.btn:hover {
    background: #0e7490;
    transform:  translateY(-3px);
    box-shadow: 0 8px 20px rgba(8,145,178,0.4);
}

/* === KEYFRAMES ANIMATION === */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

.hero    { animation: fadeIn 0.8s ease forwards; }
.loader  { animation: spin 1s linear infinite; }
.card:hover { animation: pulse 0.4s ease; }

/* Stagger animation — delay each child */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

18

HTML Forms — Advanced Validation

required · pattern · minlength · datalist · fieldset · Custom Validation

Advanced

form_advanced.html

<form action="/register" method="POST" novalidate>

    <!-- Fieldset Group -->
    <fieldset>
        <legend>ព័ត៌មានផ្ទាល់ខ្លួន</legend>

        <!-- Pattern Validation -->
        <label for="phone">លេខទូរស័ព្ទ:</label>
        <input
            type="tel"
            id="phone"
            pattern="[0-9]{9,10}"
            placeholder="012345678"
            required
        >

        <!-- Range Slider -->
        <label>ពិន្ទុ: <span id="val">50</span></label>
        <input type="range" min="0" max="100" value="50"
               oninput="document.getElementById('val').textContent=this.value">

        <!-- Color Picker -->
        <label>ពណ៌ដែលចូលចិត្ត:</label>
        <input type="color" name="fav_color" value="#0891b2">

        <!-- Datalist (Autocomplete) -->
        <label>ខេត្ត/ក្រុង:</label>
        <input list="cities" name="city" placeholder="វាយ...">
        <datalist id="cities">
            <option value="ភ្នំពេញ">
            <option value="សៀមរាប">
            <option value="សីហនុ">
            <option value="បាត់ដំបង">
        </datalist>

        <!-- File Upload -->
        <input type="file" accept="image/*" multiple>

    </fieldset>
    <button type="submit">ចុះឈ្មោះ</button>
</form>

19

Accessibility (a11y)

ARIA roles · aria-label · tabindex · Screen Readers · Semantic Tags

Advanced

Accessibility (a11y) ធ្វើឱ្យ Website ប្រើបានដោយ គ្រប់គ្នា — រួមទាំងអ្នកពិការភ្នែក, ពិការដៃ, ប្រើ Screen Readers។

accessibility.html

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

<!-- ARIA Roles -->
<nav role="navigation" aria-label="Main Navigation">
    <ul>
        <li><a href="/">ទំព័រដើម</a></li>
    </ul>
</nav>

<!-- Button ជាមួយ aria-label -->
<button aria-label="Close dialog">✕</button>

<!-- Icon Button -->
<button aria-label="Search">
    <svg aria-hidden="true">...</svg>
</button>

<!-- Form Accessibility -->
<div role="group" aria-labelledby="addr-label">
    <span id="addr-label">អាសយដ្ឋាន</span>
    <input aria-required="true" aria-invalid="false">
</div>

<!-- Focus management -->
<div tabindex="0" role="button"
     aria-pressed="false">
    Custom Button
</div>

<!-- Live regions -->
<div aria-live="polite" aria-atomic="true">
    Dynamic Content Update...
</div>

<!-- Image with descriptive alt -->
<img src="chart.png"
     alt="ក្រាហ្វបង្ហាញការលក់ប្រចាំខែ 2024 — ខែ មករា: $50K, កុម្ភៈ: $65K">

<!-- Decorative image -->
<img src="divider.png" alt="" role="presentation">

♿

WCAG 2.1 (Web Content Accessibility Guidelines) — Standards ពី W3C ដែល Website ល្អត្រូវ Follow ។ Level AA គឺជា Minimum ។

20

Meta Tags & SEO

Open Graph · Twitter Cards · Structured Data · Canonical · robots

Advanced

seo_meta.html

<head>
    <!-- === ESSENTIAL META === -->
    <meta charset="UTF-8">
    <meta name="viewport"    content="width=device-width, initial-scale=1.0">
    <meta name="description"  content="ពណ៌នា Page (150-160 chars) — ចំណាំ SEO">
    <meta name="keywords"     content="HTML, CSS, JavaScript, Web">
    <meta name="author"       content="ឈ្មោះ Author">
    <meta name="robots"       content="index, follow">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://example.com/page">

    <!-- === OPEN GRAPH (Facebook/LinkedIn) === -->
    <meta property="og:type"        content="website">
    <meta property="og:url"         content="https://example.com">
    <meta property="og:title"       content="ចំណងជើង Page">
    <meta property="og:description"  content="ពណ៌នា Content">
    <meta property="og:image"       content="https://example.com/og.jpg">
    <meta property="og:locale"      content="km_KH">

    <!-- === TWITTER CARDS === -->
    <meta name="twitter:card"        content="summary_large_image">
    <meta name="twitter:title"       content="ចំណងជើង Page">
    <meta name="twitter:image"       content="https://example.com/tw.jpg">

    <!-- Favicon -->
    <link rel="icon"            href="favicon.ico">
    <link rel="icon"            href="icon.svg"    type="image/svg+xml">
    <link rel="apple-touch-icon" href="apple-icon.png">

    <!-- Theme Color (Mobile Browser Bar) -->
    <meta name="theme-color" content="#0891b2">

    <title>ចំណងជើង Page | ឈ្មោះ Site</title>
</head>

🔍

SEO Tips: ប្រើ h1 តែ ១ ក្នុង Page · alt text ជានិច្ច · Description 150-160 chars · Page Load លឿន · HTTPS ។ Open Graph ជួយ Share ក្នុង Social Media ឱ្យស្អាត!