Các thẻ HTML cơ bản cần biết

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>.

Bài viết này tổng hợp tất cả các thẻ HTML cơ bản mà người mới cần biết. Nếu bạn cần ôn lại khái niệm HTML, hãy đọc HTML là gì?

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

<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)</strong>
<em>Chữ in nghiêng (nhấn mạnh)</em>
<br> <!-- Xuống dòng -->
<hr> <!-- Đường kẻ ngang -->
<blockquote>Trích dẫn từ nguồn khác</blockquote>
<code>Code inline</code>

Thẻ danh sách

<!-- Danh sách không thứ tự -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Danh sách có thứ tự -->
<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>

Thẻ liên kết và hình ảnh

<!-- Liên kết cơ bản -->
<a href="https://google.com">Truy cập Google</a>

<!-- Mở tab mới -->
<a href="https://google.com" target="_blank" rel="noopener">Google (tab mới)</a>

<!-- Hình ảnh -->
<img src="anh.jpg" alt="Mô tả hình ảnh" width="600" height="400">

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 (FAQ)

Hỏi: Có cần nhớ hết tất cả thẻ HTML không?

Trả lời: Không. Chỉ cần nhớ các thẻ hay dùng (p, h1-h6, a, img, div, ul, ol). Còn lại tra cứu khi cần.

Hỏi: div và section khác nhau thế nào?

Trả lời: <div> là container không có ý nghĩa. <section> là thẻ semantic — đánh dấu một phần nội dung có ý nghĩa.

Bước tiếp theo

Ôn lại HTML cơ bản → HTML là gì?
Học CSS → CSS là gì? Cách tạo style cho trang web