HTML Элемент head

Элемент HTML <head> является контейнером для следующих элементов: <title>, <style>, <meta>, <link>, <script> и <base>.

Элемент HTML <head>

Элемент <head> является контейнером для метаданных (данных о данных) и размещается между тегами <html> и <body>.

Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются на странице.

Метаданные обычно определяют заголовок документа, набор символов, стили, сценарии и другую метаинформацию.

Элемент HTML <title>

Элемент <title> определяет заголовок документа. Заголовок должен быть только текстом, и он отображается в заголовке браузера или на вкладке страницы.

Элемент <title> обязателен в HTML-документах!

Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка при перечислении страниц в результатах поиска.

Элемент <title>:

  • определяет заголовок в панели инструментов браузера
  • предоставляет заголовок для страницы при добавлении в избранное
  • отображает заголовок для страницы в результатах поиска

Поэтому постарайтесь сделать заголовок как можно более точным и значимым!

Простой HTML-документ:

Пример

<!DOCTYPE html>
<html>
<head>
  <title>Осмысленный заголовок страницы</title>
</head>
<body>

Содержание документа.....

</body>
</html>

Элемент HTML <style>

Элемент <style> используется для определения информации о стилях для отдельной HTML страницы.

Пример

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

Элемент HTML <link>

Элемент <link> определяет связь между текущим документом и внешним ресурсом.

Элемент <link> чаще всего используется для ссылки на внешние таблицы стилей.

Пример

<link rel="stylesheet" href="mystyle.css">

Элемент HTML <meta>

Элемент <meta> обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра.

Метаданные не будут отображаться на странице, но используются браузерами (как отображать содержимое или перезагружать страницу), поисковыми системами (ключевые слова) и другими веб-сервисами.

Примеры

Определение используемого набора символов:

<meta charset="UTF-8">

Определение ключевых слов для поисковых систем:

<meta name="keywords" content="HTML, CSS, JavaScript">

Определение описания вашей веб-страницы:

<meta name="description" content="Бесплатные веб-уроки">

Определение автора страницы:

<meta name="author" content="John Doe">

Обновление документа каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Настройка области просмотра для того, чтобы ваш веб-сайт выглядел хорошо на всех устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Пример использования тегов <meta>:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Бесплатные веб-уроки">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
</head>

Настройка области просмотра

Область просмотра — это видимая для пользователя область веб-страницы. Она варьируется в зависимости от устройства: на мобильном телефоне она меньше, чем на экране компьютера.

Вы должны включать следующий элемент <meta> на всех ваших веб-страницах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Это дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без тега <meta> для области просмотра и той же веб-страницы с тегом <meta> для области просмотра:

Без тега meta для области просмотра

Без тега meta для области просмотра

С тегом meta для области просмотра

С тегом meta для области просмотра

Элемент HTML <script>

Элемент <script> используется для определения клиентских сценариев JavaScript.

Следующий сценарий JavaScript записывает «Hello JavaScript!» в HTML элемент с id=»demo»:

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Элемент HTML <base>

Элемент <base> задает базовый URL и/или цель для всех относительных URL-адресов на странице.

Элемент <base> должен иметь либо атрибут href, либо атрибут target, либо оба.

В документе может быть только один элемент <base>!

Пример

Задаем URL по умолчанию и цель по умолчанию для всех ссылок на странице:

<head>
<base href="https://www.example.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

Краткое содержание главы

  • Элемент <head> является контейнером для метаданных (данных о данных)
  • Элемент <head> размещается между тегами <html> и <body>
  • Элемент <title> обязателен и определяет заголовок документа
  • Элемент <style> используется для определения стилей для отдельного документа
  • Элемент <link> чаще всего используется для ссылки на внешние таблицы стилей
  • Элемент <meta> обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра
  • Элемент <script> используется для определения клиентских сценариев JavaScript
  • Элемент <base> задает базовый URL и/или цель для всех относительных URL-адресов на странице
HTML Элемент head - ПредыдущийHTML Файловые путиСледующий - HTML Элемент headHTML Верстка веб-страницы
To top