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

Что находится в голове? Метаданные в 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.

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

Что находится в голове? Метаданные в HTML

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

Рекомендуем почитать: