Bài 24: Thẻ Head trong HTML
Nội dung
Phần tử HTML <head>
Phần tử <head> là một khung chứa siêu dữ liệu – metadata (dữ liệu về dữ liệu).
HTML metadata là dữ liệu về tài liệu HTML. Metadata không được hiển thị.
Metadata thường xác định title, styles, links, scripts của tài liệu và thông tin meta khác.
Các thẻ sau mô tả metadata: <title>, <style>, <meta>, <link>, <script>, và <base>.
Bỏ qua <html> và <body>?
Trong chuẩn HTML5, thẻ <html>, thẻ <body>, và thẻ <head> có thể bỏ qua.
Các mã sau sẽ xác nhận như HTML5:
Ví dụ:
<!DOCTYPE html>
<title>Tiêu đề trang</title>
<h1>Đây là phần mở đầu</h1>
<p>Đây là một đoạn văn.</p>
 |
Tìm ở đây không khuyến khích bạn bỏ qua thẻ <html> và <body>. |
|---|
Phần tử <html> là gốc tài liệu. Đây là nơi được đề nghị để xác định ngôn ngữ trang:
<!DOCTYPE html>
<html lang=“vi”>
Khai báo một ngôn ngữ là quan trọng cho truy cập ứng dụng (đọc màn hình) và công cụ tìm kiếm.
Bỏ qua <html> và <body> có thể phá hỏng hoàn toàn các phần mềm DOM/XML.
Cuối cùng, bỏ qua<body> có thể tạo ra những lỗi trong trình duyệt cũ (IE9).
Bỏ qua <head>
Trong chuẩn HTML5, thẻ <head> cũng có thể được bỏ qua.
Theo mặc định, trình duyệt sẽ add tất cả các phần tử trước <body>, đặt mặc định vào phần tử<head>.
Bạn có thể làm giảm độ phức tạp của HTML, bằng cách bỏ qua thẻ <head>:
Ví dụ:
<!DOCTYPE html>
<html>
<title>Tiêu đề trang</title>
<body><h1>Đây là phần mở đầu</h1>
<p>Đây là một đoạn văn.</p>
</body>
</html>
|
Bỏ thẻ là không phổ biến với các nhà phát triển web. Cần thời gian để được thiết lập như một xu hướng. |
|---|
Phần tử HTML <title>
Phần tử<title> định nghĩa tiêu đề cho tài liệu.
Phần tử <title> là cần thiết trong tất cả tài liệu HTML/XHTML.
Phần tử <title>:
- Định nghĩa một tiêu đề trong các 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 đề của một trang trong kết quả của tìm kiếm.
Một tài liệu HTML đơn giản:
Ví dụ:
<!DOCTYPE html>
<html>
<title>Tiêu đề trang</title
><body>
Nội dung của tài liệu……
</body>
</html>
Phần tử HTML <style>
Phần tử <style> được sử dụng để định nghĩa thông tin style cho một tài liệu HTML.
Trong phần tử <style> bạn sẽ định kiểu cho các phần tử HTML để xác định cách nó hiển thị như thế nào trong trình duyệt:
Phần tử HTML <link>
Phần tử <link> định nghĩa mối quan hệ của trang với một tài nguyên bên ngoài.
Phần tử <link> thường được sử dụng để liên kết đến các Style sheets:
Phần tử HTML <meta>
Phần tử <meta> được dùng để mô tả trang, từ khóa, tác giả, và các metadata khác.
Metadata được sử dụng bởi các trình duyệt (làm thế nào để hiển thị nội dung), bởi công cụ tìm kiếm (từ khóa), và các dịch vụ web khác.
Định nghĩa từ khóa cho công cụ tìm kiếm:
<meta name=“keywords” content=“HTML, CSS, XML, XHTML, JavaScript”>
Định nghĩa mô tả cho trang web của bạn:
<meta name=“description” content=“Hướng dẫn web miến phí về HTML và CSS”>
Định nghĩa bộ kí tự được sử dụng:
<meta charset=“UTF-8”>
Định nghĩa tác giả của trang :
<meta name=“author” content=“TimODay.edu.vn”>
Làm mới tài liệu 30s một lần:
<meta http-equiv=“refresh” content=“30”>
Ví dụ về thẻ <meta>:
Ví dụ:
<meta name=“description” content=“Hướng dẫn web miến phí”>
<meta name=“keywords” content=“HTML, CSS, XML, JavaScript”>
<meta name=“author” content=“TimODay.edu.vn>
<meta charset=“UTF-8”>
Phần tử HTML <script>
Phần tử <script> được sử dụng để định nghĩa code JavaScript phía client.
Script dưới đây viết Hello JavaScript! trong một phần tử HTML với id=”demo”:
Ví dụ:
<script>
function myFunction {
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
}
</script>
|
Để học về JavaScript, hãy ghé thăm JavaScript Tutorial của chúng tôi! |
|---|
Phần tử HTML <base>
Phần tử <base> chỉ định một URL cơ sở và target cơ sở đối với tất cả các URL liên quan trong một trang:
Phần tử HTML head
| Thẻ | Mô tả |
|---|---|
| <head> | Định nghĩa thông tin về tài liệu |
| <title> | Định nghĩa tiêu đề của tài liệu |
| <base> | Định nghĩa một address mặc định hoặc một target mặc định đối với tất cả các link trên trang web |
| <link> | Định nghĩa mối liên kết giữa một tài liệu và tài nguyên bên ngoài |
| <meta> | Định nghĩa metadata về một tài liệu HTML |
| <script> | Định nghĩa một script phía client |
| <style> | Định nghĩa thông tin style về tài liệu |
Toi phai lam gi
Bạn làm theo các ví dụ ở trong bài để xem kết quả và hiểu hơn về cách sử dụng các thẻ.