HTML - Элемент Head
HTML элемент <head> - это контейнер для следующих элементов:
<title>, <style>,
<meta>, <link>, <script> и <base>.
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> обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра.
Метаданные не будут отображаться на странице, но используются браузерами (как отображать контент или перезагружать страницу), поисковыми системами (ключевые слова) и другими веб-службами.
Примеры
Определяет используемый набор символов:
<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://w3schoolsrus.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 Tag</a>
</body>
Попробуйте сами »
Резюме
- Элемент
<head>- контейнер для метаданных (данных о данных) - Элемент
<head>помещается между тегом<html>и тегом<body> - Элемент
<title>является обязательным и определяет заголовок документа - Элемент
<style>используется для определения информации о стиле для одного документа - Тег
<link>чаще всего используется для ссылки на внешние таблицы стилей - Элемент
<meta>обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра - Элемент
<script>используется для определения клиентского JavaScript - Элемент
<base>определяет базовый URL-адрес и/или цель для всех относительных URL-адресов на странице
HTML элементы head
| Тег | Описание |
|---|---|
| <head> | Определяет информацию о документе |
| <title> | Определяет заголовок документа |
| <base> | Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице |
| <link> | Определяет связь между документом и внешним ресурсом |
| <meta> | Определяет метаданные об HTML-документе |
| <script> | Определяет скрипт на стороне клиента |
| <style> | Определяет информацию о стиле для документа |
Для получения полного списка всех доступных тегов HTML посетите HTML Справочник тегов на нашем сайте W3Schools.
