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>
.
Однако Пропуск тега <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-элемент
содержит машиночитаемую информацию (метаданные) о документе, такую как его заголовок, сценарии и таблицы стилей.
Примечание:
в первую очередь содержит информацию для машинной обработки, а не для чтения человеком. Для информации, видимой человеку, такой как заголовки верхнего уровня и список авторов, см.
9элемент 0005. Этот элемент включает глобальные атрибуты.
-
профиль
Устаревший Нестандартный URI одного или нескольких профилей метаданных, разделенные пробелом.
<голова>
<метакодировка="UTF-8" />
Название документа
Категории контента Нет. Разрешенный контент Если документ
srcdoc
документ или заголовок
информация доступна из протокола более высокого уровня (например,
строка темы в электронном письме в формате HTML), ноль или более элементов метаданных
содержание.
В противном случае один или несколько элементов содержимого метаданных, где ровно один
это <заголовок>
элемент.
Отсутствие тега Начальный тег может быть опущен, если первое, что находится внутри
element — это элемент.
Конечный тег может быть
опускается, если первое, что следует за
Элемент не является пробелом или комментарием. Разрешенные родители Ан
элемент, как его первый дочерний элемент. Неявная роль ARIA Нет соответствующей роли Разрешенные роли ARIA Нет роль
разрешено Интерфейс DOM HTMLHeadElement
Спецификация Стандарт HTML
# the-head-element
Таблицы BCD загружаются только в браузере с включенным JavaScript.
Включите JavaScript для просмотра данных.
- Элементы, которые можно использовать внутри
:-
<название>
-
<база>
-
<ссылка>
-
<стиль>
-
<мета>
-
<сценарий>
-
-
<шаблон>
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Работа с элементами заголовка HTML
Рекламные объявления
В этом уроке вы узнаете о важности элементов головы.
Элемент заголовка HTML
Элемент
в основном является контейнером для всех элементов заголовка, которые предоставляют дополнительную информацию о документе (метаданные) или ссылки на другие ресурсы, необходимые для отображения документа или правильно вести себя в веб-браузере.
Элементы head собирательно описывают свойства документа, такие как заголовок, предоставляют метаинформацию, такую как набор символов, указывают браузеру, где найти таблицы стилей или скрипты, которые позволяют расширять HTML-документ активными и интерактивными способами.
Внутри элемента
можно использовать следующие элементы HTML:
,
,
,