Thẻ HTML <meta>
Định nghĩa và cách sử dụng thẻ <meta>
Thẻ <meta>
xác định siêu dữ liệu (Metadata) về tài liệu HTML. Metadata là thông tin về dữ liệu. Ví dụ sau mô tả siêu dữ liệu trong tài liệu HTML:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Các thẻ <meta>
luôn nằm bên trong phần tử <head> và thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem.
Siêu dữ liệu sẽ không được hiển thị trên trang, nhưng máy có thể phân tích cú pháp. Siêu dữ liệu được sử dụng bởi trình duyệt (cách hiển thị nội dung hoặc load lại trang), công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.
Có một phương pháp cho phép các nhà thiết kế web kiểm soát chế độ xem (khu vực hiển thị của người dùng trên trang web), thông qua thẻ <meta>
.
Hỗ trợ trình duyệt
Phần tử <meta> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
charset | character_set | Chỉ định mã hóa ký tự cho tài liệu HTML |
content | text | Chỉ định giá trị được liên kết với thuộc tính http-equiv hoặc tên |
http-equiv | content-security-policy content-type default-style refresh | Cung cấp tiêu đề HTTP cho thông tin/giá trị của thuộc tính nội dung |
name | application-name author description generator keywords viewport | Chỉ định tên cho siêu dữ liệu |
Thuộc tính Global
Thẻ <meta>
cũng hỗ trợ thuộc tính Global trong HTML.
Một số ví dụ
Xác định từ khóa cho công cụ tìm kiếm:
<meta name="keywords" content="HTML, CSS, JavaScript">
Xác định mô tả về trang web của bạn:
<meta name="description" content="Free Web tutorials for HTML and CSS">
Xác định tác giả của một trang:
<meta name="author" content="John Doe">
Refresh tài liệu cứ sau 30 giây:
<meta http-equiv="refresh" content="30">
Đặt chế độ xem để làm cho trang web của bạn hiển thị tốt trên tất cả các thiết bị:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Đặt chế độ xem
Viewport (khung nhìn) là khu vực hiển thị của người dùng trên trang web. Nó thay đổi theo thiết bị - nhỏ hơn trên điện thoại di động và lớn hơn trên màn hình máy tính.
Bạn nên đưa phần tử <meta>
sau vào tất cả các trang web của mình:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Điều này cung cấp hướng dẫn cho trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.
Phần width=device-width
đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
Phần initial-scale=1.0
đặt mức zoom ban đầu khi trang được trình duyệt load lần đầu tiên.
Dưới đây là ví dụ về một trang web không có và có thẻ meta:

Bạn nên đọc
