MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Что такое заголовок? Метаданные в HTML

В процессе перевода.

Элемент head заголовок документа HTML это часть которая не отображается в веб-браузере когда страница загружена. Он сожержит информацию такую как название <title> страницы, ссылки на CSS (если вы хотите стилизировать ваш HTML контент с помощью CSS), ссылки на иконки, и другие метаданные (данные о HTML, такие как кто написал данную страницу, и важные ключевые слова которые описывают документ.) В этой статье мы рассмотрим все вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой и другим кодом, который должен жить в вашем заголовке.

Предварительные требования:

Базовое знакомство с HTML , описанное в Getting started with HTML.

Задача: Узнать о HTML-заголовке, какова его цель, важнейшие элементы которые он может содержать, и какой эффект он может дать для HTML документа.

Что такое заголовок HTML?

Давайте снова посмотрим наш HTML документ из прошлой статьи :

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

Заголовок это содержимое элемента <head> — за исключением содержимого элемента <body> (которое отображается когда страница загружена в браузере), сожержимое заголовка не отображается на странице. Вместо этого, задача заголовка это содержание metadata о документе. В следующем примере, заголовок очень мал:

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

однако в больших страницах, заголовок может быть полон различных предметов — попробуйте зайти на один из ваших любимых сайтов и используйте developer tools что бы посмотреть содержимое их заголовка. Наша цель сейчас это не показать вам как испольовать все возможные способы которыми можнозаполнить заголовок , а скорее научить вас как использовать самые очевидные вещи которые можно включить в заголовок, и позволить вам ознокомиться с этим. Давайте начнем.

Добавление названия страницы

Мы уже видели <title> элемент в действии — его можно использовать для добавления названия документа. Это однако может привести к путанице с элементом <h1> , который используется для добавления заголовка верхнего уровня к телу вашего докуента — это так же иногда воспринимается как заголовок страницы. Однако это разные вещи!

  • Элемент <h1> показывается на странице когда она загружена браузером — обычно он должен быть использован один раз на странице, для обозначения названия сожержимого вашей страницы (название истории, или заголовок новости, или что угодно что бы вы хотели обозначить таким образом.)
  • Элемент <title> это метаданные представляющие название всего HTML документа (а не только его содержимого.)

Активное изучение: Инспектирование простого примера

  1. Для начала активного изучения, мы бы хотели что бы вы зашли на наш репозиторий Github и скачали копию нашего примера title-example.html page. Для этого либо
    1. Скопируйте и вставьте код страницы внутрь нового текстового файла в вашем редакторе кода, затем сохраните его в любом удобном месте.
    2. Нажмите кнопку "Raw"  на странице, выберете File > Save Page As... в вашем меню браузера, затем выберете место для сохранения.
  2. Теперь откройте файл в вашем браузере. Вы увидите что то похожее на это:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Теперь должно быть совершенно очевидно что показывает контент <h1>, и где отображается контент <title>!

  3. Вы также должны попробовать открыть код в редакторе кода, измините содержимое этих элементов, затем обновите страничку в браузере. Повеселитесь.

Содержимое элемента <title> также используется в других целях. Например, если вы пытаетесь добавить страницу в избранное (Bookmarks > Bookmark This Page, в Firefox), вы увидите содержимое <title> заполнившее название выбранной вкладки.

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

Сожержимое <title> так же используется в резултатах поисковых запросов, как вы видите выше.

Метаданные: Элемент <meta>

Метаданные - это данные, которые описывают данные, и HTML имеет "официальный" способ для добавления метаданных в документ — элемент <meta>. Конечно, другой материал о котором мы говорим в этой статье так же может рассматриваться как метаданные. Существует много различных способов где элемент <meta> может быть включен в заголовок страницы <head>, но мы не будем пытаться объяснить их все на этом этапе, что бы вас не запутать. Однако, мы обьясним некоторые вещи с которыми вы часто будете сталкиваться, просто что бы дать вам мысли.

Настройка кодировки символов в документе

В примере, что был показан выше, была включена следующая строка:

<meta charset="utf-8">

Этот элемент просто-напросто определяет символьную кодировку документа — набор символов, которые можно использовать в документе. utf-8 это универсальный набор символов, который включает почти все символы со всех языков человечества. Это означает, что ваша веб-страница сможет правильно отобразить любой язык, более того - хорошая идея установить данную кодировку на каждую веб-страницу что вы создаете! Например, ваша страница может прекрасно отображать как английские, так и японские символы:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Если вы установите символьную кодировку ISO-8859-1, например (набор символов для латинского алфавита), выведеный текст на вашей странице окажется испорченым:

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

Активное изучение: эксперементируем с символьными кодировками

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>

Adding an author and description

Many <meta> elements include name and content attributes:

  • name specifies the type of meta element it is; what type of information it contains.
  • content specifies the actual meta content.

Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN 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.">

Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.

Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (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 like this:
    <meta name="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.">
  4. Now search for "Mozilla Developer Network" in your favourite search engine (We used Yahoo.) 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 listed below the main MDN 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 — 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.

Other types of metadata

As you trawl around the Web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.

For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN sourcecode, you'll find this:

<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">

One effect of this is that when you link to MDN on facebook, the link appears along with an image and description: a richer experience for users.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter also has its own similar proprietary metadata, 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">

Adding custom icons to your site

To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.

The humble favicon, which has been around for many, many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. The 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 <head> to reference it:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Modern browsers use favicons in various places, such as in the tab the page is open in, and in the bookmarks panel when you bookmark the page:

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 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 web sites' source code.

Applying CSS and JavaScript to 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.

  • The <link> element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:

    <link rel="stylesheet" href="my-css-file.css">
  • The <script> element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing </body> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)

    <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'll 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.

Setting the primary language of the document

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.)

<html lang="en-US">

This is useful in many ways. Your document will be indexed more effectively by search engines if its language is set (allowing it to appear correct in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)

You can also set sub sections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:

<p>Japanese example: <span lang="jp">ご飯が熱い。</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.

Метки документа и участники

 Внесли вклад в эту страницу: nikin93, kolanski
 Обновлялась последний раз: nikin93,