HTML - Cheatsheet
Tổng hợp Cheatsheet HTML - Liệt kê các thẻ HTML và HTML5 phổ biến.
🔖 Gợi ý từ Admin
📝 Tài liệu phỏng vấn kiến thức lập trình: Xem tại đây!!!
📌 Tìm hiểu về thuật toán: Xem tại đây!!!
📌 Roadmaps - Lộ trình trở thành một lập trình viên: Xem tại đây!!!
⚡️ Cheatsheet các ngôn ngữ lập trình: Xem tại đây!!!
⚡️ Handbook lập trình: Xem tại đây!!!
Mẹo
Bạn có thể tìm tất cả thông tin (tài liệu, công cụ...) thông qua núttìm kiếm 🔍ở góc trên bên phải màn hình.
I. Tổng hợp Cheatsheet HTML
1. Cơ bản
⚡️ Cấu trúc của 1 html cơ bản
Cấu trúc của 1 html cơ bản
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
⚡️ Bình luận (Comment)
Comment
<!-- bạn có thể comment 1 dòng như này -->
<!--
Hoặc bạn có thể
comment
nhiều dòng
như này
-->
⚡️ Đoạn văn (Paragraph)
Paragraph
<p>Chia sẻ cheat sheet</p>
<p>Các ngôn ngữ lập trình</p>
⚡️ Liên kết (HTML Link)
Link
<a href="https://thanhnamnguyen.dev">thanhnamnguyen</a>
<a href="mailto:[email protected]">Email</a>
<a href="tel:+12345678">Gọi điện</a>
<a href="sms:+12345678&body=ha%20ha">Nhắn tin</a>
- href: là đường dẫn URL mà siêu liên kết trỏ đến. Nó định rõ địa chỉ của trang web hoặc tài nguyên mà liên kết sẽ đưa người dùng đến khi họ nhấp vào nó.
- rel: thuộc tính này được sử dụng để chỉ định mối quan hệ giữa trang hiện tại và trang được liên kết. Ví dụ: rel="nofollow" để nói rằng các công cụ tìm kiếm không nên theo dõi liên kết.
- target: là thuộc tính mục tiêu, được sử dụng để xác định cửa sổ hoặc khung mục tiêu mà tài liệu mới sẽ mở khi người dùng nhấp vào liên kết. Các giá trị thông thường bao gồm _blank (mở trong cửa sổ hoặc tab mới), _self (mở trong cùng cửa sổ hoặc tab), _parent (mở trong cửa sổ cha nếu có) và _top (mở trong cửa sổ cha cấp cao nhất).
👉 Xem thêm tại: Thuộc tính thẻ a
⚡️ Thẻ Image
Image
<img loading="lazy" src="https://xxx.png" alt="Mô tả hình ảnh ở đây" width="400" height="400" />
- src: là thuộc tính bắt buộc, đại diện cho đường dẫn đến tài nguyên hình ảnh. Nó có thể là một URL trực tiếp đến hình ảnh trên Internet hoặc là đường dẫn tới tập tin hình ảnh nếu nó được lưu trên máy chủ local.
- alt: là mô tả của hình ảnh. Nếu hình ảnh không thể được tải hoặc nếu người xem sử dụng trình duyệt không hỗ trợ hiển thị hình ảnh, văn bản này sẽ xuất hiện thay vì hình ảnh. Nó cũng quan trọng để SEO cho trang web.
- width: là chiều rộng của hình ảnh, được đo bằng đơn vị pixel hoặc một phần trăm của kích thước hiển thị. Việc chỉ định chiều rộng giúp trình duyệt dự đoán không gian cần được dành trước khi hình ảnh tải xong.
- height: là chiều cao của hình ảnh, được đo bằng đơn vị pixel hoặc một phần trăm của kích thước hiển thị. Việc chỉ định chiều cao giúp trình duyệt dự đoán không gian cần được dành trước khi hình ảnh tải xong.
- loading: là thuộc tính quy định cách trình duyệt nên tải hình ảnh. Các giá trị có thể bao gồm:
- "auto": trình duyệt tự quyết định cách tải.
- "eager": tải hình ảnh ngay khi trang web được tải.
- "lazy": tải hình ảnh chỉ khi nó nằm trong tầm nhìn của người dùng (lười biếng).
👉 Xem thêm tại: thẻ image
⚡️ Các thẻ định dạng văn bản
| Thẻ | Mô tả |
|---|---|
<b> | Để in đậm văn bản |
<strong> | Chỉ định ý nghĩa quan trọng của văn bản (thường hiển thị in đậm) |
<i> | Để in nghiêng văn bản |
<em> | Chỉ định văn bản được nhấn mạnh (thường hiển thị in nghiêng) |
<u> | Để gạch chân văn bản |
<pre> | Xác định văn bản được định dạng trước, giữ cả khoảng trắng và xuống dòng |
<code> | Đại diện cho một đoạn mã máy tính |
<del> | Đại diện cho văn bản đã bị xóa |
<mark> | Đại diện cho văn bản được đánh dấu hoặc làm nổi bật (HTML5) |
<ins> | Đại diện cho văn bản được chèn thêm |
<sup> | In văn bản ở trên (ví dụ như số mũ: ^2) |
<sub> | In văn bản ở dưới |
<small> | Làm cho văn bản nhỏ hơn |
<kbd> | Đại diện cho đầu vào của người dùng, thường sử dụng cho đầu vào bàn phím |
<blockquote> | Chỉ định một khối văn bản được trích dẫn từ một nguồn khác |
⚡️ Các thẻ Headings
Headings
<h1>Đây là Heading 1</h1>
<h2>Đây là Heading 2</h2>
<h3>Đây là Heading 3</h3>
<h4>Đây là Heading 4</h4>
<h5>Đây là Heading 5</h5>
<h6>Đây là Heading 6</h6>
⚡️ Phân đoạn: Đây là những thẻ được sử dụng để chia trang của bạn thành các phần.
| Thẻ | Mô tả |
|---|---|
<div></div> | Phân đoạn hoặc phần của nội dung trang |
<span></span> | Phần văn bản bên trong nội dung khác |
<p></p> | Đoạn văn bản |
<br /> | Xuống dòng |
<hr /> | Đường kẻ ngang cơ bản |
⚡️ Thẻ iframe
Thẻ iframe
<iframe
title="New York"
width="342"
height="306"
id="gmap_canvas"
src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
scrolling="no"
>
</iframe>
⚡️ JavaScript trong HTML
JavaScript trong HTML
<script type="text/javascript">
let text = 'Hello QuickRef.ME';
alert(text);
</script>
<body>
...
<script src="app.js"></script>
</body>
⚡️ CSS trong HTML
CSS trong HTML
<!-- CSS Internal -->
<style type="text/css">
h1 {
color: purple;
}
</style>
<head>
...
<!-- CSS External -->
<link rel="stylesheet" href="style.css" />
<body>
<!-- CSS Inline -->
<h1 style="color: red;">CSS inline</h1>
</body>
</head>
2. Các thẻ trong HTML5
⚡️ Document
Document
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>thanhnamnguyen.dev</h1>
</main>
<footer>
<p>©2023 thanhnamnguyen.dev</p>
</footer>
</body>
⚡️ Phần Header Navigation
Phần Header Navigation
<header>
<nav>
<ul>
<li><a href="#">Edit Page</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</nav>
</header>
⚡️ Các thẻ HTML5 ít được sử dụng
| Thẻ | Mô tả |
|---|---|
article | Nội dung độc lập: Được sử dụng để đánh dấu một phần hoặc một đoạn văn bản có nội dung độc lập, tự chủ, và có thể hiểu rõ mà không cần đọc phần còn lại của trang web. |
aside | Nội dung phụ: Chứa thông tin bổ sung hoặc liên quan như quảng cáo, biểu đồ, hoặc nội dung phụ khác không làm ảnh hưởng đến nội dung chính. |
audio | Nhúng âm thanh hoặc luồng âm thanh: Sử dụng để nhúng và phát âm thanh trực tiếp trong trang web. |
bdi | Phần tử cách ly song ngữ: Được sử dụng để cách ly một phần của văn bản để áp dụng định dạng và thuật ngữ ngôn ngữ riêng. |
canvas | Vẽ đồ họa thông qua JavaScript: Cho phép vẽ đồ họa, hình ảnh, và biểu đồ bằng cách sử dụng mã JavaScript trong trang web. |
data | Nội dung có thể đọc bằng máy: Chứa giá trị số có thể được đọc và xử lý bởi máy tính. |
datalist | Một tập hợp các lựa chọn định trước: Định nghĩa một danh sách các lựa chọn mà người dùng có thể chọn trong một trình nhập dữ liệu. |
details | Thông tin bổ sung: Chứa một hoặc nhiều phần tử để hiển thị thông tin bổ sung khi người dùng nhấp vào. Thường được sử dụng cùng với thẻ <summary>. |
dialog | Hộp thoại hoặc cửa sổ con: Được sử dụng để tạo ra hộp thoại hoặc cửa sổ con trong trang web. |
embed | Nhúng ứng dụng bên ngoài: Sử dụng để nhúng nội dung từ các nguồn bên ngoài, như video hoặc ứng dụng. |
figcaption | Một chú thích hoặc chú giải cho hình: Sử dụng để thêm mô tả hoặc chú thích cho một phần hình ảnh trong thẻ <figure>. |
figure | Một hình minh họa: Được sử dụng để nhóm một hoặc nhiều phần của nội dung, thường là hình ảnh, với một chú thích bằng thẻ <figcaption>. |
footer | Chân trang hoặc nội dung ít quan trọng: Đánh dấu một phần cuối trang hoặc phần cuối của một phần nội dung với ý nghĩa ít quan trọng hơn. |
header | Tiêu đề hoặc thông tin quan trọng: Chứa các phần tử tiêu đề hoặc thông tin quan trọng trong trang web. |
main | Nội dung chính của tài liệu: Xác định phần chính của tài liệu, loại bỏ các phần header, footer, và sidebar. |
mark | Văn bản được làm nổi bật: Đánh dấu một phần của văn bản để làm nổi bật nó, thường được sử dụng trong kết quả tìm kiếm. |
meter | Giá trị dạng số trong khoảng đã biết: Đánh dấu một giá trị số trong một khoảng đã biết, thường được sử dụng để đo lường tiến trình. |
nav | Một phần của liên kết điều hướng: Xác định một khối nội dung là một phần của liên kết điều hướng trong trang web. |
output | Kết quả của một phép tính: Chứa kết quả của một phép tính hoặc quá trình trong trang web. |
picture | Một bảng chứa nhiều nguồn hình ảnh: Sử dụng để định nghĩa một hoặc nhiều hình ảnh và nguồn hình ảnh tương ứng. |
progress | Tiến trình hoàn thành của một nhiệm vụ: Được sử dụng để hiển thị tiến trình của một quá trình hoặc nhiệm vụ đang diễn ra. |
rp | Cung cấp dấu ngoặc thay thế: Được sử dụng để hiển thị văn bản thay thế cho các ký tự có thể không được hỗ trợ. |
rt | Xác định cách phát âm của ký tự: Được sử dụng trong các biểu đồ ruby để xác định cách phát âm của một ký tự hoặc từ. |
ruby | Đại diện cho một chú thích ruby: Sử dụng để đánh dấu và định nghĩa chú thích ruby cho một hoặc nhiều ký tự. |
section | Một nhóm trong một loạt nội dung liên quan: Đánh dấu một phần của tài liệu chứa một nhóm nội dung liên quan. |
source | Tài nguyên cho các phần tử đa phương tiện: Xác định các nguồn dữ liệu hoặc tài nguyên đa phương tiện cho các phần tử như <audio> hoặc <video>. |
summary | Một tóm tắt cho phần tử <details>: Chứa một tóm tắt ngắn gọn hoặc tiêu đề cho một phần mở rộng được định nghĩa bởi thẻ <details>. |
template | Xác định các đoạn mã HTML được lưu trữ để sử dụng lại: Sử dụng để định nghĩa một mẫu HTML mà bạn có thể sử dụng lại trong cùng một trang hoặc trang khác. |
time | Một thời gian hoặc ngày: Đánh dấu một đoạn văn bản như một thời gian hoặc ngày, giúp máy tính hiểu và xử lý thông tin thời gian. |
track | Văn bản theo dõi cho các phần tử đa phương tiện: Chứa văn bản theo dõi, như phụ đề, cho các phần tử như <audio> hoặc <video>. |
video | Nhúng video: Sử dụng để nhúng video trong trang web. |
wbr | Cơ hội xuống dòng: Chứa một dấu cách xuống dòng có thể được sử dụng để hiển thị một điểm cắt có thể ngắn gọn cho văn bản. |
⚡️ HTML5 Video
HTML5 Video
<video controls width="100%">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
Ví dụ
⚡️ HTML5 Audio
HTML5 Audio
<audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
Your browser does not support the audio element.
</audio>
Ví dụ
⚡️ HTML5 kdi
HTML5 kdi
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
Ví dụ
User hrefs: 60 points
User jdoe: 80 points
User إيان: 90 points
⚡️ HTML5 mark
HTML5 mark
<p>I Love <mark>thanhnamnguyen.dev</mark></p>
Ví dụ: I Love thanhnamnguyen.dev
⚡️ HTML5 progress
HTML5 progress
<progress value="54" max="100"></progress>
Ví dụ:
3. Các bảng (tables) trong HTML5
⚡️ HTML5 Table
HTML5 Table
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Roberta</td>
<td>39</td>
</tr>
<tr>
<td>Oliver</td>
<td>25</td>
</tr>
</tbody>
</table>
⚡️ Các thẻ liên quan đến table
| Thẻ | Mô tả |
|---|---|
<table> | Xác định một bảng |
<th> | Xác định một ô tiêu đề trong bảng |
<tr> | Xác định một dòng trong bảng |
<td> | Xác định một ô trong bảng |
<caption> | Xác định một chú thích cho bảng |
<colgroup> | Xác định một nhóm các cột trong bảng |
<col> | Xác định một cột trong bảng |
<thead> | Nhóm nội dung tiêu đề của bảng |
<tbody> | Nhóm nội dung chính của bảng |
<tfoot> | Nhóm nội dung chân trang của bảng |
⚡️ Các thuộc tính của thẻ <td>
| Thuộc tính | Mô tả |
|---|---|
colspan | Số cột mà một ô nên trải rộng trên nhiều cột |
headers | Một hoặc nhiều ô tiêu đề mà ô đó liên quan đến |
rowspan | Số dòng mà một ô nên trải rộng trên nhiều hàng |
👉 Xem thêm tại: thuộc tính thẻ td
⚡️ Các thuộc tính của thẻ <th>
| Thuộc tính | Mô tả |
|---|---|
colspan | Số cột mà một ô nên trải rộng trên nhiều cột |
headers | Một hoặc nhiều ô tiêu đề mà ô đó liên quan đến |
rowspan | Số dòng mà một ô nên trải rộng trên nhiều hàng |
abbr | Mô tả nội dung của ô |
scope | Mối quan hệ của phần tử tiêu đề với các ô dữ liệu |
👉 Xem thêm tại: thuộc tính thẻ th
4. Các thẻ danh sách (list) trong HTML5
⚡️ Danh sách không có thứ tự
Danh sách không có thứ tự
<ul>
<li>Tôi là item</li>
<li>Tôi là item khác</li>
<li>Tôi là item khác</li>
</ul>
Ví dụ
- Tôi là item
- Tôi là item khác
- Tôi là item khác
👉 Xem thêm tại: Danh sách không có thứ tự
⚡️ Danh sách có thứ tự
Danh sách có thứ tự
<ol>
<li>Tôi là item thứ 1</li>
<li>Tôi là item thứ 2</li>
<li>Tôi là item thứ 3</li>
</ol>
Ví dụ
- Tôi là item thứ 1
- Tôi là item thứ 2
- Tôi là item thứ 3
👉 Xem thêm tại: Danh sách có thứ tự
⚡️ Danh sách tự định nghĩa
Danh sách tự định nghĩa
<dl>
<dt>Thuật ngữ 1</dt>
<dd>Định nghĩa của thuật ngữ 1</dd>
<dt>Thuật ngữ 2</dt>
<dd>Định nghĩa của thuật ngữ 2</dd>
</dl>
Ví dụ
- Thuật ngữ 1
- Định nghĩa của thuật ngữ 1
- Thuật ngữ 2
- Định nghĩa của thuật ngữ 2
👉 Xem thêm tại: Danh sách định nghĩa
5. Các thẻ forms trong HTML5
Phần tử HTML <form> được sử dụng để thu thập và gửi thông tin đến nguồn bên ngoài.
Thẻ Form
<form method="POST" action="api/login">
<label for="mail">Email: </label>
<input type="email" id="mail" name="mail" />
<br />
<label for="pw">Mật khẩu: </label>
<input type="password" id="pw" name="pw" autocomplete="current-password" />
<br />
<input type="submit" value="Đăng nhập" />
<br />
<input type="checkbox" id="ck" name="ck" />
<label for="ck">Ghi nhớ</label>
</form>
Ví dụ
⚡️ Thuộc tính của thẻ Form
| Thuộc tính | Mô tả |
|---|---|
name | Tên của biểu mẫu để sử dụng trong kịch bản |
action | URL của kịch bản biểu mẫu |
method | Phương thức HTTP, POST / GET (mặc định) |
enctype | Loại phương tiện, xem enctype |
onsubmit | Chạy khi biểu mẫu được gửi đi |
onreset | Chạy khi biểu mẫu được đặt lại |
⚡️ Thẻ Label
Thẻ Label
<!-- label lồng nhau -->
<label
>Click vào đây
<input type="text" id="user" name="name" />
</label>
<!-- thuộc tính `for` trong thẻ lable sẽ tham chiếu đến thuộc tính `id` của thẻ input -->
<label for="user">Click vào đây</label>
<input id="user" type="text" name="name" />
⚡️ Thẻ Input
Thẻ Input
<label for="Name">Tên:</label> <input type="text" name="Name" id="Name" />
👉 Xem thêm tại: thẻ input
⚡️ Thẻ Textarea: Textarea là một kiểu nhập văn bản được phép nhập nhiều dòng.
Thẻ Textarea
<textarea rows="2" cols="30" name="address" id="address"></textarea>
⚡️ Radio Buttons: Radio buttons được sử dụng dành cho người dùng chọn 1 cách chính xác.
Radio Buttons
<input type="radio" name="gender" id="m" />
<label for="m">Nam</label>
<input type="radio" name="gender" id="f" />
<label for="f">Nữ</label>
⚡️ Checkboxes: Checkboxes cho phép người dùng chọn 1 hoặc nhiều.
Checkboxes
<input type="checkbox" name="s" id="soc" />
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas" />
<label for="bas">Baseball</label>
⚡️ Thẻ Select: Hộp chọn là danh sách thả xuống các tùy chọn.
Thẻ Select
<label for="city">City:</label>
<select name="city" id="city">
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
</select>
⚡️ Thẻ Fieldset
Thẻ Fieldset
<fieldset>
<legend>Quái vật yêu thích của bạn</legend>
<input type="radio" id="kraken" name="kraken" />
<label for="kraken">Kraken</label><br />
<input type="radio" id="sas" name="m" />
<label for="sas">Sasquatch</label>
</fieldset>
⚡️ Thẻ Datalist
Thẻ Datalist
<label for="b">Chọn trình duyệt: </label>
<input list="list" id="b" name="browser" />
<datalist id="list">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
⚡️ Nút Submit và Reset: Submit để gửi dữ liệu lên server; Reset về giá trị mặc định.
Nút Submit và Reset
<form action="register.php" method="post">
<label for="foo">Name:</label>
<input type="text" name="name" id="foo" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
6. Các thẻ input trong HTML5
⚡️ Thuộc tính của thẻ Input: Thẻ input là một phần tử trống, xác định loại thông tin trường cụ thể cần lấy từ người dùng
Thuộc tính của thẻ Input
<input type="text" name="?" value="?" minlength="6" required />
| Thuộc tính | Mô tả |
|---|---|
type="..." | Loại dữ liệu đang được nhập |
value="..." | Giá trị mặc định |
name="..." | Sử dụng để mô tả dữ liệu này trong yêu cầu HTTP |
id="..." | Định danh duy nhất cho các phần tử HTML khác |
readonly | Ngăn chặn người dùng sửa đổi |
disabled | Ngăn chặn bất kỳ tương tác nào |
checked | Được chọn hoặc không (cho radio hoặc checkbox) |
required | Bắt buộc, xem required |
placeholder="..." | Thêm một văn bản tạm thời, xem ::placeholder |
autocomplete="off" | Tắt tự động hoàn thành |
autocapitalize="none" | Tắt tự động chữ hoa |
inputmode="..." | Hiển thị một bàn phím cụ thể, xem inputmode |
list="..." | Id của một datalist liên quan |
maxlength="..." | Số ký tự tối đa |
minlength="..." | Số ký tự tối thiểu |
min="..." | Giá trị số tối thiểu cho range và number |
max="..." | Giá trị số tối đa cho range và number |
step="..." | Cách số sẽ tăng/giảm trong range và number |
pattern="..." | Chỉ định một biểu thức chính quy, xem pattern |
autofocus | Tự động tập trung |
spellcheck | Thực hiện kiểm tra chính tả |
multiple | Cho phép nhiều giá trị hay không |
accept="" | Loại tệp tin dự kiến trong điều khiển tải lên |
⚡️ Các loại Input
type="checkbox"
<input type="checkbox" />
Ví dụ:
type="radio"
<input type="radio" />
Ví dụ:
type="file"
<input type="file" />
Ví dụ:
type="hidden"
<input type="hidden" />
Ví dụ:
type="text"
<input type="text" />
Ví dụ:
type="password"
<input type="password" />
Ví dụ:
type="image"
<input type="image" />
Ví dụ:
type="reset"
<input type="reset" />
Ví dụ:
type="button"
<input type="button" />
Ví dụ:
type="submit"
<input type="submit" />
Ví dụ:
type="color"
<input type="color" />
Ví dụ:
type="date"
<input type="date" />
Ví dụ:
type="time"
<input type="time" />
Ví dụ:
type="month"
<input type="month" />
Ví dụ:
type="datetime-local"
<input type="datetime-local" />
Ví dụ:
type="week"
<input type="week" />
Ví dụ:
type="email"
<input type="email" />
Ví dụ:
type="tel"
<input type="tel" />
Ví dụ:
type="url"
<input type="url" />
Ví dụ:
type="number"
<input type="number" />
Ví dụ:
type="search"
<input type="search" />
Ví dụ:
type="range"
<input type="range" />
Ví dụ:
⚡️ Input CSS selectors
Input CSS selectors
input:focus - When its keyboard focused
👉 Xem thêm tại: Input pseudo classes
7. Các thẻ meta trong HTML5
⚡️ Thẻ Meta: Thẻ meta mô tả dữ liệu meta trong tài liệu HTML. Nó giải thích tài liệu bổ sung về HTML.
Thẻ Meta
<meta charset="utf-8" />
<!-- title -->
<title>···</title>
<meta property="og:title" content="···" />
<meta name="twitter:title" content="···" />
<!-- url -->
<link rel="canonical" href="https://···" />
<meta property="og:url" content="https://···" />
<meta name="twitter:url" content="https://···" />
<!-- description -->
<meta name="description" content="···" />
<meta property="og:description" content="···" />
<meta name="twitter:description" content="···" />
<!-- image -->
<meta property="og:image" content="https://···" />
<meta name="twitter:image" content="https://···" />
<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- viewport -->
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=1024" />
⚡️ Open Graph: Được dùng bởi Facebook, Instagram, Pinterest, LinkedIn...
Open Graph
<!-- Thẻ Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Tiêu đề của bạn" />
<meta property="og:description" content="Mô tả ngắn về nội dung của bạn" />
<meta property="og:image" content="URL_hinh_anh" />
<meta property="og:url" content="URL_trang_web" />
<!-- Các thẻ khác (tùy chọn) -->
<meta property="og:site_name" content="Tên trang web" />
<meta property="og:locale" content="en_US" />
⚡️ Twitter Cards: là một cách để làm cho các liên kết được chia sẻ trên Twitter trở nên phong phú hơn bằng cách hiển thị thông tin bổ sung về nội dung của trang web.
Twitter Cards
<!-- Thẻ Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Tiêu đề của bạn" />
<meta name="twitter:description" content="Mô tả ngắn về nội dung của bạn" />
<meta name="twitter:image" content="URL_hinh_anh" />
<!-- Các thẻ khác (tùy chọn) -->
<meta name="twitter:site" content="@ten_nguoi_dang" />
<meta name="twitter:creator" content="@ten_nguoi_tao" />
<meta name="twitter:url" content="URL_trang_web" />
👉 Xem thêm tại: Twitter Card
⚡️ Geotagging: thẻ sử dụng để gắn vị trí địa lý.
Geotagging
<meta name="ICBM" content="45.416667,-75.7" />
<meta name="geo.position" content="45.416667;-75.7" />
<meta name="geo.region" content="ca-on" />
<meta name="geo.placename" content="Ottawa" />
<meta name="geo.region" content="country, region">:Xác định quốc gia và khu vực của trang web. Điều này có thể giúp công cụ tìm kiếm hiểu rõ vị trí địa lý chính của trang web.<meta name="geo.placename" content="City, State">:Chỉ định tên địa điểm cụ thể (thành phố, tỉnh, hoặc bang) liên quan đến trang web.<meta name="geo.position" content="latitude; longitude">:Cung cấp thông tin vị trí chính xác của trang web thông qua tọa độ latitude và longitude.<meta name="ICBM" content="latitude, longitude">:Cung cấp thông tin vị trí bằng cách sử dụng tọa độ latitude và longitude. Tương tự như geo.position.
👉 Xem thêm tại: Geotagging
