HTML Head
Trong hướng dẫn này, bạn sẽ tìm hiểu về tầm quan trọng của phần tử Head.
Phần tử phần đầu HTML ( HTML Head)
Phần tử<head>chủ yếu là vùng chứa cho tất cả các phần tử head, cung cấp thêm thông tin về tài liệu (siêu dữ liệu) hoặc tham chiếu đến các tài nguyên khác cần thiết để tài liệu hiển thị hoặc hoạt động chính xác trong trình duyệt web.
Các phần tử head mô tả chung các thuộc tính của tài liệu như tiêu đề, cung cấp thông tin meta như bộ ký tự, hướng dẫn trình duyệt nơi tìm các biểu định kiểu hoặc tập lệnh cho phép bạn mở rộng tài liệu HTML theo những cách hoạt động và tương tác cao.
Các phần tử HTML có thể được sử dụng bên trong<head>yếu tố là:<title>,<base>,<link>,<style>,<meta>,<script>và các yếu tố<noscript>.
Phần tử tiêu đề HTML
Phần tử<title>xác định tiêu đề của tài liệu.
Phần tử tiêu đề là bắt buộc trong tất cả các tài liệu HTML / XHTML để tạo ra một tài liệu hợp lệ.Chỉ một phần tử tiêu đề được phép trong một tài liệu và nó phải được đặt trong phần tử<head>đó.Phần tử tiêu đề chứa văn bản thuần túy và các thực thể;nó có thể không chứa các thẻ đánh dấu khác.
Tiêu đề của tài liệu có thể được sử dụng cho các mục đích khác nhau.Ví dụ:
- Để hiển thị tiêu đề trong thanh tiêu đề của trình duyệt và trong thanh tác vụ.
- Để cung cấp tiêu đề cho trang khi nó được thêm vào mục yêu thích hoặc được đánh dấu.
- Để hiển thị tiêu đề cho trang trong kết quả của công cụ tìm kiếm.
Ví dụ sau minh họa cách đặt tiêu đề trong tài liệu HTML.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Mẹo:Một tiêu đề tốt phải ngắn gọn và cụ thể cho nội dung của tài liệu, vì trình thu thập thông tin web của công cụ tìm kiếm đặc biệt chú ý đến các từ được sử dụng trong tiêu đề.Tiêu đề lý tưởng nên có độ dài dưới 65 ký tự.Xemhướng dẫn về tiêu đề.
Phần tử cơ sở HTML
Phần tử<base>HTMLđược sử dụng để xác định URL cơ sở cho tất cả các liên kết tương đối có trong tài liệu, ví dụ: bạn có thể đặt URL cơ sở một lần ở đầu trang của mình và sau đó tất cả các liên kết tương đối tiếp theo sẽ sử dụng URL đó làm điểm bắt đầu.Đây là một ví dụ:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defining a base URL</title>
<base href="https://vzn.vn/">
</head>
<body>
<p><a href="huong-dan-html/html-head/">HTML Head</a>.</p>
</body>
</html>Siêu liên kết trong ví dụ trên sẽ thực sự phân giảihttps://vzn.vn/huong-dan-html/html-head/bất kể URL của trang hiện tại.Điều này là do các URL có liên quan quy định tại liên kết: /huong-dan-html/html-head/sẽ được thêm vào cuối URL cơ sở:https://vzn.vn/.
Cảnh báo:Phần tử<base> trong HTMLphải xuất hiện trước bất kỳ phần tử nào đề cập đến tài nguyên bên ngoài.HTML chỉ cho phép một phần tử cơ sở cho mỗi tài liệu.
Phần tử liên kết (link) HTML
Phần tử<link>xác định mối quan hệ giữa tài liệu hiện tại và tài liệu hoặc tài nguyên bên ngoài.Cách sử dụng phổ biến của phần tử liên kết là liên kết với các trang định kiểu bên ngoài.
Ví dụ
<head>
<title>Linking Style Sheets</title>
<link rel="stylesheet" href="style.css">
</head>Vui lòng xemphầnhướng dẫn CSSđể tìm hiểu chi tiết về các biểu định kiểu.
Lưu ý:<head>Phần tửcủa tài liệu HTMLcó thể chứa bất kỳ số phần tử<link>nào.Phần tử<link>có thuộc tính, nhưng không có nội dung.
Phần tử kiểu HTML
Phần tử<style>được sử dụng để xác định thông tin kiểu nhúng cho tài liệu HTML.Các quy tắc kiểu bên trong phần tử<style>chỉ định cách các phần tử HTML hiển thị trong trình duyệt.
Ví dụ
<head>
<title>Embedding Style Sheets</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head>Lưu ý:Nên sử dụng biểu định kiểu nhúng khi một tài liệu có kiểu duy nhất.Nếu cùng một biểu định kiểu được sử dụng trong nhiều tài liệu, thì một biểu định kiểu bên ngoài sẽ thích hợp hơn.Xem hướng dẫn vềkiểu HTMLđể tìm hiểu thêm về nó.
Phần tử meta HTML
Phần tử<meta>cung cấp siêu dữ liệu về tài liệu HTML.Siêu dữ liệu là một tập hợp dữ liệu mô tả và cung cấp thông tin về các dữ liệu khác.Đây là một ví dụ:
Ví dụ
<head>
<title>Specifying Metadata</title>
<meta charset="utf-8">
<meta name="author" content="John Smith">
</head>Phần tử meta sẽ được giải thích chi tiết hơn trongchương tiếp theo.
Phần tử tập lệnh HTML
Phần tử<script>được sử dụng để xác định tập lệnh phía máy khách, chẳng hạn như JavaScript trong tài liệu HTML.
Ví dụ sau sẽ hiển thị thông báo chào mừng trong trình duyệt:
Ví dụ
<head>
<title>Adding JavaScript</title>
<script>
document.write("<h1>Hello World!</h1>")
</script>
</head>