HTML <head> Element
HTML <head> element là nơi chứa các metadata (dữ liệu về dữ liệu) và được đặt giữa thẻ <html> và thẻ <body>.
HTML metadata là dữ liệu về tài liệu HTML. Các metadata sẽ không được hiển thị.
Các metadata thường xác định title, character set, styles, scripts và các thông tin meta khác.
<title> element xác định tiêu đề của tài liệu. Tiêu đề phải ở dạng chỉ văn bản và nó được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.
<title> là bắt buộc trong các tài liệu HTML!
Nội dung của tiêu đề trang rất quan trọng đối với việc tối ưu hóa công cụ tìm kiếm (Search Engine Optimization - SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của search engine để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.
<title> element:
- xác định tiêu đề trong thanh công cụ của trình duyệt
- cung cấp tiêu đề cho trang khi nó được thêm vào mục yêu thích
- hiển thị tiêu đề cho trang trong kết quả của search engine
Vì vậy, hãy cố gắng đặt tiêu đề chính xác và ý nghĩa nhất có thể!
Ví dụ
<!DOCTYPE html> <html> <head> <title>Tiêu đề trang có ý nghĩa</title> </head> <body> Nội dung... </body> </html>HTML <style> Element
<style> element được sử dụng để xác định style cho một trang HTML:
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>HTML <link> Element
<link> element xác định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài.
Thẻ <link> thường được sử dụng nhất để liên kết với các external style sheets.
Ví dụ
<link rel="stylesheet" href="mystyle.css">HTML <meta> Element
<meta> element thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem.
Metadata sẽ không được hiển thị trên trang, nhưng được sử dụng bởi các trình duyệt (cách hiển thị nội dung hoặc tải lại trang), bởi các search engine (từ khóa) và các dịch vụ web khác.
Ví dụ
<meta charset="UTF-8"> <meta name="description" content="Web học lập trình miễn phí"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Chí Thành">Các HTML <meta> Element thường dùng
Xác định bộ ký tự được sử dụng:
<meta charset="UTF-8">
Xác định từ khóa cho công cụ tìm kiếm:
<meta name="keywords" content="HTML, CSS, JavaScript">
Xác định mô tả về trang web của bạn:
<meta name="description" content="Web học lập trình miễn phí">
Xác định tác giả của một trang:
<meta name="author" content="Chí Thành">
Làm mới tài liệu sau mỗi 30 giây:
<meta http-equiv="refresh" content="30">
Đặt viewport (chế độ xem) để làm cho trang web của bạn trông đẹp trên tất cả các thiết bị:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cài đặt Viewport
Viewport là vùng hiển thị của người dùng trên một trang web. Nó thay đổi theo thiết bị - nó sẽ nhỏ hơn trên điện thoại di động hơn là trên màn hình máy tính.
Bạn nên đưa <meta> element sau vào tất cả các trang web của mình.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Điều này cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang.
Phần width = device-width sẽ đặt chiều rộng của trang tuân theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
Đây là ví dụ về một trang web không có thẻ meta viewport và một trang web có thẻ meta viewport:
HTML <script> Element
Thẻ HTML <script> được sử dụng để xác định một tập lệnh (JavaScript) phía client.
Trong ví dụ sau JavaScript sẽ thêm đoạn text "Xin chào JavaScript!" vào một phần tử HTML với id = "demo".
<script> function myFunction() { document.getElementById("demo").innerHTML = "Xin chào JavaScript!"; } </script>HTML <base> Element
<base> element chỉ định base URL và/hoặc target cho tất cả các relative URLs trong một trang.
Thẻ <base> phải có một trong hai attribute href hoặc target hoặc có thể là cả hai.
Chỉ có thể có một <base> element duy nhất trong một tài liệu!
Ví dụ
<head> <base href="https://truonghoclaptrinh.com/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">Thẻ base</a> </body>