HTML - Thẻ meta
HTML cho phép bạn chỉ định siêu dữ liệu - thông tin quan trọng bổ sung về tài liệu theo nhiều cách khác nhau. Các phần tử META có thể được sử dụng để bao gồm các cặp tên / giá trị mô tả các thuộc tính của tài liệu HTML, chẳng hạn như tác giả, ngày hết hạn, danh sách từ khóa, tác giả tài liệu, v.v.
Các <meta>được sử dụng để cung cấp thông tin bổ sung như vậy. Thẻ này là một phần tử trống và do đó không có thẻ đóng nhưng nó mang thông tin bên trong các thuộc tính của nó.
Bạn có thể bao gồm một hoặc nhiều thẻ meta trong tài liệu của mình dựa trên thông tin bạn muốn giữ trong tài liệu của mình nhưng nói chung, thẻ meta không ảnh hưởng đến hình thức thực tế của tài liệu, do đó, từ quan điểm giao diện, không quan trọng nếu bạn bao gồm họ hay không.
Thêm thẻ meta vào tài liệu của bạn
Bạn có thể thêm siêu dữ liệu vào các trang web của mình bằng cách đặt các thẻ <meta> bên trong tiêu đề của tài liệu được đại diện bởi <head> và </head>các thẻ. Thẻ meta có thể có các thuộc tính sau ngoài các thuộc tính cốt lõi:
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | Name Đặt tên cho tài sản. Có thể là bất cứ điều gì. Ví dụ bao gồm, từ khóa, mô tả, tác giả, sửa đổi, trình tạo, v.v. |
| 2 | content Chỉ định giá trị của thuộc tính. |
| 3 | scheme Chỉ định một lược đồ để diễn giải giá trị của thuộc tính (như được khai báo trong thuộc tính content). |
| 4 | http-equiv Được sử dụng cho tiêu đề thư phản hồi http. Ví dụ: http-equiv có thể được sử dụng để làm mới trang hoặc để đặt cookie. Các giá trị bao gồm loại nội dung, hết hạn, làm mới và set-cookie. |
Chỉ định Từ khóa
Bạn có thể sử dụng thẻ <meta> để chỉ định các từ khóa quan trọng liên quan đến tài liệu và sau đó các từ khóa này được các công cụ tìm kiếm sử dụng trong khi lập chỉ mục trang web của bạn cho mục đích tìm kiếm.
Thí dụ
Sau đây là một ví dụ, nơi chúng tôi đang thêm HTML, Thẻ Meta, Siêu dữ liệu làm từ khóa quan trọng của tài liệu.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Mô tả tài liệu
Bạn có thể sử dụng thẻ <meta> để mô tả ngắn gọn về tài liệu. Điều này một lần nữa có thể được sử dụng bởi các công cụ tìm kiếm khác nhau trong khi lập chỉ mục trang web của bạn cho mục đích tìm kiếm.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Ngày sửa đổi tài liệu
Bạn có thể sử dụng thẻ <meta> để cung cấp thông tin về thời điểm tài liệu được cập nhật lần cuối. Thông tin này có thể được sử dụng bởi các trình duyệt web khác nhau trong khi làm mới trang web của bạn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Làm mới tài liệu
Thẻ <meta> có thể được sử dụng để chỉ định thời lượng mà sau đó trang web của bạn sẽ tự động làm mới.
Thí dụ
Nếu bạn muốn trang của mình tiếp tục làm mới sau mỗi 5 giây, hãy sử dụng cú pháp sau.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Chuyển hướng trang
Bạn có thể sử dụng thẻ <meta> để chuyển hướng trang của mình đến bất kỳ trang web nào khác. Bạn cũng có thể chỉ định thời lượng nếu bạn muốn chuyển hướng trang sau một số giây nhất định.
Thí dụ
Sau đây là một ví dụ về chuyển hướng trang hiện tại sang trang khác sau 5 giây. Nếu bạn muốn chuyển hướng trang ngay lập tức thì không chỉ định thuộc tính nội dung .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Cài đặt Cookie
Cookie là dữ liệu, được lưu trữ trong các tệp văn bản nhỏ trên máy tính của bạn và nó được trao đổi giữa trình duyệt web và máy chủ web để theo dõi các thông tin khác nhau dựa trên nhu cầu ứng dụng web của bạn.
Bạn có thể sử dụng thẻ <meta> để lưu trữ cookie ở phía máy khách và sau này Máy chủ Web có thể sử dụng thông tin này để theo dõi khách truy cập trang web.
Thí dụ
Sau đây là một ví dụ về chuyển hướng trang hiện tại sang trang khác sau 5 giây. Nếu bạn muốn chuyển hướng trang ngay lập tức thì không chỉ định thuộc tính nội dung .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Nếu bạn không bao gồm ngày và giờ hết hạn, cookie được coi là cookie phiên và sẽ bị xóa khi người dùng thoát khỏi trình duyệt.
Note- Bạn có thể xem hướng dẫn PHP và Cookies để biết chi tiết đầy đủ về Cookies.
Đặt tên tác giả
Bạn có thể đặt tên tác giả trong một trang web bằng thẻ meta. Xem ví dụ bên dưới -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Chỉ định bộ ký tự
Bạn có thể sử dụng thẻ <meta> để chỉ định bộ ký tự được sử dụng trong trang web.
Thí dụ
Theo mặc định, máy chủ Web và trình duyệt Web sử dụng mã hóa ISO-8859-1 (Latin1) để xử lý các trang Web. Sau đây là một ví dụ để đặt mã hóa UTF-8:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Để cung cấp trang tĩnh có các ký tự tiếng Trung phồn thể, trang web phải chứa thẻ <meta> để đặt mã hóa Big5 -
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>