Phần tử head HTML

Phần <head> tử là một thùng chứa siêu dữ liệu (dữ liệu về dữ liệu) và được đặt giữa <html>thẻ và <body>thẻ.



Siêu dữ liệu HTML là dữ liệu về tài liệu HTML. Siêu dữ liệu không được hiển thị.

Siêu dữ liệu thường xác định tiêu đề tài liệu, bộ ký tự, kiểu, tập lệnh và thông tin meta khác.

Các thẻ sau đây mô tả siêu dữ liệu: <title>, <style>, <meta>, <link>, <script>, và <base>.

Phần tử <title> HTML
Phần <title>tử xác định tiêu đề của tài liệu và được yêu cầu trong tất cả các tài liệu HTML.

Các <title>yếu tố:

định nghĩa một tiêu đề trong tab trình duyệt
cung cấp một tiêu đề cho trang khi nó được thêm vào mục yêu thích
hiển thị tiêu đề cho trang trong kết quả của công cụ tìm kiếm

Một tài liệu HTML đơn giản:

Thí dụ
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>

Phần tử <style> HTML
Phần <style>tử được sử dụng để xác định thông tin kiểu cho một trang HTML:

Thí dụ
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

Phần tử <link> HTML
Phần <link>tử được sử dụng để liên kết với các biểu định kiểu bên ngoài:

Thí dụ
<link rel="stylesheet" href="mystyle.css">

Phần tử <meta> HTML
Phần <meta>tử được sử dụng để chỉ định bộ ký tự nào được sử dụng, mô tả trang, từ khóa, tác giả và siêu dữ liệu khác.

Siêu dữ liệu được sử dụng bởi các trình duyệt (cách hiển thị nội dung), bởi các công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.

Xác định bộ ký tự được sử dụng:

<meta charset="UTF-8">
Xác định một mô tả của trang web của bạn:

<meta name="description" content="Free Web tutorials">
Xác định từ khóa cho công cụ tìm kiếm:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Xác định tác giả của một trang:

<meta name="author" content="John Doe">
Làm mới tài liệu cứ sau 30 giây:

<meta http-equiv="refresh" content="30">
Ví dụ về <meta>thẻ:

Thí dụ
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Đặt Chế độ xem
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, thông qua <meta>thẻ.

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ị và sẽ nhỏ hơn trên điện thoại di động so với trên màn hình máy tính.

Bạn nên bao gồm <meta>yếu tố chế độ xem sau trong tất cả các trang web của mình:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Phần <meta>tử khung nhìn cung cấp cho hướng dẫn trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.

Phần width = width-width thiết lập 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 scale-scale = 1.0 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.

Dưới đây là ví dụ về một trang web không có thẻ meta chế độ xem và cùng một trang web có<meta> thẻ chế độ xem :

Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết bên dưới để thấy sự khác biệt.