Các thẻ meta trong HTML

HTML cho phép bạn chỉ định siêu dữ liệu (metadata) - 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ị (name/value) 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 các từ khóa, tác giả tài liệu, v.v.

Các thẻ <meta> được sử dụng để cung cấp thông tin bổ sung. 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 trong các thuộc tính của nó.

Bạn có thể bổ sung 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 diện mạo vật lý của tài liệu, vì vậy, từ quan điểm xuất hiện, không có vấn đề gì nếu bạn đưa vào hay không


Thêm thẻ Meta vào tài liệu

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 thể hiện bởi thẻ <head></head> . Thẻ meta có thể có các thuộc tính sau ngoài các thuộc tính chính.
  • Name: Tên thuộc tính. Có thể là bất cứ điều gì. Ví dụ từ khóa, mô tả, tác giả, sửa đổi, trình tạo, vv
  • Content: Xác định giá trị của thuộc tính.
  • Scheme: Chỉ định 1 lược đồ để giải thích giá trị của thuộc tính (như đã mô tả trong thuộc tính content)
  • http-equiv: Được sử dụng cho các phản hồi http. Ví dụ, http-equiv có thể được sử dụng để làm mới trang, thiết lập cookie. Các giá trị bao gồm content-type, expires, refreshset-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.

Ví dụ
Sau đây là một ví dụ, chúng ta đang thêm HTML, Thẻ meta, Meatadata làm từ khóa quan trọng về tài liệu.
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
</head>
<body>
<p> Xin chào HTML5! </p>
</body>
</html>

Mô tả tài liệu

Bạn có thể sử dụng thẻ <meta> để mô tả ngắ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.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
<meta name = "description" content = "Tìm hiểu về Thẻ Meta." />
</head>
<body>
<p> Xin chào 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ề lần cuối cùng tài liệu được cập nhật. 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.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
<meta name = "description" content = "Tìm hiểu về Thẻ Meta." />
<meta name = "revised" content = "Hướng dẫn, 3/7/2019" />
</head>
<body>
<p> Xin chào 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ẽ tiếp tục tự động làm mới.

Ví 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 thì hãy sử dụng cú pháp sau.
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
<meta name = "description" content = "Tìm hiểu về Thẻ Meta." />
<meta name = "revised" content = "Hướng dẫn, 3/7/2019" />
<meta http-Equiv = "refresh" content = "5" />
</head>
<body>
<p> Xin chào 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 bạn đế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.

Ví dụ
Sau đây là một ví dụ về việc 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 content.
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </ title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
<meta name = "description" content = "Tìm hiểu về Thẻ Meta." />
<meta name = "revised" content = "Hướng dẫn, 3/7/2019" />
<meta http-Equiv = "refresh" content = "5; url = http://learnskill.vn" />
</head>
<body>
<p> Xin chào HTML5! </p>
</body>
</html>

Cài đặt cookie

Cookies 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 đó thông tin này có thể được Máy chủ Web sử dụng để theo dõi khách truy cập trang web.

Ví dụ
Sau đây là một ví dụ về việc 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 content.
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </ title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
<meta name = "description" content = "Tìm hiểu về Thẻ Meta." />
<meta name = "revised" content = "Hướng dẫn, 3/7/2019" />
<meta http-Equiv = = "cookie" Nội dung = = "Userid = xyz; expires = Wednesday, 08-Aug-16, 23:59:59 GMT; " />
</head>
<body>
<p> Xin chào HTML5! </p>
</body>
</html>
Nếu bạn không khai báo ngày và thời gian hết hạn, cookie được xem như một phiên cookie và sẽ bị xóa khi người dùng thoát khỏi trình duyệt.
chú thích - Bạn có thể kiểm tra PHP và Cookies cho hướng dẫn 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 cách sử dụng thẻ meta. Xem ví dụ dưới đây.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
<meta name = "description" content = "Tìm hiểu về Thẻ Meta." />
<meta name = "authour" content = "hieulv68" />
</head>
<body>
<p> Xin chào 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.

Ví dụ
Theo mặc định, máy chủ web và trình duyệt Web sử dụng mã hóa ISO-8859-1 (Latin 1) để xử lý các trang web. Sau đây là một ví dụ để đặt mã hóa UTF-8. (lưu ý: để hiển thị chính xác tiếng Việt bạn cần thiết lập mã UTF-8)

<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thẻ Meta </ title>
<meta name = "keywords" content = "HTML, Thẻ meta, Metadata" />
<meta name = "description" content = "Tìm hiểu về Thẻ Meta." />
<meta name = "authour" content = "hieulv68" />
<meta http-Equiv = "content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p> Xin chào HTML5! </p>
</body>
</html>