Шапка сайта HTML является контейнером для метаданных, который размещается между тегами <html> и <body>. Метаданные – это информация о HTML-документе. Они не выводятся на страницу.
Метаданные определяют заголовок документа, кодировку, стилизацию, а также используются для размещения ссылок и другой информации.
К метаданным относятся следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.
Тег <title> отвечает за заголовок документа, и обязателен для всех документов HTML/XHTML.
Элемент <title>:
Задаёт заголовок вкладки в браузере;
Задаёт заголовок страницы, добавленной в «Избранное»;
Выводит заголовок страницы в выдаче поисковой системы.
Перед тем, как сделать шапку сайта HTML, нужно знать, что тег <style> используется для стилизации отдельной веб-страницы:
Пример:
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
Посмотреть демо
Элемент <link> предназначен для указания ссылок на внешние файлы CSS.
Пример:
<link rel="stylesheet" href="mystyle.css">
Посмотреть демо
Перед тем, как написать шапку сайта в HTML, помните, что <meta> используется для указания кодировки, описания страницы, перечисления ключевых слов, автора материала и других метаданных.
Метаданные используются браузерами как инструкция по выводу данных, поисковыми системами (ключевые слова), а также другими веб-сервисами.
Определяем используемую кодировку:
<meta charset="UTF-8">
Вносим описание веб-страницы:
<meta name="description" content="Free Web tutorials">
В HTML5 с помощью тега <meta> можно контролировать область просмотра (viewport) в окне браузера.
Область просмотра – это часть веб-страницы, видимая для пользователей. Она может отличаться в зависимости от используемого устройства – то есть, на мобильных устройствах она будет меньше, чем на ПК:
Этот элемент шапки сайта HTML даёт браузеру инструкции о размерах области просмотра.
Фрагмент width=device-width отвечает за ширину страницы, которая должна соответствовать ширине экрана устройства.
Фрагмент initial-scale=1.0 устанавливает исходный уровень увеличения при загрузке страницы в браузере.
Взгляните на пример веб-страницы без метатега viewport, и той же страницы с указанным тегом viewport.
Совет: если вы читаете статью на смартфоне или планшете, можете перейти по ссылкам, приведённым под картинками:
Пример без метатега viewport
Пример с метатегом viewport
Тег шапки сайта HTML CSS позволяет выполнять код JavaScript на стороне клиента. В примере ниже Javascript выводит «Hello JavaScript!» в HTML-элемент через:
Согласно стандарту HTML5, теги <html>, <body> и <head> можно опустить.
<!DOCTYPE html>
<title>Page Title</title>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
Посмотреть демо
Примечание: Мы не рекомендуем опускать теги <html> и <body>. Это может негативно сказаться на работе DOM и XML, а также вызвать ошибки отображения веб-страниц в устаревших браузерах (например, IE9).
<head> Предоставляет информацию о документе.
<title> Задаёт заголовок документа.
<base> Определяет основной адрес и цель для всех ссылок на странице.
<link> Отвечает за связь между документом и внешними ресурсами.
<meta> Определяет метаданные документа.
<script> Позволяет использовать скрипты на стороне клиента.
<style> Определяет стилизацию документа.
Валентин Сейидовавтор-переводчик статьи «HTML Head»
Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, отклики, дизлайки, лайки, подписки низкий вам поклон!
14. Заголовок в HTML — тег TITLE — Знакомство с HTML — codebra
Дополнительное видео по теме
Что такое title?
Это неотъемлемая часть сайта, ведь это первое, что видит пользователь в поисковике и в своем браузере. Кстати, title играет большую роль в оптимизации, а если еще в title есть ключевик (ключевое слово, по которому находят сайт) и вдобавок если оно (ключевое слово) вначале, то поисковики, особенно Google (о других я не знаю) будут кидать сайт ближе к топу (первое место). Эту информацию я прочитал где-то то ли в блогах Google, то ли официальных представителей. По запросу в Google: «программирование», сайт с title «программирование — это классно», будет выше чем «что такое программирование». Тег <title> обязательно должен быть внутри контейнера <head>. Более об этом теге вам знать и не надо, точнее больше мне нечего сказать.
Основные задачи тега title (заголовок HTML страницы)
Во-первых, по title (заголовок страницы) пользователь получает краткие сведения о странице: о чем речь, как называется, что найдет, какой сайт и т.д. Я называю этот тег – лицо сайта. Ведь если не будет тега title, что сделает пользователь? Закроет окно. Значит нужно обязательно указывать этот тег, и, кстати, в HTML 5 наличие тега title обязательно! Во-вторых, почти все браузеры умеют сохранять страницу (или закладку) на локальный диск. Имя сохраняемого файла, будет совпадать с содержанием тега title. Вот вам еще один «плюс» этого тега. В-третьих, все браузеры умеют сохранять закладки. Имя закладки совпадает с содержимым заголовка страницы. В-четвертых, во всех поисковиках, заголовок страницы отображает в поиске и поэтому, правильный заголовок может привлечь больше посетителей из поисковых систем. И последнее, правильно составленный тег title может помочь в оптимизации страницы, если в нем есть ключевые слова, которые есть и в контенте всего сайта. А далее идет пример:
Урок 3. Генерация SSH-ключа для работы с GitHubБлог
Что такое HTML?Знакомство с HTML
Акцентирование (выделение) текста в HTMLРазметка текста
Использование HTML метатегов (Мета теги)Знакомство с HTML
Обработка исключений (try/except) в PythonЗнакомство с Python
Типы данных в PythonЗнакомство с Python
Функциональное программирование: map, filter и reduceЗнакомство с Python
Вводный урок по курсу HTML и CSSЗнакомство с HTML
Предыдущий урок «13. Исходный код веб-страницы» Следующий урок «15. Тест по структуре HTML документа»
Тег HTML 5
Тег HTML </code> используется для объявления заголовка или имени HTML-документа.</p><p> Заголовок обычно отображается в строке заголовка браузера (вверху). Также он отображается в закладках браузера и результатах поиска.</p><p> Тег title помещается между открывающим и закрывающим <code><center><ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="3076124593"
data-ad-format="auto"
data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> тегами<head> </code>.</p><h3><span class="ez-toc-section" id="i-3"> Демо </span></h3><h3><span class="ez-toc-section" id="i-4"> Атрибуты </span></h3><p> Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например <code> стиль="цвет:черный;" </code> .</p><p> Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/z/z4oFZqI1sweOSTmtuBYMyDkK87RdrLUa59PQpx/slide-8.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/z/z4oFZqI1sweOSTmtuBYMyDkK87RdrLUa59PQpx/slide-8.jpg' /></noscript><center><ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="4908081011"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></p><p> Ниже перечислены атрибуты, которые можно добавить к этому тегу.</p><h4><span class="ez-toc-section" id="i-5"> Специфичные для элемента атрибуты </span></h4><p> В следующей таблице показаны атрибуты, характерные для этого тега/элемента.</p><table cellspacing="0" border="0"><tr><th> Атрибут</th><th> Описание</th></tr><tr><td> Нет</td><td> </td></tr></table><h4><span class="ez-toc-section" id="i-6"> Глобальные атрибуты </span></h4><p> Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут <code> tabindex </code> не применяется к <code> элементам диалога </code>).</p><ul><li> <code> ключ доступа </code></li><li> <code> автокапитализация </code></li><li> <code> класс </code></li><li> <code> редактируемый контент </code></li><li> <code> данные-* </code></li><li> <code> директор </code><center><ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="8813674614"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></li><li> <code> перетаскиваемый </code></li><li> <code> скрытый </code></li><li> <code> идентификатор </code></li><li> <code> режим ввода </code></li><li> <code> это </code></li><li> <code> ид </code></li><li> <code> элементпроп </code></li><li> <code> Артикул </code></li><li> <code> предметная область </code></li><li> <code> тип изделия </code></li><li> <code> язык </code></li><li> <code> часть </code></li><li> <code> слот </code></li><li> <code> проверка правописания </code></li><li> <code> стиль </code></li><li> <code> tabindex </code></li><li> <code> название </code></li><li> <code> перевод </code></li></ul><p> Полное объяснение этих атрибутов см.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/seo-gold.com/images/title-tag-html.jpg' /><noscript><img loading='lazy' src='/800/600/https/seo-gold.com/images/title-tag-html.jpg' /></noscript><center><div class="advv"><ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center> в разделе Глобальные атрибуты HTML 5.</p><h4><span class="ez-toc-section" id="i-7"> Атрибуты содержимого обработчика событий </span></h4><p> Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.</p><ul><li> <code> прерывание </code></li><li> <code> onauxclick </code></li><li> <code> размытие </code></li><li> <code> при отмене </code></li><li> <code> онканплей </code></li><li> <code> oncanplaythrough </code></li><li> <code> при обмене </code></li><li> <code> по клику </code></li><li> <code> при закрытии </code></li><li> <code><center><ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> в контекстном меню </code></li><li> <code> онкопия </code></li><li> <code> при обмене </code></li><li> <code> врезной </code></li><li> <code> ondblclick </code></li><li> <code> ондраг </code></li><li> <code> ондрагенд </code></li><li> <code> Драгентер </code></li><li> <code> выход </code></li><li> <code> на накладке </code></li><li> <code> ондраговер </code></li><li> <code> ондрагстарт </code></li><li> <code> впускной </code></li><li> <code> ondurationchange </code></li><li> <code> при опорожнении </code></li><li> <code> одноконцевой </code></li><li> <code> при ошибке </code></li><li> <code> онфокус </code></li><li> <code> данные формы </code></li><li> <code> при вводе </code></li><li> <code> недействительный </code></li><li> <code> нажатие клавиши </code></li><li> <code> нажатие клавиши </code></li><li> <code> onkeyup </code></li><li> <code> onlanguagechange </code></li><li> <code> под нагрузкой </code></li><li> <code> загруженные данные </code></li><li> <code> загруженные метаданные </code></li><li> <code> запуск при загрузке </code></li><li> <code> при нажатии мыши </code></li><li> <code> ввод с помощью мыши </code></li><li> <code> для мышей </code></li><li> <code> перемещение мыши </code></li><li> <code> onmouseout </code></li><li> <code> при наведении мыши </code></li><li> <code> на мышке вверх </code></li><li> <code> паста </code></li><li> <code> при паузе </code></li><li> <code> в игре </code></li><li> <code> в игре </code></li><li> <code> в процессе </code></li><li> <code> при изменении скорости </code></li><li> <code> при сбросе </code></li><li> <code> изменение размера </code></li><li> <code> при прокрутке </code></li><li> <code> onsecuritypolicyviolation </code></li><li> <code> запрос </code></li><li> <code> поиск </code></li><li> <code> по выбору </code></li><li> <code> при смене слота </code></li><li> <code> установлен </code></li><li> <code> при отправке </code></li><li> <code> приостановить </code></li><li> <code> своевременное обновление </code></li><li> <code> нагрудник </code></li><li> <code> при изменении объема </code></li><li> <code> в ожидании </code></li><li> <code> на колесе </code></li></ul><p> Полный список обработчиков событий см.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/dmitryprovotorov.com/wp-content/uploads/2019/10/%D0%B3%D1%80%D0%B0%D0%B4%D0%B0%D1%86%D0%B8%D1%8F-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2.png' /><noscript><img loading='lazy' src='/800/600/https/dmitryprovotorov.com/wp-content/uploads/2019/10/%D0%B3%D1%80%D0%B0%D0%B4%D0%B0%D1%86%D0%B8%D1%8F-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2.png' /></noscript> в разделе Атрибуты содержимого обработчиков событий HTML 5.</p><h2><span class="ez-toc-section" id="_title_HTML_Scaler"> Тег title в HTML — Темы Scaler </span></h2><p> Тег title в HTML</p><p> Тег title в HTML</p> share-outline Курс Javascript — Mastering the Fundamentals</p> By Mrinal Bhattacharya</p> 90 435 Бесплатно</p> звезда 4.8</p> Зарегистрировано:</p> 20792</p> Курс Javascript — Освоение основ</p> Мринал Бхаттачарья</p> Бесплатно</p> Начать обучение</p><h3 level="2"><span class="ez-toc-section" id="i-8"> Обзор </span></h3><p> В этой статье вы узнаете об элементе HTML, называемом тегом<title>. Содержимое тега заголовка отображается в строке заголовка или на вкладке страницы на панели инструментов браузера. Тег title в HTML всегда заключен внутри тега<head> и имеет закрывающий тег (). Тег title в HTML поддерживает все глобальные атрибуты в HTML, и их содержимое играет значительную роль в оптимизации результатов поиска в поисковых системах.
Область применения статьи
В этой статье кратко объясняются теги title в HTML и их атрибуты с синтаксисом и примерами.
В этой статье подробно не рассматриваются все остальные HTML-элементы и теги, используемые в примерах.
HTML-тег
</h3><p> Тег title в HTML используется для определения заголовка HTML-документа, отображаемого в строке заголовка или на вкладке страницы на панели инструментов браузера. Этот тег заголовка в HTML также используется для установки заголовка веб-страницы при добавлении страницы в избранное в браузере. Тег title позволяет только текст внутри, а любые другие теги внутри элемента игнорируются. При использовании тега title требуются как открывающий, так и закрывающий теги, а отсутствие закрывающего тега () должно привести к тому, что браузер проигнорирует остальную часть страницы.
getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Эту информацию я прочитал где-то то ли в блогах Google, то ли официальных представителей. По запросу в Google: «программирование», сайт с 
Вот вам еще один «плюс» этого тега. В-третьих, все браузеры умеют сохранять закладки. Имя закладки совпадает с содержимым заголовка страницы. В-четвертых, во всех поисковиках, заголовок страницы отображает в поиске и поэтому, правильный заголовок может привлечь больше посетителей из поисковых систем. И последнее, правильно составленный тег 
Исходный код веб-страницы» Следующий урок «15. Тест по структуре HTML документа»