- Trang chủ
- Tham khảo
- Tag html
- <head>
Định nghĩa và sử dụng
Tag <head> khai báo thông tin cho trang HTML, những thông tin đó bao gồm: <title>, <meta />, <link /> và <script>
Sự khác nhau giữa HTML và XHTML
| Không có sự khác biệt |
Ví dụ
Html viết:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="đường dẫn tới file css" rel="stylesheet" type="text/css" media="screen,print" />
<script
type="text/javascript" src="đường dẫn tới file javascript"></script>
<title>Tiêu đề trang web</title>
</head>
<body>
<p>Nội dung</p>
</body>
</html>
Phần đầu <head> chứa các tag:
- <meta />: khai báo thông tin cho văn bản HTML.
- <link />: kết nối tới file css.
- <script>: kết nối tới file javascript.
- Phần thân <base>: tất cả nội dung được code trong phần thân sẽ hiển thị ra trình duyệt (những phần khác thì không).
Hiển thị trình duyệt:
Trình duyệt hỗ trợ
<head> được hỗ trợ trong tất cả trình duyệt, bắt buộc phải có.
Thuộc tính
Cách sử dụng: <head thuoctinh="giatri"></head>
Thuộc tính tùy chọn
| profile | URL | profile="reg.html" | Xác định một URL tới tài liệu có chứa một bộ các quy tắc, các quy tắc được đọc bởi trình duyệt để hiểu rõ thông tin của thẻ <meta />. |
Thuộc tính tổng quát (xem thêm)
| dir | rtl ltr | dir="rtl" | Xác định hướng văn bản cho các nội dung trong một thành phần. |
| lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần. |
| tabindex | Số | tabindex="5" | Xác định thứ tự tab của một thành phần. |
| xml:lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML. |
Nội dung
- Phần tử HTML <head>
- Bỏ qua <html> và <body>?
- Ví dụ:
- Bỏ qua <head>
- Ví dụ:
- Phần tử HTML <title>
- Ví dụ:
- Phần tử HTML <style>
- Ví dụ:
- Phần tử HTML <link>
- Ví dụ:
- Phần tử HTML <meta>
- Ví dụ:
- Phần tử HTML <script>
- Ví dụ:
- Phần tử HTML <base>
- Ví dụ:
- Phần tử HTML head
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>
<h2>Đây là phần mở đầu</h2>
<p>Đây là một đoạn văn.</p>
Xem kết quả
| 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><h2>Đây là phần mở đầu</h2>
<p>Đây là một đoạn văn.</p>
</body>
</html>
Xem kết quả
| 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>
Xem kết quả
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>
Xem kết quả
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:
Đị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”>
Xem kết quả
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>
Xem kết quả
| Để 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:
Ví dụ:
<base href=“//timoday.edu/vn/images/” target=“_blank”>
Xem kết quả
Phần tử HTML head
| <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 |