WebVN Cộng đồng web Việt Nam
Thẻ <head> được sử dụng để chứa dữ liệu về metadata.
Metadata là những dữ liệu phụ trợ cho một trang HTML, những dữ liệu này không hiển thị khi người dùng duyệt trang.
Metadata thường được dùng để định nghĩa tiêu đề của trang, gọi css, gọi scripts hay cung cấp những thông tin khác.
Những thẻ sau đây được coi là thẻ metadata: <title>, <style>, <meta>, <link>, <script> và <base>.
Thẻ <html> và <body> trong HTML
Trong chuẩn HTML5, bạn có thể bỏ qua thẻ <html> và <body>.
Đoạn HTML dưới đây vẫn được coi là hợp lệ trong HTML5:
|
1 2 3 4 5 |
<!DOCTYPE html> <title>Tiêu đề trang</title> <h1>Đề mục</h1> <p>Đoạn văn bản.</p> |
Thẻ <html> là thành phần gốc trong một trang HTML. Bạn có thể định nghĩa ngôn ngữ được sử dụng trong trang tại thẻ này:
|
1 2 |
<!DOCTYPE html> <html lang="vi-VN"> |
Việc khai báo ngôn ngữ rất quan trọng cho những ứng dụng truy cập (ví dụ: ứng dụng đọc nội dung) và bộ máy tìm kiếm.
Thiếu thẻ <html> và <body> có thể dẫn tới việc hiểu sai cấu trúc website trong các phần mềm đọc DOM/XML.
Cuối cùng, nếu thiếu thẻ <body> có thể sẽ phát sinh lỗi trong những trình duyệt cũ (ví dụ IE9).
Thẻ <head> trong HTML
Trong chuẩn HTML5, bạn có thể bỏ qua thẻ <head>.
Mặc định, trình duyệt sẽ tự động thêm tất cả nội dung đứng trước thẻ <body>vào thẻ <head>.
Bạn có thể làm giảm sự phức tạp trong HTML bằng cách bỏ thẻ <head>:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <title>Tiêu đề trang</title> <body> <h1>Đề mục</h1> <p>Đoạn văn bản.</p> </body> </html> |
Thẻ <title> trong HTML
Thẻ <title> được dùng để tạo tiêu đề cho trang HTML.
Thẻ <title> là thẻ bắt buộc trong HTML/XHTML.
Thẻ <title>:
- tạo tiêu đề cho trang, hiển thị trên thanh công cụ của trình duyệt
- được sử dụng làm tên trang khi bạn lưu vào bookmark của trình duyệt
- hiển thị ở phần tiêu đề trang trong kết quả tìm kiếm (VD: tìm kiếm của google)
Một trang HTML đơn giản:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <title>Tiêu đề của trang</title> <body> <p>Nội dung trong thẻ body sẽ được hiển thị trong cửa sổ trình duyệt.</p> <p>Nội dung trong thẻ title sẽ không hiển thị.</p> </body> </html> |
Thẻ <style> trong HTML
Thẻ <style> được sử dụng để chứa kiểu trang trí cho trang HTML.
Trong thẻ <style> bạn có thể quy định cách các thành phần HTML sẽ được hiển thị trên trình duyệt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <title>Tiêu đề trang</title> <style> body {background-color:yellow;} p {color:blue;} </style> <body> <h1>Đây là đề mục</h1> <p>Đây là đoạn văn bản.</p> </body> </html> |
Thẻ <link> trong HTML
Thẻ <link> dùng để liên kết tới các tài nguyên bên ngoài trang HTML.
Thẻ <link> hầu hết được dùng để gọi tới các tệp tin CSS:
|
1 |
<link rel="stylesheet" href="style.css"> |
Thẻ <meta> trong HTML
Thẻ <meta> được sử dụng để tạo miêu tả, từ khóa, thông tin tác giả và các thông tin khác cho trang HTML.
Những thông tin này được sử dụng bởi trình duyệt (cách hiển thị nội dung), bởi các công cụ tìm kiếm (từ khóa) và những dịch vụ web khác.
Tạo từ khóa dành cho các công cụ tìm kiếm:
|
1 |
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> |
Tạo miêu tả:
|
1 |
<meta name="description" content="Tự học lập trình web với HTML và CSS"> |
Thông báo bộ mã ký tự mà trang sử dụng:
|
1 |
<meta charset="UTF-8"> |
Tạo thông tin tác giả:
|
1 |
<meta name="author" content="WebVN"> |
Làm mới lại trang HTML sau mỗi 30 giây:
|
1 |
<meta http-equiv="refresh" content="30"> |
Ví dụ về thẻ meta trong HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <meta name="description" content="Tự học lập trình web với HTML và CSS"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="WebVN"> <meta charset="UTF-8"> <body> <p>Các thẻ meta được dùng đằng trước thẻ body.</p> </body> </html> |
Thẻ <script> trong HTML
Thẻ <script> được sử dụng để viết các đoạn mã JavaScript.
Đoạn mã dưới đây sẽ hiển thị chữ “Xin chào JavaScript!” trong một thẻ HTML có id=”demo”:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Xin chào JavaScript!"; </script> </body> </html> |
Thẻ <base> trong HTML
Liên kết tương đối là gì? Là những liên kết không có chứa domain, VD: “/page”
Liên kết tuyệt đối là gì? Là những liên kết bao gồm đầy đủ cả domain: “http://domain.com/page”
Thẻ <base> được sử dụng để quy định cách hiển thị liên kết và địa chỉ cho tất cả các liên kết tương đối trong trang.
Bạn sẽ nhanh chóng hiểu cách hoạt động của thẻ <base> thông qua ví dụ dưới đây:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <title>Cách sử dụng thẻ base</title> <base href="https://webvn.com/wp-content/uploads/2014/12/" target="_blank"> <body> <img src="pic_html5.gif"> <p>Khi chúng ta quy định địa chỉ trong thẻ base, trình duyệt sẽ tự động tìm ảnh tại địa chỉ "https://webvn.com/wp-content/uploads/2014/12/pic_html5.gif"</p> <p><a href="https://webvn.com">WebVN</a> </p> <p> Liên kết ở trên sẽ được mở ở một cửa sổ mới vì trong thẻ base chúng ta đã thiết lập thuộc tính target là "_blank". </p> </body> </html> |
