Có gì trong phần head? Siêu dữ liệu trang web
Phần head của một tài liệu HTML là phần không được hiển thị trong trình duyệt web khi trang được tải. Nó chứa thông tin siêu dữ liệu như <title> của trang, liên kết đến CSS (nếu bạn muốn tạo kiểu cho nội dung HTML với CSS), liên kết đến favicon tùy chỉnh và các siêu dữ liệu khác (dữ liệu về HTML, chẳng hạn như tác giả, và các từ khóa quan trọng mô tả tài liệu).
Các trình duyệt web sử dụng thông tin chứa trong head để hiển thị tài liệu HTML đúng cách. Trong bài viết này, chúng tôi sẽ đề cập đến tất cả những điều trên và nhiều hơn nữa, để cung cấp cho bạn nền tảng tốt để làm việc với đánh dấu.
| Điều kiện tiên quyết: | Quen thuộc cơ bản với HTML, như đã được đề cập trong bài học trước. |
|---|---|
| Kết quả học tập: |
|
Phần head HTML là gì?
Hãy xem lại tài liệu HTML đơn giản mà chúng ta đã đề cập trong bài viết trước:
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Phần head HTML là nội dung của phần tử <head>. Không giống như nội dung của phần tử <body> (được hiển thị trên trang khi được tải trong trình duyệt), nội dung của phần head không được hiển thị trên trang. Thay vào đó, công việc của phần head là chứa siêu dữ liệu về tài liệu. Trong ví dụ trên, phần head khá nhỏ:
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
Tuy nhiên, trong các trang lớn hơn, phần head có thể khá lớn. Hãy thử truy cập một số trang web yêu thích của bạn và sử dụng công cụ dành cho nhà phát triển để xem nội dung phần head của chúng. Mục tiêu của chúng tôi ở đây không phải là chỉ cho bạn cách sử dụng mọi thứ có thể được đặt trong phần head, mà là dạy bạn cách sử dụng các phần tử chính mà bạn sẽ muốn đưa vào phần head, và giúp bạn làm quen với chúng. Hãy bắt đầu.
Thêm tiêu đề
Chúng ta đã thấy phần tử <title> hoạt động — điều này có thể được sử dụng để thêm tiêu đề vào tài liệu. Tuy nhiên điều này có thể bị nhầm lẫn với phần tử h1, được sử dụng để thêm tiêu đề cấp cao nhất vào nội dung thân của bạn — đây đôi khi còn được gọi là tiêu đề trang. Nhưng chúng là những thứ khác nhau!
- Phần tử h1 xuất hiện trên trang khi được tải trong trình duyệt — nói chung nên sử dụng một lần mỗi trang, để đánh dấu tiêu đề nội dung trang của bạn (tiêu đề câu chuyện, hoặc tiêu đề tin tức, hoặc bất kỳ điều gì phù hợp với mục đích sử dụng của bạn.)
- Phần tử
<title>là siêu dữ liệu đại diện cho tiêu đề của toàn bộ tài liệu HTML (không phải nội dung của tài liệu.)
Kiểm tra một ví dụ
-
Trong bài tập này, chúng tôi muốn bạn bắt đầu bằng cách truy cập kho GitHub của chúng tôi và tải xuống bản sao của trang title-example.html. Để làm điều này, hãy:
- Sao chép và dán mã từ trang vào một tệp văn bản mới trong trình soạn thảo mã của bạn, rồi lưu nó ở nơi hợp lý.
- Nhấn nút "Raw" trên trang GitHub, làm cho mã thô xuất hiện (có thể trong một tab trình duyệt mới). Tiếp theo, chọn menu Save Page As… của trình duyệt và chọn nơi hợp lý để lưu tệp.
-
Bây giờ hãy mở tệp trong trình duyệt của bạn. Bạn sẽ thấy điều gì đó như thế này:
Bây giờ nên hoàn toàn rõ ràng nơi nội dung
<h1>xuất hiện và nơi nội dung<title>xuất hiện! -
Bạn cũng nên thử mở mã trong trình soạn thảo mã của mình, chỉnh sửa nội dung của các phần tử này, sau đó làm mới trang trong trình duyệt của bạn. Hãy vui vẻ với nó.
Nội dung của phần tử <title> cũng được sử dụng theo các cách khác. Ví dụ, nếu bạn thử đánh dấu sao trang (Bookmarks > Bookmark This Page hoặc biểu tượng ngôi sao trong thanh URL trong Firefox), bạn sẽ thấy nội dung <title> được điền vào là tên đánh dấu được đề xuất.
Nội dung <title> cũng được sử dụng trong kết quả tìm kiếm, như bạn sẽ thấy bên dưới.
Siêu dữ liệu: phần tử <meta>
Siêu dữ liệu là dữ liệu mô tả dữ liệu, và HTML có cách "chính thức" để thêm siêu dữ liệu vào tài liệu — phần tử <meta>. Tất nhiên, những thứ khác mà chúng ta đang nói đến trong bài viết này cũng có thể được coi là siêu dữ liệu. Có rất nhiều loại phần tử <meta> khác nhau có thể được đưa vào <head> của trang, nhưng chúng tôi sẽ không cố gắng giải thích tất cả chúng ở giai đoạn này, vì điều đó sẽ gây nhầm lẫn. Thay vào đó, chúng tôi sẽ giải thích một vài điều mà bạn có thể thường thấy, chỉ để cung cấp cho bạn ý tưởng.
Chỉ định mã hóa ký tự của tài liệu
Trong ví dụ mà chúng ta thấy ở trên, dòng này đã được bao gồm:
<meta charset="utf-8" />
Phần tử này chỉ định mã hóa ký tự của tài liệu — bộ ký tự mà tài liệu được phép sử dụng. utf-8 là bộ ký tự toàn cầu bao gồm hầu như tất cả các ký tự từ bất kỳ ngôn ngữ người nào. Điều này có nghĩa là trang web của bạn sẽ có thể xử lý việc hiển thị bất kỳ ngôn ngữ nào; do đó đây là ý tưởng tốt để đặt điều này trên mọi trang web bạn tạo! Ví dụ, trang của bạn có thể xử lý tiếng Anh và tiếng Nhật tốt:
Nếu bạn đặt mã hóa ký tự thành ISO-8859-1, ví dụ (bộ ký tự cho bảng chữ cái Latin), quá trình hiển thị trang của bạn có thể trông lộn xộn:
Note:
Một số trình duyệt (như Chrome) tự động sửa các mã hóa không chính xác, vì vậy tùy thuộc vào trình duyệt bạn sử dụng, bạn có thể không thấy vấn đề này. Bạn vẫn nên đặt mã hóa utf-8 trên trang của mình để tránh bất kỳ vấn đề tiềm ẩn nào trong các trình duyệt khác.
Thử nghiệm với mã hóa ký tự
Để thử điều này, hãy xem lại mẫu HTML đơn giản mà bạn đã có được trong phần trước về <title> (trang title-example.html), thử thay đổi giá trị charset meta thành ISO-8859-1, và thêm tiếng Nhật vào trang. Đây là mã chúng tôi đã sử dụng:
<p>Japanese example: ご飯が熱い。</p>
Thêm tác giả và mô tả
Nhiều phần tử <meta> bao gồm các thuộc tính name và content:
namechỉ định loại phần tử meta; loại thông tin nào nó chứa.contentchỉ định nội dung meta thực tế.
Hai phần tử meta như vậy hữu ích để đưa vào trang của bạn để định nghĩa tác giả của trang và cung cấp mô tả súc tích về trang. Hãy xem một ví dụ:
<meta name="author" content="Chris Mills" />
<meta
name="description"
content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing websites and applications." />
Chỉ định tác giả có lợi theo nhiều cách: hữu ích khi bạn muốn hiểu ai đã viết trang, nếu bạn có bất kỳ câu hỏi nào về nội dung và bạn muốn liên hệ với họ. Một số hệ thống quản lý nội dung có các cơ sở để tự động trích xuất thông tin tác giả trang và làm cho nó có sẵn cho các mục đích như vậy.
Chỉ định mô tả bao gồm các từ khóa liên quan đến nội dung của trang của bạn hữu ích vì nó có tiềm năng làm cho trang của bạn xuất hiện cao hơn trong các tìm kiếm liên quan được thực hiện trong các công cụ tìm kiếm (các hoạt động như vậy được gọi là Tối ưu hóa Công cụ Tìm kiếm, hoặc SEO.)
Khám phá việc sử dụng mô tả trong các công cụ tìm kiếm
Mô tả cũng được sử dụng trên các trang kết quả công cụ tìm kiếm. Hãy thực hiện một bài tập để khám phá điều này:
-
Truy cập trang chủ của Mozilla Developer Network.
-
Xem nguồn của trang (nhấp chuột phải vào trang, chọn View Page Source từ menu ngữ cảnh.)
-
Tìm thẻ meta mô tả. Nó sẽ trông giống như thế này (mặc dù nó có thể thay đổi theo thời gian):
html<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both websites and progressive web apps." /> -
Bây giờ tìm kiếm "MDN Web Docs" trong công cụ tìm kiếm yêu thích của bạn (Chúng tôi đã sử dụng Google.) Bạn sẽ nhận thấy nội dung
<meta>mô tả và phần tử<title>được sử dụng trong kết quả tìm kiếm — chắc chắn đáng để có!
Note: Trong Google, bạn sẽ thấy một số trang phụ liên quan của MDN Web Docs được liệt kê bên dưới liên kết trang chủ chính — chúng được gọi là sitelinks, và có thể cấu hình trong công cụ quản trị web của Google — một cách để làm cho kết quả tìm kiếm trang web của bạn tốt hơn trong công cụ tìm kiếm Google.
Note:
Nhiều tính năng <meta> không còn được sử dụng nữa. Ví dụ, phần tử <meta> từ khóa (<meta name="keywords" content="fill, in, your, keywords, here">) — được cho là cung cấp các từ khóa cho các công cụ tìm kiếm để xác định sự liên quan của trang đó với các thuật ngữ tìm kiếm khác nhau — bị các công cụ tìm kiếm bỏ qua, vì các spammer chỉ điền danh sách từ khóa với hàng trăm từ khóa, làm lệch kết quả.
Các loại siêu dữ liệu khác
Khi bạn duyệt web, bạn sẽ tìm thấy các loại siêu dữ liệu khác. Nhiều tính năng bạn sẽ thấy trên các trang web là các sáng tạo độc quyền được thiết kế để cung cấp cho các trang web nhất định (như các trang mạng xã hội) thông tin cụ thể mà họ có thể sử dụng.
Ví dụ, Open Graph Data là một giao thức siêu dữ liệu mà Facebook đã phát minh để cung cấp siêu dữ liệu phong phú hơn cho các trang web. Trong mã nguồn MDN Web Docs, bạn sẽ tìm thấy điều này:
<meta
property="og:image"
content="https://mdn.go-mizu.dev/mdn-social-share.png" />
<meta
property="og:description"
content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both websites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />
Một tác dụng của điều này là khi bạn liên kết đến MDN Web Docs trên Facebook, liên kết xuất hiện cùng với hình ảnh và mô tả: trải nghiệm phong phú hơn cho người dùng.
Thêm biểu tượng tùy chỉnh vào trang web của bạn
Để làm phong phú thêm thiết kế trang web của bạn, bạn có thể thêm các tham chiếu đến các biểu tượng tùy chỉnh trong siêu dữ liệu của mình, và chúng sẽ được hiển thị trong một số ngữ cảnh nhất định. Phổ biến nhất trong số này là favicon (viết tắt của "favorites icon", đề cập đến việc sử dụng trong danh sách "favorites" hoặc "bookmarks" trong trình duyệt).
Favicon khiêm tốn đã tồn tại nhiều năm. Đây là biểu tượng đầu tiên thuộc loại này: một biểu tượng vuông 16 pixel được sử dụng ở nhiều nơi. Bạn có thể thấy (tùy thuộc vào trình duyệt) favicon được hiển thị trong tab trình duyệt chứa mỗi trang đang mở, và bên cạnh các trang được đánh dấu trong bảng đánh dấu.
Một favicon có thể được thêm vào trang của bạn bằng cách:
-
Lưu nó ở định dạng được hỗ trợ như
.ico,.gif, hoặc.pngở đâu đó bên trong cấu trúc thư mục trang web của bạn. -
Thêm phần tử
<link>vào khối<head>của HTML, tham chiếu đến đường dẫn đến tệp favicon:html<link rel="icon" href="/favicon.ico" type="image/x-icon" />
Note:
Trong ví dụ này, đường dẫn đến tệp favicon bắt đầu bằng /, có nghĩa là "tìm tệp trong thư mục cấp cao nhất (hoặc gốc) của trang web của bạn". Điều này có thể ở một nơi khác trong mã nguồn, tùy thuộc vào hệ thống bạn đang sử dụng để tạo trang web: các framework web thường dành một thư mục đặc biệt cho các tệp trong gốc trang web, như static hoặc public.
Đừng lo lắng quá nhiều về sự phức tạp của đường dẫn tệp cho bây giờ; bạn sẽ tìm hiểu thêm về chúng sau này (xem Giới thiệu nhanh về URL và đường dẫn nếu bạn tò mò).
Hầu hết các trình duyệt và ứng dụng phần mềm ngày nay tự động sử dụng tệp favicon.ico được tìm thấy ở gốc trang web như favicon, vì vậy nhiều trang web thậm chí không bận tâm đến việc bao gồm phần tử <link>. Một phần tử tường minh vẫn hữu ích trong trường hợp bạn muốn đặt tệp favicon của mình ở nơi khác.
Đây là ví dụ về favicon trong bảng đánh dấu:
Bạn cũng có thể muốn bao gồm các biểu tượng khác nhau cho các ngữ cảnh khác nhau. Ví dụ:
<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.[some hex hash].png" />
Đây là cách làm cho trang web hiển thị biểu tượng khi được lưu vào màn hình chính của thiết bị Apple. Bạn thậm chí có thể muốn cung cấp các biểu tượng khác nhau cho các thiết bị khác nhau, để đảm bảo rằng biểu tượng trông đẹp trên tất cả các thiết bị. Ví dụ:
<!-- iPad Pro with high-resolution Retina display: -->
<link
rel="apple-touch-icon"
sizes="167x167"
href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
rel="apple-touch-icon"
sizes="152x152"
href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />
Các chú thích giải thích những gì mỗi biểu tượng được sử dụng cho — những phần tử này bao gồm những thứ như cung cấp biểu tượng độ phân giải cao để sử dụng khi trang web được lưu vào màn hình chính của iPad.
Đừng lo lắng quá nhiều về việc triển khai tất cả các loại biểu tượng này ngay bây giờ — đây là tính năng khá nâng cao, và bạn sẽ không được kỳ vọng có kiến thức về điều này để tiến bộ qua khóa học. Mục đích chính ở đây là để bạn biết những thứ đó là gì, trong trường hợp bạn gặp chúng khi duyệt mã nguồn của các trang web khác. Nếu bạn muốn tìm hiểu thêm về tất cả các giá trị này và cách chọn chúng, hãy đọc trang tham chiếu của phần tử <link>.
Áp dụng CSS và JavaScript vào HTML
Hầu như tất cả các trang web bạn sẽ sử dụng trong thời hiện đại sẽ dùng CSS để làm cho chúng trông đẹp, và JavaScript để cung cấp chức năng tương tác, như trình phát video, bản đồ, trò chơi, v.v. Chúng thường được áp dụng vào trang web bằng cách sử dụng phần tử <link> và phần tử <script>, tương ứng.
-
Phần tử
<link>luôn nên đặt trong phần head của tài liệu. Nó nhận hai thuộc tính,rel="stylesheet", cho biết đây là stylesheet của tài liệu, vàhref, chứa đường dẫn đến tệp stylesheet:html<link rel="stylesheet" href="my-css-file.css" /> -
Phần tử
<script>cũng nên đặt vào phần head, và nên bao gồm thuộc tínhsrcchứa đường dẫn đến JavaScript bạn muốn tải, vàdefer(một thuộc tính boolean), cho hướng dẫn trình duyệt tải JavaScript sau khi trang đã phân tích xong HTML. Thuộc tínhdeferhữu ích vì nó đảm bảo HTML đã được tải đầy đủ trước khi JavaScript chạy để bạn không gặp lỗi do JavaScript cố gắng truy cập phần tử HTML chưa tồn tại trên trang. Có một số cách để xử lý việc tải JavaScript trên trang của bạn, nhưng đây là cách đáng tin cậy nhất để sử dụng cho các trình duyệt hiện đại.html<script src="my-js-file.js" defer></script>Note: Phần tử
<script>có thể trông giống như void element, nhưng thực ra không phải, và vì vậy cần có thẻ đóng. Thay vì trỏ đến tệp script bên ngoài, bạn cũng có thể chọn đặt script của mình bên trong phần tử<script>.
Đến lượt bạn: Áp dụng CSS và JavaScript vào trang
- Để bắt đầu bài tập này, hãy lấy một bản sao của các tệp meta-example.html, script.js và style.css, và lưu chúng trên máy tính cục bộ trong cùng một thư mục. Hãy đảm bảo chúng được lưu với tên và phần mở rộng tệp đúng.
- Mở tệp HTML trong cả trình duyệt và trình soạn thảo văn bản của bạn.
- Bằng cách làm theo thông tin được cung cấp ở trên, thêm các phần tử
<link>và<script>vào HTML của bạn, để CSS và JavaScript của bạn được áp dụng vào HTML.
Nếu thực hiện đúng, khi bạn lưu HTML và làm mới trình duyệt, bạn có thể thấy rằng mọi thứ đã thay đổi:
- JavaScript đã thêm một danh sách rỗng vào trang. Bây giờ khi bạn nhấp vào bất kỳ đâu ngoài danh sách, một hộp thoại sẽ bật lên yêu cầu bạn nhập một số văn bản cho mục danh sách mới. Khi bạn nhấn nút OK, một mục danh sách mới sẽ được thêm vào danh sách chứa văn bản. Khi bạn nhấp vào một mục danh sách hiện có, một hộp thoại sẽ bật lên cho phép bạn thay đổi văn bản của mục.
- CSS đã làm cho nền trở nên xanh lá cây, và văn bản trở nên lớn hơn. Nó cũng đã tạo kiểu cho một số nội dung mà JavaScript đã thêm vào trang (thanh màu đỏ với viền đen là kiểu CSS đã thêm vào danh sách được tạo bởi JS.)
Note: Nếu bạn bị kẹt trong bài tập này và không thể áp dụng CSS/JS, hãy thử xem trang ví dụ css-and-js.html của chúng tôi.
Đặt ngôn ngữ chính của tài liệu
Cuối cùng, đáng đề cập rằng bạn có thể (và thực sự nên) đặt ngôn ngữ của trang. Điều này có thể được thực hiện bằng cách thêm thuộc tính lang vào thẻ HTML mở (như được thấy trong meta-example.html và được hiển thị bên dưới.)
<html lang="vi">
…
</html>
Điều này hữu ích theo nhiều cách. Tài liệu HTML của bạn sẽ được lập chỉ mục hiệu quả hơn bởi các công cụ tìm kiếm nếu ngôn ngữ của nó được đặt (cho phép nó xuất hiện đúng trong kết quả theo ngôn ngữ cụ thể, ví dụ), và nó hữu ích cho những người khiếm thị sử dụng trình đọc màn hình (ví dụ, từ "six" tồn tại trong cả tiếng Pháp và tiếng Anh, nhưng được phát âm khác nhau.)
Bạn cũng có thể đặt các phần của tài liệu để được nhận dạng là các ngôn ngữ khác nhau. Ví dụ, chúng ta có thể đặt phần ngôn ngữ tiếng Nhật để được nhận dạng là tiếng Nhật, như sau:
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
Các mã này được định nghĩa bởi tiêu chuẩn ISO 639-1. Bạn có thể tìm hiểu thêm về chúng trong Language tags in HTML and XML.
Tóm tắt
Điều đó đánh dấu kết thúc chuyến tham quan nhanh của chúng ta về phần head HTML — có nhiều thứ hơn bạn có thể làm ở đây, nhưng một chuyến tham quan toàn diện sẽ nhàm chán và gây nhầm lẫn ở giai đoạn này, và chúng tôi chỉ muốn cung cấp cho bạn ý tưởng về những thứ phổ biến nhất mà bạn sẽ tìm thấy ở đây hiện tại! Trong bài viết tiếp theo, chúng ta sẽ xem xét Tiêu đề và đoạn văn trong HTML.