Главная » Руководство по HTML – HTML5 введение » Элемент Head HTML

Элемент Head HTML

Элемент 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: #333333;}
h1 {color: yellow;}
p {color: white;}
</style>

ПРИМЕР

HTML - элемент <link>

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

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

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

🔗 Более подробно об элементе link в разделе "Стили HTML CSS" в главе - Внешний CSS

HTML - элемент <meta>

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

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

Определяет используемый набор символов:

<meta charset="UTF-8">

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

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

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

<meta name="description" content="Использование элемента HTML meta">

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

<meta name="author" content="Джон Доу">

Предустанавливает обновление документа каждые 40 секунд:

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

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

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

Пример meta тегов:

<meta charset="UTF-8">
<meta name="description" content="Использование элемента HTML meta">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Джон Доу">

Настройка Viewport

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

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

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

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

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

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

Пример веб-страниц без метатега viewport и тех же веб-страниц с метатегом viewport:

Без метатега viewport	С метатегом viewport

★ Примечание: если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на картинки выше, чтобы увидеть разницу.

HTML - элемент <script>

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

Следующий JavaScript пишет "Привет я JavaScript!" в элемент HTML с id="demojs":

<script>
function myFunction() {
document.getElementById("demojs").innerHTML = "Привет! Я JavaScript!";}
</script>

ПРИМЕР

HTML - элемент <base>

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

Тег <base> должен иметь либо атрибут href, либо целевой атрибут, либо оба.

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

<head>
<base href="https://appnet.club/" target="_blank">
</head>

<body>
<img src="/htm/HTML5_Black.gif" width="100" height="100" alt="HTML5">
<a href="/reference/html-tags-reference/html-base-tag">HTML base тег</a>
</body>

ПРИМЕР

Краткое содержание:

HTML элемент <head> — это контейнер для метаданных (данные о данных);
Элемент <head> размещается между тегами <html> и тегами <body>;
Элемент <title> является обязательным и определяет заголовок документа;
Элемент <style> используется для определения информации о стиле для одного документа;
Тег <link> чаще всего используется для ссылки на внешние таблицы стилей;
Элемент <meta> обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра;
Элемент <script> используется для определения сценариев JavaScript на стороне клиента;
Элемент <base> указывает базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.

Справочник по тегам HTML

Справочник по тегам содержит дополнительную информацию об этих тегах и их атрибутах.

Тег	Описание
<head>	Определяет информацию о документе
<title>	Определяет заголовок документа
<base>	Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице
<link>	Определяет отношение между документом и внешним ресурсом
<meta>	Определяет метаданные о HTML-документе
<script>	Определяет сценарий на стороне клиента
<style>	Определяет информацию о стиле для документа

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

☛ Макет HTML

Пути файлов HTML ☚

Поделиться ссылкой