What’s in the head? Metadata in HTML

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh

Phần head của một tập tin HTML là bộ phận sẽ không hiển thị bên trong trình duyệt khi trang được tải. Nó chứa thông tin ví dụ như <title> của trang, đường dẫn đến CSS (nếu bạn chọn việc trang trí nội dung của bạn với CSS), liên kết đến các ảnh favicons tùy chỉnh, và các thông tin metadata khác (thông tin về HTML, ví dụ như tác giả, các từ khóa quan trọng mô tả tập tin). Trong bài viết này, chúng ta sẽ đi qua tất cả những thứ trên và thêm nhiều cái nữa, để giúp bạn có nền tảng tốt khi làm việc với HTML.

Điều kiện tiên quyết: Basic HTML familiarity, as covered in Getting started with HTML.
Mục tiêu: Học về head của HTML, mục đích của nó, những mục quan trọng nhất cần thêm vào, và những ảnh hưởng của nó có thể có lên tập tin HTML.

HTML head là gì?

Hãy xem lại ví dụ đơn giản HTML document we covered in the previous article:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML head là những nội dung của element <head> - không giống với nội dung của element <body> (thứ mà được hiển thị trên trang khi được tải trong trình duyệt), nội dung của head không được hiển thị trên trang. Thay vào đó, công việc của head là chứa các siêu dữ liệu metadata về tập tin. Trong ví dụ phía trên, head tương đối ít nội dung:

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

Tuy nhiên trong những trang lớn hơn, head có thể chứa rất nhiều nội dung. Thử đến xem một số website yêu thích của bạn và dùng developer tools để kiểm tra các nội dung head của chúng. Mục tiêu của chúng ta ở đây không phải là chỉ ra cho bạn cách làm thế đặt mọi thứ có thể đặt vào trong head, mà là dạy cho bạn làm cách nào để sử dụng những element chính yếu mà bạn sẽ phải thêm vào head, và giúp bạn quen hơn với head. Hãy bắt đầu.

Thêm title

Chúng ta đã được xem qua cách hoạt động của <title> - nó có thể được dùng để thêm title vào tập tin. Điều này tuy nhiên có thể bị nhầm lẫn với element <h1>, thứ mà được sử dụng để thêm vào một tiêu đề bao hàm cho toàn bộ nội dung của body - điều này đôi khi cũng được tham chiếu đến title của page. Nhưng chúng là 2 thứ khác nhau!

  • Phần tử <h1> xuất hiện trên trang khi được tải trong trình duyệt - thường thì điều này chỉ nên được dùng một lần trên mỗi trang, để đánh dấu tiêu đề cho nội dung của trang của bạn (tiêu đề câu chuyện, hoặc tiêu đề tin tức, hoặc bất kỳ cái gì phù hợp với việc sử dụng của bạn).
  • Phần tử <title> là metadata đại diện cho tiêu đề của cả tập tin HTML (không phải của nội dung tập tin.)

Active learning: Inspecting a simple example

  1. To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our title-example.html page. To do this, either
    1. Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.
    2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's File > Save Page As... menu and choose a sensible place to save the file.
  2. Now open the file in your browser. You should see something like this:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.It should now be completely obvious where the <h1> content appears, and where the <title> content appears!

  3. You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.

The <title> element contents are also used in other ways. For example, if you try bookmarking the page (Bookmarks > Bookmark This Page or the star icon in the URL bar in Firefox), you will see the <title> contents filled in as the suggested bookmark name.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

The <title> contents are also used in search results, as you'll see below.

Metadata: phần tử <meta>

Metadata là dữ liệu dùng để mô tả dữ liệu, và HTML có một cách thức "chính thống" để thêm metadata vào một tập tin - phần từ <meta>. Tất nhiên, các thứ khác mà chúng ta sẽ nói ngay sau đây trong bài viết này cũng có thể được hiểu như là metadata. Có rất nhiều loại phần tử <meta> khác nhau có thể được thêm vào bên trong phần head của trang của bạn, nhưng đừng cố gắng giải thích tất cả chúng ở giai đoạn này, vì nó sẽ rất rối rắm. Thay vào đó, chúng ta sẽ giải thích một vài thứ mà bạn có thể thường thấy, chỉ để bạn có được ý niệm.

Chỉ định bộ mã ký tự (character encoding) của tập tin

Trong ví dụ chúng ta xem bên trên, dòng này đã được thêm vào:

<meta charset="utf-8">

Phần tử này đơn giản sẽ chỉ định kiểu mã hóa ký tự của tập tin - bảng mã ký tự mà tập tin được phép sử dụng. utf-8 là một bảng mã phổ biến toàn cầu mà nó bao gồm rất nhiều ký tự từ mọi ngôn ngữ của con người. Điều này có nghĩa là web page của bạn sẽ có khả năng xử lý việc hiển thị bất kỳ ngôn ngữ nào; vì thế bạn nên đặt nó trong mọi web page bạn tạo ra! Ví dụ, trang của bạn có thể xử lý cả tiếng Anh và tiếng Nhật đều được:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Nếu bạn thiết lập việc mã hóa ký tự character encoding là ISO-8859-1, ví dụ (bộ mã ký tự Latin), việc render page của bạn có thể bị hỏng:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Note: Một số trình duyệt có thể tự động sửa lỗi encodings, nhưng bạn vẫn nên thiết lập utf-8 trên page để tránh lỗi ở các trình duyệt khác.

Active learning: Experiment with character encoding

To try this out, revisit the simple HTML template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to ISO-8859-1, and add the Japanese to your page. This is the code we used:

<p>Japanese example: ご飯が熱い。</p>

Thêm thông tin tác giả và mô tả

Nhiều phần tử <meta> chứa thuộc tính name content:

  • name chỉ định kiểu loại của phần tử meta; loại thông tin nào mà nó chứa đựng.
  • content chỉ định nội dung meta thật sự.

Hai phần tử meta này hữu ích để gắn vào trang của bạn để xác định tác giả của trang, và cung cấp một mô tả chính xác cho trang. Xem 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 web sites and applications.">

Xác định cụ thể tác giả mang lại nhiều lợi ích: nó hữu ích để biết ai viết ra trang đó, nếu bạn có câu hỏi về nội dung và bạn muốn liên hệ với họ. Một số hệ quản trị nội dung có các chức năng để tự động kết xuất thông tin tác giả và làm nó khả dụng cho những mục đích như vậy.

Xác định một mô tả cụ thể có bao gồm các từ khóa liên quan đến nội dung của trang sẽ hữu ích khi bạn muốn trang hiển thị cao hơn trong kết quả tiềm kiếm tương ứng. (such activities are termed Search Engine Optimization, or SEO.)

Active learning: The description's use in search engines

The description is also used on search engine result pages. Let's go through an exercise to explore this

  1. Go to the front page of The Mozilla Developer Network.
  2. View the page's source (Right/Ctrl + click on the page, choose View Page Source from the context menu.)
  3. Find the description meta tag. It will look something like this (although it may change over time):
    <meta name="description" content="The MDN Web Docs site 
      provides information about Open Web technologies 
      including HTML, CSS, and APIs for both Web sites and 
      progressive web apps.">
  4. Now search for "MDN Web Docs" in your favorite search engine (We used Google.) You'll notice the description <meta> and <title> element content used in the search result — definitely worth having!

    A Yahoo search result for "Mozilla Developer Network"

Note: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in Google's webmaster tools — a way to make your site's search results better in the Google search engine.

Note: Many <meta> features just aren't used any more. For example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.

Các kiểu metadata khác

Khi bạn dạo vòng quanh trang web, bạn sẽ thấy những kiểu loại khác của metadata. Rất nhiều trong số những tính năng bạn sẽ thấy trên các website là sự sáng tạo độc quyền, được thiết kế để cung cấp cho những trang nhất định (như các trang social networking) với những mẫu thông tin nhỏ cụ thể mà họ có thể sử dụng.

Ví dụ, Open Graph Data là giao thức metadata mà Facebook phát minh ra để cung cấp metadata phong phú hơn cho các website. Trong mã nguồn của MDN Web Dóc, bạn sẽ thấy thế này:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Một tác dụng của thứ này là khi bạn link đến MDN Web Docs trên facebook, đường dẫn sẽ xuất hiện kèm với một hình ảnh và mô tả: một trải nghiệm phong phú hơn cho các người dùng.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.

Twitter cũng có các metadata tương tự gọi là Twitter Cards, which has a similar effect when the site's URL is displayed on twitter.com. For example:

<meta name="twitter:title" content="Mozilla Developer Network">

Thêm các icon tự chọn vào site của bạn

Để làm phong phú hơn thiết kế cho trang của bạn, bạn có thể thêm các tham chiếu đến các icon tự chọn trong metadata của bạn, và chúng sẽ được hiển thị trong những văn bản nhất định. Phổ biến nhất là favicon (viết tắt của "favorite icon", đề cập đến việc nó dùng cho danh sách "favorite" hoặc "bookmarks" trong các trình duyệt).

The humble favicon has been around for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

A favicon can be added to your page by:

  1. Saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
  2. Adding the following line into your HTML's <head> block to reference it:
    <link rel="icon" href="favicon.ico" type="image/x-icon">

Here is an example of a favicon in a bookmarks panel:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN Web Docs homepage:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.

Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.

Note: If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the Content-Security-Policy header's img-src directive is not preventing access to it.

Áp dụng CSS và JavaScript vào HTML

Just about all websites you'll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the <link> element and the <script> element, respectively.

  • Phần tử <link> luôn luôn nằm trong phần head của tập tin. Nó có 2 thuộc tính, rel="stylesheet", ý chỉ rằng nó là stylesheet của tập tin, và href, chứa đường dẫn đến file stylesheet:

  • <link rel="stylesheet" href="my-css-file.css">
  • Phần tử <script> không nhất thiết phải ở trong head, thực tế, thường sẽ tốt hơn nếu đặt nó ở dưới cùng của body (trước thẻ đóng </body>), để đảm bảo mọi nội dung HTML được trình duyệt đọc qua trước khi nó cố gắng áp dụng JavaScript cho nó (nếu JavaScript cố gắng truy cập đến phần tử mà vẫn chưa tồn tại, trình duyệt sẽ throw ra một lỗi.)

    <script src="my-js-file.js"></script>

    Note: The <script> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <script> element.

Active learning: applying CSS and JavaScript to a page

  1. To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
  2. Open the HTML file in both your browser, and your text editor.
  3. By following the information given above, add <link> and <script> elements to your HTML, so that your CSS and JavaScript are applied to your HTML.

If done correctly, when you save your HTML and refresh your browser you should be able to see that things have changed:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.
  • The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)

Note: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

Thiết lập ngôn ngữ chính của tập tin

Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag (as seen in the meta-example.html and shown below.)

<html lang="en-US">

Điều này rất có ích, tập tin HTML của bạn sẽ được index hiệu quả hơn trên các công cụ tìm kiếm nếu ngôn ngữ của nó được thiết lập (ví dụ, cho phép nó xuất hiện chính xác trong các kết quả yêu cầu ngôn ngữ cụ thể), và nó cũng hữu ích với những người có vấn đề về thị giác sử dụng chức năng đọc màn hình thành tiếng (ví dụ, từ "six" tồn tại cả trong tiếng Pháp và tiếng Anh, nhưng được phát âm khác nhau.)

Bạn cũng có thể thiết lập các khu vực con của tập tin của bạn để nó được nhận diện với ngôn ngữ khác. For example, we could set our Japanese language section to be recognised as Japanese, like so:

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

Summary

That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.

In this module