HTML-тег <head>

HTML-тег <head> — это контейнер для метаданных и другой информации о HTML-документе. Он размещается в начале HTML-файла, внутри тега <html> , но за пределами тега <body> . Содержимое тега <head> не отображается непосредственно на веб-странице, а используется для определения заголовка документа, ссылок на таблицы стилей, скрипты и других настроек.

Он играет решающую роль в определении структуры, стиля и поведения веб-страницы.

Базовый синтаксис HTML-тега <head>

Базовая структура тега <head> : 

<!DOCTYPE html>
<html>
    <head>
        Metadata and links go here.
    </head>
    <body>
        Visible content goes here.
    </body>
</html>

Тег <head> обычно включает несколько вложенных элементов, таких как <title> , <meta> , <link> , <style> и <script> .

Общие элементы внутри тега <head>

  • <title> : Указывает заголовок веб-страницы, отображаемый на вкладке браузера или в результатах поисковой системы.
  • <meta> : Предоставляет метаданные, такие как набор символов, настройки области просмотра или описание страницы для SEO.
  • <link> : Ссылается на внешние ресурсы, такие как таблицы стилей или значки.
  • <style> : Содержит внутренние стили CSS для страницы.
  • <script> : Включает или ссылается на файлы JavaScript для обеспечения функциональности.
  • <base> : Указывает базовый URL для относительных URL на странице.

Базовый пример HTML-тега <head>

Вот простой пример, демонстрирующий общие элементы внутри тега <head> : 

<!DOCTYPE html>
<html>
    <head>
        <title>My First Website</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a sample page.</p>
    </body>
</html>

Пояснение: <head> включает заголовок страницы, кодировку символов, настройки области просмотра для адаптивности и ссылку на внешнюю таблицу стилей.

Использование <style> внутри <head>

Вы можете включить внутренние стили CSS непосредственно внутри тега <head> : 

<!DOCTYPE html>
<html>
    <head>
        <title>Styled Page - htmlformatter.github.io.com</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f0f0f0;
                color: #333;
            }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This page has inline styles defined in the <head> tag.</p>
    </body>
</html>
Использование стиля Внутри заголовка

Объяснение: Элемент <style> внутри тега <head> содержит правила CSS, которые задают стиль всей страницы.

Использование <script> внутри <head>

Вы можете включить JavaScript в тег <head> чтобы добавить интерактивности на свою страницу: 

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Example</title>
        <script>
            function greet() {
                alert("Welcome to My Website!");
            }
        </script>
    </head>
    <body onload="greet()">
        <h1>Hello!</h1>
        <p>This page greets you with an alert message on load.</p>
    </body>
</html>
Использование скрипта Внутри головы

Объяснение: Функция JavaScript greet() определена внутри тега <script> и выполняется при загрузке страницы.

Практическое применение тега <head>

  • Заголовки страниц: укажите содержательные заголовки с помощью тега <title> для улучшения пользовательского опыта и SEO.
  • Метаданные: добавьте метатеги для кодировки символов, настроек области просмотра и поисковой оптимизации.
  • Внешние ресурсы: подключайте внешние таблицы стилей, скрипты и шрифты с помощью тега <link> .
  • Внутренняя стилизация: включите встроенный CSS для быстрой стилизации в теге <style> .
  • JavaScript: определение или связывание функций и библиотек JavaScript для обеспечения интерактивности.