Phần tử Head trong HTML

Vũ An

Trong HTML, phần tử <head> là bộ chứa siêu dữ liệu (metadata) được đặt trong thẻ <html> và thẻ <body>. Siêu dữ liệu HTML là dữ liệu về tài liệu HTML và không được hiển thị.

Siêu dữ liệu thường định nghĩa tiêu đề văn bản, bộ kí tự, kiểu cách, đường dẫn, kịch bản và các thông tin khác. Dưới đây là các thẻ mô tả siêu dữ liệu <title>, <style>, <meta>, <link>, <script>, <base>.

Phần tử <title> trong HTML

Phần tử <title> định nghĩa tiêu đề văn bản, là bắt buộc đối với mọi văn bản HTML/XHTML. Phần tử này:

Định nghĩa tiêu đề hiển thị trên tab trình duyệt
Làm tiêu đề cho trang khi nó được thêm vào yêu thích
Hiển thị tiêu đề trong các bộ kết quả tìm kiếm

Một văn bản HTML đơn giản sẽ như dưới đây.

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
</head>
<body>
Nội dung văn bản...
</body>
</html>

Phần tử <style> trong HTML

Phần tử <style> dùng để định nghĩa thông tin về kiểu cách cho một trang HTML.

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

Phần tử <link> trong HTML

Phần tử <link> dùng để liên kết tới các Style Sheet bên ngoài.

<link rel="stylesheet" href="quantrimang.css">

Phần tử <meta> trong HTML

Phần tử <meta> xác định bộ kí tự được sử dụng, mô tả trang, từ khóa, tác giả và các thông tin siêu dữ liệu khác. Siêu dữ liệu được trình duyệt dùng để hiển thị nội dung, bộ tìm kiếm dùng để hiển thị từ khóa và các dịch vụ web khác.

Định nghĩa bộ kí tự

<meta charset="UTF-8">

Mô tả trang web

<meta name="mota" content="Hướng dẫn HTML">

Từ khóa cho bộ tìm kiếm

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

Tác giả của trang

<meta name="tacgia" content="Vu An">

Tải lại file tài liệu sau 30 giây

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

Thiết lập viewport

HTML5 giới thiệu một phương thức để các nhà thiết kế web kiểm soát viewport qua thẻ <meta>. Viewport là khu vực mà người dùng nhìn thấy được trên trang web. Khu vực này lớn nhỏ tùy theo thiết bị, trên điện thoại sẽ nhỏ hơn trên máy tính.

Bạn nên đưa phần tử viewport <meta> vào tất cả các trang web của mình.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Phần tử viewport <meta> hướng dẫn cho trình duyệt cách kiểm soát kích thước của trang.

width=device-width đặt độ rộng cho trang theo độ rộng của màn hình (tùy thiết bị)
initial-scale=1.0 đặt mức phóng to ban đầu khi trang được tải lần đầu trên trình duyệt

Đây là ví dụ về trang có dùng (bên phải) và không dùng viewport (bên trái) trong thẻ <meta>.

Viewport giúp thiết lập độ rộng trang

Phần tử <script> trong HTML

Phần tử <script> được dùng để định nghĩa JavaScripts ở phía client. Đoạn JavaScript này sẽ viết “Xin chào JavaScript!” vào phần tử HTML với id=”memo”

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

Phần tử <base> trong HTML

Phần tử <base> xác định URL cơ bản và đích đến cơ bản cho tất cả các URL tương đối trên trang.

<base href="https://quantrimang.com/hinhanh/" target="_blank">

Có thể bỏ <html>, <head> và <body> không?

Theo chuẩn của HTML5, có thể loại bỏ các thẻ <html>, <body> và <head> mà đoạn code vẫn hợp lệ.

<!DOCTYPE html>
<title>Tiêu đề trang</title>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>

Tuy vậy không nên bỏ thẻ <html> và <body> vì có thể khiến các phần mềm DOM hay XML bị crash hoặc gặp lỗi trên các trình duyệt cũ (như IE9). Việc bỏ thẻ <head> thì khá thường xuyên.

Bài trước: Đường dẫn tập tin trong HTML

Bài sau: Layout trong HTML

Thứ Tư, 06/06/2018 13:58

4,8 ★ 6 👨 8.068