Каждый HTML-документ в Интернете состоит из различных элементов. Многие из них достаточно распространены и встречаются почти на каждом сайте.
Например, контент страницы обычно поделен на параграфы, в нем присутствуют заголовки, изображения и ссылки. Но, несмотря на то что эти элементы являются общими, их присутствие в коде необязательно. Нет технической необходимости в них на веб-странице. Тем не менее редко можно встретить сайт без этих тегов.
Существуют элементы, которые обязательно должны присутствовать в коде. Технически есть только один тег, который должен присутствовать в верхней части всех документов, написанных на языке HTML - -тег. Он позволяет браузеру понять, где начинается и заканчивается страница.
Между открывающим и закрывающим тегом помещается все содержимое HTML-страницы. Перед ним располагается только doctype. Большинство других технически важных элементов - внутри тега , который располагается внутри и находится в самом начале кода. Он и тег являются его потомками.
Элемент является контейнером для других элементов. В нем содержатся общие сведения (метаданные) о документе, включая его название, ссылки на скрипты и таблицы стилей.
Метаданные предоставляют техническую информацию о документе, такую как название, описание, ключевые слова. Там же, где тег , располагается , где помещается контент сайта. Метаданные скрыты от посетителей, но используются оптимизаторами для раскрутки страницы. Они и теги heading (<h1><h6>) очень полезны, поскольку передают информацию веб-браузеру, а также поисковым системам об этой странице.
Порядок большинства элементов в <head>не имеет особого значения. Это вопрос предпочтения, поэтому они могут записываться так, как удобно верстальщику.
Метаданные необходимы для поисковой оптимизации, так как облегчают ботам, индексирующим сайты, возможность находить их и выводить на странице поиска в определенном порядке. Порядок отображения зависит от алгоритмов их работы, которые включают в себя в том числе корректную техническую информацию о странице.
Следующие элементы могут находиться внутри этого тега:<title> (этот элемент является обязательным для документ HTML),<style>,<base>,<link>,<meta>,<script>,<noscript>
В теге <head> можно:
Большинство метаданных не отображаются в браузере. Только<title> обычно появляется в строке заголовка браузера. Это может быть полезно для функциональности страницы, а информацию легко проверить через "Инспектор"
Тег <head>- парный. Что это значит? Информация в нем записывается между открывающим и закрывающим тегами как <head></head> . Что должны иметь большинство HTML-документов? Это<title> тег в <head>.Единственное исключение: если документ — это<iframe>scrodoc или информация, которую нужно заключить в заголовок, уже имеется в протоколе более высокого уровня.
Примером может служить HTML-формат электронной почты. Атрибуты могут быть добавлены в HTML-элемент, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя. Тег<head> принимает атрибут profile, где прописывается адрес профиля метаданных и другие глобальные атрибуты. Но они не являются обязательными.
Элемент<title>или заголовок страницы - один из важнейших мета-тегов в<head>н всегда должен присутствовать на веб-странице, иначе поисковые роботы не смогут быстро найти ее и корректно отобразить в выдаче.
Помимо этого, существует еще ряд причин, почему его использование обязательно:
Поскольку тег<title> предназначен для отображения информации о сайте, каждая страница должна иметь уникальный заголовок, так как на ней находится уникальный контент. \
Это наиболее важная вещь для SEO. Хороший заголовок должен быть реалистичным и отображать ту информацию, которая действительно присутствует на странице.
Определение заголовка страницы с помощью тега <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 и пользовательского опыта.
Будьте первым