1.1 Lý thuyết: Cấu trúc trang HTML

HTML là gì?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu mô tả cấu trúc và nội dung của trang web: đâu là tiêu đề, đoạn văn, ảnh, liên kết... Trình duyệt đọc HTML và hiển thị thành trang web. HTML lo phần nội dung, CSS lo phần trình bày, JavaScript lo phần tương tác.

Công cụ cần có

- Trình soạn thảo: VS Code, cài thêm tiện ích Live Server để tự tải lại trang khi lưu. - Trình duyệt: Chrome hoặc Firefox, mở DevTools bằng F12 để xem và sửa thử HTML, CSS.

Khung trang HTML chuẩn

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang của tôi</title>
  </head>
  <body>
    <h1>Xin chào!</h1>
    <p>Đây là trang web đầu tiên của tôi.</p>
  </body>
</html>

- <!DOCTYPE html>: báo đây là HTML5. - <html lang="vi">: phần tử gốc, lang giúp trình đọc màn hình và công cụ tìm kiếm biết ngôn ngữ. - <head>: thông tin về trang, không hiển thị trực tiếp (bảng mã, tiêu đề tab, liên kết CSS). - <meta charset="UTF-8">: hiển thị đúng tiếng Việt. - <meta name="viewport">: bắt buộc để trang hiển thị đúng trên điện thoại. - <body>: toàn bộ nội dung hiển thị.

Trong VS Code, gõ ! rồi nhấn Tab để sinh nhanh khung này.

Thẻ và phần tử

Phần lớn thẻ đi theo cặp mở và đóng, nội dung nằm giữa. Một số thẻ rỗng không có thẻ đóng như <img>, <br>, <hr>, <input>, <meta>.

<p>Đây là một <strong>đoạn văn</strong> có chữ đậm.</p>
<br>
<hr>

Các thẻ có thể lồng nhau nhưng phải đóng đúng thứ tự: mở sau thì đóng trước.

Thuộc tính

Thuộc tính bổ sung thông tin cho thẻ, viết trong thẻ mở dạng ten="gia tri".

<a href="https://kavoria.vn" target="_blank">Kavoria</a>
<img src="avatar.jpg" alt="Ảnh đại diện" width="120">
<p id="gioi-thieu" class="noi-bat">...</p>

- id: định danh duy nhất trong trang. - class: nhóm phần tử để tạo kiểu bằng CSS, một phần tử có thể có nhiều class cách nhau bằng dấu cách.

Thẻ tiêu đề và đoạn văn

Có 6 cấp tiêu đề từ <h1> đến <h6>. Mỗi trang chỉ nên có một <h1>, các cấp dùng theo thứ tự không nhảy cóc. Đừng chọn thẻ tiêu đề chỉ vì muốn chữ to, kích thước là việc của CSS.

Thẻ ngữ nghĩa (semantic)

Thẻ ngữ nghĩa mô tả vai trò của từng vùng nội dung, giúp SEO tốt hơn, hỗ trợ trình đọc màn hình và code dễ đọc hơn so với dùng toàn <div>.

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <section>
      <h2>Kinh nghiệm</h2>
      <article>...</article>
    </section>
    <aside>Thông tin phụ</aside>
  </main>
  <footer>© 2026</footer>
</body>

- header: phần đầu trang hoặc đầu một khối. - nav: thanh điều hướng. - main: nội dung chính, mỗi trang một main. - section: một phần nội dung theo chủ đề, thường có tiêu đề. - article: nội dung độc lập (bài viết, sản phẩm). - aside: nội dung phụ, bên lề. - footer: chân trang. - div và span: thẻ không mang nghĩa, chỉ dùng để nhóm khi không có thẻ ngữ nghĩa phù hợp (div là khối, span là nội dòng).

Ghi nhớ

- Luôn có DOCTYPE, charset UTF-8 và viewport. - Chọn thẻ theo ý nghĩa nội dung, không theo cách hiển thị. - Thụt lề các thẻ lồng nhau để dễ đọc.