HTML Part 2 — Website တစ်ခု တကယ်တည်ဆောက်ရာမှာ အသုံးများတဲ့ Cheat Sheet

Part 1 က Tag list ပုံစံဆိုရင် Part 2 ကတော့ Layout / SEO / Accessibility / Performance / Best Practice အခြေခံနဲ့ Production မျိုးမှာ တကယ်အသုံးများတဲ့ pattern တွေကို စုထားတာပါ။

1) Layout Patterns (Structure ကို ကောင်းကောင်းချ)

✅ Standard Page Skeleton

<header>
  <div class="brand">Logo</div>
  <nav aria-label="Primary">
    <a href="#home">Home</a>
    <a href="#posts">Posts</a>
    <a href="#about">About</a>
  </nav>
</header>

<main id="content">
  <article>
    <h1>Post Title</h1>
    <section>
      <h2>Section Title</h2>
      <p>Content...</p>
    </section>
  </article>

  <aside aria-label="Sidebar">
    <h3>Related</h3>
    <ul><li>Link</li></ul>
  </aside>
</main>

<footer>
  <small>© 2025</small>
</footer>

✅ “Card List” 구조 (Blog listing / Product list)

<section aria-label="Posts">
  <h2>Latest Posts</h2>

  <ul class="cards">
    <li class="card">
      <a href="post1.html">
        <h3>Post Title</h3>
        <p>Short description...</p>
        <time datetime="2025-12-17">17 Dec 2025</time>
      </a>
    </li>

    <li class="card">
      <a href="post2.html">
        <h3>Post Title</h3>
        <p>Short description...</p>
      </a>
    </li>
  </ul>
</section>

2) SEO & Social Share (Google + Facebook preview)

✅ Minimum SEO meta set

<title>Post Title | Knowledge Hub</title>
<meta name="description" content="ဒီ post အကြောင်း 1-2 စာကြောင်း အတိုချုပ်">
<link rel="canonical" href="https://example.com/posts/post-slug">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="Post Title">
<meta property="og:description" content="Short summary">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/posts/post-slug">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">

✅ Structured Data (Article JSON-LD)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Post Title",
  "author": { "@type": "Person", "name": "Yan Naing Lin" },
  "datePublished": "2025-12-17",
  "image": ["https://example.com/cover.jpg"],
  "mainEntityOfPage": "https://example.com/posts/post-slug"
}
</script>

3) Accessibility (Screen Reader friendly)

✅ Button icon only ဖြစ်ရင် aria-label ထည့်

<button aria-label="Close menu">
  <i class="fa-solid fa-xmark" aria-hidden="true"></i>
</button>

✅ Form label မရှိရင် မကောင်း (placeholder သာမယုံ)

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email" required>

✅ Skip link (Keyboard users)

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

✅ Image alt rule (အလွယ်ဆုံး)

<img src="bg-shape.png" alt="" aria-hidden="true">

<img src="profile.jpg" alt="Yan Naing Lin profile photo">

4) Form UX Patterns (Real world forms)

✅ Input group (error message + hint)

<label for="phone">Phone</label>
<input id="phone" type="tel" inputmode="numeric" placeholder="09xxxxxxx"
       aria-describedby="phoneHelp phoneErr">

<small id="phoneHelp">Format: 09xxxxxxxx</small>
<div id="phoneErr" role="alert">Invalid phone number</div>

✅ Better mobile keyboard (inputmode)

<input type="text" inputmode="numeric" placeholder="OTP Code">

✅ Autocomplete (login form မှာ user experience တက်)

<form>
  <label for="u">Username</label>
  <input id="u" name="username" autocomplete="username">

  <label for="p">Password</label>
  <input id="p" name="password" type="password" autocomplete="current-password">
</form>

5) Performance (Page မြန်အောင်)

✅ Script defer

<script src="app.js" defer></script>

✅ Image lazy loading + width/height

<img src="large.jpg" alt="cover" loading="lazy" width="1200" height="630">

✅ Font performance (optional)

<!-- Google font သုံးရင် (example) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

6) Security Basics (HTML မှာ လုပ်လို့ရတာ)

✅ External link ကို target=_blank သုံးရင် rel ထည့်

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open site
</a>

✅ Content Security Policy (meta method - basic)

<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src 'self' https: data:; style-src 'self' 'unsafe-inline';">

7) Ready Components (နမူနာ component များ)

✅ Breadcrumb

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/tech">Tech</a></li>
    <li aria-current="page">Marzban Guide</li>
  </ol>
</nav>

✅ Pagination

<nav aria-label="Pagination">
  <a href="?page=1">Prev</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">Next</a>
</nav>

✅ FAQ Accordion (details/summary)

<section aria-label="FAQ">
  <details>
    <summary>VPS ဆိုတာဘာလဲ?</summary>
    VPS = Virtual Private Server ...
  </details>
  <details>
    <summary>Bot ကို 24/7 run လို့ရလား?</summary>
    systemd service နဲ့ run လို့ရပါတယ်။
  </details>
</section>

8) Final Checklist (Publish မလုပ်ခင် စစ်ရန်)