HTML

HTML Layout

Cấu trúc semantic HTML5: header, main, article, aside, footer, nav, section.

Sơ đồ tổng quan

Sơ đồ cấu trúc HTML5: header, nav, section, article, aside, footer

Thẻ	Mô tả
`<header>`	Tiêu đề/đầu trang của tài liệu hoặc một vùng
`<nav>`	Bộ chứa các liên kết điều hướng
`<section>`	Một vùng nội dung trong tài liệu
`<article>`	Một bài viết độc lập, có thể tái sử dụng
`<aside>`	Nội dung bên lề (sidebar, ads)
`<footer>`	Chân trang/cuối một vùng
`<details>`	Khối collapse hiển thị chi tiết thêm
`<summary>`	Tiêu đề cho phần tử `<details>`

Skeleton chuẩn

html
<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Trang chủ</title>
  </head>
  <body>
    <header>...</header>
    <nav>...</nav>
    <main>
      <article>
        <section>...</section>
      </article>
      <aside>...</aside>
    </main>
    <footer>...</footer>
  </body>
</html>

Khi nào dùng tag nào?

<header> — đầu trang hoặc đầu section (logo, tiêu đề).
<nav> — khối link điều hướng chính.
<main> — nội dung chính, mỗi trang chỉ 1.
<article> — block độc lập (post, comment, card sản phẩm).
<section> — nhóm nội dung liên quan, có heading.
<aside> — nội dung phụ (sidebar, ads).
<footer> — chân trang/section.

Heading hierarchy

Mỗi trang nên có 1 <h1>, các heading sau xuống dần (h2 → h3 → h4) — KHÔNG nhảy cấp. Có lợi cho SEO và screen reader.

✅Đừng dùng heading để style — dùng CSS. Dùng heading vì nghĩa cấu trúc.

Accessibility quick wins

Mọi <img> đều có alt. Decorative thì alt="".
Form input có <label for="...">.
Button thật sự là <button>, không phải <div onClick>.
Dùng aria-label cho icon-only button.