--- title: ': элемент заголовка документа' slug: Web/HTML/Element/title tags: - Element - HTML - Title - Web - Веб - Заголовок вкладки - Заголовок окна - Заголовок страницы - Имя вкладки - Имя окна - Имя страницы - Справка - Элемент - метаданные - метаданные документа HTML translation_of: Web/HTML/Element/title --- <div>{{HTMLRef}}</div> <p><span class="seoSummary"><strong>HTML-элемент заголовка</strong> (<strong><code><title></code></strong>) определяет заголовок документа, который отображается в заголовке окна {{glossary("Browser", "браузера")}} или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.</span></p> <table class="properties"> <tbody> <tr> <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>.</td> </tr> <tr> <th scope="row">Разрешённое содержимое</th> <td>Текст, который не является межэлементным {{glossary("Whitespace", "разделителем")}}.</td> </tr> <tr> <th scope="row">Пропуск тега</th> <td>Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие <code></title></code> заставляет браузер игнорировать остальную часть страницы.</td> </tr> <tr> <th scope="row">Разрешённые родительские элементы</th> <td>Элемент {{ HTMLElement("head") }}, который не содержит других элементов {{ HTMLElement("title") }}.</td> </tr> <tr> <th scope="row">Разрешённые роли ARIA</th> <td>Отсутствуют.</td> </tr> <tr> <th scope="row">DOM-интерфейс</th> <td>{{domxref("HTMLTitleElement")}}</td> </tr> </tbody> </table> <h2 id="Атрибуты">Атрибуты</h2> <p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> <h2 id="Примечание">Примечание</h2> <p>Элемент <code><title></code> всегда используется внутри блока {{HTMLElement("head")}}.</p> <h3 id="Заголовок_страницы_и_SEO">Заголовок страницы и SEO</h3> <p>Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации ({{glossary("SEO")}}). Как правило, более длинный описательный заголовок будет лучше ранжироваться ({{glossary("Ranking")}}), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.</p> <p>Несколько методических рекомендаций и советов для составления хороших заголовков:</p> <ul> <li>избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;</li> <li>поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;</li> <li>избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, "<" часто отображается в строке заголовка окна как "&lt;" - символ-мнемоника "меньше" в HTML ({{Glossary("entity")}});</li> <li>не используйте ключевые слова ("keyword blobs"). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;</li> <li>убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.</li> </ul> <h2 id="Пример">Пример</h2> <pre class="brush: html"><title>Потрясающий заголовок страницы</title> </pre> <p>Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как "Потрясающий заголовок страницы".</p> <h2 id="Проблемы_доступности">Проблемы доступности</h2> <p>Важно указать такое значение <code>title</code>, которое описывает назначение страницы.</p> <p>Обычная техника навигации для пользователей вспомогательных технологий - прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения её содержимого может занять время и, возможно, привести к путанице.</p> <h3 id="Пример_2">Пример</h3> <pre><title>Меню - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!</title> </pre> <p>Для того чтобы помочь пользователю, обновите значение <code>title</code>, чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).</p> <h3 id="Пример_3">Пример</h3> <pre><title>2 ошибки - ваш заказ - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!</title> </pre> <ul> <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> </ul> <h2 id="Спецификации">Спецификации</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Спецификация</th> <th scope="col">Статус</th> <th scope="col">Комментарий</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td> </td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td> </td> </tr> <tr> <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> <td>{{Spec2('HTML4.01')}}</td> <td> </td> </tr> </tbody> </table> <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> <p>{{Compat("html.elements.title")}}</p>