Head HTML уроки для начинающих академия
❮ Назад Дальше ❯
Элемент HTML <head>
Элемент <head> является контейнером для метаданных (данные о данных) и помещается между тегом <html> и тегом <body>.
Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.
Метаданные обычно определяют название документа, набор символов, стили, ссылки, сценарии и другую мета-информацию.
Следующие теги описывают метаданные: <title>, <style>, <meta>, <link>, <script> и <base>.
Элемент HTML <Title>
Элемент <title> определяет название документа и является обязательным для всех документов HTML/XHTML.
Элемент <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;}
h2 {color: red;}
p {color: blue;}
Элемент 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=»html5css.
ru»>
Обновлять документ каждые 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»>
Настройка видового экрана
HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.
Видовой экран — это видимая область пользователя веб-страницы. Она варьируется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера.
На всех веб-страницах следует включить следующий элемент <meta> видового экрана:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Элемент видового экрана <meta> предоставляет обозревателю инструкции по управлению размерами страницы и масштабированию.
Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).
Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с тегом видового экрана <meta>:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Без мета-тега видового экрана
С помощью мета-тега видового экрана
Элемент 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://html5css.ru/images/» target=»_blank»>
Пропуск <HTML>, <head> и <BODY>?
Согласно стандарту HTML5; <html>, <body> и тег <head> могут быть опущены.
Следующий код будет проверяться как HTML5:
Примере
<!DOCTYPE html>
<title>Page Title</title>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
Примечание:
<html> и <body> .
Пропуск этих тегов может привести к сбою программного обеспечения DOM или XML и подавать ошибки в старых браузерах (IE9).Однако Пропуск тега <head> был распространенной практикой уже довольно давно.
Элементы HTML-головки
| Тег | Description |
|---|---|
| <head> | Определяет сведения о документе |
| <title> | Определяет заголовок документа |
| <base> | Определяет адрес по умолчанию или целевой объект по умолчанию для всех ссылок на странице |
| <link> | Определяет связь между документом и внешним ресурсом |
| <meta> | Определяет метаданные HTML-документа |
| <script> | Определяет сценарий на стороне клиента |
| <style> | Определяет сведения о стиле для документа |
❮ Назад Дальше ❯
HTML/Элемент head
Синтаксис
HTML
XHTML
<html>
<head>
<title> .
.. </title>
...
</head>
<body> ... </body>
</html>Описание
Элемент head (от англ. «head» ‒ «голова, заголовок») указывает голову документа (технический заголовок документа), в котором располагаются элементы технической информации (ссылки, стили, сценарии), а так же метатеги данных документа (описание страницы, ключевые слова). При этом всё содержимое данного элемента в поле страницы ни как не отображается.
Допустимые дочерние элементы: base, basefont, link, meta, script, style, title.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Head: HEAD | Перевод |
| 3.2 | The HEAD element | |
| 4.01 | DTD: Transitional
Strict
Frameset | |
| 5.0 | 4.2.1 The head element | |
| 5.1 | 4.2.1. The head element | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
1.![]() | Extensible HyperText Markup Language | |
Атрибуты
- profile
- Указывает URL-адрес документа содержащего набор правил для элемента
meta. - Глобальные атрибуты
- accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
</head>
<body>
<h2>Пример с элементом «head»</h2>
<p>»Видимая часть страницы»</p>
</body>
</html>
Элемент head
: Элемент метаданных документа (заголовок) — HTML: язык гипертекстовой разметки
HTML-элемент содержит машиночитаемую информацию (метаданные) о документе, такую как его заголовок, сценарии и таблицы стилей.
Примечание: в первую очередь содержит информацию для машинной обработки, а не для чтения человеком. Для информации, видимой человеку, такой как заголовки верхнего уровня и список авторов, см.
Этот элемент включает глобальные атрибуты.
-
профильУстаревший Нестандартный URI одного или нескольких профилей метаданных, разделенные пробелом.
<голова>
<метакодировка="UTF-8" />
Название документа
голова>
| Категории контента | Нет. |
|---|---|
| Разрешенный контент | Если документ В противном случае один или несколько элементов содержимого метаданных, где ровно один
это |
| Отсутствие тега | Начальный тег может быть опущен, если первое, что находится внутри element — это элемент. Конечный тег может быть опускается, если первое, что следует за Элемент не является пробелом или комментарием. |
| Разрешенные родители | Ан элемент, как его первый дочерний элемент. |
| Неявная роль ARIA | Нет соответствующей роли |
| Разрешенные роли ARIA | Нет роль разрешено |
| Интерфейс DOM | HTMLHeadElement |
| Спецификация |
|---|
| Стандарт HTML # the-head-element |
Таблицы BCD загружаются только в браузере с включенным JavaScript.
Включите JavaScript для просмотра данных.
- Элементы, которые можно использовать внутри
:-
<название> -
<база> -
<ссылка> -
<стиль> -
<мета> -
<сценарий> -
-
<шаблон>
-
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Работа с элементами заголовка HTML
Рекламные объявления
В этом уроке вы узнаете о важности элементов головы.
Элемент заголовка HTML
Элемент в основном является контейнером для всех элементов заголовка, которые предоставляют дополнительную информацию о документе (метаданные) или ссылки на другие ресурсы, необходимые для отображения документа или правильно вести себя в веб-браузере.
Элементы head собирательно описывают свойства документа, такие как заголовок, предоставляют метаинформацию, такую как набор символов, указывают браузеру, где найти таблицы стилей или скрипты, которые позволяют расширять HTML-документ активными и интерактивными способами.
Внутри элемента можно использовать следующие элементы HTML: , , ,

.. </title>
...
</head>
<body> ... </body>
</html>
