Học CNTT HTML

Thẻ HTML <meta>

Mục lục

Đị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 ChromeMS EdgeFirefoxSafariOpera
CóCóCóCóCó

Thuộc tính

Thuộc tínhGiá trịMô tả
charsetcharacter_setChỉ định mã hóa ký tự cho tài liệu HTML
contenttextChỉ định giá trị được liên kết với thuộc tính http-equiv hoặc tên
http-equivcontent-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
nameapplication-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:

Một trang web không có và có thẻ meta

Chủ Nhật, 26/03/2023 09:18
5 ★ 1 👨 174
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Bạn nên đọc

    ❖ HTML
    HTML