HTML Head

Элемент HTML <head> используется как контейнер для метаданных (данных о данных).
Он используется между тегом <html> и тегом <body>.
Заголовок HTML-документа — это часть, содержимое которой не отображается в браузере при загрузке страницы. Он просто содержит метаданные о документе HTML, которые указывают данные о документе HTML.
Заголовок HTML может содержать много метаданных, а может содержать очень мало информации или вообще не содержать ее, в зависимости от наших требований. Но головная часть играет решающую роль HTML-документа при создании веб-сайта.
Метаданные определяют заголовок документа, набор символов, стили, ссылки, сценарии и другую метаинформацию.
Ниже приведен список тегов, используемых в метаданных:
◦ <title>
◦ <style>
◦ <meta>
◦ <link>
◦ <script>
◦ <base>

HTML-элемент <title>

Элемент HTML <title> используется для определения заголовка документа. Он используется во всех документах HTML/XHTML. Элемент <title> должен располагаться между элементом <head>, и в одном документе может быть только один элемент заголовка.
Что делает элемент <title>?
1. Он определяет заголовок на вкладке браузера.
2. Он предоставляет заголовок для страницы, когда она добавляется в избранное.
3. Отображает заголовок страницы в результатах поиска.
Примечание. Элемент заголовка должен содержать конкретное описание документа, а его рекомендуемая длина составляет от 65 до 70 символов, включая пробелы.
Пример:

<!DOCTYPE html>
<html>
<head>
<title>Название этой страницы</title>
</head>
<body>
<p>Содержимое тела отображается в окне браузера.</p>
<p>Содержимое элемента title отображается на вкладке браузера, в избранном и в результатах поиска.</p>
</body>
</html>

HTML-элемент <style>

HTML-элемент <style> используется для стилизации HTML-страницы. Элемент <style> может иметь свойства CSS только для этой HTML-страницы. Если мы хотим применить CSS для нескольких страниц, нам следует использовать отдельный файл CSS.
Пример:

<!DOCTYPE html>
<html>
<head>
<title>Это заголовок страницы</title>
<style>
body {
background-color: pink;
}
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>

HTML-элемент <link>

HTML-элемент <link> используется для привязки внешней таблицы стилей к вашей веб-странице. Элемент <link> содержит два основных атрибута: «rel» и «href». Атрибут rel указывает, что это таблица стилей, а href указывает путь к этому внешнему файлу.
Пример:

<!DOCTYPE html>
<html>
<head>
<title>Это заголовок</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Веб-страница с внешним CSS</h2>
<p>Это выглядит крутой страницей</p>
</body>
</html>

HTML-элемент <meta>

Элемент HTML <meta> используется для указания набора символов, описания страницы, ключевых слов, авторов и других метаданных на веб-странице.
Метаданные в основном используются браузерами, поисковыми системами и другими веб-службами для повышения рейтинга вашей веб-страницы.
Давайте посмотрим, как использовать метаданные:
Чтобы определить набор символов:
<meta charset="UTF-8">
Атрибут charset определяет кодировку символов. В этом примере мы установили его на «UTF-8», что означает, что он может отображать любой язык.
Чтобы определить описание вашей веб-страницы:
<meta name="description" content="Бесплатные веб-учебники">
Если вы дадите метаописание, то будет полезно, чтобы поисковые системы выполняли соответствующий поиск.
Чтобы определить ключевые слова для поисковых систем:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Значение ключевого слова также используется для предоставления ключевых слов для поисковой системы, но оно может игнорироваться браузером из-за спамеров.
Чтобы определить автора веб-страницы:
<meta name="author" content="Автор">
Значение author указывает имя человека, написавшего содержимое страницы, и полезно для автоматического извлечения информации об авторе некоторыми системами управления содержимым.
Чтобы обновлять документ каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Метаобновление используется для предоставления браузеру инструкций по автоматическому обновлению страницы через заданный интервал времени. Как и в приведенном выше примере, он автоматически обновится через 30 секунд.
<meta http-equiv="refresh" content="10; url=https://mirjs.uz>
Если вы добавите URL-адрес со значением содержания, он будет перенаправлен на эту страницу после истечения срока.
Используйте тег <meta> для установки области просмотра.
Этот метод введен в HTML5 для управления областью просмотра с помощью тега <meta>.
Viewport — это видимая пользователем область веб-страницы. Он меняется от устройства к устройству и выглядит меньше на мобильных телефонах, чем на экранах компьютеров.
Синтаксис элемента <meta> области просмотра:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Здесь элемент области просмотра указывает, как управлять размерами и масштабированием страницы.
width=device-width устройства используется для установки ширины страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).
Initial -scale=1.0 используется для установки начального уровня масштабирования при первой загрузке страницы браузером.
Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Бесплатные веб-учебники">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="Автор">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>заголовок страницы</title>
</head>
<body>
<p>meta теги</p>
</body>
</html>

HTML-элемент <base>

HTML-элемент <base> используется для указания базового URL-адреса и базовой цели для всех относительных URL-адресов на странице.

HTML-элемент <script>

Элемент HTML <script> используется для применения JavaScript на стороне клиента к той же странице или для добавления внешнего файла JavaScript на текущую страницу.
Пример:

<!DOCTYPE html>
<html>
<head>
<title>Название страницы</title>
<script>
function fun() {
document.querySelector("#p").style.color="green";
}
</script>
</head>
<body>
<h2>Скрипт в элементе head</h2>
<p id="p">Это изменит цвет</p>
<button onclick="fun()">Нажми меня</button>
</body>
</html>

Если мы хотим использовать какой-то внешний файл JavaScript, его можно применить:
<script src="js.js"></script>

Исключая элементы <html>, <head> и <body>

HTML 5 позволяет нам опускать теги <html>, <body> и <head>.
Пример:

<!DOCTYPE html>
<title>Название страницы</title>
<h1>Это заголовок</h1>
<p>Это абзац.</p>

Примечание. Не рекомендуется опускать теги <html> и <body>. Отсутствие этих тегов может привести к сбою программного обеспечения DOM или XML и вызвать ошибки в старых браузерах (IE9).
Однако вы можете опустить тег <head>.