Các Thẻ Trong HTML5: Danh Sách Đầy Đủ và Cách Sử Dụng

HTML5 (HyperText Markup Language phiên bản 5) là ngôn ngữ đánh dấu chuẩn được sử dụng để tạo cấu trúc cho trang web. Trong HTML5, có hơn 100 thẻ khác nhau, mỗi thẻ có nhiệm vụ riêng để hiển thị và tổ chức nội dung. Bài viết này sẽ tổng hợp các nhóm thẻ HTML5 thông dụng, kèm theo ví dụ cụ thể.

1. Thẻ Cấu Trúc Trang (Structural Tags)

HTML5 bổ sung nhiều thẻ giúp cấu trúc trang rõ ràng và chuẩn SEO hơn.

Thẻ	Chức năng	Ví dụ
<header>	Khu vực đầu trang hoặc đầu một phần nội dung	<header><h1>Tiêu đề</h1></header>
<nav>	Thanh điều hướng chứa menu liên kết	<nav><a href=”/”>Trang chủ</a></nav>
<main>	Nội dung chính của trang	<main>…</main>
<section>	Một phần nội dung có liên quan	<section><h2>Giới thiệu</h2></section>
<article>	Nội dung độc lập, như một bài báo	<article><h2>Bài viết</h2></article>
<aside>	Nội dung bên lề (sidebar)	<aside>Quảng cáo</aside>
<footer>	Chân trang	<footer>Bản quyền 2025</footer>

2. Thẻ Văn Bản (Text Content)

Dùng để định dạng và hiển thị nội dung chữ.

Thẻ	Chức năng	Ví dụ
<h1> → <h6>	Tiêu đề từ lớn đến nhỏ	<h1>Tiêu đề chính</h1>
<p>	Đoạn văn	<p>Đây là một đoạn văn bản.</p>
<span>	Nhóm nội dung nhỏ trong dòng	<span style=”color:red”>Đỏ</span>
<br>	Xuống dòng	Xin chào<br>Thế giới
<hr>	Kẻ đường ngang	<hr>
<strong>	Chữ in đậm (quan trọng)	<strong>Cảnh báo!</strong>
<em>	Chữ in nghiêng (nhấn mạnh)	<em>Quan trọng</em>

3. Thẻ Liên Kết và Ảnh

Kết nối các trang và hiển thị hình ảnh.

Thẻ	Chức năng	Ví dụ
<a>	Liên kết	<a href=”http://xelovio.com”>Xem thêm</a>
<img>	Chèn ảnh	<img src=”anh.jpg” alt=”Mô tả ảnh”>
<figure>	Bao ảnh và chú thích	<figure><img src=”anh.jpg”><figcaption>Mô tả</figcaption></figure>

4. Thẻ Danh Sách

Tạo danh sách nội dung.

Thẻ	Chức năng	Ví dụ
<ul>	Danh sách không thứ tự	<ul><li>Mục 1</li></ul>
<ol>	Danh sách có thứ tự	<ol><li>Bước 1</li></ol>
<li>	Mục danh sách	<li>Nội dung</li>
<dl>	Danh sách mô tả	<dl><dt>HTML</dt><dd>Ngôn ngữ đánh dấu</dd></dl>

5. Thẻ Bảng (Table)

Tạo bảng dữ liệu.

Thẻ	Chức năng	Ví dụ
<table>	Tạo bảng	<table>…</table>
<tr>	Hàng	<tr><td>A</td></tr>
<td>	Ô dữ liệu	<td>Giá trị</td>
<th>	Ô tiêu đề	<th>Tiêu đề</th>
<thead>	Phần đầu bảng	<thead>…</thead>
<tbody>	Phần thân bảng	<tbody>…</tbody>
<tfoot>	Chân bảng	<tfoot>…</tfoot>

6. Thẻ Form và Nhập Liệu

HTML5 bổ sung nhiều loại input mới.

Thẻ	Chức năng	Ví dụ
<form>	Tạo form	<form action=”xu-ly.php”>…</form>
<input>	Ô nhập dữ liệu	<input type=”text”>
<textarea>	Ô nhập nhiều dòng	<textarea></textarea>
<button>	Nút bấm	<button>Gửi</button>
<select>	Danh sách chọn	<select><option>A</option></select>
<label>	Nhãn cho input	<label for=”ten”>Tên:</label>

Các type mới trong HTML5:

email, url, number, range, date, color, search, tel.

7. Thẻ Đa Phương Tiện

Hiển thị âm thanh, video, nội dung nhúng.

Thẻ	Chức năng	Ví dụ
<audio>	Phát âm thanh	<audio controls src=”nhac.mp3″></audio>
<video>	Phát video	<video controls src=”video.mp4″></video>
<source>	Nguồn media	<source src=”video.mp4″ type=”video/mp4″>
<canvas>	Vẽ đồ họa bằng JavaScript	<canvas id=”myCanvas”></canvas>
<svg>	Đồ họa vector	<svg>…</svg>
<iframe>	Nhúng trang khác	<iframe src=”http://xelovio.com”></iframe>

8. Thẻ Ngữ Nghĩa (Semantic Elements)

Những thẻ giúp máy tìm kiếm hiểu nội dung.

• <mark> — đánh dấu chữ quan trọng
• <time> — thời gian hoặc ngày tháng
• <abbr> — viết tắt có chú giải
• <address> — địa chỉ liên hệ
• <cite> — trích dẫn nguồn
• <q> — trích dẫn ngắn

9. Thẻ Script và Style

• <script> — chèn JavaScript
• <noscript> — nội dung hiển thị khi trình duyệt tắt JS
• <style> — CSS trong HTML
• <link> — liên kết CSS ngoài

10. Một Số Thẻ Bị Loại Bỏ Trong HTML5

HTML5 đã loại bỏ các thẻ như: <center>, <font>, <big>, <strike>… thay bằng CSS để tách biệt nội dung và trình bày.

Kết Luận

HTML5 không chỉ là tập hợp các thẻ, mà còn là chuẩn mới giúp trang web nhanh hơn, chuẩn SEO hơn và dễ bảo trì hơn. Nắm vững các thẻ HTML5 sẽ giúp bạn xây dựng website tối ưu cho cả người dùng và máy tìm kiếm.