Секция head

Секция head

Coursme
17-20 мин
31 янв. 2024

Каждый 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 и пользовательского опыта.

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню