Thuộc tính tên HTML <meta>

❮ Thẻ HTML <meta>

Thí dụ

Sử dụng thuộc tính name để xác định mô tả, từ khóa và tác giả của tài liệu HTML. Đồng thời xác định chế độ xem để kiểm soát kích thước và tỷ lệ của trang cho các thiết bị khác nhau:

<head>
  <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>

Thuộc nametính chỉ định tên cho siêu dữ liệu.

Thuộc nametính chỉ định tên cho thông tin / giá trị của contentthuộc tính.

Lưu ý: Nếu http-equivthuộc tính được đặt thì namekhông nên đặt thuộc tính.

HTML5 đã giới thiệu một phương pháp cho phép các nhà thiết kế web kiểm soát chế độ xem (vùng hiển thị của người dùng trên một trang web), thông qua <meta>thẻ (Xem ví dụ "Đặt Chế độ xem" bên dưới).


Hỗ trợ trình duyệt

Attribute
name Yes Yes Yes Yes Yes

Cú pháp

<meta name="value">

Giá trị thuộc tính

Value Description
application-name Specifies the name of the Web application that the page represents
author Specifies the name of the author of the document. Example:
<meta name="author" content="John Doe">
description Specifies a description of the page. Search engines can pick up this description to show with the results of searches. Example:
<meta name="description" content="Free web tutorials">
generator Specifies one of the software packages used to generate the document (not used on hand-authored pages). Example:
<meta name="generator" content="FrontPage 4.0">
keywords Specifies a comma-separated list of keywords - relevant to the page (Informs search engines what the page is about).

Tip: Always specify keywords (needed by search engines to catalogize the page). Example:
<meta name="keywords" content="HTML, meta tag, tag reference">
viewport Controls the viewport (the user's visible area of a web page).

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.


You can read more about the viewport in our Responsive Web Design - The Viewport Tutorial.


❮ Thẻ HTML <meta>