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.

Оцените статью
Procodings.ru
Добавить комментарий