🏠 Home / Hub

🌐 HTML Lesson 06 — Semantic HTML

← Back to HTML Menu

1. Semantic HTML ဆိုတာ ဘာလဲ?

❌ Non-semantic — ဘာကိုကိုယ်စားပြုတယ် မသိဘူး
<div id="header">
  <div id="nav">...</div>
</div>
<div id="content">
  <div id="article">...</div>
</div>
<div id="footer">...</div>
✅ Semantic — ဖတ်ရင်ကြည်ပြီး ဘာကိုကိုယ်စားပြုတယ် သိ
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>
Semantic HTML ရဲ့ အကျိုးကျေးဇူး:
✅ SEO ပိုကောင်း (Google က structure နားလည်)
✅ Accessibility (Screen reader users)
✅ Code ဖတ်ရ ပိုလွယ်
✅ Browser dev tools မှာ ရှင်းလင်း

2. Typical Page Layout

<body>
  <header>
    <h1>Logo</h1>
    <nav>
      <ul>
        <li><a>Home</a></li>
        <li><a>About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Featured</h2>
      <article>Post 1</article>
      <article>Post 2</article>
    </section>
    <aside>Sidebar</aside>
  </main>

  <footer>
    <p>&copy; 2024</p>
  </footer>
</body>
📌 <header> — Logo + Nav
🔗 <nav> — Navigation links
📄 <main>
📦 <section>
📝 <article> Post 1
📝 <article> Post 2
🗂️ <aside> Sidebar
🦶 <footer> — Copyright

3. Semantic Tags Reference

Tagဘာကိုကိုယ်စားပြုတယ်Example
<header>Page ၊ section header — logo, navPage top, article header
<nav>Navigation links groupMenu, breadcrumb, pagination
<main>Page ရဲ့ primary contentPage တစ်ခုမှာ တစ်ခုပဲ
<section>Thematic group of contentFeatures, About, Contact
<article>Independent, reusable contentBlog post, news, comment
<aside>Sidebar / tangentially relatedRelated posts, ads, bio
<footer>Page ၊ section footerCopyright, links, contact
<figure>Self-contained contentImage + caption
<figcaption>figure ရဲ့ captionImage description
<time>Date/time<time datetime="2024-01-01">
<address>Contact infoEmail, address, phone
<details>Expandable sectionFAQ, accordion
<summary>details ရဲ့ headingClick to expand
<mark>Highlighted textSearch result highlight

4. Article Example

<article>
  <header>
    <h2>My Blog Post Title</h2>
    <p>
      By <strong>Ko Min</strong> ·
      <time datetime="2024-06-01">
        June 1, 2024
      </time>
    </p>
  </header>

  <p>Article content here...</p>
  <p>More content...</p>

  <footer>
    <p>Tags: HTML, CSS, Web</p>
  </footer>
</article>

My Blog Post Title

By Ko Min ·

Article content here. This is the main body of the blog post. It can have multiple paragraphs.

More content goes here...

5. <details> + <summary> — Expandable (No JS!)

<details>
  <summary>
    ❓ HTML ဆိုတာ ဘာလဲ?
  </summary>
  <p>
    HyperText Markup Language.
    Web page ရဲ့ structure
    ဆောက်ဖို့ သုံးတဲ့ language
  </p>
</details>
❓ HTML ဆိုတာ ဘာလဲ?

HyperText Markup Language. Web page ရဲ့ structure ဆောက်ဖို့ သုံးတဲ့ language


❓ CSS ဆိုတာ ဘာလဲ?

Cascading Style Sheets. HTML ကို လှပအောင် style လုပ်ဖို့ language

✅ JavaScript မသုံးဘဲ expandable/collapsible content လုပ်နိုင်တယ်!

6. Complete Semantic Page Template

<!DOCTYPE html>
<html lang="my">
<head>
  <meta charset="UTF-8">
  <title>My 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 id="hero">
      <h2>Welcome!</h2>
      <p>Best website ever.</p>
    </section>

    <section id="blog">
      <h2>Latest Posts</h2>
      <article>
        <h3>Post 1</h3>
        <p>Content...</p>
      </article>
    </section>

    <aside>
      <h3>About Us</h3>
      <p>Sidebar content.</p>
    </aside>
  </main>

  <footer>
    <address>Email: hello@example.com</address>
    <p>&copy; 2024 My Website</p>
  </footer>

</body>
</html>

🎉 HTML Lessons အကုန် ပြီးပြီ!

HTML ကို မောင်းနှင်ပြီ! ဆက်ပြီး CSS → JavaScript သင်ပါ

🎨 CSS Lessons → 🚀 Back to Hub

← HTML 05  |  HTML Lessons Complete! ✅

📌 Study Checklist