Bài 1. HTML ngữ nghĩa

Khái niệm và lý thuyết

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu, không phải ngôn ngữ lập trình: nó dùng các thẻ để gắn nhãn ý nghĩa cho nội dung. Một phần tử gồm thẻ mở, nội dung, thẻ đóng; thẻ có thể kèm thuộc tính như href, src, alt. Các thẻ lồng nhau tạo thành cây, và trình duyệt dựng cây đó để hiển thị.

Ngữ nghĩa nghĩa là chọn thẻ theo ý nghĩa chứ không theo hình dạng. Công cụ tìm kiếm dựa vào h1, article, nav để hiểu trang; trình đọc màn hình dùng chúng để người khiếm thị nhảy nhanh giữa các vùng. Trang chỉ toàn div trông giống hệt nhưng "câm" với các công cụ này.

Hai nhóm thẻ: khối (block) như p, div, h1 chiếm cả hàng và xếp chồng; dòng (inline) như a, span, strong nằm trong dòng chữ. Hiểu hai nhóm này là chìa khóa để hiểu CSS bố cục ở các bài sau.

Khung trang chuẩn

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Trang của tôi</title>
</head>
<body>
  ...
</body>
</html>

Thẻ bố cục ngữ nghĩa

<body>
  <header><h1>Tự Học Tin</h1><nav><a href="/">Trang chủ</a></nav></header>
  <main>
    <article>
      <h2>Bài 1</h2>
      <p>Nội dung...</p>
    </article>
    <aside>Bài liên quan</aside>
  </main>
  <footer>© 2026</footer>
</body>

Tiêu đề và văn bản

Mỗi trang một h1; các mục con dùng h2, h3 theo thứ bậc, không chọn thẻ chỉ để chữ to nhỏ (việc đó của CSS). Các thẻ văn bản hay dùng: p, strong (quan trọng), em (nhấn), ul/ol/li, a, blockquote, code.