ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

HTML СТАРТ HTML Введение HTML Редакторы HTML Основные примеры HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Голова веб-страницы HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Символьные объекты HTML Символы HTML Кодировка HTML URL кодирование HTML XHTML

HTML Формы

HTML Формы HTML Элементы формы HTML Типы ввода HTML Атрибуты ввода

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работники HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

HTML Справочники

HTML Список тегов HTML Атрибуты HTML Глобальные атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

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


HTML элемент <head>

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

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

Метаданные обычно определяют заголовок документа (title), набор символов (utf-8), стили (css), скрипты (javascript) и другую метаинформацию.

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


HTML элемент <title>

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

Элемент <title>:

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

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

Пример

<!DOCTYPE html>
<html>

<head>
  <title>Page 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 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">
Попробуйте сами »

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

В HTML5 появился метод, позволяющий веб-дизайнерам контролировать область просмотра через тег <meta>.

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

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

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

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

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

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

Вот пример веб-страницы без метатега 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 Справочник тегов.