Semantic HTML là gì? Tại sao quan trọng?

Semantic HTML là dùng thẻ mô tả đúng vai trò nội dung thay vì <div>/<span> trung tính.

<!-- không semantic -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="post">...</div>
</div>

<!-- semantic -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

Bốn lý do nó đáng giá:
1. Accessibility — screen reader nhảy thẳng tới landmark (main, nav, header); với <div> thì không có gì để nhảy tới.
2. SEO — search engine hiểu đâu là nội dung chính, đâu là điều hướng.
3. Bảo trì — đọc cấu trúc là hiểu, không phải dò tên class.
4. Hành vi mặc định — <button> có sẵn focus, Enter/Space, trạng thái disabled; <div onclick> phải tự làm lại tất cả.

Chốt: thẻ semantic bị hỏi nhiều nhất trong phỏng vấn không phải <article> mà là <button> vs <div onclick> — trả lời được ý số 4 là ăn điểm.