HTML Элемент Head
HTML элемент <head> - это контейнер для следующих элементов:
<title>,
<style>,
<meta>,
<link>,
<script>,
<base>,
<noscript>,
<template>.
HTML элемент <head>
Элемент <head> является контейнером для метаданных (данные о данных) и размещается между тегами <html> и <body>.
Метаданные HTML — это данные о документе HTML. Метаданные не отображаются на веб‑странице.
Метаданные обычно определяют заголовок документа (title), набор символов (utf-8), стили (style), скрипты (script) и другую метаинформацию.
HTML элемент <title>
Элемент <title> определяет заголовок документа. Заголовок должен состоять только из текста и отображаться в строке заголовка браузера или на вкладке веб‑страницы.
Тег <title> является обязательным в HTML‑документе — согласно спецификации HTML5!
Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка вывода страниц в результатах поиска. Именно по заголовку поисковые сервисы чаще всего определяют информацию о содержании веб‑страницы.
Элемент <title>:
- определяет заголовок на панели инструментов браузера
- предоставляет заголовок для страницы, когда она добавляется в избранное
- отображает заголовок страницы в результатах поиска
Таким образом, всегда старайтесь сделать заголовок максимально точным и значимым!
Простой HTML документ:
Пример
<!DOCTYPE html>
<html>
<head>
<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> чаще всего используется для ссылки на внешние таблицы стилей:
Примечание: Чтобы узнать больше о CSS, посетите CSS Учебник на нашем сайте W3Schools на русском.
HTML элемент <meta>
Элемент <meta> обычно используется для определения набора символов (utf-8), настроек области просмотра (viewport), описания страницы (description), а также ключевых слов (keyword) и автора документа (author) (иногда).
Метаданные не будут отображаться на странице, но используются браузерами (как отображать контент или перезагружать страницу), поисковыми системами (описание, ключевые слова) и другими веб‑службами.
Примеры
Определяет используемый набор символов:
<meta charset="UTF-8">
Определяет ключевые слова для поисковых систем:
<meta name="keywords" content="HTML, CSS, JavaScript">
Определяет описание веб‑страницы:
<meta name="description" content="Free Web tutorials">
Определяет автора веб‑страницы:
<meta name="author" content="John Doe">
Обновляет документ каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Настройка области просмотра, чтобы сайт выглядел хорошо на всех устройствах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Пример тегов <meta>:
Пример
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Попробуйте сами »
Настройка области просмотра
Область просмотра — это видимая пользователем область веб‑страницы. Это зависит от устройства — на мобильном телефоне она будет меньше, чем на экране компьютера.
Необходимо указать следующий элемент <meta> на всех веб‑страницах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это дает браузеру инструкции о том, как контролировать размеры и масштаб веб‑страницы.
Часть 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 на нашем сайте W3Schools на русском.
HTML элемент <base>
Элемент <base> определяет базовый URL‑адрес и/или цель для всех относительных URL‑адресов на странице.
Тег <base> должен иметь либо атрибут href, либо атрибут target, либо оба.
В документе может быть только один элемент <base>!
Пример
Укажите URL‑адрес по умолчанию и цель по умолчанию для всех ссылок на странице:
<head>
<base href="https://w3schoolsua.github.io/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.html">HTML тег base</a>
</body>
Попробуйте сами »
Резюме
- Элемент
<head>— контейнер для метаданных (данных о данных) - Элемент
<head>размещается между тегом<html>и тегом<body> - Элемент
<title>является обязательным и определяет заголовок документа - Элемент
<style>используется для определения информации о стиле для одного документа - Тег
<link>чаще всего используется для ссылки на внешние таблицы стилей - Элемент
<meta>обычно используется для определения набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра - Элемент
<script>используется для определения клиентского JavaScript - Элемент
<base>определяет базовый URL‑адрес и/или цель для всех относительных URL‑адресов на странице - Элемент
<noscript>определяет альтернативное содержимое, которое будет отображаться пользователям, отключившим скрипты в браузере или использующим браузер, не поддерживающий скрипты. - Элемент
<template>используется как контейнер для хранения некоторого HTML‑содержимого, скрытого от пользователя при загрузке страницы
HTML элементы раздела head
| Тег | Описание |
|---|---|
| <head> | Определяет информацию о документе |
| <title> | Определяет заголовок документа |
| <base> | Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице |
| <link> | Определяет связь между документом и внешним ресурсом |
| <meta> | Определяет метаданные об HTML‑документе |
| <script> | Определяет скрипт на стороне клиента |
| <style> | Определяет информацию о стиле для документа |
| <noscript> | Определяет альтернативное содержимое, которое будет отображаться пользователям, отключившим скрипты в браузере |
| <template> | Используется как контейнер для хранения некоторого HTML‑содержимого, скрытого от пользователя при загрузке страницы |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
HTML — Head — Видеоурок W3Schools
В этом видео объясняется элемент head в HTML.
Часть серии видеоуроков для изучения HTML для начинающих!
