HTML - Phần tử đầu
Phần tử HTML <head> là nơi chứa các phần tử sau: <title> , <style> , <meta> , <link> , <script> và <base> .
Phần tử HTML <head>
Phần tử <head> là nơi chứa siêu dữ liệu (dữ liệu về dữ liệu) và được đặt giữa thẻ <html> và thẻ <body> .
Siêu dữ liệu HTML là dữ liệu về tài liệu HTML. Siêu dữ liệu không được hiển thị.
Siêu dữ liệu thường xác định tiêu đề tài liệu, bộ ký tự, kiểu, tập lệnh và thông tin meta khác.
Phần tử HTML <title>
Phần tử <title> xác định tiêu đề của tài liệu. Tiêu đề chỉ được ở dạng văn bản và được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.
Phần tử <title> là bắt buộc trong tài liệu HTML!
Nội dung của tiêu đề trang rất quan trọng để tối ưu hóa công cụ tìm kiếm (SEO)! Tiêu đề trang được thuật toán của công cụ tìm kiếm sử dụng để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.
Phần tử <title> :
- xác định tiêu đề trên thanh công cụ của 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 kết quả của công cụ tìm kiếm
Vì vậy, hãy cố gắng đặt tiêu đề chính xác và có ý nghĩa nhất có thể nhé!
Một tài liệu HTML đơn giản:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Hãy tự mình thử »Phần tử HTML <style>
Phần tử <style> được sử dụng để xác định thông tin kiểu cho một trang HTML:
Ví dụ
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style> Hãy tự mình thử » Phần tử HTML <link>
Phần tử <link> xác định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài.
Thẻ <link> thường được sử dụng nhất để liên kết tới các style sheet bên ngoài:
Mẹo: Để tìm hiểu tất cả về CSS, hãy truy cập Hướng dẫn CSS của chúng tôi.
Phần tử HTML <meta>
Phần tử <meta> thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem.
Siêu dữ liệu sẽ không được hiển thị trên trang mà được sử dụng bởi trình duyệt (cách hiển thị nội dung hoặc tải lại trang), bởi các công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.
Ví dụ
Xác định bộ ký tự được sử dụng:
<meta charset="UTF-8">
Xác định từ khóa cho công cụ tìm kiếm:
<meta name="keywords" content="HTML, CSS, JavaScript">
Xác định mô tả trang web của bạn:
<meta name="description" content="Free Web tutorials">
Xác định tác giả của một trang:
<meta name="author" content="John Doe">
Làm mới tài liệu sau mỗi 30 giây:
<meta http-equiv="refresh" content="30">
Đặt chế độ xem để làm cho trang web của bạn trông đẹp trên tất cả các thiết bị:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ví dụ về thẻ <meta> :
Ví dụ
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Hãy tự mình thử »Cài đặt khung nhìn
Chế độ xem là khu vực hiển thị của người dùng trên trang web. Nó thay đổi tùy theo thiết bị - nó 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 bao gồm phần tử <meta> sau trong tất cả các trang web của mình:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Điều này 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 theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
Phầninit initial-scale=1.0 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.
Dưới đây là ví dụ về một trang web không có thẻ meta khung nhìn và cùng một trang web có thẻ meta khung nhìn:
Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết bên dưới để thấy sự khác biệt.
Phần tử HTML <script>
Phần tử <script> được sử dụng để xác định JavaScript phía máy khách.
Đoạn mã JavaScript sau viết "Xin chào JavaScript!" thành một phần tử HTML có id="demo":
Ví dụ
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script> Hãy tự mình thử »Mẹo: Để tìm hiểu tất cả về JavaScript, hãy truy cập Hướng dẫn JavaScript của chúng tôi.
Phần tử HTML <base>
Phần tử <base> chỉ định URL cơ sở và/hoặc mục tiêu cho tất cả các URL tương đối trong một trang.
Thẻ <base> phải có thuộc tính href hoặc thuộc tính đích hoặc cả hai.
Chỉ có thể có một phần tử <base> duy nhất trong tài liệu!
Ví dụ
Chỉ định URL mặc định và mục tiêu mặc định cho tất cả các liên kết trên một trang:
<head>
<base href="https://www.example.com.vn/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Hãy tự mình thử »Tóm tắt chương
- Phần tử
<head>là nơi chứa siêu dữ liệu (dữ liệu về dữ liệu) - Phần tử
<head>được đặt giữa thẻ<html>và thẻ<body> - Phần tử
<title>là bắt buộc và nó xác định tiêu đề của tài liệu - Phần tử
<style>được sử dụng để xác định thông tin kiểu dáng cho một tài liệu - Thẻ
<link>thường được sử dụng nhất để liên kết tới các style sheet bên ngoài - Phần tử
<meta>thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem - Phần tử
<script>được sử dụng để xác định JavaScript phía máy khách - Phần tử
<base>chỉ định URL cơ sở và/hoặc mục tiêu cho tất cả các URL tương đối trong một trang
Phần tử đầu HTML
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
Video: Đầu HTML
