Что находится в голове? Метаданные в HTML
Что такое головка HTML?
Заголовок HTML – это содержимое элемента <head>
. Это часть, которая не отображается в веб-браузере при загрузке страницы. Она содержит такую информацию, как название страницы <title>
, ссылки на CSS
, ссылки на custom favicons
(любимые иконки), и другие метаданные (данные о HTML, такие как автор, важные ключевые слова, описывающие документ). Веб-браузеры используют информацию, содержащуюся в голове, для правильного отображения HTML-документа.
Мы представим некоторые основные элементы, которые включаются в головку.
-
<title>
Здесь задается заголовок страницы, который отображается на вкладке браузера, в которую загружена страница. Заголовок страницы также используется для описания страницы при добавлении ее в закладки. Это содержимое также используется в результатах поиска. -
<meta>
Метаданные – это данные, которые описывают данные, и HTML имеет “официальный” способ добавления метаданных в документ – элемент<meta>
. -
Указание кодировки символов вашего документа
<meta charset="utf-8" />
Этот элемент определяет кодировку документа — набор символов, который разрешено использовать документу. utf-8
– это универсальный набор символов, который включает практически все символы любого человеческого языка. Это означает, что ваша веб-страница сможет обрабатывать отображение любого языка:
Если вы установите кодировку, например, ISO-8859-1
(набор символов для латинского алфавита), то рендеринг вашей страницы может оказаться беспорядочным:
Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому в зависимости от того, какой браузер вы используете, вы можете не заметить этой проблемы. Тем не менее, вам все равно следует установить кодировку utf-8 на вашей странице, чтобы избежать возможных проблем в других браузерах.
-
Добавление автора и описания
Многие элементы<meta>
включают атрибутыname
иcontent
:name
определяет тип мета-элемента; какой тип информации он содержит.content
определяет фактическое содержание мета-элемента.
<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." />
Указание автора полезно во многих отношениях: полезно иметь возможность понять, кто написал страницу, если у вас возникнут вопросы по содержанию и вы захотите связаться с ним. Некоторые системы управления контентом имеют средства для автоматического извлечения информации об авторе страницы и предоставления ее для таких целей.
Указывать описание, включающее ключевые слова, относящиеся к содержанию страницы, полезно, так как это может привести к тому, что ваша страница будет отображаться выше в соответствующих поисковых запросах, выполняемых в поисковых системах. -
Добавление пользовательских иконок на ваш сайт
Фавикон можно добавить на вашу страницу следующим образом:- Сохранив его в том же каталоге, что и индексная страница сайта, в формате
.ico
(большинство браузеров поддерживают фавиконки в более распространенных форматах, таких как.gif
или.png
, но использование формата.ico
обеспечит его работу еще в Internet Explorer 6). - Добавление следующей строки в блок
<head>
вашего HTML для ссылки на него:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
- Сохранив его в том же каталоге, что и индексная страница сайта, в формате
-
Применение CSS и JavaScript в HTML
<!-- CSS -->
<link rel="stylesheet" href="my-css-file.css" />
<!-- JavaScript -->
<script src="my-js-file.js" defer></script>
- Установка основного языка документаВы можете (и действительно должны) установить язык вашей страницы. Это можно сделать, добавив атрибут lang к открывающему HTML-тегу.
<html lang="en-US"></html>
Вы также можете установить, что подразделы вашего документа будут распознаваться как разные языки.
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
Это полезно во многих отношениях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если задан его язык (что позволит ему правильно отображаться в результатах, специфичных для конкретного языка, например), и это полезно для людей с нарушениями зрения, использующих программы чтения с экрана (например, слово “шесть” существует во французском и английском языках, но произносится по-разному).
Эти коды определены стандартом ISO 639-1. Подробнее о них можно узнать в разделе Языковые теги в HTML и XML.