Biết đúng thẻ HTML là nền tảng để viết code sạch và thân thiện với SEO. Bài viết này tổng hợp toàn bộ các thẻ HTML cơ bản kèm ví dụ thực tế — từ thẻ văn bản, danh sách, liên kết, bảng, form đến thẻ semantic HTML5.
Nếu bạn chưa biết HTML là gì, hãy đọc HTML là gì? trước khi tiếp tục.
Thẻ HTML là gì?
Thẻ HTML (HTML tag) là các thành phần cơ bản tạo nên trang web. Mỗi thẻ xác định một loại nội dung cụ thể. Hầu hết các thẻ có dạng mở <tag> và đóng </tag>.
Thẻ cấu trúc trang
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Tiêu đề trang</title>
</head>
<body>
<!-- Nội dung trang web ở đây -->
</body>
</html>Thẻ semantic HTML5
Thẻ semantic giúp trình duyệt và Google hiểu rõ cấu trúc trang hơn so với chỉ dùng <div>:
<header>Phần đầu trang (logo, menu)</header>
<nav>Thanh điều hướng</nav>
<main>Nội dung chính</main>
<section>Một phần/mục của trang</section>
<article>Bài viết độc lập</article>
<aside>Nội dung phụ (sidebar)</aside>
<footer>Phần cuối trang</footer>Google ưu tiên các trang dùng thẻ semantic đúng cách trong kết quả tìm kiếm.
Thẻ văn bản
Thẻ tiêu đề (h1 – h6)
<h1>Tiêu đề cấp 1 (quan trọng nhất, dùng 1 lần/trang)</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6 (nhỏ nhất)</h6>Thẻ đoạn văn và trang trí chữ
<p>Đây là đoạn văn bản (paragraph).</p>
<strong>Chữ in đậm (quan trọng về mặt ngữ nghĩa)</strong>
<em>Chữ in nghiêng (nhấn mạnh)</em>
<br>
<hr>
<blockquote>Trích dẫn từ nguồn khác</blockquote>
<code>Code inline</code>Thẻ danh sách
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Bước 1: Học HTML</li>
<li>Bước 2: Học CSS</li>
<li>Bước 3: Học JavaScript</li>
</ol>Dùng <ul> khi thứ tự không quan trọng, dùng <ol> khi thứ tự có ý nghĩa (các bước hướng dẫn, xếp hạng...).
Thẻ liên kết và hình ảnh
<a href="https://google.com">Truy cập Google</a>
<a href="https://google.com" target="_blank" rel="noopener">Google (mở tab mới)</a>
<img src="anh.jpg" alt="Mô tả hình ảnh" width="600" height="400">Thuộc tính rel="noopener" cần có khi dùng target="_blank" để đảm bảo bảo mật. Thuộc tính alt trên ảnh giúp cải thiện SEO và hỗ trợ người dùng khiếm thị.
Thẻ bảng (table)
<table>
<thead>
<tr>
<th>Họ tên</th>
<th>Tuổi</th>
<th>Ngành</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn Minh</td>
<td>20</td>
<td>CNTT</td>
</tr>
</tbody>
</table>Thẻ form (biểu mẫu)
<form action="/dang-ky" method="POST">
<label for="ten">Họ tên:</label>
<input type="text" id="ten" name="ho_ten" placeholder="Nhập họ tên" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Nhập email" required>
<label for="mat-khau">Mật khẩu:</label>
<input type="password" id="mat-khau" name="password" required>
<label for="gioi-tinh">Giới tính:</label>
<select id="gioi-tinh" name="gioi_tinh">
<option value="nam">Nam</option>
<option value="nu">Nữ</option>
</select>
<button type="submit">Đăng ký</button>
</form>Câu hỏi thường gặp
Có cần nhớ hết tất cả thẻ HTML không?
Không. Chỉ cần nắm chắc các thẻ dùng nhiều nhất: <p>, <h1>–<h6>, <a>, <img>, <div>, <ul>, <ol>. Những thẻ ít gặp hơn, tra cứu khi cần là đủ.
div và section khác nhau thế nào?
<div> là container thuần túy, không mang ý nghĩa ngữ nghĩa. <section> là thẻ semantic — đánh dấu một phần nội dung có chủ đề rõ ràng, tốt hơn cho SEO.
Bước tiếp theo
- Ôn lại HTML cơ bản → HTML là gì? Hướng dẫn HTML cơ bản
- Học CSS — tạo giao diện đẹp cho trang HTML → CSS là gì? Cách tạo style cho trang web
