Секция Head

Секция head внутри HTML разметка содержит служебную информацию, которая не отображается на сайте:

  • Мета-теги (title, description, keywords, viewport).
  • Файлы JavaScript и CSS.

Мета-теги

Мета-теги — служебная информация для браузера и поисковых систем.

Кодировка страницы

Кодировка страницы помогает браузеру верно отобразить текст на HTML странице. Данная информация указывается в теге meta у атрибута charset:

<head>
    <meta charset="UTF-8">
</head>

Viewport

Мета-тег viewport обозначает для браузера ширину и возможность масштабирования контента на странице. По умолчанию все браузеры работают с виртуальной моделью разметки и выставляют ширину больше текущей ширины экрана. Это создано для того, чтобы на мобильных устройствах контент не съезжал с того места, где он был изначально. Такое часто можно заметить, если открыть сайт на мобильном устройстве. Если сайт не адаптирован под такие устройства, то возникает горизонтальная полоса прокрутки.

Мета-тег viewport позволяет нам указать конкретную ширину экрана для HTML страницы. Данное свойство может быть фиксированным, тогда указывается конкретное количество пикселей по ширине, или, как часто применяется, указывается вся доступная ширина устройства (device-width).

<meta name="viewport" content="width=device-width">

Мета-тег Title

Title служит для отображения названия страницы во вкладке браузера. Его также используют поисковые системы для определения заголовка страницы, которая показывается в выдаче поисковый системы. В отличии от других мета-тегов title обозначается парным тегом.

<head>
    <title>Заголовок страницы</title>
</head>

Мета-теги description и keywords

Оба мета-тега активно используются поисковыми системами для определения позиции в выдаче системы. Указываются в теге meta

<head>
    <meta name="description" content="Описание страницы">
    <meta name="keywords" content="Ключевые, слова, указываются, через, запятую">
</head>

Подключение файлов JavaScript и CSS

Для подключения внешних файлов в HTML используются 2 конструкции:

  • <script src="путь к файлу"></script> для подключения JavaScript файлов.
  • <link href="путь к файлу" rel="stylesheet"> для подключения CSS файлов стилей.

Задание

Создайте секцию head. В ней укажите мета-теги кодировки UTF-8, title, description и укажите во viewport ширину равной ширине устройства.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.