Phần tử <head> HTML
Phần tử <head> là một bộ chứa cho metadata (dữ liệu cho dữ liệu) và được đặt giữa thẻ <html> và thẻ <body>
Metadata là dữ liệu về tài liệu HTML. Metadata không được hiển thị.
Metadata thường xác định tiêu đề tài liệu, charset, styles, liên kết, script và các thông tin meta khác.
Những thẻ sau dùng để mô tả metadata: <title>, <style>, <meta>, <link>, <script>, và <base>.
Phần tử <title> HTML
Phần tử <title> xác định tiêu đề của tài liệu, và cần có trong mọi tài liệu HTML/XHTML.
Các chức năng chính của phần tử <title>:
- Xác định tiêu đề trong tab trình duyệt
- Cung cấp 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 các kết quả tìm kiếm của search engine như Google,Bing,…
Ví dụ đơn giản về tài liệu HTML
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
</head>
<body>
Nội dung tài liệu . . . .
</body>
</html>
Phần tử <style> HTML
Phần tử style được sử dụng để xác định thông tin style cho một trang HTML đơn.
Ví dụ
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Phần tử <link> HTML
Phần tử <link> được sử dụng để liên kết tới một file CSS ngoài.
Ví dụ
<link rel="stylesheet" href="mystyle.css">
Phần tử <meta> HTML
Phần tử <meta> dùng để chỉ ra bộ ký tự được sử dụng, mô tả trang, từ khóa, tác giả, và các metadata khác.
Metadata được sử dụng bởi trình duyệt (cách hiển thị nội dung), bởi các bộ máy 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ả cho trang web:
<meta name="description" content="Free Web tutorials">
Xác định từ khóa (keywords) cho các bộ máy 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="Ủn Ỉn">
Refresh(làm mới) tài liệu mỗi 30 giây:
<meta http-equiv="refresh" content="30">
Ví dụ về thẻ <meta>
Ví dụ
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Ủn Ỉn">
Thiết lập chế độ xem
HTML5 giới thiệu một phương thức cho phép web designer có quyền kiểm soát khung nhìn(viewport) thông qua thẻ <meta>.
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 thêm phần tử <meta> viewport sau vào mọi trang web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Phần tử <meta> viewport 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 khớp với chiều rộng của thiết bị (vì chiều rộng có thể khác nhau tùy vào thiết bị)
Phần initial-scale=1.0 đặt độ zoom ban đầu khi trang được trình duyệt tải lần đầu tiên.
Ví dụ về trang không có <meta> viewport và trang có <meta> viewport.
.png)
Phần tử <script> HTML
Phần tử <script> được sử dụng để xác định JavaScript trên máy khách.
Đoạn JavaScript này viết “Hello JavaScript!” vào phần tử HTML có id=“demo”.
Ví dụ
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Phần tử <base> HTML
Phần tử <base> xác định URL mặc định hoặc target mặc định cho mọi URL liên quan trong trang.
Ví dụ
<base href="https://tedu.com.vn" target="_blank">
Quên thẻ <html>, <head> và <body>?
Theo tiêu chuẩn HTML5 thẻ <html>,<body> và <head> có thể được bỏ qua.
Đoạn mã sau hợp lệ trong HTML5:
Ví dụ
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Note: Tuy là những thẻ này có thể được bỏ qua, nhưng điều này không được khuyến khích. Vì bỏ qua những thẻ này có thể gây crash DOM (Document Object Model) hoặc phần mềm XML tạo ra các lỗi trong các trình duyệt cũ hơn (IE9).
Bảng tham khảo
|
Thẻ |
Mô tả |
|
<head> |
Xác định thông tin về tài liệu |
|
<title> |
Xác định tiêu đề tài liệu |
|
<base> |
Xác định địa chỉ hoặc target mặc định cho mọi liên kết trong trang |
|
<link> |
Xác định liên kết của trang với các tài nguyên mở rộng (như file CSS,font,…) |
|
<meta> |
Xác định metadata của tài liệu (charset,decription,keywords,author) |
|
<script> |
Xác định script chạy trên máy khách |
|
<style> |
Xác định thông tin style cho tài liệu |
Trích nguồn từ: (https://www.w3schools.com/html/html_head.asp)
