HTML cung cấp một tập hợp các thẻ nền tảng để xây dựng cấu trúc và nội dung của trang web. Việc hiểu rõ chức năng và cách sử dụng đúng đắn các thẻ này là bước đầu tiên quan trọng trong phát triển giao diện người dùng.
Cấu trúc cơ bản của tài liệu HTML
Mỗi trang HTML chuẩn đều bắt đầu với khai báo kiểu tài liệu và bao gồm ba phần chính: <html>, <head>, và <body>. Dưới đây là mẫu khung chuẩn hiện đại:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trang chủ</title>
</head>
<body>
<!-- Nội dung hiển thị sẽ nằm ở đây -->
</body>
</html>Trong đó:
<!DOCTYPE html>: Khai báo phiên bản HTML5.lang="vi": Chỉ định ngôn ngữ nội dung là tiếng Việt (thay vìen).<meta charset="UTF-8">: Đảm bảo hỗ trợ đầy đủ ký tự Unicode.<meta name="viewport">: Tối ưu hóa hiển thị trên thiết bị di động.
Các thẻ thường dùng trong thực tế
Dưới đây là danh sách các thẻ phổ biến kèm mô tả ngắn gọn về vai trò:
| Thẻ | Mục đích |
|---|---|
<h1>–<h6> | Phân cấp tiêu đề từ cao nhất đến thấp nhất. |
<p> | Định nghĩa một đoạn văn bản độc lập. |
<a href="..."> | Tạo liên kết tới tài nguyên khác. |
<img src="..." alt="..."> | Chèn hình ảnh với mô tả thay thế. |
<ul>, <ol>, <li> | Xây dựng danh sách không thứ tự / có thứ tự. |
<div> | Khối chứa mức độ tổng quát, dùng cho bố cục. |
<span> | Đơn vị nội dòng để áp dụng phong cách hoặc xử lý nội dung. |
<table>, <tr>, <td>, <th> | Tổ chức dữ liệu dạng bảng. |
<form>, <input>, <button> | Hỗ trợ thu thập và gửi dữ liệu người dùng. |
Phân biệt vai trò của thẻ tiêu đề
Các thẻ <h1> đến <h6> không chỉ điều chỉnh kích thước chữ — chúng mang ý nghĩa ngữ nghĩa quan trọng đối với khả năng truy cập và SEO. Một trang nên chỉ có duy nhất một <h1> làm tiêu đề chính, sau đó phân nhánh bằng <h2>, <h3>, v.v., theo cấu trúc cây logic.
Ví dụ minh họa cách sử dụng phù hợp:
<style>
.section-title {
color: #2c3e50;
font-weight: bold;
}
.highlight {
background-color: #fff3cd;
padding: 0.25em 0.5em;
}
</style>
<h1>Hướng dẫn HTML cơ bản</h1>
<h2 class="section-title">Cấu trúc tài liệu</h2>
<p>Một tài liệu HTML gồm ba phần: <span class="highlight">đầu trang</span>, <span class="highlight">tiêu đề</span> và <span class="highlight">nội dung chính</span>.</p>
<h3>Các thành phần bắt buộc</h3>
<ul>
<li><code><!DOCTYPE html></code></li>
<li><code><html></code> với thuộc tính <code>lang</code></li>
</ul>Thẻ <p> và các yếu tố định dạng đoạn văn
Thẻ <p> là công cụ chính để chia nhỏ nội dung thành các đơn vị đọc dễ hiểu. Trình duyệt tự động thêm khoảng cách dọc trước và sau mỗi đoạn. Ngoài ra, một số thẻ bổ sung hỗ trợ ngữ nghĩa đặc thù:
<blockquote>: Dành cho trích dẫn dài, thường được căn lề hai bên.<pre>: Giữ nguyên khoảng trắng và xuống dòng như trong mã nguồn.<address>: Xác định thông tin liên hệ của tác giả hoặc tổ chức sở hữu trang.
Thẻ <hr> — đường phân cách trực quan
Thẻ <hr> tạo một đường ngang nhằm phân tách trực quan giữa các phần nội dung. Mặc dù các thuộc tính cũ như align, size, hay noshade vẫn hoạt động ở một số trình duyệt, nhưng cách tiếp cận hiện đại khuyến nghị sử dụng CSS:
<hr style="border: 0; height: 2px; background: linear-gradient(to right, #ff6b6b, #4ecdc4); margin: 2rem 0;">
<p>Nội dung sau đường phân cách</p>Việc kiểm soát hoàn toàn qua CSS giúp đảm bảo tính nhất quán, khả năng đáp ứng và tuân thủ tiêu chuẩn W3C.