HTML Head. Голова веб-страницы

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

HTML элемент <head>

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

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

Следующие теги описывают метаданные: <title>, <style>, <meta>, <link>, <script> и <base>.

HTML элемент <title>

Элемент <title> определяет название документа и является обязательным для всех HTML/XHTML документов согласно спецификации HTML5.

Элемент <title>:

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

Пример:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>
Попробуйте сами »

HTML элемент <style>

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

Пример:

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
Попробуйте сами »

HTML элемент <link>

HTML элемент <link> используется для ссылки на внешние таблицы стилей - CSS файлы:

Пример:

<link rel="stylesheet" href="mystyle.css">
Попробуйте сами »

Примечание: Чтобы узнать больше о CSS, посетите Учебник по CSS.

HTML элемент <meta>

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

Определите набор символов (кодировку), что используется на веб-странице:

<meta charset="UTF-8">

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

<meta name="description" content="Free Web tutorials">

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

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

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

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

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

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

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

Пример:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Попробуйте сами »

Установка окна просмотра - Viewport

HTML5 представил метод, который позволяет веб-дизайнерам управлять экраном через тег <meta>. Окно просмотра (viewport) - видимая область пользователя веб-страницы. Она меняется в зависимости от устройства и будет меньше на мобильном телефоне, чем на экране компьютера.

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

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

Элемент <meta> viewport предоставляет инструкциям браузера, как контролировать размеры и масштабирование страницы. Часть width=device-width устанавливает ширину страницы, чтобы она отвечала ширине экрана устройства (которая зависит от устройства). Часть initial-scale=1.0 устанавливает начальный уровень масштабирования, когда страница загружается браузером.

Ниже приведён пример веб-страницы без метатега viewport и той же веб-страницы с метатегом viewport:

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



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


Из viewport метатегом

HTML элемент <script>

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

Этот JavaScript пишет "Hello JavaScript!" в HTML элементе с id = "demo":

Пример:

<script>
function myFunction {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Попробуйте сами »

Примечание: Чтобы узнать больше про JavaScript, перейдите к Учебнику по JavaScript.

HTML элемент <base>

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

Пример:

<base href="https://www.w3schools.com/images/" target="_blank">
Попробуйте сами »

Опускать ли <html>, <head> и <body>?

В соответствие стандарту HTML5 теги <html>, <body> и <head> можно опустить.

Следующий код пройдёт валидацию как HTML5:

Пример:

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Попробуйте сами »

Примечание: W3Schools не рекомендует опускать теги <html> и <body>. Пренебрежение этими тегами может привести к сбою программного обеспечения DOM или XML и возникновению ошибок в старых браузерах (IE9). Впрочем, опускать тег <head> - это была широкая практика в течение довольно длительного времени.

HTML элементы головы веб-страницы - Head

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

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