Bài 24: Thẻ Head trong HTML

Phần tử HTML <head>

Phần tử <head>  là một khung chứa siêu dữ liệu – metadata (dữ liệu về dữ liệu).

HTML metadata là dữ liệu về tài liệu HTML. Metadata không được hiển thị.

Metadata thường xác định title, styles, links, scripts của tài liệu và thông tin meta khác.

Các thẻ sau mô tả metadata: <title>, <style>, <meta>, <link>, <script>, và <base>.

Bỏ qua <html> và <body>?

Trong chuẩn HTML5, thẻ <html>, thẻ <body>, và thẻ <head> có thể bỏ qua.

Các mã sau sẽ xác nhận như HTML5:

Ví dụ:

<!DOCTYPE html>
<title>Tiêu đề trang</title>
<h1>Đây là phần mở đầu</h1>
<p>Đây là một đoạn văn.</p>

Xem kết quả

mách giúp Tìm ở đây không khuyến khích bạn bỏ qua thẻ <html> và <body>.

Phần tử <html> là gốc tài liệu. Đây là nơi được đề nghị để xác định ngôn ngữ trang:

<!DOCTYPE html>
<html lang=“vi”>

Khai báo một ngôn ngữ là quan trọng cho truy cập ứng dụng (đọc màn hình) và công cụ tìm kiếm.

Bỏ qua <html> và <body> có thể phá hỏng hoàn toàn các phần mềm DOM/XML.

Cuối cùng, bỏ qua<body> có thể tạo ra những lỗi trong trình duyệt cũ (IE9).

Bỏ qua <head>

Trong chuẩn HTML5, thẻ <head> cũng có thể được bỏ qua.

Theo mặc định, trình duyệt sẽ add tất cả các phần tử trước <body>, đặt mặc định vào phần tử<head>.

Bạn có thể làm giảm độ phức tạp của HTML, bằng cách bỏ qua thẻ <head>:

Ví dụ:

<!DOCTYPE html>
<html>
<title>Tiêu đề trang</title>
<body><h1>Đây là phần mở đầu</h1>
<p>Đây là một đoạn văn.</p>
</body>
</html>

Xem kết quả

mách giúp Bỏ thẻ là không phổ biến với các nhà phát triển web. Cần thời gian để được thiết lập như một xu hướng.

Phần tử HTML <title>

Phần tử<title> định nghĩa tiêu đề cho tài liệu.

Phần tử <title> là cần thiết trong tất cả tài liệu HTML/XHTML.

Phần tử <title>:

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

Một tài liệu HTML đơn giản:

Ví dụ:

<!DOCTYPE html>
<html>
<title>Tiêu đề trang</title
><body>
Nội dung của tài liệu……
</body>
</html>

Xem kết quả

Phần tử HTML <style>

Phần tử <style> được sử dụng để định nghĩa thông tin style cho một tài liệu HTML.

Trong phần tử <style> bạn sẽ định kiểu cho các phần tử HTML để xác định cách nó hiển thị như thế nào trong  trình duyệt:

Ví dụ:

<style>
body {background-color:yellow;}
p {color:blue;}
</style>

Xem kết quả

Phần tử HTML <link>

Phần tử <link> định nghĩa mối quan hệ của trang với một tài nguyên bên ngoài.

Phần tử <link> thường được sử dụng để liên kết đến các Style sheets:

Ví dụ:

<link rel=“stylesheet” href=“mystyle.css”>

Xem kết quả

Xem file mystyle

Phần tử HTML <meta>

Phần tử <meta> được dùng để  mô tả trang, từ khóa, tác giả, và các metadata khác.

Metadata được sử dụng bởi các trình duyệt (làm thế nào để hiển thị nội dung), bởi công cụ tìm kiếm (từ khóa), và các dịch vụ web khác.

Định nghĩa từ khóa cho công cụ tìm kiếm:

<meta name=“keywords” content=“HTML, CSS, XML, XHTML, JavaScript”>

Định nghĩa mô tả cho trang web của bạn:

<meta name=“description” content=“Hướng dẫn web miến phí về HTML và CSS”>

Định nghĩa bộ kí tự được sử dụng:

<meta charset=“UTF-8”>

Định nghĩa tác giả của trang :

<meta name=“author” content=“TimODay.edu.vn”>

Làm mới tài liệu 30s một lần:

<meta http-equiv=“refresh” content=“30”>

Ví dụ về thẻ <meta>:

Ví dụ:

<meta name=“description” content=“Hướng dẫn web miến phí”>
<meta name=“keywords” content=“HTML, CSS, XML, JavaScript”>
<meta name=“author” content=“TimODay.edu.vn>
<meta charset=“UTF-8”>

Xem kết quả

Phần tử HTML <script>

Phần tử <script> được sử dụng để định nghĩa  code JavaScript phía client.

Script dưới đây viết Hello JavaScript! trong một phần tử HTML với id=”demo”:

Ví dụ:

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

Xem kết quả

mách giúp Để học về JavaScript, hãy ghé thăm JavaScript Tutorial của chúng tôi!

Phần tử HTML <base>

Phần tử <base> chỉ định một URL cơ sở và target cơ sở đối với tất cả các URL liên quan trong một trang:

Ví dụ:

<base href=“http://timoday.edu/vn/images/” target=“_blank”>

Xem kết quả

 Phần tử HTML head

Thẻ Mô tả
<head> Định nghĩa thông tin về tài liệu
<title> Định nghĩa tiêu đề của tài liệu
<base> Định nghĩa một address mặc định hoặc một target mặc định đối với tất cả các link trên trang web
<link> Định nghĩa mối liên kết giữa một tài liệu và tài nguyên bên ngoài
<meta> Định nghĩa metadata về một tài liệu HTML
<script> Định nghĩa một script phía client
<style> Định nghĩa thông tin style về tài liệu

 

Các thẻ:

Có thể bạn sẽ thích…

3 phản hồi

  1. Vên viết:
    30/09/2019 lúc 10:27 sáng

    Toi phai lam gi

Để lại một bình luận