Học cách dùng <head> HTML trên web.
Phần tử <head> HTML chứa metadata (thông tin) về trang web: tiêu đề, style, script.
Nội dung trong <head> chủ yếu đọc và xử lý bởi máy (trình duyệt), không phải người truy cập.
<head> không nhầm lẫn với <header>, mục đích khác.
<head> đặt ngay dưới <html> mở, trước <body> mở:
<!DOCTYPE html> <html> <head> <!-- Metadata chủ yếu cho máy xử lý --> </head> <body></body> </html>Các phần tử HTML sau có thể đặt trong <head>:
- <title>
- <link>
- <style>
<meta>- <script>
<base>- <noscript>
Ví dụ
Xem vài ví dụ dùng <head> với metadata phổ biến.
Phần tử <title>
<title> định nghĩa tiêu đề tài liệu HTML, hiển thị tab trình duyệt:
<!DOCTYPE html> <html> <head> <title>Tiêu đề tài liệu</title> </head> <body></body> </html>Di chuột qua tab trang web vài giây, popup hiện tiêu đề đầy đủ.
Phần tử <style>
<style> chứa style cho tài liệu (typography, spacing, màu, animation) viết CSS:
<!DOCTYPE html> <html> <head> <title>Tiêu đề</title> <style type="text/css"> body { background-color: red; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body></body> </html>Phần tử <link>
Cách hiện đại áp dụng style là import CSS ngoài bằng <link>:
<!DOCTYPE html> <html> <head> <title>Tiêu đề</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html>Tốt biết: dùng cả <style> và <link> cùng tài liệu, style áp dụng theo thứ tự include. CSS cascade, cái sau (từ trên xuống) ghi đè cái trước nếu cùng phần tử.
Phần tử <script>
<script> thực thi JavaScript 2 cách:
- Nhúng JS trực tiếp trong tài liệu (như
<style>). - Import file JS ngoài qua
src.
Nhúng JS trực tiếp:
<!DOCTYPE html> <html> <head> <title>Tiêu đề</title> <script> // Màu nền đỏ document.body.style.backgroundColor = "red" </script> </head> <body></body> </html>Import file JS ngoài:
<!DOCTYPE html> <html> <head> <title>Tiêu đề</title> <script src="/scripts/main.js"></script> </head> <body></body> </html>