Dự án: trang tin tức

Dự án trước là trang web bán hàng (nhiều sản phẩm nhỏ). Lần này đổi món: một trang bài báo - chủ yếu là MỘT bài viết dài. Bố cục vì thế khác hẳn, và sẽ dùng tới vài thẻ semantic mà trang bán hàng chưa đụng. Cùng nhìn bản đồ trang trước:

• ▸Cả bài báo nằm trong MỘT article lớn.
• ▸article có header riêng bên trong (tựa, tác giả, ngày đăng).
• ▸Kèm breadcrumb (nav) và aside "tin liên quan".

Vì cả bài là một mẩu nội dung độc lập, ta bọc nó trong một <article>. Phần mở đầu của bài (tựa, tác giả, ngày đăng) gom vào một <header> - đặt bên trong article, không phải header đầu trang.

<article>
  <header>
    <h1>Mèo con đầu tiên tốt nghiệp lớp HTML</h1>
    <p>Tác giả: Mun · <time datetime="2026-06-01">ngày 1 tháng 6, 2026</time></p>
  </header>

  <!-- thân bài ở đây -->
</article>

Ngày đăng là thông tin quan trọng của một bài báo. Đánh dấu nó bằng <time>. Mẹo hay: phần chữ bên trong viết cho người đọc thoải mái, còn thuộc tính datetime ghi theo định dạng chuẩn cho máy đọc chính xác.

<time datetime="2026-06-01">ngày 1 tháng 6, 2026</time>

Dù mèo con viết ngày bằng lời kiểu gì ("mùng 1/6", "1 tháng 6"…), máy vẫn hiểu đúng nhờ datetime="2026-06-01" theo chuẩn năm-tháng-ngày. Đây chính là kiểu đánh dấu giúp Google biết bài đăng ngày nào.

• ▸time đánh dấu một mốc thời gian.
• ▸Chữ bên trong: cho người đọc; datetime: cho máy đọc theo chuẩn.
• ▸Định dạng datetime ngày: năm-tháng-ngày (vd 2026-06-01).

Thân bài dài nên chia thành các <section> theo mục, mỗi mục một h2. Phía trên cùng đặt breadcrumb - đường dẫn phân cấp cho biết bài nằm ở đâu - bằng một nav bọc danh sách có thứ tự ol. Bên lề là <aside> cho "tin liên quan".

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Trang chủ</a></li>
    <li><a href="/tin-tuc">Tin tức</a></li>
    <li>Mèo con tốt nghiệp</li>
  </ol>
</nav>

<article>
  <header>…</header>
  <section>
    <h2>Chuyện gì đã xảy ra</h2>
    <p>…</p>
  </section>
  <aside>
    <h2>Tin liên quan</h2>
    <ul>
      <li><a href="#">Mèo con tập bơi</a></li>
    </ul>
  </aside>
</article>

• ▸Thân bài chia section theo mục, mỗi section một h2.
• ▸Breadcrumb = nav bọc ol (có thứ tự); cấp cuối thường không phải link.
• ▸aside chứa "tin liên quan" - nội dung phụ bên lề bài.

Để ý điều hay: mèo con không cần nói riêng với Google "đây là bài báo". Chính cách đánh dấu đã nói hộ: article = một bài, header + h1 = tựa, time datetime = ngày đăng, tên tác giả nằm trong header. Semantic đúng là tự khai báo nội dung.

Trước khi coi là xong, chạy checklist tự kiểm:

• ▸Cả bài nằm trong một article; article có header riêng (h1 + tác giả + time).
• ▸time có datetime đúng chuẩn năm-tháng-ngày.
• ▸Thân bài chia section, mỗi section có h2; chỉ một h1.
• ▸Breadcrumb bằng nav + ol; tin liên quan bằng aside.
• ▸head có title + meta description (đã học ở bài SEO).