Lập Trình HTML Cơ Bản

Thẻ meta trong HTML

Posted on by ComdyVN

Thẻ meta trong HTML

HTML cho phép bạn định nghĩa siêu dữ liệu – là những 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 bao gồm các cặp tên / giá trị có thể được sử dụng để 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 xuất bản, danh sách các từ khóa, giới thiệu nội dung, v.v.

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

Bạn có thể có 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 lưu trữ trong tài liệu. Nhưng nói chung, thẻ meta không ảnh hưởng đến giao diện vật lý của tài liệu. Vì vậy đứng ở quan điểm giao diện, không có vấn đề gì xảy ra nếu bạn sử dụng hay không sử dụng thẻ meta.

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 thể hiện bằng thẻ <head> … </head>. Thẻ meta có thể có các thuộc tính sau ngoài các thuộc tính cốt lõi

STT Thuộc tính & Mô tả
1

name

Tên của thuộc tính. Có thể là bất cứ điều gì. Ví dụ: include, keywords, description, author, revised, generator, v.v
2

content

Chỉ định giá trị của thuộc tính.
3

scheme

Chỉ định sơ đồ để giải thích giá trị của thuộc tí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: content-type, expires, refresh 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 sử dụng bởi các công cụ tìm kiếm trong khi lập chỉ mục trang web của bạn cho mục đích tìm kiếm.

Ví dụ minh họa meta keywords trong HTML

Sau đây là một ví dụ, chúng tôi sẽ thêm từ khóa: HTML, Meta Tags, Metadata làm từ khóa 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>

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ụ minh họa mô tả tài liệu sử dụng thẻ meta trong HTML:

<!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ề 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ụ minh họa thẻ ngày sửa đổi tài liệu sử dụng thẻ meta trong HTML:

<!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="Comdy Technical, 04/13/2020" />
   </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 khoảng thời gian mà sau đó trang web của bạn sẽ tự động làm mới.

Ví dụ minh họa làm mới tài liệu sử dụng thẻ meta trong HTML:

<!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="Comdy Technical, 04/13/2020" />
      <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 bạn đến bất kỳ trang web nào khác. Bạn cũng có thể chỉ định khoảng thời gian nếu bạn muốn chuyển hướng trang sau một số giây nhất định.

Ví dụ minh họa chuyển hướng trang sử dụng thẻ meta trong HTML:

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>Meta Tags Example</title>
      <meta name="keywords" content="HTML, Meta Tags, Metadata" />
      <meta name="description" content="Learning about Meta Tags." />
      <meta name="revised" content="Comdy Technical, 4/13/2020" />
      <meta http-equiv="refresh" content="5; url=https://tech.comdy.vn" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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ụ minh họa thiết lập cookie sử dụng thẻ meta trong HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv="cookie" content="userid=xyz; expires=Thursday, 30-Apr-20 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

Nếu bạn không cung cấp thời gian 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.

Thiết lập tên tác giả

Bạn có thể thiết lập tên tác giả trong một trang web bằng cách sử dụng thẻ meta.

Ví dụ minh họa thiết lập tên tác giả sử dụng thẻ meta trong HTML:

<!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="Trung Nguyen" />
   </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ụ minh họa chỉ định bộ ký tự sử dụng thẻ meta trong HTML:

Theo mặc định, các 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ụ để thiết lập 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>

Với các trang web sử dụng ký tự Trung Quốc truyền thống, trang web phải chứa thẻ <meta> được thiết lập 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="Trung Nguyen" />
      <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *