Секция head
Секция head
Каждый HTML-документ в Интернете состоит из различных элементов. Многие из них достаточно распространены и встречаются почти на каждом сайте.
Например, контент страницы обычно поделен на параграфы, в нем присутствуют заголовки, изображения и ссылки. Но, несмотря на то что эти элементы являются общими, их присутствие в коде необязательно. Нет технической необходимости в них на веб-странице. Тем не менее редко можно встретить сайт без этих тегов.
Назначение <head>
Существуют элементы, которые обязательно должны присутствовать в коде. Технически есть только один тег, который должен присутствовать в верхней части всех документов, написанных на языке HTML - -тег. Он позволяет браузеру понять, где начинается и заканчивается страница.
Между открывающим и закрывающим тегом помещается все содержимое HTML-страницы. Перед ним располагается только doctype. Большинство других технически важных элементов - внутри тега , который располагается внутри и находится в самом начале кода. Он и тег являются его потомками.
Что содержится в <head>
Элемент является контейнером для других элементов. В нем содержатся общие сведения (метаданные) о документе, включая его название, ссылки на скрипты и таблицы стилей.
Метаданные предоставляют техническую информацию о документе, такую как название, описание, ключевые слова. Там же, где тег , располагается , где помещается контент сайта. Метаданные скрыты от посетителей, но используются оптимизаторами для раскрутки страницы. Они и теги heading (<h1><h6>) очень полезны, поскольку передают информацию веб-браузеру, а также поисковым системам об этой странице.
Порядок большинства элементов в <head>не имеет особого значения. Это вопрос предпочтения, поэтому они могут записываться так, как удобно верстальщику.
Метаданные необходимы для поисковой оптимизации, так как облегчают ботам, индексирующим сайты, возможность находить их и выводить на странице поиска в определенном порядке. Порядок отображения зависит от алгоритмов их работы, которые включают в себя в том числе корректную техническую информацию о странице.
Какие элементы могут присутствовать в <head>
Следующие элементы могут находиться внутри этого тега:<title> (этот элемент является обязательным для документ HTML),<style>,<base>,<link>,<meta>,<script>,<noscript>
В теге <head> можно:
- Подключать внешние файлы, такие как CSS, JavaScript и т.д.
- Вставлять ссылки на плагины carousel, pickdate и т.д.
- Добавлять ссылки на библиотеки, такие как jquery, Angularjs, vuejs
- Подключать фреймворки, например, bootstrap.
- Вставлять мета-теги, которые описывают, как будет выглядеть сайт в браузере.
- Здесь размещается обязательный тег<title>, который содержит заголовок страницы
Большинство метаданных не отображаются в браузере. Только<title> обычно появляется в строке заголовка браузера. Это может быть полезно для функциональности страницы, а информацию легко проверить через "Инспектор"
Синтаксис и атрибуты
Тег <head>- парный. Что это значит? Информация в нем записывается между открывающим и закрывающим тегами как <head></head> . Что должны иметь большинство HTML-документов? Это<title> тег в <head>.Единственное исключение: если документ — это<iframe>scrodoc или информация, которую нужно заключить в заголовок, уже имеется в протоколе более высокого уровня.
Примером может служить HTML-формат электронной почты. Атрибуты могут быть добавлены в HTML-элемент, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя. Тег<head> принимает атрибут profile, где прописывается адрес профиля метаданных и другие глобальные атрибуты. Но они не являются обязательными.
Тег <title> и его особенности
Элемент<title>или заголовок страницы - один из важнейших мета-тегов в<head>н всегда должен присутствовать на веб-странице, иначе поисковые роботы не смогут быстро найти ее и корректно отобразить в выдаче.
Помимо этого, существует еще ряд причин, почему его использование обязательно:
- Он отображает название сайта.
- Используется как основное средство для каталогизации.
- Если веб-страница не имеет названия, где описывается ее содержимое, поисковые системы дают ей более низкий рейтинг. Также содержимое<title> отображается как текстовая ссылка на странице выдачи, известной как SERP.
- Он отображается в верхней части окна браузера. Или на вкладке, описывающей страницу в браузере.
- Информация из заголовка страницы записывается, когда кто-то добавляет сайт в закладки. Поэтому его содержимое должно быть запоминающимся, чтобы пользователь мог легко запомнить и найти его среди других веб-страниц.
- Если этот тег не используется, то на сайте будет отображаться "Untitled Document". Он является заголовком страницы по умолчанию. Такой заголовок используется на многих программных платформах веб-разработки.
Поскольку тег<title> предназначен для отображения информации о сайте, каждая страница должна иметь уникальный заголовок, так как на ней находится уникальный контент. \
Это наиболее важная вещь для SEO. Хороший заголовок должен быть реалистичным и отображать ту информацию, которая действительно присутствует на странице.
Краткое объяснение для чего использовать тег <head> c примерами
Определение заголовка страницы с помощью тега <title>:
<title>Заголовок страницы</title>Определение описания страницы с помощью метатега description:
<meta name="description" content="Описание страницы">Определение ключевых слов для страницы с помощью метатега keywords:
<meta name="keywords" content="ключевые слова">
Ссылка на файлы стилей с помощью тега <link>:
<link rel="stylesheet" href="styles.css">
Ссылка на файлы скриптов с помощью тега <script>:
<script src="script.js"></script>
Определение кодировки страницы с помощью метатега charset:
<meta charset="UTF-8">
Определение масштаба страницы для мобильных устройств с помощью метатега viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Заключение
В этом уроке мы с вами подробно рассмотрели ключевые элементы, особенности и важность использования тега <head> в HTML-документах. Объяснены функции метатегов, атрибутов и приведены примеры их использования, подчеркивая значимость создания уникальных и информативных заголовков для улучшения SEO и пользовательского опыта.
Будьте первым