Тег HTML заголовок страницы
Тег определяет заголовок HTML страницы. Этот тег не отображается на самой веб странице. Браузеры обычно выводят его как название вкладки. Также тег title используется поисковыми системами как заголовок сайта в выдаче.
Не путайте HTML тег с глобальным атрибутом title — это разные вещи.
Элемент находится в области страницы (подробнее про раздел head). Можно использовать только один тег title на странице.
Синтаксис
Заголовок HTML документа Содержимое тега заголовка используется:
- как название вкладки в браузере;
- как название страницы при добавлении в Избранные или Закладки;
- как заголовок сниппета сайта в поисковой выдаче.
Атрибуты у тега title отсутствуют.
Пример использования в HTML коде
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Тег title в поисковых системах
Поисковые системы используют содержимое тега title страницы для построения заголовка сниппета сайта в выдаче.
Чтобы правильно заполнять тег нужно учитывать следующие правила:
- Пишите внутри title только то, что соответствует содержанию страницы.
- Не пишите слишком длинные заголовки.
- Не стоит делать из заголовка перечисление ключевых слов.
- Ставьте наиболее важную информацию в начало заголовка.
Правильный тег поспособствует поднятию позиции страницы сайта при ранжировании.
Многие CMS поддерживают автогенерацию заголовка. Обычно при этом используется заголовок страницы и название раздела сайта (например, для страницы товара интернет магазина: название товара из h1 и категория товара). Хотя эта схема не является идеальной, ее использование оправдано во многих случаях.
Вот пример тега title для этой страницы (один из вариантов):
Тег title HTML заголовок страницы - справочник HTML тегов Guru Weba Заголовок HTML-страницы
Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.
Заголовок страницы это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках.
Чтобы задать заголовок страницы, нужно использовать тег внутри тега . Например, вот так:
Тренажёры — HTML Academy Так выглядит заголовок страницы во вкладке браузера Mozilla Firefox.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Тег <title>
Этот тег обозначает заголовок страницы.
Он позволяет очень удобно ориентироваться между множеством открытых вкладок.
Инструктор Кекс рекомендует использовать понятные заголовки.
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Автозапуск
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Увеличить 100% Уменьшить
Задачи Выполнено
- Измените заголовок страницы с Просто Кексик на Инструктор Кекс .
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram
: элемент заголовка документа
HTML-элемент заголовка ( ) определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.
| Категории контента | Метаданные. |
|---|---|
| Допустимое содержимое | Текст, который не является межэлементным разделителем. |
| Пропуск тегов | Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие заставляет браузер игнорировать остальную часть страницы. |
| Допустимые родители | Элемент , который не содержит других элементов . |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLTitleElement (en-US) |
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
Элемент всегда используется внутри блока .
Заголовок страницы и SEO
Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.
Несколько методических рекомендаций и советов для составления хороших заголовков:
- избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;
- поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;
- избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, »
- не используйте ключевые слова («keyword blobs»). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;
- убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.
Пример
title>Потрясающий заголовок страницыtitle>
Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как «Потрясающий заголовок страницы».
Проблемы доступности
Важно указать такое значение title , которое описывает назначение страницы.
Обычная техника навигации для пользователей вспомогательных технологий — прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения её содержимого может занять время и, возможно, привести к путанице.
Пример
title> Меню - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня! title>
Для того чтобы помочь пользователю, обновите значение title , чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).
title> 2 ошибки - ваш заказ - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня! title>
- MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
- Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0
Спецификации
| Specification |
|---|
| HTML Standard # the-title-element |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
Как изменить title сайта из JS / JQuery
Для привлечения внимания пользователя, например о каком либо событии, изменяют title страницы (особенно это заметно когда вкладка с сайтом не активна).
В JS за содержимое элемента отвечает свойство document.title , оно содержит текущий заголовок документа:
var title = document.title; console.log(title);А также назначает новый:
document.title = 'Новый заголовок страницы';Тitle в JQuery
В JQuery работа с тайтлом происходит как с обычном элементом:
var title = $('title').text(); console.log(title);$('title').text('Новый заголовок страницы');Далее несколько примеров как сделать динамический заголовок страницы.
Бегущая строка в title
timer = setInterval(function() < lenta = document.title; if (lenta.length == 100)< lenta = lenta + ' | ' + start_title; >document.title = lenta.substr(1, lenta.length); >, 100); >); $('#stop').click(function()< clearInterval(timer); document.title = start_title; >);