HTML - элемент Head
Элемент <head> — это контейнер для следующих элементов: <title>, <style>, <meta>, <link>, <script> и <base>.
Элемент HTML <head>
Элемент <head> содержит метаданные (данные о данных) и располагается между тегами <html> и <body>. Метаданные — это информация о документе, которая не отображается на странице; обычно задаёт заголовок, набор символов, стили, скрипты и другую мета-информацию.
Элемент HTML <title>
Элемент <title> определяет заголовок документа. Он должен содержать только текст и отображается в заголовке или вкладке браузера. Он обязателен в каждом HTML-документе. Заголовок очень важен для поисковой оптимизации (SEO), так как поисковые системы используют его для ранжирования страниц в результатах, поэтому делайте его точным и осмысленным.
Пример
Документ с осмысленным заголовком.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Значимый заголовок страницы</title>
</head>
<body>
Содержимое документа......
</body>
</html>
Элемент HTML <style>
Элемент <style> определяет информацию о стиле для одной страницы.
Пример
Стили страницы, заданные с помощью элемента <style>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
Элемент HTML <link>
Элемент <link> определяет связь между страницей и внешним ресурсом. Чаще всего используется для подключения внешней таблицы стилей.
Пример
Подключение внешней таблицы стилей.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
Элемент HTML <meta>
Элемент <meta> задаёт такие вещи, как набор символов, описание страницы, ключевые слова, автора и viewport. Эти метаданные не отображаются на странице, но используются браузерами, поисковыми системами и другими сервисами. Например: <meta charset="UTF-8"> задаёт набор символов, name="keywords" задаёт ключевые слова для поиска, name="description" задаёт описание страницы, name="author" указывает автора, а http-equiv="refresh" может перезагружать страницу по таймеру.
Пример
Несколько мета-тегов в head.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Бесплатные веб-уроки">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Вся мета-информация размещается в разделе head.</p>
</body>
</html>
Настройка Viewport
Viewport — это видимая пользователю область страницы, которая меньше на телефоне, чем на компьютере. Мета-тег viewport следует включать на каждой странице. Часть width=device-width заставляет ширину страницы следовать ширине экрана устройства, а initial-scale=1.0 задаёт начальный уровень масштабирования.
Мета-тег viewport
Мета-тег viewport, который нужно включать на каждой странице.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Элемент HTML <script>
Элемент <script> определяет клиентский JavaScript.
Пример
Скрипт в head, изменяющий текст элемента.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Привет, JavaScript!";
}
</script>
</head>
<body>
<p id="demo">Абзац.</p>
<button type="button" onclick="myFunction()">Попробуй</button>
</body>
</html>
Элемент HTML <base>
Элемент <base> задаёт базовый URL и/или цель для всех относительных URL на странице. У него должен быть атрибут href, атрибут target или оба, и на документ может приходиться только один такой элемент.
Пример
URL и цель по умолчанию для всех относительных ссылок.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://prompt-cookbook.com" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Человечек">
<a href="tags/tag_base.asp">Тег HTML base</a>
</body>
</html>
Итоги главы
Подведём итог: элемент <head> содержит метаданные и располагается между <html> и <body>. <title> обязателен и задаёт заголовок. Элемент <style> задаёт стили для одной страницы, тег <link> ссылается на внешние таблицы стилей, элемент <meta> задаёт такие вещи, как charset, описание, ключевые слова, автора и viewport, элемент <script> определяет JavaScript, а элемент <base> задаёт базовый URL и цель.
Элементы HTML head
Теги, связанные с head: <head> (информация о документе), <title> (заголовок документа), <base> (адрес или цель по умолчанию для ссылок), <link> (ссылка на внешний ресурс), <meta> (метаданные о документе), <script> (клиентский скрипт), и <style> (информация о стиле).