1.Thẻ <head> là gì?

Thẻ <head> là thẻ nằm giữa thẻ <html> và thẻ <body>

Thẻ <head> khai báo Thông tin tài liệu web mà bạn tạo ra như tên tài liệu, tên tác giả, mô tả, khai báo CSS, khai báo JavaScript…v.v.

2.Các thẻ thường dùng bên trong thẻ <head>

2.1 Thẻ <title>

Thẻ <title> xác định tiêu đề của tài liệu. Tiêu đề phải ở dạng 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

Thẻ <title> bắt buộc phải có trong các tài liệu HTML

Thẻ <title> :

  • 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 ưa thích
  • Hiển thị tiêu đề cho trang trong keeets quả của công cụ tìm kiếm

Chú ý: Hãy cố gắng đặt tiêu đề một cách chính xác và có ý nghĩa nhất có thể. Vì 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 (SEO). Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm

Ví dụ:

<head>  

  <title>Lập Trình Từ Đầu</title>

</head>

Ở đây, tôi đặt tiêu đề cho trang là “Lập Trình Từ Đầu”

2.2 Thẻ <style>

Thẻ <style> xác định thông tin kiểu dáng cho một trang HTML

Ví dụ:

Ở đây, tôi đã xác định màu của các tiêu đề <h1> là màu xanh, màu của các văn bản <p> là màu đỏ và màu của nên là màu bạc

2.3 Thẻ <link>

Thẻ <link> dùng để tạo liên kết giữa tài liệu hiện tại với tài liệu bên ngoài

Ví dụ:

Ở đây, tôi liên kết main.css quy định màu sắc cho các phần tử trong trang HTML

2.4 Thẻ<meta>

Thẻ <meta> 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

Những dữ liệu này 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 công cụ tìm kiếm (từ khóa) và các dịch vụ khác của web

Các loại thẻ <meta> Thuộc tính
<meta charset=”…”> Xác định bộ ký tự được sử dụng
<meta name=”keywords”> content=”…” Xác định từ khóa cho công cụ tìm kiếm
<meta name=”description” content=”..”> Xác định mô tả về trang web của bạn
<meta name=”author” content=”…”> Xác định tác giả của một trang
<meta http-equiv=”refresh”> content=”…” Làm mới tài liệu sau một khoảng thời gian
<meta name=”viewport”> content=”…” Đặt chế độ xem trên nhiều thiết bị khác nhau

Ví dụ:

<head>

<meta charset="UTF-8">

<meta name="description" content="Học lập trình">

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

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

<meta name="author" content="Sơn">

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

</head>

Ở đây, tôi xác định bộ ký tự được sử dụng là UTF-8, từ khóa cho công cụ tìm kiếm là “HTML, CSS”, mô tả trang web là ”Họ lập trình”, tác giả là Sơn, làm mới tài liệu mỗi 30 giây, đặt chế độ xem theo chiều rộng của thiết bị và mức phóng to ban đầu khi trang được tải lần đầu của trình duyệt là 1.0

2.5 Thẻ <script>

Thẻ <script>được sử dụng để xác định tập lệnh JavaScript

Ví dụ:

Ở đây, tôi tạo một nút bấm để thay đổi nội dung bên trong của các phần tử có id là “demo”

2.6 Thẻ <base>

Thẻ <base> chỉ định URL cơ sở/mục tiêu cô tất cả các URL tương đối trong một trang

Chỉ có một thẻ <base> duy nhất trong một tài liệu

Ví dụ:

Ở đây, tôi chỉ định mục tiêu đến là https://www.laptrinhtudau.com/html ở trong thẻ <a>