Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <p><a>#статьи</a></p>

2 <ul><li>30 июл 2025</li>

3 <li>0</li>

4 </ul><p>Разбираемся, как работает "голова" HTML-документа, какие теги в неё можно добавлять и почему от неё зависит всё - от отображения страницы до SEO.</p>

5 <p>Иллюстрация: Polina Vari для Skillbox Media</p>

6 <p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>

7 <p>Тег <head> - это техническая часть HTML-документа, пользователь её не видит, но в ней находятся настройки страницы: заголовок, описание, подключение стилей, скриптов и другие важные параметры.</p>

8 <p>Если сравнивать веб-страницу с книгой, то <head> - это всё, что находится на обложке и форзаце: название, аннотация, выходные данные. В этой статье разберём, зачем нужен тег <head>, какие элементы в него входят и как правильно его использовать.</p>

9 <p><strong>Содержание</strong></p>

10 <ul><li><a>Зачем нужен тег <head></a></li>

11 <li><a>Где находится <head> в структуре HTML-документа</a></li>

12 <li><a>Элементы внутри тега <head></a></li>

13 <li><a>Как <head> влияет на отображение и поведение страницы</a></li>

14 <li><a>Распространённые ошибки при работе с <head></a></li>

15 <li><a>Практика. Создаём первую HTML-страницу с правильным <head></a></li>

16 </ul><p>В HTML-документе есть две главные части: <head> и <body>. Всё, что видит пользователь, - текст, картинки, кнопки, - находится внутри <body>. А в <head> - то, что помогает браузеру правильно отобразить эту страницу.</p>

17 <p>Тег <head> - это своего рода "настройки" документа. Здесь указывают:</p>

18 <ul><li>название страницы;</li>

19 <li>кодировку;</li>

20 <li>подключение CSS-стилей и иконок;</li>

21 <li>описание для поисковых систем;</li>

22 <li>инструкции для социальных сетей;</li>

23 <li>скрипты, которые должны загрузиться раньше контента.</li>

24 </ul><p>Тег <head> начинается сразу под тегом <html> и заканчивается перед тегом <body>. Он описывает настройки страницы и не должен содержать видимый контент - только метаинформацию.</p>

25 <p>Простейшая структура HTML-документа выглядит так:</p>

26 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Моя первая страница</title> </head> <body> <h1>Привет, мир!</h1> <p>Это первый абзац на странице.</p> </body> </html><p>Здесь:</p>

27 <ul><li>тег <head> содержит информацию, которая нужна браузеру, - кодировку текста (UTF-8) и заголовок страницы;</li>

28 <li>всё, что видит пользователь, находится внутри <body>.</li>

29 </ul><p><strong>Важно:</strong>на странице должен быть только один тег <head>. Его нельзя размещать внутри <body>, дублировать или выносить за пределы <html> - это будет ошибкой.</p>

30 <p>Тег <head> содержит метаинформацию о документе - то есть данные, которые помогают браузеру, поисковым системам и соцсетям правильно обработать страницу. Вот основные теги, которые чаще всего размещают внутри:</p>

31 <p>Тег <title> (от "title" - заголовок) задаёт название вкладки в браузере и в результатах поиска. У каждой страницы должен быть свой заголовок. Без тега <title> браузер покажет во вкладке название файла.</p>

32 <head>  <title>Тег HEAD</title> </head><p>Тег <title> можно написать на странице только один раз.</p>

33 <p>Тег <meta> отвечает за размещение метаданных на веб-странице. Они не видны пользователю, но нужны браузеру и поисковым системам для оптимизации содержимого. Можно явно указать кодировку, информацию об авторстве страницы или другие данные для поисковых систем:</p>

34 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8" /> <meta name="author" content="Skillbox Media" /> </head> <body>  <h1> こんにちは </h1> </body> </html><p>Если в браузере по умолчанию не стояла кодировка UTF-8, то японские иероглифы могли бы не отобразиться корректно (впрочем, как и кириллические символы).</p>

35 <p>Однако с явно указанным параметром charset в общем теге <head> следующие символы корректно отобразятся в любом браузере:</p>

36 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Вот ещё несколько основных метатегов:</p>

37 <ul><li>viewport - отвечает за адаптивность: без него страница на мобильных устройствах может отображаться слишком маленькой или скроллиться горизонтально.</li>

38 <li>description - короткий текст, на основании которого поисковики составляют сниппет.</li>

39 <li>robots - даёт поисковикам рекомендации: индексировать ли страницу, следовать по ссылкам или нет.</li>

40 <li>author, generator - указывают авторство или движок сайта. Обычно не критично, но, если важно, можно включить.</li>

41 <li>http-equiv - полезен для ретроградной совместимости - позволяет делать то же, что HTTP-заголовки (например, для кэширования).</li>

42 </ul><p>С помощью <link> можно подключать внешние ресурсы: стили, шрифты, иконки. Этот тег не выводит ничего на экран, но помогает браузеру правильно оформить страницу.</p>

43 <head>  <link rel="stylesheet" href="styles.css" />  <link rel="icon" href="skillbox.ico" type="image/x-icon" /> </head><ul><li>rel="stylesheet" сообщает браузеру, что нужно подключить таблицу стилей.</li>

44 <li>rel="icon" задаёт фавикон - иконку сайта на вкладке браузера.</li>

45 </ul><p>Вот ICO-файл, который мы подключили в <head>. Можете его скачать, он пригодится вам в разделе с практикой.</p>

46 <em>Изображение: Skillbox Media</em><p>Если открыть браузер, то фавикон поменяется:</p>

47 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Иногда на сайте много ссылок, которые ведут на страницы одного и того же сайта. Чтобы не прописывать в каждой ссылке полный адрес, можно задать "базу" - общий начальный путь. Для этого и существует тег <base>.</p>

48 <p>Он указывается в <head> и сообщает браузеру, с чего начинать все относительные ссылки на странице.</p>

49 <p>Допустим, у вас есть базовый адрес:</p>

50 <base href="https://www.google.com/"><p>А в теле страницы ссылка указана так:</p>

51 <a href="imghp">Поиск по картинкам в Google</a><p>Браузер сам подставит начало из <base>, и получится такая ссылка:</p>

52 https://www.google.com/imghp<p>На странице можно использовать только один тег <base>, иначе браузер не поймёт, какой базовый адрес выбрать.</p>

53 <p>Иногда стили удобно писать прямо внутри HTML-документа. Это может пригодиться, если:</p>

54 <ul><li>вы пишете демо или тестируете что-то локально;</li>

55 <li>стили нужны только для одной страницы;</li>

56 <li>файл со стилями подключить затруднительно.</li>

57 </ul><p>Делается это с помощью тега <style>.</p>

58 <head> <style> body { font-family: 'Segoe UI', sans-serif; background-color: #f0f0f0; color: #333; } h1 { color: darkslateblue; } </style> </head><p>Но лучше использовать внешний CSS-файл через <link>, - так удобнее поддерживать стили и переиспользовать их.</p>

59 <p>Скрипты управляют поведением страницы. Их можно размещать как в конце <body>, так и в <head> - в зависимости от задачи.</p>

60 <p>Есть два основных способа использовать <script> в <head>.</p>

61 <p><strong>1. Встроенный скрипт - код пишется прямо внутри тега:</strong></p>

62 <head> <script> console.log("Это находится в Head"); </script> </head><p>Этот способ подойдёт для коротких или критически важных скриптов, которые должны выполниться до загрузки страницы.</p>

63 <p><strong>2. Внешний скрипт - подключается файл JavaScript:</strong></p>

64 <head> <script src="app.js" defer></script> </head><p>Атрибут defer здесь говорит браузеру: загрузи скрипт сейчас, но выполни его после полной загрузки HTML.</p>

65 <p>Внешние скрипты по нескольким причинам удобнее внутренних:</p>

66 <ul><li>Код JavaScript хранится отдельно от HTML - это упрощает структуру страницы, так её легче поддерживать.</li>

67 <li>Один и тот же файл можно использовать на нескольких страницах - это экономит ресурсы и ускоряет загрузку.</li>

68 <li>Изменения в логике поведения не требуют редактирования HTML-документа - достаточно обновить JS-файл.</li>

69 </ul><p>Во всех случаях нужно осторожно размещать скрипты в <head> - особенно если они не отложены (defer), потому что скрипты могут замедлить загрузку сайта.</p>

70 <p>Хотя содержимое тега <head> не видно пользователю, оно напрямую влияет на то, как страница работает и как она воспринимается браузером, поисковыми системами и внешними сервисами.</p>

71 <p>Браузер сначала читает содержимое <head>, чтобы понять:</p>

72 <ul><li>какую кодировку использовать;</li>

73 <li>какие стили подключить;</li>

74 <li>как адаптировать страницу к ширине экрана.</li>

75 </ul><p>Без этих настроек сайт может выглядеть некорректно - например, текст будет с иероглифами или страница не подстроится под мобильный экран.</p>

76 <p>Когда браузер загружает страницу, он обычно останавливается на каждом теге <script> и ждёт, пока скрипт загрузится и выполнится. Это может замедлить отображение контента. Атрибут defer решает эту проблему: он позволяет загрузить скрипт в фоновом режиме и выполнить его только после того, как вся HTML-разметка будет обработана. В результате:</p>

77 <ul><li>страница загружается быстрее;</li>

78 <li>пользователь видит контент почти сразу;</li>

79 <li>сайт становится более отзывчивым и удобным для слабых устройств или при медленном интернете.</li>

80 </ul><p>Поисковые системы используют данные из <head>, чтобы понять содержание страницы. Особенно важны теги <title> и <meta name="description"> - именно они часто отображаются в сниппетах на странице выдачи. Хорошо составленный заголовок и описание:</p>

81 <ul><li>повышают кликабельность сайта в поиске;</li>

82 <li>помогают алгоритмам точнее оценить тематику страницы;</li>

83 <li>позволяют выделиться среди конкурентов, особенно если упомянуты ключевые слова и выгоды.</li>

84 </ul><p>Когда вы публикуете ссылку на сайт в мессенджере или социальной сети, она может отображаться как простой URL или как красивая карточка с изображением, заголовком и описанием. Чтобы всё выглядело аккуратно и привлекательно, в <head> добавляют Open-Graph-теги.</p>

85 <p>Эти метатеги используют соцсети (например, "ВКонтакте" или Telegram), чтобы понять, какую информацию показывать при предпросмотре:</p>

86 <meta property="og:title" content="Название страницы" /> <meta property="og:description" content="Описание страницы" /> <meta property="og:image" content="https://example.com/preview.jpg" /><ul><li>og:title - заголовок карточки, чаще всего совпадает с <title>;</li>

87 <li>og:description - краткое описание содержания страницы;</li>

88 <li>og:image - ссылка на изображение, которое будет показано рядом со ссылкой.</li>

89 </ul><p>Без этих тегов соцсети могут автоматически выбрать неудачные заголовки, случайные картинки или вовсе не показать описание. Поэтому добавление Open-Graph-тегов - важный шаг для контроля внешнего вида ссылки.</p>

90 <p>Иногда сайт должен корректно работать не только в современных браузерах, но и в более старых версиях - например, в Internet Explorer, который до сих пор используется в некоторых организациях. Чтобы помочь таким браузерам понять, как отображать страницу, в <head> добавляют специальные теги.</p>

91 <p>Один из них - <meta http-equiv>.</p>

92 <meta http-equiv="X-UA-Compatible" content="IE=edge" /><p>Этот тег говорит браузеру Internet Explorer использовать максимально доступный движок отображения (Edge), а не устаревший режим совместимости. Это может предотвратить ошибки в вёрстке или в отображении стилей.</p>

93 <p>Кроме того, можно использовать и другие настройки совместимости. В этом поможет тег <meta>. Вот что ещё можно указать.</p>

94 <p><strong>Управление кэшированием</strong>- чтобы браузер знал, как долго хранить данные страницы:</p>

95 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><p>Этот тег говорит браузеру каждый раз запрашивать страницу с сервера, не используя старые версии из кэша.</p>

96 <p><strong>Региональные настройки</strong>- помогают указать язык и страну по умолчанию:</p>

97 <meta http-equiv="content-language" content="ru" /><p>Это может быть полезно для многоязычных сайтов или локализованных сервисов.</p>

98 <p>Иногда по невнимательности разработчика теги <title>, <meta> или <link> оказываются не в том месте - например, внутри тега <body>. Это нарушает структуру документа: браузер может проигнорировать такие теги, а валидатор HTML покажет ошибку или предупреждение. Все подобные элементы должны находиться строго внутри <head>.</p>

99 <p>Внешний файл со стилями нужно подключать через тег <link> именно в <head>. Если попытаться подключить его в другом месте, стили могут применяться с задержкой, и при загрузке страницы появится визуальное "моргание": сначала пользователь увидит неоформленный HTML, и только потом сработает CSS.</p>

100 <head> <link rel="stylesheet" href="style.css"> </head><p>CSS-стили должны подключаться раньше JavaScript. Если поменять порядок, скрипты могут выполниться до того, как применятся стили, что приведёт к некорректному отображению:</p>

101 <head>  <link rel="stylesheet" href="main.css">  <script src="app.js" defer></script> </head><p>Тег <meta charset="UTF-8"> задаёт кодировку текста на странице. Если его нет, браузер может не понять, как отображать кириллические или другие символы. В результате текст может замениться на иероглифы, "кракозябры" или знаки вопроса. Этот тег должен быть первым внутри <head>, до всех других метатегов, - иначе он может не сработать вовремя.</p>

102 <p>Тег <meta name="viewport"> нужен для корректного отображения сайта на смартфонах и планшетах. Без него страница может не адаптироваться под ширину экрана, и пользователям придётся вручную масштабировать содержимое. Это ухудшает впечатление от сайта, особенно на мобильных устройствах.</p>

103 <meta name="viewport" content="width=device-width, initial-scale=1.0" /><p>Не стоит вставлять в <head> всё подряд. Повторяющиеся теги, лишние библиотеки и скрипты не только замедляют загрузку, но и делают код трудночитаемым и трудноподдерживаемым.</p>

104 <p><strong>Вот пример того, как делать не нужно:</strong></p>

105 <head> <meta charset="UTF-8"> <title>Ужасный head</title> <link rel="stylesheet" href="style.css"> <script src="jquery.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="reset.css"> <script src="analytics.js"></script> <link rel="stylesheet" href="style.css">  <meta charset="UTF-8">  <script src="slider.js"></script> <script src="popup.js"></script> <title>Повтор заголовка</title>  <link rel="stylesheet" href="custom-theme.css"> <meta name="description" content="Описание 1"> <meta name="description" content="Описание 2">  <script src="jquery.js"></script>  <link rel="stylesheet" href="bootstrap.css"> <script src="unused-library.js"></script>  <link rel="stylesheet" href="print.css" media="print"> <script>alert("Серьёзно? alert в <head>?")</script>  </head><p>1. Создайте новый текстовый файл и назовите его index.html.</p>

106 <p>2. Откройте его в редакторе кода (например, в Visual Studio Code) и вставьте следующий код:</p>

107 <!DOCTYPE html> <html lang="ru"> <head> </head> <body> <h1>Привет!</h1> <p>Это моя первая HTML‑страница с правильным head.</p> </body> </html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Мой первый сайт на HTML"> <title>Привет, мир!</title> <link rel="icon" href="favicon.ico"><p>Здесь:</p>

108 <ul><li><meta charset="UTF-8"> - указывает кодировку страницы UTF‑8. <meta name="viewport" content="width=device-width, initial-scale=1.0"><strong></strong>- делает сайт адаптивным для мобильных устройств;</li>

109 <li>width=device-width - устанавливает ширину страницы, равную ширине экрана устройства;</li>

110 <li>initial-scale=1.0 - задаёт начальный масштаб страницы;</li>

111 <li><meta name="description" content="Мой первый сайт на HTML"> - краткое описание страницы для поисковых систем;</li>

112 <li><title>Привет, мир!</title> - заголовок страницы;</li>

113 <li><link rel="icon" href="favicon.ico"> - подключает иконку сайта (favicon).</li>

114 </ul><p>3. Скачайте файл favicon.ico с<a>Google-диска</a>и положите его в ту же папку, что и index.html. Это значок страницы, который браузер покажет на вкладке.</p>

115 <p>4. Сохраните файл и откройте его в браузере (например, в Google Chrome). Вы должны увидеть заголовок "Привет!" и описание под ним.</p>

116 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы добавить стили и скрипты, создайте два новых файла рядом с index.html:</p>

117 <ul><li>style.css - для стилей;</li>

118 <li>script.js - для JavaScript.</li>

119 </ul><p>В файл style.css вставьте:</p>

120 body { background-color: #f0f8ff; font-family: Arial, sans-serif; }<p>В файл script.js вставьте:</p>

121 console.log("Скрипт работает!");<p>Снова откройте index.html и добавьте ссылки на CSS и JavaScript в раздел <head>:</p>

122 <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script><p>Итоговый код будет выглядеть так:</p>

123 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Мой первый сайт на HTML"> <title>Привет, мир!</title> <link rel="icon" href="favicon.ico">  <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <h1>Привет!</h1> <p>Это моя первая HTML‑страница с правильным head.</p> </body> </html><ul><li>Убедитесь, что все три файла - index.html, style.css и script.js - находятся в одной папке.</li>

124 <li>Откройте index.html в браузере и обновите страницу сочетанием клавиш<strong>Shift + Ctrl + R</strong>.</li>

125 <li>Откройте консоль разработчика (F12 → вкладка "Консоль").</li>

126 </ul><p>Если всё сделано правильно, на странице появится голубой фон и будет новый шрифт, а в консоли выведется сообщение:</p>

127 Скрипт работает!<em>Скриншот: Google Chrome / Skillbox Media</em><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>