NỘI DUNG BÀI VIẾT
Phần tử <head>
Phần tử head trong HTML 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>
Lưu ý: 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>
Lưu ý: 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:
Ví dụ:
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
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:
Ví dụ:
<link rel=“stylesheet” href=“mystyle.css”>
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 học lập trình miễn phí”>
Đị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=“hocjavascript.net”>
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>
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:
Ví dụ:
<base href="https://hocjavscript.net" target="_blank">
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 |
Kết luận
Qua đây là một số chia sẻ về phần tử head trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
