Các thẻ HTML phổ biến

Ở bài trước, bạn đã biết cấu trúc cơ bản của HTML. Nhưng để tạo một trang web thực sự, bạn cần hiểu kỹ từng thẻ HTML và khi nào nên dùng nó. Bài này sẽ dạy bạn 4 nhóm thẻ phổ biến nhất: tiêu đề (heading), đoạn văn (paragraph), danh sách (list), và liên kết (link).

Sau bài này, bạn sẽ có thể tạo trang web với nội dung được sắp xếp rõ ràng, dễ đọc, và có liên kết để điều hướng.

Thẻ Heading (Tiêu đề) – h1 đến h6

Heading dùng để tạo tiêu đề trên trang web. HTML có 6 mức tiêu đề từ <h1> (lớn nhất) đến <h6> (nhỏ nhất).

<!-- h1: Tiêu đề chính, dùng một lần duy nhất trên một trang -->
<h1>Tìm hiểu lập trình web</h1>

<!-- h2: Tiêu đề phần chính -->
<h2>HTML là nền tảng</h2>

<!-- h3: Tiêu đề phần con -->
<h3>Cấu trúc HTML</h3>

<!-- h4, h5, h6: Tiêu đề cấp thấp hơn -->
<h4>Các phần của cấu trúc</h4>
<h5>Head tag</h5>
<h6>Meta tag</h6>

Hãy hình dung cấu trúc như một cuốn sách:

• <h1> = Tên sách (chỉ có một)
• <h2> = Chương (nhiều chương)
• <h3> = Mục con (nhiều mục trong một chương)
• <h4> đến <h6> = Tiêu đề phụ (ít dùng)

Quy tắc viết heading đúng cách

💡 Mẹo: Mỗi trang chỉ nên có một h1 duy nhất. Nó là tiêu đề chính của trang và giúp công cụ tìm kiếm (Google) hiểu nội dung trang là gì.

<!-- ✅ ĐÚNG: Cấu trúc logic -->
<h1>Blog lập trình của tôi</h1>
  <h2>Chuyên mục PHP</h2>
    <h3>Bài 1: PHP cơ bản</h3>
    <h3>Bài 2: Biến và kiểu dữ liệu</h3>
  <h2>Chuyên mục JavaScript</h2>
    <h3>Bài 1: JS là gì</h3>

<!-- ❌ SAI: Nhảy cấp không logic (h1 → h3) -->
<h1>Blog lập trình của tôi</h1>
<h3>Nội dung</h3> <!-- Thiếu h2 ở giữa -->

Thẻ Paragraph (Đoạn văn) – p

Thẻ <p> dùng để viết đoạn văn thông thường. Mỗi <p> sẽ tạo một dòng trắng (khoảng cách) tự động trước và sau nó.

<!-- Ví dụ: Viết về một người nổi tiếng -->
<h1>Steve Jobs</h1>

<p>Steve Jobs là người sáng lập công ty Apple. Ông sinh năm 1955 và là một trong những nhân vật có ảnh hưởng nhất đến công nghệ hiện đại.</p>

<p>Jobs nổi tiếng vì khả năng thiết kế sản phẩm tuyệt vời. Ông đã đưa ra iPhone, iPad, và nhiều sản phẩm khác mà thay đổi thế giới.</p>

<p>Mặc dù qua đời năm 2011, di sản của Jobs vẫn sống mãi qua các sản phẩm Apple.</p>

Định dạng trong paragraph

Bạn có thể thêm định dạng bên trong <p> để nhấn mạnh hoặc tạo kiểu chữ:

<!-- Ví dụ kết hợp nhiều thẻ -->
<p>
  <strong>Lập trình</strong> là kỹ năng <em>vô cùng</em> quan trọng. 
  Nếu bạn muốn <mark>trở thành lập trình viên</mark>, 
  hãy bắt đầu với <code>Hello, World!</code>
</p>

⚠️ Cảnh báo: <strong> và <em> có ý nghĩa ngữ nghĩa (giúp công cụ tìm kiếm và trình đọc màn hình hiểu). <b> và <i> chỉ là định dạng bề ngoài. Ưu tiên dùng <strong> và <em>.

Thẻ Danh sách (List) – ul, ol, li

Danh sách dùng để liệt kê các mục theo thứ tự hoặc không thứ tự. HTML có 2 loại danh sách:

1. Danh sách không thứ tự (Unordered List) – ul

Dùng khi thứ tự không quan trọng. Các mục sẽ có dấu bullet (•) phía trước.

<!-- Ví dụ: Liệt kê công việc hôm nay -->
<h2>Việc cần làm hôm nay</h2>
<ul>
  <li>Học HTML</li>
  <li>Làm bài tập CSS</li>
  <li>Ôn tập JavaScript</li>
  <li>Ngủ trước 11 giờ</li>
</ul>

Kết quả hiển thị:

• Học HTML
• Làm bài tập CSS
• Ôn tập JavaScript
• Ngủ trước 11 giờ

2. Danh sách có thứ tự (Ordered List) – ol

Dùng khi thứ tự quan trọng. Các mục sẽ được đánh số 1, 2, 3… tự động.

<!-- Ví dụ: Hướng dẫn tạo tài khoản -->
<h2>Các bước tạo tài khoản Gmail</h2>
<ol>
  <li>Truy cập google.com</li>
  <li>Nhấp vào "Tạo tài khoản"</li>
  <li>Điền họ và tên</li>
  <li>Chọn tên người dùng</li>
  <li>Tạo mật khẩu</li>
  <li>Hoàn tất xác minh</li>
</ol>

Kết quả hiển thị:

1. Truy cập google.com
2. Nhấp vào “Tạo tài khoản”
3. Điền họ và tên
4. Chọn tên người dùng
5. Tạo mật khẩu
6. Hoàn tất xác minh

Danh sách lồng nhau (Nested List)

Bạn có thể lồng danh sách bên trong danh sách khác để tạo cấu trúc phân cấp:

<!-- Ví dụ: Cấu trúc ngôn ngữ lập trình -->
<h2>Ngôn ngữ lập trình</h2>
<ul>
  <li>Frontend (Hiển thị giao diện)
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend (Xử lý dữ liệu)
    <ul>
      <li>PHP</li>
      <li>Python</li>
      <li>Java</li>
    </ul>
  </li>
</ul>

Kết quả hiển thị:

• Frontend (Hiển thị giao diện)
  • HTML
  • CSS
  • JavaScript
• Backend (Xử lý dữ liệu)
  • PHP
  • Python
  • Java

Thẻ Liên kết (Link) – a

Thẻ <a> (anchor) dùng để tạo liên kết đến trang web khác, trang khác trên cùng website, hoặc gửi email. Đây là thẻ quan trọng nhất để kết nối các trang web với nhau.

1. Liên kết đến trang web khác

<!-- Liên kết đơn giản -->
<p>Tìm hiểu thêm tại <a href="https://www.google.com">Google</a></p>

<!-- Liên kết mở tab mới -->
<p>Xem bài viết tại <a href="https://blog.example.com" target="_blank">blog của tôi</a></p>

<!-- Liên kết với chữ mô tả (title) khi di chuột -->
<a href="https://www.wikipedia.org" title="Bách khoa toàn thư">Wikipedia</a>

Giải thích các thuộc tính:

2. Liên kết nội bộ (trong cùng website)

Khi liên kết đến trang khác trong website của bạn, dùng đường dẫn tương đối (relative path) để tiện bảo trì:

<!-- Cấu trúc thư mục -->
<!--
/website/
  ├── index.html
  ├── about.html
  └── blog/
      └── post1.html
-->

<!-- Từ index.html, liên kết đến about.html -->
<a href="about.html">Về tôi</a>

<!-- Từ index.html, liên kết đến post1.html (trong thư mục blog) -->
<a href="blog/post1.html">Bài viết 1</a>

<!-- Từ post1.html, liên kết ngược lên index.html -->
<a href="../index.html">Trang chủ</a>

3. Liên kết gửi email

<!-- Liên kết gửi email -->
<p>Liên hệ tôi: <a href="mailto:minh@email.com">minh@email.com</a></p>

<!-- Liên kết gửi email với tiêu đề mặc định -->
<a href="mailto:support@example.com?subject=Trợ giúp">Gửi email cho support</a>

4. Liên kết nội bộ (anchors)

Dùng để nhảy đến một vị trí cụ thể trên trang:

<!-- Tạo mục tiêu (target) -->
<h2 id="phan-2">Phần 2: Nội dung chính</h2>

<!-- Liên kết tới mục tiêu đó -->
<a href="#phan-2">Bỏ qua đến Phần 2</a>

<!-- Hoặc liên kết từ trang khác -->
<a href="page.html#phan-2">Xem Phần 2 của trang</a>

Ví dụ trang web hoàn chỉnh

Hãy xem một trang web thực tế kết hợp tất cả các thẻ đã học:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Học Lập Trình</title>
</head>
<body>

  <!-- Tiêu đề chính -->
  <h1>Blog Học Lập Trình</h1>

  <!-- Mô tả blog -->
  <p>Chào mừng bạn đến với blog <strong>lập trình cho người mới bắt đầu</strong>. 
     Tại đây tôi chia sẻ những bài học <em>dễ hiểu</em> và <em>thực tế</em>.</p>

  <!-- Danh sách bài viết -->
  <h2>Bài viết gần đây</h2>
  <ul>
    <li><a href="bai-1-html-la-gi.html">Bài 1: HTML là gì?</a></li>
    <li><a href="bai-2-the-html.html">Bài 2: Các thẻ HTML phổ biến</a></li>
    <li><a href="bai-3-css-co-ban.html">Bài 3: CSS cơ bản</a></li>
  </ul>

  <!-- Hướng dẫn bước< -->
  <h2>3 bước để bắt đầu lập trình</h2>
  <ol>
    <li><strong>Học HTML:</strong> Tạo cấu trúc trang web</li>
    <li><strong>Học CSS:</strong> Làm đẹp trang web</li>
    <li><strong>Học JavaScript:</strong> Thêm tương tác cho trang web</li>
  </ol>

  <!-- Liên hệ -->
  <h2>Liên hệ</h2>
  <p>Có câu hỏi? <a href="mailto:support@blog.com">Gửi email cho tôi</a></p>
  <p>Theo dõi tôi tại <a href="https://facebook.com/myblog" target="_blank">Facebook</a></p>

</body>
</html>

Quy tắc viết danh sách và liên kết đúng cách

💡 Mẹo: Để giúp người dùng biết liên kết đó dẫn đến đâu, hãy dùng chữ mô tả rõ ràng thay vì chỉ viết “click here” (nhấp vào đây).

<!-- ❌ SAI: Chữ mô tả không rõ -->
<p>Tìm hiểu thêm <a href="tutorial.html">tại đây</a></p>

<!-- ✅ ĐÚNG: Chữ mô tả rõ ràng -->
<p><a href="tutorial.html">Hướng dẫn học HTML chi tiết</a></p>

⚠️ Cảnh báo: Không bao giờ lồng các thẻ <a> vào nhau. Ví dụ sai: <a href="...">Click <a href="...">here</a></a>.

Tóm tắt

• ✅ Heading (h1–h6): Tạo tiêu đề theo mức độ quan trọng
• ✅ h1 duy nhất: Mỗi trang chỉ nên có một h1
• ✅ Paragraph (<p>): Viết đoạn văn thông thường
• ✅ Định dạng: <strong>, <em>, <mark> để nhấn mạnh
• ✅ Unordered List (<ul>): Danh sách không thứ tự (bullet)
• ✅ Ordered List (<ol>): Danh sách có thứ tự (số)
• ✅ Link (<a>): Liên kết đến trang khác, email, hoặc vị trí trên trang
• ✅ target=”_blank”: Mở liên kết trong tab mới
• ✅ Anchors (#id): Nhảy đến vị trí cụ thể trên trang

🎯 Bài tập thực hành

Bài tập 1: Tạo trang web về một cuốn sách yêu thích của bạn với:

• h1 là tên sách
• h2 cho các phần: “Tác giả”, “Tóm tắt”, “Các nhân vật chính”
• Ít nhất 2 đoạn <p> mô tả nội dung sách
• Danh sách không thứ tự liệt kê 3 nhân vật chính
• Liên kết đến trang Wikipedia hoặc bán sách online (target=”_blank”)

Bài tập 2: Tạo trang “Hướng dẫn làm món ăn yêu thích” với:

• h1 là tên món ăn
• h2 cho “Nguyên liệu” và “Cách làm”
• Danh sách không thứ tự cho nguyên liệu
• Danh sách có thứ tự cho các bước làm
• Ít nhất 2 từ đậm và 2 từ nghiêng

Bài tập 3: Tạo trang “Mục lục” cho một blog với:

• h1 là “Mục lục blog”
• h2 cho các chuyên mục (VD: “HTML”, “CSS”, “JavaScript”)
• Dưới mỗi h2, tạo danh sách các bài viết (dùng <a href="#">)
• Tạo các anchor (id) ở cuối trang để liên kết nhảy đến đúng vị trí

Chúc bạn thành công! 🚀