Các thẻ nội dung thường dùng trong HTML

1. Thẻ tiêu đề (heading)

HTML cung cấp sáu cấp độ tiêu đề: từ h1 đến h6, trong đó h1 là tiêu đề lớn nhất, quan trọng nhất và h6 là nhỏ nhất.

<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>

Tiêu đề dùng để tổ chức nội dung thành từng phần rõ ràng. Trong một trang web, thường chỉ nên có một thẻ h1 đại diện cho tiêu đề chính của trang.

2. Thẻ đoạn văn (paragraph)

Dùng thẻ <p> để viết đoạn văn. Trình duyệt tự động ngắt dòng trước và sau mỗi đoạn.

<p>Đây là một đoạn văn mô tả thông tin sản phẩm.</p>

Trong đoạn văn, có thể làm nổi bật chữ bằng:

  • <strong>: in đậm, nhấn mạnh
  • <em>: in nghiêng, mang nghĩa nhấn mạnh nhẹ
  • <mark>: làm nổi bật bằng nền màu vàng

Ví dụ:

<p>Sản phẩm này có <strong>giá tốt</strong> và <em>dễ sử dụng</em>.</p>

3. Thẻ liên kết (anchor)

Thẻ <a> được dùng để tạo liên kết đến trang khác hoặc điều hướng trong cùng trang.

Cú pháp:

<a href="https://algonest.io.vn">Trang học lập trình</a>

Thuộc tính quan trọng:

  • href: địa chỉ liên kết
  • target="_blank": mở liên kết trong tab mới
<a href="https://google.com" target="_blank">Mở Google trong tab mới</a>

4. Thẻ hình ảnh (image)

Thẻ <img> dùng để hiển thị ảnh. Đây là thẻ tự đóng, không có thẻ kết thúc.

Cú pháp:

<img src="avatar.jpg" alt="Ảnh đại diện">

Thuộc tính:

  • src: đường dẫn đến file ảnh
  • alt: mô tả ảnh khi không tải được, cũng dùng cho SEO và accessibility
  • width, height: có thể điều chỉnh kích thước

5. Thẻ danh sách

Có hai loại danh sách:

Danh sách không thứ tự – dùng thẻ <ul>:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Danh sách có thứ tự – dùng thẻ <ol>:

<ol>
  <li>Bật máy tính</li>
  <li>Mở trình duyệt</li>
  <li>Học HTML</li>
</ol>

Mỗi mục trong danh sách được bao bởi thẻ <li> (list item).

6. Thẻ ngắt dòng và kẻ ngang

  • <br>: ngắt dòng
  • <hr>: kẻ một đường ngang phân cách nội dung
<p>Dòng đầu<br>Dòng tiếp theo</p>
<hr>

7. Gợi ý cách tổ chức nội dung

Khi viết trang HTML có nội dung nhiều phần, nên:

  • Dùng h1 cho tiêu đề chính
  • Dùng h2, h3 cho tiêu đề phụ
  • Dùng p cho các đoạn mô tả
  • Dùng ul hoặc ol cho danh sách
  • Dùng a để liên kết nội bộ hoặc liên kết ngoài
  • Dùng img để hiển thị ảnh minh họa

8. Bài thực hành

Tạo một file gioithieu.html với nội dung sau:

  • Tiêu đề chính của trang là “Giới thiệu bản thân”
  • Một đoạn văn giới thiệu bạn là ai, đang học gì
  • Một ảnh minh họa (có thể dùng ảnh bất kỳ)
  • Một danh sách các kỹ năng đang học
  • Một liên kết đến trang blog hoặc trang yêu thích

Gợi ý:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Giới thiệu bản thân</title>
  </head>
  <body>
    <h1>Giới thiệu bản thân</h1>
    <p>Tôi là Nam, đang học lập trình Frontend tại Algonest.</p>
    <img src="avatar.jpg" alt="Ảnh đại diện">
    
    <h2>Kỹ năng hiện tại</h2>
    <ul>
      <li>HTML cơ bản</li>
      <li>Viết cấu trúc trang web</li>
      <li>Sử dụng thẻ liên kết và ảnh</li>
    </ul>
    
    <p>Tham khảo thêm tại <a href="https://algonest.io.vn" target="_blank">Algonest</a></p>
  </body>
</html>

Bài tiếp theo sẽ học về Semantic HTML, tức là cách sử dụng đúng các thẻ mang ý nghĩa rõ ràng trong tổ chức nội dung như header, nav, section, article, aside, footer để xây dựng giao diện đúng chuẩn và dễ bảo trì.