Ngọc Thanh - 85
- 18/02/2025
Ngọc Thanh 
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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thẻ head trong HTML
Thẻ <head> trong HTML là thẻ gì?
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>, <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ó thẻ đóng mở <style></style> 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>Thẻ style trong Head</title>
<style>
#boimau{color:red}
</style>
</head>
<body>
<p id="boimau">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>
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 *
