Thẻ head trong HTML
Trần Thị Vân - 1971
- 18/02/2025
Chức năng của Thẻ head trong HTML
Thẻ head trong HTML dùng để chứa toàn bộ các siêu dữ liệu (metadata), các thẻ siêu dữ liệu như title, style, meta, link, script, base,... các thẻ trong phần head không hiển thị trên giao diện của website mà chỉ hiển thị trên tab trình duyệt hoặc dùng để cấu hình các chức năng hiển thị của trang web.
Các thẻ siêu dữ liệu nằm trong thẻ head
Thẻ Style trong Head
Thẻ này có các class và id sẽ được đặt trong các thẻ nằm ở body và sau đó CSS trong thẻ style.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử thẻ Style trong HEAD</title>
<style>
#boimau{color:red}
</style>
</head>
<body>
<h1>Chạy thử thẻ Style trong HEAD</h1>
<p id="boimau">Chạy thử Thẻ style trong Head</p>
</body>
</html>
Thẻ base trong thẻ head
Thẻ này quy định URL gốc của website.
<!DOCTYPE html>
<html>
<head>
<base href="https://webmoi.vn/" >
</head>
<body>
</body>
</html>
Thẻ title
Thẻ title dùng để hiển thị trên tab trình duyệt web và để các công cụ tìm kiếm xếp hạng.
<!DOCTYPE html>
<html>
<head>
<title>Thẻ <head> trong HTML</title>
</head>
<body>
</body>
</html>
Thẻ Meta
Thẻ meta bao gồm nhiều loại như: description, viewport, robots, charset, chia sẽ mạng xã hội,...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large" >
<meta name="description" content="Tìm hiểu Thẻ <head> trong HTML, Đó là thẻ dùng để chứa toàn bộ các siêu dữ liệu (metadata), các thẻ siêu dữ liệu như title, style, meta, link" >
<meta name="ahrefs-site-verification" content="10bc28e1236b80301dc670bb772437c8de5d7aa23039b1e26b31977dc23311d2">
<meta name="facebook-domain-verification" content="k75rmh8segks4cc03xk7r7xh7235ix" >
<meta name="yandex-verification" content="742ca969f490d38b" >
<meta name = 'dmca-site-verify' content = 'TloxQkMvZEJMbUdTRkV2ZW1QODNzQT090' >
<meta name="google-site-verification" content="eW_t1TqHSsy0RlHa9aGcg-N6Lb1rhq55Sbz1DepqAaw" >
<meta name="p:domain_verify" content="ee76a9e9b011c02dec59e07069da580c">
<meta property="twitter:card" content="summary">
<meta name="twitter:site" content="@webmoi">
<meta name="twitter:creator" content="@webmoi">
<meta property="fb:app_id" content="133705714671747">
<meta property="og:locale" content="vi_VN" >
<meta property="og:type" content="article" >
<meta property="og:site_name" content="Web Mới" >
<meta property="og:url" content="https://webmoi.vn/the-head-trong-html/">
<meta property="og:title" content="Thẻ <head> trong HTML" >
<meta property="og:description" content="Tìm hiểu Thẻ <head> trong HTML, Đó là thẻ dùng để chứa toàn bộ các siêu dữ liệu (metadata), các thẻ siêu dữ liệu như title, style, meta, link" >
<meta property="og:image" content="https://webmoi.vn/upload/tinblog/the-head-trong-html.jpg" >
<meta property="og:image:secure_url" content="https://webmoi.vn/upload/tinblog/the-head-trong-html.jpg" >
<meta property="og:image:alt" content="Thẻ <head> trong HTML" >
<meta property="og:image:type" content="image/jpg" >
<meta property="og:image:width" content="526" >
<meta property="og:image:height" content="274" >
<!-- Twitter Card -->
<meta name="twitter:label1" content="Ước tính thời gian đọc" >
<meta name="twitter:data1" content="19 phút" >
<meta property="article:author" content="https://www.facebook.com/profile.php?id=100027985330782" >
<meta property="article:section" content="Thiết kế website độc quyền 100%" >
<meta property="article:section" content="Lập trình website" >
<meta property="article:published_time" content="2025-02-18T08:37:00+07:00" >
<meta property="article:modified_time" content="2025-02-18T10:14:29+07:00" >
<meta property="og:updated_time" content="2025-02-18T10:14:29+07:00" >
<meta property="article:publisher" content="https://www.facebook.com/webmoi.vn" >
</head>
<body>
</body>
</html>
Thẻ Link
Thẻ Link có nhiều loại như: nhúng favicon, canonical, nhúng file css,...
<!DOCTYPE html>
<html>
<head>
<link rel="canonical" href="https://webmoi.vn/the-head-trong-html/" >
<link href="https://webmoi.vn/upload/company/favicon-15570482444.png" rel="shortcut icon" type="image/x-icon" >
<link href="media/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
Các lưu ý quan trọng khi sử dụng thẻ head trong HTML
Phần head tuy không hiển thị trực tiếp trên trang web nhưng lại ảnh hưởng lớn đến cách trình duyệt xử lý nội dung, khả năng tối ưu tìm kiếm và tốc độ tải trang. Khi xây dựng website, việc khai báo đúng các thành phần trong phần này giúp trang hoạt động ổn định hơn và hạn chế các lỗi không mong muốn.
Sắp xếp thứ tự các thẻ trong head hợp lý
Việc sắp xếp các thẻ bên trong phần head theo thứ tự hợp lý giúp mã nguồn dễ quản lý và trình duyệt có thể xử lý thông tin hiệu quả hơn. Các thông tin quan trọng như mã ký tự, tiêu đề trang, thiết lập hiển thị và tài nguyên bên ngoài nên được khai báo rõ ràng.
Một số thành phần thường được ưu tiên đặt trong phần đầu của head gồm:
- meta charset: Xác định bộ mã ký tự để nội dung hiển thị chính xác.
- title: Đặt tên cho trang, giúp người dùng và công cụ tìm kiếm nhận biết nội dung.
- meta viewport: Hỗ trợ hiển thị website phù hợp trên thiết bị di động.
- link: Kết nối các tài nguyên như tệp CSS hoặc biểu tượng website.
Ngoài ra, nên hạn chế đưa quá nhiều mã không cần thiết vào head vì có thể làm tăng thời gian xử lý khi tải trang.
Tối ưu thẻ head để cải thiện SEO và trải nghiệm người dùng
Một phần head được tối ưu tốt giúp công cụ tìm kiếm hiểu rõ hơn về nội dung trang web. Các thông tin như tiêu đề, mô tả, dữ liệu chia sẻ mạng xã hội và thiết lập hiển thị đều có thể ảnh hưởng đến khả năng tiếp cận người dùng.
Khi tối ưu head, cần chú ý một số điểm quan trọng:
- Viết thẻ title ngắn gọn, mô tả đúng nội dung chính của trang.
- Sử dụng meta description tự nhiên, cung cấp thông tin hữu ích để tăng khả năng người dùng truy cập.
- Thiết lập viewport để website hiển thị tốt trên nhiều kích thước màn hình.
- Chỉ tải những tài nguyên cần thiết nhằm giảm thời gian tải trang.
Ví dụ khai báo một số thông tin cơ bản trong phần head:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiêu đề trang web</title>
Kiểm tra lỗi trong phần head trước khi đưa website hoạt động
Những lỗi nhỏ trong phần head có thể khiến website gặp vấn đề về hiển thị, SEO hoặc khả năng tải tài nguyên. Vì vậy, cần kiểm tra kỹ trước khi triển khai website chính thức.
Một số lỗi thường gặp gồm:
- Thiếu thẻ title khiến trang không có tiêu đề rõ ràng.
- Khai báo sai đường dẫn trong thẻ link làm CSS hoặc tài nguyên không được tải.
- Sử dụng nhiều thẻ meta trùng lặp gây khó khăn cho việc quản lý thông tin trang.
- Đặt mã JavaScript hoặc tài nguyên lớn không hợp lý làm ảnh hưởng tốc độ tải.
Việc kiểm tra phần head bằng công cụ kiểm tra mã HTML và theo dõi hiệu suất website giúp phát hiện sớm lỗi, từ đó đảm bảo trang web vận hành ổn định hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ head trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
