HTML Cheat Sheet (Bảng tra cứu HTML) đầy đủ
Trần Thị Vân - 212
- 24/07/2026
HTML là nền tảng tạo nên cấu trúc của một trang web. Thay vì phải nhớ từng cú pháp rời rạc, một bảng tra cứu được tổ chức theo nhóm chức năng sẽ giúp việc học, viết và kiểm tra mã HTML nhanh hơn rất nhiều. Nội dung dưới đây được xây dựng theo hướng thực hành, tập trung vào những thành phần có giá trị khi phát triển website thực tế.
HTML không quyết định giao diện đẹp hay xấu theo cách CSS thực hiện, cũng không đảm nhiệm logic tương tác như JavaScript. Vai trò chính của HTML là mô tả nội dung, cấu trúc và ý nghĩa của các thành phần trên trang. Viết HTML tốt vì thế không chỉ là nhớ tên thẻ, mà còn phải biết chọn đúng phần tử cho đúng mục đích.
Cách sử dụng bảng tra cứu HTML hiệu quả
Một cheat sheet hữu ích không nên chỉ là danh sách tên thẻ. Khi gặp một yêu cầu cụ thể, bạn cần xác định mình đang xử lý nội dung gì, sau đó chọn phần tử phù hợp. Chẳng hạn, nội dung điều hướng nên dùng liên kết, một danh sách các bước nên dùng danh sách có thứ tự, còn dữ liệu dạng hàng và cột mới phù hợp với bảng.
Có thể xem hệ thống HTML theo các nhóm chính: cấu trúc tài liệu, nội dung văn bản, liên kết, hình ảnh, danh sách, bảng dữ liệu, biểu mẫu, nội dung đa phương tiện và các phần tử mang ý nghĩa ngữ nghĩa. Cách phân loại này giúp tra cứu nhanh hơn thay vì phải học thuộc toàn bộ theo thứ tự bảng chữ cái.
| Nhóm | Mục đích chính | Thành phần tiêu biểu |
|---|---|---|
| Cấu trúc | Tổ chức bộ khung tài liệu | html, head, body, main, section |
| Văn bản | Trình bày và phân cấp nội dung | p, strong, em, h1, h2, h3 |
| Liên kết | Kết nối tài liệu hoặc vị trí | a |
| Danh sách | Biểu diễn tập hợp nội dung | ul, ol, li |
| Hình ảnh | Hiển thị nội dung hình ảnh | img |
| Dữ liệu | Trình bày dữ liệu dạng bảng | table, tr, th, td |
| Biểu mẫu | Nhận dữ liệu từ người dùng | form, input, textarea, button |
Bộ khung cơ bản của một tài liệu HTML
Một tài liệu HTML hoàn chỉnh thường có cấu trúc bao gồm phần khai báo loại tài liệu, phần tử gốc và các khu vực dành cho thông tin tài liệu cùng nội dung hiển thị. Mặc dù nhiều phần tử không xuất hiện trực tiếp trên màn hình, chúng đóng vai trò quan trọng đối với trình duyệt, công cụ tìm kiếm và các công cụ hỗ trợ.
Ví dụ tối giản về cấu trúc tài liệu:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang HTML mẫu</title>
</head>
<body>
<h1>Xin chào HTML</h1>
<p>Đây là nội dung của trang.</p>
</body>
</html>
Khai báo loại tài liệu
DOCTYPE cho trình duyệt biết tài liệu đang sử dụng HTML hiện đại. Trong các dự án mới, cú pháp khai báo rất ngắn gọn và nên được đặt ở dòng đầu tiên.
<!DOCTYPE html>
DOCTYPE không phải là một phần tử HTML thông thường và không có thẻ đóng. Việc khai báo đúng giúp trình duyệt xử lý tài liệu theo chế độ tiêu chuẩn thay vì rơi vào các chế độ tương thích cũ.
Phần tử gốc
Phần tử html bao bọc toàn bộ tài liệu. Thuộc tính lang nên được khai báo để xác định ngôn ngữ chính của nội dung.
<html lang="vi">
...
</html>
Việc khai báo ngôn ngữ đặc biệt hữu ích cho trình đọc màn hình, công cụ dịch và các hệ thống xử lý nội dung tự động.
Khu vực thông tin tài liệu
Phần head chứa các thông tin phục vụ trình duyệt và công cụ xử lý trang. Đây không phải khu vực để đặt nội dung chính mà người dùng đọc trực tiếp trên trang.
<head>
<meta charset="UTF-8">
<title>Tiêu đề trang</title>
</head>
Trong một website thực tế, khu vực này còn có thể chứa metadata, liên kết tới stylesheet, thông tin phục vụ responsive và các tài nguyên cần thiết khác.
Khu vực nội dung hiển thị
body là nơi chứa phần nội dung mà người dùng nhìn thấy và tương tác trên trang. Khi viết một bài HTML để đưa vào hệ thống quản trị nội dung, bạn thường chỉ cần cung cấp phần nội dung bên trong khu vực này thay vì lặp lại toàn bộ cấu trúc tài liệu.
Nhóm phần tử tiêu đề và nội dung văn bản
Tiêu đề giúp người đọc nhanh chóng hiểu cấu trúc của nội dung. HTML cung cấp sáu cấp tiêu đề từ h1 đến h6. Trong một bài viết thông thường, h1 là tiêu đề chính, còn các cấp thấp hơn được dùng để tổ chức những phần nội dung bên dưới.
Điểm quan trọng là cấp tiêu đề phản ánh cấu trúc nội dung, không đơn thuần là kích thước chữ. Nếu muốn tiêu đề nhỏ hơn hoặc lớn hơn về mặt giao diện, CSS mới là công cụ phù hợp.
Đoạn văn
Phần tử p dùng để biểu diễn một đoạn văn độc lập. Đây là phần tử quan trọng nhất khi xây dựng nội dung bài viết.
<p>HTML giúp mô tả cấu trúc và ý nghĩa của nội dung trên trang web.</p>
Không nên dùng nhiều thẻ xuống dòng để giả lập các đoạn văn. Mỗi ý hoặc đoạn nội dung độc lập nên được biểu diễn bằng một phần tử p riêng, sau đó dùng CSS để kiểm soát khoảng cách.
Tiêu đề chính và tiêu đề phân cấp
Trong một trang hoặc bài viết, h1 đại diện cho tiêu đề chính. Các phần nội dung trực thuộc có thể dùng h2, còn các mục nhỏ hơn nằm trong h2 có thể dùng h3.
<h1>Hướng dẫn HTML</h1>
<h2>Cấu trúc tài liệu</h2>
<h3>Phần tử gốc</h3>
<h3>Phần thông tin tài liệu</h3>
<h2>Nội dung văn bản</h2>
<h3>Đoạn văn</h3>
Cấu trúc này tạo ra một cây nội dung rõ ràng. Người đọc có thể quét nhanh bài viết, trong khi các công cụ hỗ trợ cũng có cơ sở để hiểu quan hệ giữa những phần nội dung.
Nhấn mạnh nội dung quan trọng
Phần tử strong dùng để thể hiện nội dung có mức độ quan trọng hoặc cần được chú ý. Phần tử em thể hiện sự nhấn mạnh về ngữ nghĩa.
<p>Hãy luôn kiểm tra <strong>cấu trúc HTML</strong> trước khi đưa website lên môi trường thực tế.</p>
<p>Đây là nội dung được <em>nhấn mạnh về ngữ nghĩa</em>.</p>
Không nên lạm dụng strong chỉ để làm chữ đậm. Nếu mục đích chỉ là thay đổi kiểu chữ, việc trình bày nên được giao cho CSS. HTML nên tập trung mô tả ý nghĩa của nội dung.
Các phần tử tổ chức nội dung có ý nghĩa
HTML hiện đại khuyến khích sử dụng những phần tử có ý nghĩa thay vì biến mọi khu vực thành một nhóm phần tử chung. Cách viết này giúp cấu trúc trang dễ hiểu hơn và thuận lợi cho khả năng truy cập.
Khu vực nội dung chính
Phần tử main đại diện cho nội dung chính của tài liệu. Một trang thông thường chỉ nên có một khu vực nội dung chính đang hiển thị.
<main>
<h1>Tên bài viết</h1>
<p>Nội dung chính của trang.</p>
</main>
Khu vực nội dung độc lập
Phần tử section phù hợp khi một khu vực có chủ đề riêng và thường có tiêu đề đi kèm. Đây là lựa chọn hữu ích để chia một tài liệu dài thành những phần có quan hệ nội dung rõ ràng.
<section>
<h2>Giới thiệu HTML</h2>
<p>HTML tạo nên cấu trúc của trang web.</p>
</section>
Nội dung có thể đứng độc lập
Phần tử article phù hợp với nội dung có tính độc lập tương đối, chẳng hạn một bài viết, tin tức hoặc một nội dung có thể được phân phối riêng.
<article>
<h2>Bài viết HTML</h2>
<p>Nội dung bài viết có thể được đọc độc lập.</p>
</article>
Nội dung bổ trợ
Phần tử aside dùng cho nội dung có liên quan nhưng không phải phần trọng tâm của nội dung chính. Ví dụ có thể là thông tin bổ sung hoặc khu vực nội dung phụ.
<aside>
<p>Mẹo: hãy kiểm tra cấu trúc HTML trước khi xuất bản.</p>
</aside>
Liên kết và điều hướng giữa các tài nguyên
Liên kết là thành phần cốt lõi của web. Phần tử a tạo ra mối liên kết tới một URL, một vị trí trong cùng tài liệu hoặc một tài nguyên phù hợp khác.
<a href="https://webmoi.vn/">Web Mới</a>
Thuộc tính href xác định đích đến của liên kết. Đích có thể là URL đầy đủ, đường dẫn tương đối hoặc một mã định danh bắt đầu bằng dấu thăng để trỏ tới một vị trí trong cùng trang.
Liên kết tới một vị trí trong trang
Có thể tạo liên kết nội bộ bằng cách đặt một giá trị id cho phần tử đích, sau đó sử dụng giá trị đó trong href.
<a href="#html-co-ban">Xem phần HTML cơ bản</a>
<h2 id="html-co-ban">HTML cơ bản</h2>
Cách này đặc biệt hữu ích với những bài viết dài, tài liệu kỹ thuật và các trang có mục lục.
Liên kết mở trong ngữ cảnh khác
Thuộc tính target có thể xác định nơi trình duyệt mở tài nguyên được liên kết. Tuy nhiên, không nên sử dụng target một cách máy móc cho mọi liên kết. Việc mở tab mới nên có lý do rõ ràng từ trải nghiệm người dùng.
<a href="https://example.com/" target="_blank" rel="noopener">Mở tài nguyên</a>
Danh sách và cách biểu diễn nội dung theo nhóm
Danh sách là lựa chọn phù hợp khi nhiều nội dung có cùng vai trò hoặc có quan hệ tuần tự. HTML có hai dạng phổ biến là danh sách không có thứ tự và danh sách có thứ tự.
Danh sách không có thứ tự
ul dùng khi thứ tự các mục không mang ý nghĩa. Mỗi mục bên trong được đặt trong phần tử li.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Danh sách có thứ tự
ol phù hợp khi trình tự của các mục có ý nghĩa, chẳng hạn các bước thực hiện một quy trình.
<ol>
<li>Tạo cấu trúc HTML</li>
<li>Thêm nội dung</li>
<li>Kiểm tra mã</li>
</ol>
Điểm khác biệt quan trọng không nằm ở việc trình duyệt hiển thị dấu chấm hay số, mà nằm ở ý nghĩa của thứ tự. Nếu đổi vị trí các mục không làm thay đổi ý nghĩa, ul thường là lựa chọn hợp lý hơn.
Hình ảnh và nội dung trực quan
Hình ảnh giúp bổ sung thông tin mà văn bản khó truyền tải đầy đủ, nhưng một hình ảnh được đưa vào trang đúng cách không chỉ cần hiển thị được. HTML còn cần cung cấp thông tin thay thế, kích thước phù hợp và ngữ cảnh rõ ràng để người dùng cùng công cụ hỗ trợ có thể hiểu nội dung.
Hiển thị hình ảnh
Phần tử img dùng để nhúng một hình ảnh vào tài liệu. Thuộc tính src xác định nguồn hình ảnh, còn alt cung cấp nội dung thay thế khi hình ảnh không thể hiển thị hoặc khi người dùng sử dụng trình đọc màn hình.
<img src="/images/html-cheat-sheet.jpg" alt="Bảng tra cứu HTML">
Thuộc tính alt không nên chỉ được thêm cho có. Nếu hình ảnh truyền tải thông tin, alt nên mô tả ngắn gọn thông tin quan trọng nhất. Với hình ảnh chỉ mang tính trang trí và không bổ sung nội dung, cách xử lý alt cần phù hợp với mục đích của hình ảnh.
Chú thích cho hình ảnh
Khi hình ảnh cần một phần chú thích gắn trực tiếp với nó, có thể sử dụng figure kết hợp với figcaption. Hai phần tử này giúp thể hiện rõ mối quan hệ giữa hình ảnh và phần chú thích.
<figure>
<img src="/images/html-structure.jpg" alt="Cấu trúc cơ bản của tài liệu HTML">
<figcaption>Cấu trúc cơ bản của một tài liệu HTML.</figcaption>
</figure>
Hình ảnh mang tính trang trí
Không phải hình ảnh nào cũng cần mô tả dài. Nếu hình ảnh không mang thêm thông tin cho nội dung, alt có thể để trống thay vì đưa vào những câu mô tả không có giá trị.
<img src="/images/decorative-line.jpg" alt="">
Bảng dữ liệu và cách trình bày thông tin dạng hàng cột
Bảng HTML phù hợp với dữ liệu có quan hệ giữa hàng và cột. Một bảng không nên được dùng chỉ để tạo bố cục trang. Với giao diện, CSS và các phần tử bố cục hiện đại phù hợp hơn nhiều.
Cấu trúc bảng cơ bản
table là phần tử bao ngoài bảng. Mỗi hàng được tạo bằng tr, ô tiêu đề bằng th và ô dữ liệu bằng td.
<table>
<tr>
<th>Thẻ</th>
<th>Công dụng</th>
</tr>
<tr>
<td>p</td>
<td>Tạo đoạn văn</td>
</tr>
<tr>
<td>a</td>
<td>Tạo liên kết</td>
</tr>
</table>
Việc phân biệt th và td rất quan trọng. Th không chỉ làm chữ nổi bật mà còn biểu thị ô đó là tiêu đề của một nhóm dữ liệu.
Gộp ô trong bảng
Thuộc tính colspan cho phép một ô trải rộng qua nhiều cột. rowspan cho phép một ô trải qua nhiều hàng.
<table>
<tr>
<th colspan="2">Thông tin HTML</th>
</tr>
<tr>
<td>Tên</td>
<td>HTML</td>
</tr>
</table>
Chỉ nên sử dụng các thuộc tính này khi dữ liệu thực sự có cấu trúc tương ứng. Việc gộp ô quá phức tạp có thể khiến bảng khó đọc và khó tiếp cận.
Trích dẫn, mã nguồn và nội dung kỹ thuật
Các trang hướng dẫn lập trình thường cần phân biệt giữa văn bản thông thường, trích dẫn và mã nguồn. HTML cung cấp những phần tử riêng cho từng trường hợp thay vì phải dùng các ký tự định dạng thủ công.
Trích dẫn một đoạn nội dung
Phần tử blockquote dùng để biểu diễn một đoạn nội dung được trích dẫn từ nguồn khác hoặc một phát biểu có tính chất trích dẫn.
<blockquote>
<p>HTML mô tả cấu trúc và ý nghĩa của nội dung trên trang web.</p>
</blockquote>
Hiển thị mã nguồn
Phần tử code phù hợp với tên hoặc đoạn mã ngắn xuất hiện trong nội dung. Khi cần trình bày một khối mã nhiều dòng, code nên được đặt bên trong pre.
<p>Sử dụng <code>lang</code> để khai báo ngôn ngữ tài liệu.</p>
Ví dụ một khối mã nhiều dòng:
<pre>
<code>
<p>Nội dung HTML</p>
</code>
</pre>
Trong nội dung thực tế, các ký tự HTML xuất hiện như một phần của mã nguồn cần được encode để trình duyệt không hiểu chúng là phần tử đang được thực thi trong tài liệu.
Khối mã giữ nguyên khoảng trắng
pre bảo toàn khoảng trắng và xuống dòng trong nội dung. Đây là lý do nó đặc biệt phù hợp với các đoạn mã, cấu hình hoặc văn bản mà khoảng cách có ý nghĩa.
<pre><code>function hello() {
console.log("Hello");
}</code></pre>
Biểu mẫu và dữ liệu người dùng
Biểu mẫu là cầu nối giữa giao diện HTML và dữ liệu do người dùng nhập. Một form được xây dựng tốt cần xác định rõ đích gửi dữ liệu, phương thức truyền và mối quan hệ giữa nhãn với trường nhập.
Khung biểu mẫu
form bao quanh các trường nhập liệu và có thể sử dụng action để xác định nơi nhận dữ liệu cùng method để xác định phương thức gửi.
<form action="/xu-ly-form" method="post">
...
</form>
GET thường phù hợp với những yêu cầu mà dữ liệu có thể xuất hiện trong URL, chẳng hạn tìm kiếm. POST thường được dùng khi gửi dữ liệu biểu mẫu tới máy chủ để xử lý.
Trường nhập liệu
input là phần tử đa dụng để nhận nhiều dạng dữ liệu. Kiểu trường được xác định thông qua thuộc tính type.
<input type="text" name="fullname">
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="quantity">
Không nên chọn type chỉ dựa trên giao diện. Kiểu dữ liệu phù hợp giúp trình duyệt cung cấp hành vi nhập liệu tương ứng và cải thiện trải nghiệm trên thiết bị di động.
Nhãn cho trường nhập
label giúp xác định trường nhập đang yêu cầu thông tin gì. Có thể liên kết label với input bằng cách để giá trị for trùng với id của trường.
<label for="email">Địa chỉ email</label>
<input type="email" id="email" name="email">
Đây là chi tiết nhỏ nhưng rất quan trọng đối với khả năng sử dụng và khả năng tiếp cận. Người dùng có thể xác định chính xác trường cần nhập thay vì phải dựa vào vị trí trực quan.
Trường nhập nhiều dòng
textarea dùng cho nội dung có thể dài hơn một dòng, chẳng hạn lời nhắn, mô tả hoặc ghi chú.
<label for="message">Nội dung</label>
<textarea id="message" name="message"></textarea>
Nút gửi biểu mẫu
Phần tử button có thể tạo nút tương tác và nên xác định rõ loại nút trong biểu mẫu khi cần.
<button type="submit">Gửi thông tin</button>
Trong một form, việc chỉ rõ type giúp tránh những hành vi ngoài ý muốn khi biểu mẫu có nhiều nút khác nhau.
Thuộc tính HTML thường xuyên được sử dụng
Thẻ HTML xác định loại phần tử, trong khi thuộc tính bổ sung thông tin hoặc thay đổi cách phần tử hoạt động. Nắm được những thuộc tính cốt lõi sẽ giúp việc viết HTML nhanh hơn đáng kể.
| Thuộc tính | Vai trò | Thường dùng với |
|---|---|---|
| id | Định danh duy nhất cho phần tử | Nhiều phần tử HTML |
| class | Gắn một hoặc nhiều nhóm phân loại | Nhiều phần tử HTML |
| href | Xác định địa chỉ liên kết | a |
| src | Xác định nguồn tài nguyên | img |
| alt | Cung cấp nội dung thay thế cho hình ảnh | img |
| title | Cung cấp thông tin bổ sung | Nhiều phần tử |
| name | Xác định tên dữ liệu | input, textarea |
| value | Xác định giá trị của trường | Nhiều phần tử biểu mẫu |
Định danh bằng id
id dùng để nhận diện một phần tử cụ thể trong tài liệu. Một giá trị id nên có tính duy nhất trong phạm vi tài liệu.
<h2 id="gioi-thieu">Giới thiệu</h2>
id thường hữu ích khi tạo liên kết đến một vị trí cụ thể, kết nối label với trường nhập hoặc khi JavaScript cần xác định một phần tử.
Phân nhóm bằng class
class dùng để gắn phần tử vào một hoặc nhiều nhóm. Khác với id, cùng một class có thể được sử dụng cho nhiều phần tử.
<p class="noi-dung">Đây là một đoạn văn.</p>
Trong dự án thực tế, class thường là cầu nối giữa HTML và CSS, đồng thời có thể được sử dụng để xác định nhóm phần tử phục vụ JavaScript.
Những điểm cần kiểm tra trước khi đưa HTML vào website
HTML chạy được trên trình duyệt chưa có nghĩa là cấu trúc đã tốt. Trước khi xuất bản, nên kiểm tra ít nhất tính hợp lệ của thẻ, quan hệ giữa các phần tử, nội dung thay thế của hình ảnh, liên kết và cấu trúc tiêu đề.
- Đảm bảo các thẻ có cặp mở và đóng được viết chính xác khi phần tử yêu cầu thẻ đóng.
- Không sử dụng tên thẻ tự chế hoặc viết sai tên phần tử.
- Không dùng bảng để thay thế cho hệ thống bố cục giao diện.
- Không dùng tiêu đề chỉ vì muốn chữ lớn hơn.
- Hình ảnh có ý nghĩa cần có alt phù hợp.
- Label nên được liên kết rõ ràng với trường nhập tương ứng.
- Liên kết cần có nội dung mô tả đích đến đủ rõ ràng.
- Kiểm tra các thuộc tính id để tránh trùng định danh.
- Với nội dung mã nguồn, cần encode các ký tự HTML khi muốn hiển thị chúng như văn bản.
Cấu trúc ngữ nghĩa cho trang web hiện đại
HTML có thể hiển thị nội dung ngay cả khi toàn bộ trang được xây dựng bằng những phần tử chung, nhưng một cấu trúc như vậy thường khó đọc, khó bảo trì và không truyền tải đầy đủ ý nghĩa của từng khu vực. Các phần tử ngữ nghĩa giúp mã nguồn thể hiện rõ vai trò của nội dung thay vì chỉ mô tả cách nó được đặt trên màn hình.
Khu vực điều hướng
nav dùng cho một nhóm liên kết có mục đích điều hướng quan trọng. Menu chính, menu chuyên mục hoặc các liên kết điều hướng giữa những phần lớn của website là những trường hợp phù hợp.
<nav>
<a href="/">Trang chủ</a>
<a href="/html/">HTML</a>
<a href="/javascript/">JavaScript</a>
</nav>
Không phải mọi nhóm liên kết đều cần nav. Một vài liên kết nằm trong nội dung bài viết không nhất thiết phải được bao quanh bởi phần tử này.
Khu vực đầu trang và chân trang
header đại diện cho phần mở đầu của một trang hoặc một khu vực nội dung. footer đại diện cho phần kết thúc tương ứng. Hai phần tử này có thể xuất hiện ở cấp trang hoặc bên trong những phần tử nội dung phù hợp.
<header>
<h1>Tài liệu HTML</h1>
</header>
<footer>
<p>Thông tin bản quyền</p>
</footer>
Điểm cần nhớ là header và footer không chỉ dành riêng cho toàn bộ website. Một article cũng có thể có header hoặc footer riêng nếu cấu trúc nội dung thực sự cần đến chúng.
Nội dung độc lập và nội dung bổ trợ
article nên được ưu tiên khi một khối nội dung có thể được xem như một đơn vị tương đối độc lập. aside phù hợp với thông tin bổ trợ cho nội dung xung quanh.
Việc lựa chọn đúng hai phần tử này giúp cấu trúc tài liệu phản ánh quan hệ nội dung thay vì phụ thuộc vào vị trí hiển thị.
Các phần tử văn bản thường gặp trong thực tế
Ngoài đoạn văn và tiêu đề, HTML có nhiều phần tử dành cho những trường hợp cụ thể. Sử dụng đúng phần tử giúp nội dung có ngữ nghĩa rõ hơn và giảm việc phải dùng CSS hoặc JavaScript để mô phỏng những chức năng vốn đã có sẵn.
Xuống dòng và phân tách nội dung
br tạo một lần xuống dòng trong chính nội dung. Nó phù hợp với những trường hợp mà việc xuống dòng là một phần của nội dung, chẳng hạn địa chỉ hoặc một đoạn văn có cấu trúc dòng đặc biệt.
<p>Web Mới<br>Thiết kế và lập trình website</p>
Không nên sử dụng br liên tục để tạo khoảng cách giữa các đoạn. Khoảng cách trình bày nên được kiểm soát bằng CSS.
Nội dung mang ý nghĩa bổ sung
small có thể dùng cho những nội dung phụ như ghi chú, điều khoản hoặc thông tin bổ sung có mức độ nổi bật thấp hơn nội dung chính.
<p>Giá dịch vụ có thể thay đổi theo phạm vi công việc. <small>Thông tin được cập nhật theo từng thời điểm.</small></p>
Nội dung được đánh dấu
mark biểu thị nội dung được đánh dấu vì có liên quan hoặc cần chú ý trong một ngữ cảnh cụ thể.
<p>Từ khóa cần kiểm tra: <mark>semantic HTML</mark>.</p>
Chỉ số và ký hiệu trong văn bản
sup dùng cho nội dung hiển thị ở vị trí chỉ số trên, còn sub dùng cho chỉ số dưới. Chúng hữu ích với công thức, ký hiệu hóa học hoặc những nội dung thực sự cần vị trí đặc biệt này.
<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup> + y<sup>2</sup></p>
Âm thanh, video và nội dung đa phương tiện
HTML hiện đại có khả năng nhúng trực tiếp âm thanh và video mà không nhất thiết phải phụ thuộc vào những công nghệ nhúng cũ. Tuy nhiên, việc đưa media vào website cần cân nhắc kích thước tệp, khả năng tải trang và trải nghiệm trên thiết bị di động.
Nhúng video
video dùng để phát nội dung video trực tiếp trong trang. Thuộc tính controls cho phép trình duyệt cung cấp bộ điều khiển phát lại cho người dùng.
<video controls>
<source src="/media/huong-dan.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ video.
</video>
Phần tử source cho phép khai báo nguồn media. Nội dung văn bản bên trong video có thể đóng vai trò thông báo dự phòng khi trình duyệt không hỗ trợ phần tử này.
Nhúng âm thanh
audio có cách sử dụng tương tự video nhưng dành cho nội dung âm thanh.
<audio controls>
<source src="/media/gioi-thieu.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ âm thanh.
</audio>
Không nên tự động phát âm thanh trong những trường hợp không cần thiết. Âm thanh tự phát có thể gây khó chịu và ảnh hưởng đến trải nghiệm người dùng.
Nội dung nhúng
iframe cho phép nhúng một tài liệu hoặc nội dung từ một nguồn khác vào trang hiện tại. Đây là phần tử thường gặp khi tích hợp bản đồ, video hoặc một dịch vụ bên ngoài.
<iframe src="https://example.com/" title="Nội dung được nhúng"></iframe>
Với iframe, cần cân nhắc nguồn được nhúng, kích thước hiển thị, bảo mật và ảnh hưởng tới hiệu suất tải trang.
Các kiểu dữ liệu thường dùng trong biểu mẫu
input có thể đảm nhiệm nhiều loại dữ liệu khác nhau. Chọn đúng kiểu không chỉ giúp giao diện phù hợp hơn mà còn cung cấp cho trình duyệt thông tin cần thiết để hỗ trợ nhập liệu.
| Kiểu | Mục đích |
|---|---|
| text | Văn bản thông thường |
| Địa chỉ email | |
| password | Dữ liệu mật khẩu |
| number | Giá trị dạng số |
| tel | Số điện thoại |
| url | Địa chỉ URL |
| date | Ngày |
| checkbox | Lựa chọn độc lập hoặc nhiều lựa chọn |
| radio | Chọn một phương án trong một nhóm |
| file | Chọn tệp từ thiết bị |
Ô chọn một trong nhiều phương án
radio phù hợp khi người dùng chỉ được chọn một phương án trong cùng một nhóm. Những input radio có cùng giá trị name sẽ được trình duyệt xử lý như một nhóm lựa chọn.
<label>
<input type="radio" name="level" value="basic">
Cơ bản
</label>
<label>
<input type="radio" name="level" value="advanced">
Nâng cao
</label>
Lựa chọn độc lập
checkbox thích hợp khi người dùng có thể bật hoặc tắt một lựa chọn, đồng thời có thể chọn nhiều mục nếu các checkbox thuộc cùng một nhóm dữ liệu.
<label>
<input type="checkbox" name="agree" value="yes">
Tôi đồng ý với điều khoản
</label>
Danh sách lựa chọn
select tạo một danh sách lựa chọn và option đại diện cho từng phương án.
<label for="language">Ngôn ngữ</label>
<select id="language" name="language">
<option value="vi">Tiếng Việt</option>
<option value="en">English</option>
</select>
Các thuộc tính hỗ trợ kiểm soát biểu mẫu
Một biểu mẫu thực tế thường cần giới hạn dữ liệu, chỉ ra trường bắt buộc và cung cấp trạng thái ban đầu. HTML có sẵn nhiều thuộc tính giúp xử lý những yêu cầu này trước khi phải viết thêm JavaScript.
Trường bắt buộc
required yêu cầu người dùng phải cung cấp giá trị trước khi biểu mẫu được gửi theo cơ chế kiểm tra tích hợp của trình duyệt.
<input type="email" name="email" required>
Giới hạn độ dài
minlength và maxlength cho phép đặt giới hạn độ dài của dữ liệu dạng văn bản.
<input type="text" name="username" minlength="4" maxlength="30">
Giá trị gợi ý
placeholder hiển thị một gợi ý bên trong trường nhập khi người dùng chưa cung cấp dữ liệu. Placeholder không nên được dùng để thay thế label vì nó biến mất khi người dùng bắt đầu nhập.
<label for="fullname">Họ và tên</label>
<input type="text" id="fullname" name="fullname" placeholder="Nhập họ và tên">
Trạng thái không cho phép chỉnh sửa
disabled làm cho phần tử không hoạt động. readonly thường được dùng khi muốn người dùng nhìn thấy giá trị nhưng không cho chỉnh sửa nội dung của trường phù hợp.
<input type="text" value="Web Mới" readonly>
<button type="submit" disabled>Tạm thời không khả dụng</button>
Thuộc tính dữ liệu và khả năng mở rộng
HTML cho phép gắn dữ liệu tùy chỉnh vào phần tử thông qua nhóm thuộc tính bắt đầu bằng data-. Đây là cách hữu ích để lưu một giá trị nhỏ gắn với phần tử mà JavaScript có thể đọc khi cần.
<button type="button" data-product-id="1024">Xem sản phẩm</button>
Giá trị data-* nên phục vụ dữ liệu thực sự liên quan tới phần tử. Không nên biến HTML thành nơi chứa một lượng lớn dữ liệu ứng dụng chỉ vì thuộc tính này dễ sử dụng.
HTML hỗ trợ khả năng tiếp cận
Khả năng tiếp cận không phải là một lớp bổ sung chỉ dành cho một số website. Một cấu trúc HTML có ngữ nghĩa rõ ràng đã tạo ra nền tảng tốt cho người dùng sử dụng bàn phím, trình đọc màn hình và các công cụ hỗ trợ khác.
Dùng đúng phần tử cho đúng mục đích
Nếu một nội dung là liên kết, hãy dùng a. Nếu là nút thực hiện hành động, hãy dùng button. Nếu là tiêu đề, hãy dùng phần tử tiêu đề phù hợp. Việc dùng phần tử đúng bản chất thường tốt hơn việc tạo một phần tử chung rồi mô phỏng hành vi bằng CSS và JavaScript.
Mô tả hình ảnh phù hợp
alt giúp cung cấp thông tin thay thế cho hình ảnh. Nội dung này nên phục vụ đúng mục đích của hình ảnh thay vì nhồi từ khóa hoặc lặp lại những thông tin mà văn bản xung quanh đã cung cấp.
Liên kết có nội dung rõ ràng
Nội dung của liên kết nên giúp người dùng hiểu mình sẽ đi đâu hoặc thực hiện hành động gì. Những cụm từ quá chung chung có thể khiến việc điều hướng trở nên khó khăn khi người dùng chỉ xem danh sách các liên kết.
Nguyên tắc viết HTML dễ bảo trì
HTML tốt không chỉ cần hợp lệ mà còn phải dễ đọc và dễ chỉnh sửa. Một dự án có thể phát triển qua nhiều năm, vì vậy mã nguồn càng rõ ràng thì chi phí bảo trì càng thấp.
- Ưu tiên phần tử có ý nghĩa thay vì dùng phần tử chung cho mọi trường hợp.
- Giữ cấu trúc lồng nhau rõ ràng và nhất quán.
- Đặt tên class có ý nghĩa với dự án.
- Không dùng HTML để thay thế nhiệm vụ vốn thuộc về CSS.
- Không dùng JavaScript để mô phỏng những hành vi HTML đã hỗ trợ sẵn khi không có lý do cần thiết.
- Giữ nội dung và cấu trúc tách biệt với phần trình bày.
- Kiểm tra những thuộc tính quan trọng thay vì sao chép mã một cách máy móc.
- Encode mã HTML khi hiển thị mã nguồn như nội dung văn bản.
Những lỗi HTML dễ gặp khi viết website
Nhiều lỗi không làm trang trắng hoặc khiến trình duyệt báo lỗi ngay lập tức. Chính vì vậy, chúng thường tồn tại lâu trong mã nguồn và chỉ được phát hiện khi cần bảo trì, tối ưu SEO hoặc cải thiện khả năng tiếp cận.
Lạm dụng phần tử chung
Dùng một phần tử không mang nhiều ngữ nghĩa cho mọi khu vực khiến cấu trúc tài liệu trở nên khó hiểu. Khi có phần tử HTML phù hợp với vai trò của nội dung, nên ưu tiên sử dụng phần tử đó.
Dùng tiêu đề sai mục đích
Tiêu đề không phải công cụ tạo chữ lớn. Việc lựa chọn cấp tiêu đề nên dựa vào quan hệ nội dung. Kích thước, màu sắc và khoảng cách nên được xử lý bằng CSS.
Dùng bảng để dựng giao diện
Bảng được thiết kế để biểu diễn dữ liệu có quan hệ hàng và cột. Dùng table để chia cột hoặc dựng toàn bộ bố cục website khiến mã nguồn khó thích ứng với nhiều kích thước màn hình.
Thiếu thông tin thay thế cho hình ảnh
Hình ảnh có nội dung nhưng không có alt phù hợp sẽ làm giảm khả năng hiểu thông tin đối với những trường hợp hình ảnh không được nhìn thấy. Đây là một chi tiết nhỏ nhưng cần được kiểm tra trong quá trình xây dựng nội dung.
Nhầm lẫn giữa HTML và CSS
HTML chịu trách nhiệm về cấu trúc và ý nghĩa. CSS chịu trách nhiệm về cách trình bày. Khi hai vai trò bị trộn lẫn, mã nguồn thường trở nên khó kiểm soát và khó thay đổi giao diện về sau.
Bảng tra cứu nhanh các thẻ HTML quan trọng
Khi làm website thực tế, bạn không nhất thiết phải ghi nhớ toàn bộ HTML. Điều quan trọng hơn là biết nhóm thẻ nào giải quyết vấn đề nào và nhanh chóng tra lại cú pháp khi cần. Bảng dưới đây tập trung vào những phần tử thường gặp trong quá trình xây dựng nội dung và giao diện web.
| Thẻ | Công dụng | Ghi chú thực tế |
|---|---|---|
| h1 | Tiêu đề chính | Nên phản ánh chủ đề chính của tài liệu |
| h2 | Tiêu đề cấp hai | Dùng để chia các nhóm nội dung lớn |
| h3 | Tiêu đề cấp ba | Dùng cho nội dung trực thuộc h2 |
| p | Đoạn văn | Dùng cho nội dung văn bản độc lập |
| strong | Nội dung quan trọng | Mang ý nghĩa ngữ nghĩa |
| em | Nội dung được nhấn mạnh | Không chỉ đơn thuần là chữ nghiêng |
| a | Tạo liên kết | Thường đi cùng href |
| img | Hiển thị hình ảnh | Nên có alt phù hợp |
| ul | Danh sách không có thứ tự | Các mục nằm trong li |
| ol | Danh sách có thứ tự | Phù hợp với quy trình hoặc trình tự |
| li | Một mục danh sách | Dùng bên trong ul hoặc ol |
| table | Bảng dữ liệu | Không dùng để dựng bố cục |
| tr | Một hàng trong bảng | Chứa th hoặc td |
| th | Ô tiêu đề | Mô tả nhóm dữ liệu |
| td | Ô dữ liệu | Chứa giá trị trong bảng |
| form | Biểu mẫu | Bao quanh các trường nhập |
| input | Trường nhập dữ liệu | Kiểu dữ liệu xác định bằng type |
| textarea | Nhập văn bản nhiều dòng | Phù hợp với nội dung dài |
| button | Nút tương tác | Nên xác định type khi cần |
| select | Danh sách lựa chọn | Kết hợp với option |
| option | Một lựa chọn | Đặt bên trong select |
| main | Nội dung chính | Giúp xác định trọng tâm tài liệu |
| section | Một khu vực nội dung | Nên có chủ đề rõ ràng |
| article | Nội dung độc lập | Phù hợp với bài viết hoặc nội dung có thể tách riêng |
| nav | Khu vực điều hướng | Dành cho nhóm liên kết điều hướng quan trọng |
| header | Phần mở đầu | Có thể dùng ở cấp trang hoặc nội dung |
| footer | Phần kết thúc | Có thể chứa thông tin bổ sung hoặc bản quyền |
| aside | Nội dung bổ trợ | Không phải phần trọng tâm |
| figure | Nội dung minh họa độc lập | Thường dùng với hình ảnh |
| figcaption | Chú thích cho figure | Giúp liên kết nội dung với phần minh họa |
| blockquote | Đoạn trích dẫn | Dùng cho nội dung được trích dẫn |
| pre | Giữ nguyên khoảng trắng | Thường kết hợp với code |
| code | Đoạn mã | Dùng cho mã ngắn hoặc khối mã |
| audio | Nội dung âm thanh | Có thể kết hợp source |
| video | Nội dung video | Có thể kết hợp source |
| iframe | Nhúng tài liệu bên ngoài | Cần cân nhắc nguồn và hiệu suất |
Bảng tra cứu thuộc tính HTML thiết yếu
Thuộc tính là phần thông tin bổ sung đi kèm phần tử. Một số thuộc tính xuất hiện ở rất nhiều loại thẻ, trong khi một số chỉ có ý nghĩa với một nhóm phần tử cụ thể. Hiểu đúng phạm vi sử dụng giúp tránh việc thêm thuộc tính không cần thiết.
| Thuộc tính | Ý nghĩa | Ví dụ sử dụng |
|---|---|---|
| id | Định danh một phần tử | Liên kết nội bộ hoặc xác định phần tử |
| class | Phân nhóm phần tử | Kết nối với CSS hoặc JavaScript |
| href | Địa chỉ đích | a |
| src | Nguồn tài nguyên | img, video, audio |
| alt | Nội dung thay thế | img |
| title | Thông tin bổ sung | Nhiều phần tử |
| lang | Ngôn ngữ nội dung | html hoặc phần tử phù hợp |
| target | Ngữ cảnh mở liên kết | a |
| rel | Quan hệ với tài nguyên đích | a |
| name | Tên của dữ liệu | input, textarea, select |
| value | Giá trị dữ liệu | input, option |
| type | Xác định loại hoặc hành vi | input, button |
| placeholder | Gợi ý nhập liệu | input, textarea |
| required | Đánh dấu trường bắt buộc | Biểu mẫu |
| readonly | Không cho chỉnh sửa giá trị | Trường nhập phù hợp |
| disabled | Vô hiệu hóa phần tử | Form control |
| checked | Đặt trạng thái đã chọn | Checkbox hoặc radio |
| selected | Đặt lựa chọn mặc định | option |
| colspan | Gộp nhiều cột | th, td |
| rowspan | Gộp nhiều hàng | th, td |
| data-* | Lưu dữ liệu tùy chỉnh | Nhiều phần tử |
Cách phân biệt những thẻ dễ bị sử dụng nhầm
Trong quá trình học HTML, khó khăn thường không nằm ở việc nhớ tên thẻ mà ở việc quyết định thẻ nào phù hợp khi nhiều lựa chọn có vẻ giống nhau. Một số trường hợp dưới đây đặc biệt dễ gây nhầm lẫn.
section và article
section thường đại diện cho một khu vực trong một chủ đề lớn hơn. article thiên về một đơn vị nội dung độc lập. Nếu một nội dung có thể được phân phối hoặc đọc tương đối độc lập, article thường là lựa chọn đáng cân nhắc.
strong và em
strong biểu thị mức độ quan trọng, còn em biểu thị sự nhấn mạnh. Hai phần tử này không nên được lựa chọn chỉ vì muốn chữ đậm hoặc nghiêng.
button và a
a dùng để điều hướng tới một địa chỉ hoặc tài nguyên. button phù hợp với một hành động được thực hiện trong giao diện, chẳng hạn mở hộp thoại, gửi form hoặc thay đổi trạng thái.
<a href="/lien-he/">Trang liên hệ</a>
<button type="button">Mở thông tin</button>
Nếu người dùng nhấn vào một thành phần và được đưa tới một URL, liên kết thường phù hợp hơn việc tạo một button rồi dùng JavaScript để chuyển trang.
ul và ol
Hãy chọn ul khi thứ tự không quan trọng và ol khi thứ tự có ý nghĩa. Đây là khác biệt về ngữ nghĩa chứ không chỉ là cách hiển thị dấu đầu dòng hoặc số thứ tự.
div và các phần tử ngữ nghĩa
div là một phần tử nhóm chung, không tự mô tả nội dung bên trong. Nó vẫn rất hữu ích khi cần một vùng chứa không có ý nghĩa ngữ nghĩa cụ thể, nhưng không nên dùng div thay thế mọi phần tử đã có mục đích rõ ràng.
<section>
<h2>Thông tin dịch vụ</h2>
<p>Nội dung mô tả dịch vụ.</p>
</section>
Ở ví dụ này, section truyền tải được vai trò của khu vực nội dung tốt hơn một vùng chứa chung.
HTML và SEO: những yếu tố thực sự đáng quan tâm
HTML không phải toàn bộ SEO, nhưng cấu trúc HTML có thể ảnh hưởng đáng kể tới khả năng hiểu nội dung của công cụ tìm kiếm. Một trang có nội dung tốt nhưng cấu trúc lộn xộn vẫn có thể gây khó khăn cho quá trình phân tích và trải nghiệm người dùng.
Cấu trúc tiêu đề rõ ràng
Tiêu đề nên phản ánh cấu trúc thực sự của nội dung. Một bài viết có nhiều chủ đề lớn nên chia thành các nhóm rõ ràng, sau đó tiếp tục phân nhỏ bằng những cấp tiêu đề phù hợp.
Nội dung liên kết có ý nghĩa
Anchor text nên mô tả tương đối rõ nội dung của trang đích. Người đọc cần có khả năng hiểu mục tiêu của liên kết trước khi nhấp vào nó.
Hình ảnh có thông tin thay thế
alt không phải nơi để nhồi từ khóa. Nội dung này nên mô tả thông tin cần thiết của hình ảnh trong ngữ cảnh mà hình ảnh xuất hiện.
Cấu trúc ngữ nghĩa nhất quán
Việc sử dụng main, article, section, nav, header và footer đúng vai trò giúp tài liệu có cấu trúc dễ hiểu hơn. Đây là nền tảng kỹ thuật tốt hơn việc cố gắng tối ưu bằng cách chèn thật nhiều thuộc tính hoặc từ khóa.
Nguyên tắc encode mã HTML khi đưa vào thẻ pre
Khi muốn hiển thị mã HTML như một đoạn văn bản, các ký tự có ý nghĩa đặc biệt với trình phân tích HTML phải được mã hóa. Nếu không, trình duyệt có thể hiểu đoạn mã đó là phần tử thật thay vì nội dung cần hiển thị.
Ví dụ, đoạn mã HTML:
<p>Xin chào Web Mới</p>
Trong nội dung hiển thị của bài viết, ký tự mở và đóng của thẻ được thể hiện bằng dạng entity tương ứng. Việc encode phải nhất quán để tránh trường hợp một phần mã được trình duyệt phân tích thành HTML còn phần khác lại hiển thị như văn bản.
Encode một lớp
Khi xử lý mã nguồn để đưa vào pre và code, chỉ nên encode đúng số lần cần thiết. Encode nhiều lần có thể biến một đoạn mã dễ đọc thành chuỗi entity khó hiểu.
<p>Nội dung</p>
Đoạn trên minh họa trường hợp chuỗi đã được encode thêm một lần. Khi tạo bài viết thực tế, cần xác định hệ thống quản trị nội dung sẽ xử lý dữ liệu như thế nào để tránh encode thừa hoặc thiếu.
Quy trình kiểm tra HTML trước khi xuất bản
Thay vì chỉ nhìn giao diện và kết luận rằng mã HTML đã đúng, nên kiểm tra theo một quy trình cố định. Cách này đặc biệt hữu ích với bài viết dài có nhiều bảng, danh sách và khối mã.
- Kiểm tra tên tất cả phần tử có đúng cú pháp HTML hay không.
- Kiểm tra các phần tử cần thẻ đóng đã được đóng đầy đủ.
- Kiểm tra thứ tự lồng nhau của các phần tử.
- Kiểm tra các thuộc tính quan trọng như href, src, alt, id và name.
- Kiểm tra cấu trúc tiêu đề có phản ánh đúng nội dung hay không.
- Kiểm tra bảng có hàng và ô dữ liệu hợp lý hay không.
- Kiểm tra form có label và kiểu input phù hợp hay không.
- Kiểm tra mã nguồn trong pre và code đã được encode đúng hay chưa.
- Kiểm tra liên kết và đường dẫn tài nguyên có chính xác hay không.
- Kiểm tra toàn bộ tài liệu một lần nữa sau khi chỉnh sửa.
Cheat sheet HTML dành cho quá trình làm website thực tế
Khi xây dựng một trang mới, có thể áp dụng trình tự đơn giản: xác định cấu trúc nội dung trước, chọn phần tử có ngữ nghĩa phù hợp, thêm thuộc tính cần thiết, sau đó mới xử lý giao diện bằng CSS và hành vi bằng JavaScript.
Ví dụ một cấu trúc nội dung có thể được tổ chức như sau:
<main>
<article>
<h1>Tiêu đề nội dung</h1>
<section>
<h2>Phần nội dung chính</h2>
<p>Đoạn văn mô tả nội dung.</p>
<ul>
<li>Thông tin thứ nhất</li>
<li>Thông tin thứ hai</li>
</ul>
</section>
</article>
</main>
Điểm đáng chú ý của cách tổ chức này là HTML tập trung vào cấu trúc. Khi cần thay đổi màu sắc, khoảng cách, kích thước hoặc bố cục, CSS có thể xử lý mà không cần thay đổi bản chất của nội dung.
Checklist HTML trước khi bàn giao website
- Trang có cấu trúc nội dung rõ ràng.
- Các cấp tiêu đề được sử dụng theo quan hệ nội dung.
- Liên kết có đích đến chính xác và nội dung mô tả rõ ràng.
- Hình ảnh có alt phù hợp với ngữ cảnh.
- Bảng chỉ được dùng cho dữ liệu dạng hàng và cột.
- Form có label và trường nhập tương ứng.
- Các nút có mục đích và type phù hợp.
- Không sử dụng phần tử HTML không hợp lệ hoặc tự tạo tên thẻ.
- Không dùng HTML để xử lý công việc vốn thuộc về CSS.
- Các khối mã được đặt trong pre và code khi cần hiển thị nhiều dòng.
- Mã HTML bên trong khối code đã được encode để hiển thị đúng.
- Các phần tử được lồng và đóng đúng thứ tự.
- id không bị trùng trong cùng tài liệu.
- HTML được kiểm tra lại sau những lần chỉnh sửa cuối cùng.
Với người mới học, không cần cố ghi nhớ toàn bộ danh sách ngay từ đầu. Hãy nắm chắc những nhóm nền tảng như cấu trúc tài liệu, tiêu đề, đoạn văn, liên kết, hình ảnh, danh sách, bảng và form trước. Khi bắt đầu làm dự án thực tế, việc tra cứu các phần tử chuyên biệt sẽ nhanh hơn nhiều nếu bạn đã hiểu nguyên tắc chọn thẻ theo ý nghĩa.
Đối với Web Mới, một quy trình HTML tốt cũng nên hướng tới mã nguồn rõ ràng, dễ mở rộng và thuận lợi cho việc kết hợp PHP, CSS, JavaScript về sau. HTML càng thể hiện đúng cấu trúc nội dung ngay từ đầu thì quá trình phát triển, tối ưu và bảo trì website càng ít phát sinh vấn đề.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
