Head trong HTML

Thẻ <head> trong HTML

Thẻ <head> thường dùng trong HTML để chứa các siêu dữ liệu (metadata), nghĩa là dữ liệu về dữ liệu. Nó thường được đặt nằm giữa thẻ <html> và <body>.

Siêu dữ liệu là những dữ liệu mang thông tin về tài liệu HTML, nó không hiển thị lên trang web. Những siêu dữ liệu thường dùng như: tiêu đề, bảng mã sử dụng, style, script,...

Những thẻ định nghĩa loại dữ liệu này thường gặp là: <title>, <style>, <meta>, <link>, <script>, <base> ...

Thẻ <title>

Thẻ <title> dùng để định nghĩa tiêu đề. Tiêu đề là thành phần không thể thiếu được của một trang web.

Tiêu đề thường dùng trong các trường hợp:

  • Hiển thị trên thanh tiêu đề của trình duyệt.
  • Tên của trang web khi bạn thêm vào Bookmarks (hoặc Favorites)
  • Tên của trang web xuất hiện trên các máy tìm kiếm.

Ví dụ đơn giản về tài liệu HTML có tiêu đề:

<!DOCTYPE html>
<html>

<head>
  <title>Tiêu đề trang web</title>
</head>

<body>
Nội dung của trang web......
</body>

</html>

Thẻ <style>

Thẻ <style> được dùng để khai báo các định dạng cho các đối tượng trong HTML.

Chúng ta thường viết mã CSS trong cặp thẻ này.

Ví dụ:

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

Thẻ <link>

Thẻ <link> dùng để thêm một file .css vào trang web. Những file .css chứa các đoạn mã CSS quy định về định dạng cho các đối tượng trên trang web.

Ví dụ:

<link rel="stylesheet" href="/mystyle.css">

Thẻ <script>

Thẻ <script> được dùng để định nghĩa mã kịch bản bằng JavaScript. Thẻ này có thể nằm ở phần <body> nhưng cũng có thẻ nằm trong phần thẻ <head>.

Ví dụ:

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Thẻ <meta>

Thẻ <meta> thường được dùng để khai báo bảng mã, mô tả trang, từ khóa, tác giả và các siêu dữ liệu khác:

Khai báo bảng mã được dùng:

<meta charset="UTF-8">

Khai báo thông tin của trang:

<meta name="description" content="Hướng dẫn học HTML">

Khai báo từ khóa:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Khai báo tác giả:

<meta name="author" content="Hieu3210">

Làm mới (refresh> trang web sau mỗi 30s:

<meta http-equiv="refresh" content="30">

Thẻ <base> trong HTML

Thẻ <base> dùng để định nghĩa liên kết gốc cho các liên kết trên trang web.

Ví dụ:

See the Pen KgENoj by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

Quên thẻ <html>, <head> và <body>?

Theo chuẩn mới của HTML5, bạn có thể quên thẻ <html>, <head> hay <body> mà không có lỗi trên trang web.

Ví dụ sau được chấp nhận:

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Chúng tôi không khuyến khích việc quên các thẻ trên để đảm bảo trang web bạn viết chạy tốt trên mọi môi trường với những trình duyệt khác nhau.