Cheat sheet HTML
Cập nhật lần cuối
Cấu trúc tài liệu
Trang HTML nào cũng bắt đầu từ khung này.
| Phần tử | Tác dụng |
|---|---|
<!DOCTYPE html> | Khai báo tài liệu là HTML5 (dòng đầu tiên) |
<html lang="en"> | Phần tử gốc; lang đặt ngôn ngữ của trang |
<head> | Metadata: tiêu đề, liên kết, script, không hiển thị trên trang |
<meta charset="UTF-8"> | Bảng mã ký tự (luôn khai báo) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Co giãn responsive trên di động |
<title> | Tiêu đề trang hiện trên tab trình duyệt và kết quả tìm kiếm |
<body> | Mọi nội dung hiển thị trên trang nằm ở đây |
Văn bản và tiêu đề
| Phần tử | Tác dụng |
|---|---|
<h1> … <h6> | Tiêu đề, <h1> quan trọng nhất (mỗi trang một thẻ) |
<p> | Đoạn văn |
<br> | Xuống dòng (không có thẻ đóng) |
<hr> | Ngắt chủ đề / đường kẻ ngang |
<strong> | Văn bản quan trọng (in đậm) |
<em> | Văn bản nhấn mạnh (in nghiêng) |
<span> | Vùng chứa inline để định dạng một phần văn bản |
<code> | Code inline |
<pre> | Văn bản định dạng sẵn (giữ nguyên khoảng trắng) |
<blockquote> | Khối trích dẫn |
Liên kết và hình ảnh
| Phần tử | Cú pháp |
|---|---|
| Liên kết | <a href="https://coddy.tech">Coddy</a> |
| Mở trong tab mới | <a href="..." target="_blank" rel="noopener"> |
| Neo (nhảy tới id) | <a href="#section">Jump</a> |
| Hình ảnh | <img src="cat.png" alt="A cat" width="200"> |
| Hình ảnh responsive | <img src="..." srcset="..." sizes="..."> |
| Hình kèm chú thích | <figure><img ...><figcaption>…</figcaption></figure> |
Danh sách
| Phần tử | Tác dụng |
|---|---|
<ul> | Danh sách không thứ tự (gạch đầu dòng) |
<ol> | Danh sách có thứ tự (đánh số) |
<li> | Mục danh sách (nằm trong <ul> hoặc <ol>) |
<dl> | Danh sách mô tả |
<dt> / <dd> | Thuật ngữ / phần mô tả |
Bảng
| Phần tử | Tác dụng |
|---|---|
<table> | Khung bảng |
<thead> / <tbody> / <tfoot> | Nhóm phần đầu, phần thân và phần cuối bảng |
<tr> | Hàng của bảng |
<th> | Ô tiêu đề (in đậm, căn giữa) |
<td> | Ô dữ liệu |
colspan / rowspan | Gộp ô theo cột / hàng |
Form và ô nhập liệu
Những thành phần cơ bản của mọi form thu thập dữ liệu nhập.
| Phần tử | Cú pháp / mục đích |
|---|---|
| Form | <form action="/submit" method="post"> |
| Ô nhập văn bản | <input type="text" name="q" placeholder="Search"> |
| Email / mật khẩu | <input type="email">, <input type="password"> |
| Checkbox / radio | <input type="checkbox">, <input type="radio"> |
| Số / ngày | <input type="number">, <input type="date"> |
| Nhãn | <label for="q">Search</label> |
| Nhiều dòng | <textarea rows="4"></textarea> |
| Danh sách thả xuống | <select><option>One</option></select> |
| Nút | <button type="submit">Send</button> |
| Trường bắt buộc | <input required> |
Thẻ ngữ nghĩa và bố cục
Dùng các thẻ này thay cho <div> chung chung để trình duyệt, trình đọc màn hình và công cụ tìm kiếm hiểu trang của bạn.
| Phần tử | Đánh dấu nội dung gì |
|---|---|
<header> | Phần đầu trang hoặc đầu mục (logo, menu) |
<nav> | Liên kết điều hướng |
<main> | Nội dung chính (mỗi trang một thẻ) |
<section> | Một nhóm nội dung cùng chủ đề |
<article> | Nội dung độc lập (bài viết, thẻ card) |
<aside> | Thanh bên / nội dung phụ |
<footer> | Phần cuối trang hoặc cuối mục |
<div> | Khối chứa chung (không mang ý nghĩa) |
Thuộc tính toàn cục thường dùng
| Thuộc tính | Tác dụng |
|---|---|
id | Định danh duy nhất của phần tử |
class | Một hoặc nhiều tên class (cho CSS / JS) |
style | CSS inline (hạn chế dùng) |
title | Chú thích hiện khi rê chuột |
data-* | Thuộc tính dữ liệu tùy chỉnh, ví dụ data-id="42" |
hidden | Ẩn phần tử |
Mọi thẻ và thuộc tính HTML bạn hay dùng, nhóm theo tác dụng. Cheat sheet HTML này bao gồm khung trang, văn bản và liên kết, hình ảnh và media, danh sách, bảng, form, cùng các thẻ ngữ nghĩa giúp markup của bạn có ý nghĩa.
Tất cả đều là HTML5 chuẩn và chạy trên mọi trình duyệt hiện đại. Sao chép một thẻ, hoặc mở playground HTML để sửa và xem trước ngay, không cần cài đặt. Đang làm trang web đầu tiên? Khóa học HTML tương tác miễn phí của Coddy bắt đầu từ những điều cơ bản.
Câu hỏi thường gặp về cheat sheet HTML
Cheat sheet HTML này có miễn phí không?
Có. Cheat sheet HTML này dùng miễn phí và không cần đăng ký. Lưu trang lại và quay lại bất cứ khi nào bạn cần tra một thẻ hay thuộc tính.
<section> và <div> khác nhau thế nào?
<section> là thẻ ngữ nghĩa: nó cho trình duyệt và trình đọc màn hình biết nội dung bên trong là một nhóm có ý nghĩa, cùng chủ đề, và thường có tiêu đề. <div> không mang ý nghĩa gì, chỉ là khối chứa chung để định dạng hoặc viết script. Hãy ưu tiên thẻ ngữ nghĩa (<section>, <article>, <nav>) khi có thẻ phù hợp, và chỉ dùng <div> khi không có thẻ nào phù hợp.Thẻ HTML nào cũng cần thẻ đóng phải không?
<p>...</p>), nhưng một số phần tử "rỗng" (void) thì không, vì chúng không chứa được nội dung nào: <img>, <br>, <hr>, <input>, <meta> và <link>. Trong HTML5, bạn có thể viết chúng có hoặc không có dấu gạch chéo ở cuối.Có thể luyện tập HTML online không?
Có. Mở playground HTML để viết HTML ngay trên trình duyệt và xem trước kết quả tức thì, không cần cài đặt. Khi muốn học có lộ trình, khóa học HTML tương tác miễn phí của Coddy dạy bạn từng bước về thẻ, form và bố cục.
Cheat sheet này có phù hợp cho người mới bắt đầu không?
Có. Nội dung bắt đầu từ khung trang và các thẻ thường ngày bạn sẽ dùng đầu tiên, rồi chuyển sang form và markup ngữ nghĩa, nên ngay ngày đầu bạn đã dùng được các phần trên cùng.
Tài nguyên liên quan
Thêm cheat sheet
