Cafedev chia sẻ về phần tử “<head>” trong HTML là nơi chứa các thành phần sau:
<style>, <meta>, <link>, <script> <base>Nội dung chính
1. Phần tử <head>
Phần tử <head> là một thùng 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.
2. Phần tử <title>
Phần tử <title> xác định tiêu đề của tài liệu. Tiêu đề phải ở dạng văn bản và được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang.
Thẻ <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 đối với tối ưu hóa công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.
Phần tử <title>:
- định nghĩa một tiêu đề trong thanh công cụ 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 đề cho trang trong kết quả của công cụ tìm kiếm
Vì vậy, hãy cố gắng làm cho tiêu đề chính xác và có ý nghĩa nhất có thể!
Một tài liệu HTML đơn giản:
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
<p>Cafedev là kênh thông tin, sự kiện, hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu. </p>
<p>Liên hệ chúng tôi: cafedevn@gmail.com</p>
</body>
</html>
3. Phần tử <style>
Phần tử <style> được sử dụng để xác định thông tin kiểu cho một trang HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
4. Phần tử <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 để liên kết với các style sheets bên ngoài:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
5. Phần tử <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, nhưng được sử dụng bởi các 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ụ:
Định nghĩa bộ ký tự được sử dụng:
<meta charset="UTF-8">
Định nghĩa từ khóa cho công cụ tìm kiếm:
<meta name="keywords" content="HTML, CSS, JavaScript, Cafedev">
Định nghĩa một mô tả của trang web của bạn:
<meta name="description" content="Share tài liệu IT">
Đặ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">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free IT tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Cafedev">
</head>
<body>
<p>All meta information goes inside the head section.</p>
</body>
</html>
6. Đặt Chế độ xem(Viewport)
Khung nhìn(Viewport) là khu vực hiển thị của người dùng trên trang web. Nó thay đổi 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 cho hướng dẫn trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.
Phần width = width-width thiết lập 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ần scale-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 chế độ xem và cùng một trang web có thẻ meta chế độ xem:
7. Phần tử <script>
Phần tử <script> được sử dụng để xác định JavaScripts phía máy khách.
JavaScript sau đây viết “Hello Cafedev!” thành một phần tử HTML với id = “demo”:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Cafedev!";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
8. Phần tử <base> HTML
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ó an 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:
<!DOCTYPE html>
<html>
<head>
<base href="https://cafedev.vn/" target="_blank">
</head>
<body>
<h1>The base element</h1>
<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://cafedev.vn/images/stickman.gif".</p>
<p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>
</body>
</html>
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
