Posted:
Янв 6, 2023
Comments:
0 Comments

Title в body: : элемент заголовка документа — HTML

| HTML | WebReference

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Определяет заголовок документа. Элемент <title> (от англ. title — название, заголовок) не является частью документа и не показывается напрямую на веб-странице. Текст заголовка отображается, как правило, на вкладке браузера (рис. 1). Допускается использовать только один <title> на документ и размещать его в контейнере <head>.

Рис. 1. Вид заголовка в браузере Firefox

Синтаксис

<head>
  <title>Заголовок</title>
</head>

Закрывающий тег

Обязателен.

Атрибуты

Пример

<!DOCTYPE HTML>
<html>
<head>
<title>Как правильно писать заголовок страницы</title>
</head>
<body>
<p>…</p>
</body>
</html>

Примечание

Элемент <title> выполняет множество
задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок
страницы.

  • По тексту заголовка пользователь получает дополнительную информацию, что
    это за сайт, на котором он находится и как называется текущая страница.
  • Большинство браузеров поддерживают возможность сохранения веб-страницы
    на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием
    заголовка документа. Если в тексте заголовка содержатся символы, недопустимые
    в имени файла (\ / : * ? » < > |), они будут проигнорированы или
    автоматически заменены другими дозволенными символами.
  • При сохранении в разделе браузера «Избранное», адрес текущей страницы с
    её заголовком помещается в список предпочитаемых ссылок.
  • В результатах поиска по ключевым словам, поисковые системы используют заголовок
    страницы для указания ссылки на данный документ. Интересно написанный заголовок,
    содержащий ключевые слова, привлечёт больше внимания посетителей и увеличит
    шансы на то, что сайт посетит больше людей.

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4.01 SpecificationРекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

1121111
1111

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Документ

См. также

  • Создание первой веб-страницы
  • Структура HTML-кода

Практика

  • Закрывающие теги

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

14. Заголовок в HTML — тег TITLE — Знакомство с HTML — codebra

Дополнительное видео по теме

Что такое title?

Это неотъемлемая часть сайта, ведь это первое, что видит пользователь в поисковике и в своем браузере. Кстати, title играет большую роль в оптимизации, а если еще в title есть ключевик (ключевое слово, по которому находят сайт) и вдобавок если оно (ключевое слово) вначале, то поисковики, особенно Google (о других я не знаю) будут кидать сайт ближе к топу (первое место). Эту информацию я прочитал где-то то ли в блогах Google, то ли официальных представителей. По запросу в Google: «программирование», сайт с title «программирование — это классно», будет выше чем «что такое программирование». Тег <title> обязательно должен быть внутри контейнера <head>. Более об этом теге вам знать и не надо, точнее больше мне нечего сказать.

Основные задачи тега title (заголовок HTML страницы)

Во-первых, по title (заголовок страницы) пользователь получает краткие сведения о странице: о чем речь, как называется, что найдет, какой сайт и т.д. Я называю этот тег – лицо сайта. Ведь если не будет тега title, что сделает пользователь? Закроет окно. Значит нужно обязательно указывать этот тег, и, кстати, в HTML 5 наличие тега title обязательно! Во-вторых, почти все браузеры умеют сохранять страницу (или закладку) на локальный диск. Имя сохраняемого файла, будет совпадать с содержанием тега title. Вот вам еще один «плюс» этого тега. В-третьих, все браузеры умеют сохранять закладки. Имя закладки совпадает с содержимым заголовка страницы. В-четвертых, во всех поисковиках, заголовок страницы отображает в поиске и поэтому, правильный заголовок может привлечь больше посетителей из поисковых систем. И последнее, правильно составленный тег title может помочь в оптимизации страницы, если в нем есть ключевые слова, которые есть и в контенте всего сайта. А далее идет пример:

Код HTML

<!DOCTYPE html>
<html>
<head>
<title>Я страница</title>
</head>
<body>
<p>А я абзац</p>
</body>
</html>

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python

Урок 3. Генерация SSH-ключа для работы с GitHubБлог

Акцентирование (выделение) текста в HTMLРазметка текста

Что такое HTML?Знакомство с HTML

Обработка исключений (try/except) в PythonЗнакомство с Python

Типы данных в PythonЗнакомство с Python

Использование HTML метатегов (Мета теги)Знакомство с HTML

Вводный урок по курсу HTML и CSSЗнакомство с HTML

Структуры данных в PythonЗнакомство с Python

Предыдущий урок «13. Исходный код веб-страницы» Следующий урок «15. Тест по структуре HTML документа»

Тег заголовка HTML

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Определите заголовок для HTML-документа:




Справочник по элементам HTML

Это заголовок

Это абзац.


Попробуйте сами »

Определение и использование

Тег </code> определяет заголовок документа.<br /> Заголовок должен быть только текстовым и отображаться в строке заголовка браузера или в<br /> вкладка страницы.</p><p> Тег <code><title> </code> обязателен в HTML<br /> документы!</p><p> Содержание заголовка страницы очень важно для поисковой оптимизации<br /> (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка<br /> при отображении страниц в результатах поиска.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/2.bp.blogspot.com/-heHZJQsMwC8/UYYLqVYNIsI/AAAAAAAAAMA/P-Un5iFK8Og/s1600/saya1.png' /><noscript><img loading='lazy' src='/800/600/http/2.bp.blogspot.com/-heHZJQsMwC8/UYYLqVYNIsI/AAAAAAAAAMA/P-Un5iFK8Og/s1600/saya1.png' /></noscript></p><p> Элемент <code><title> </code>:</p><ul><li> определяет заголовок на панели инструментов браузера</li><li> предоставляет заголовок для страницы, когда она добавляется в избранное</li><li> отображает заголовок страницы в результатах поиска</li></ul><p> Вот несколько советов по созданию хороших заголовков:</p><ul><li> Выберите более длинный описательный заголовок (избегайте заголовков из одного или двух слов)</li><li> Поисковые системы будут отображать около 50-60 символов заголовка, поэтому попробуйте<br /> не иметь заголовков длиннее этого</li><li> Не используйте в качестве заголовка только список слов (это может уменьшить<br /> позиция в результатах поиска)</li></ul><p> Итак, постарайтесь сделать заголовок максимально точным и осмысленным!</p><p> <b> Примечание: </b> В документе HTML НЕ может быть более одного элемента <code><title> </code>.</p><hr/><hr/><h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0"></span> Поддержка браузера <span class="ez-toc-section-end"></span></h3><table><tr><th> Элемент</th><th title="Chrome"/><th title="Internet Explorer / Edge"/><th title="Firefox"/><th title="Safari"/><th title="Opera"/></tr><tr><td> <название></td><td> Да</td><td> Да</td><td> Да</td><td> Да</td><td> Да</td></tr></table><hr/><h3><span class="ez-toc-section" id="%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B"></span> Глобальные атрибуты <span class="ez-toc-section-end"></span></h3><p> Тег <code><title> </code> также поддерживает глобальные атрибуты в HTML.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/4.bp.blogspot.com/-kKwk7h4BVSI/U-TEWEuY6OI/AAAAAAAABYE/zX9nys8NIyo/s1600/news.png' /><noscript><img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-kKwk7h4BVSI/U-TEWEuY6OI/AAAAAAAABYE/zX9nys8NIyo/s1600/news.png' /></noscript></p><hr/><h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Связанные страницы <span class="ez-toc-section-end"></span></h3><p> Учебник HTML: HTML Head</p><p> Ссылка HTML DOM: объект Title</p><hr/><h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_CSS_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Настройки CSS по умолчанию <span class="ez-toc-section-end"></span></h3><p> Большинство браузеров отображают элемент <code><title> </code> со следующими значениями по умолчанию:</p><p> заголовок { <br />   отображение: нет; <br /> }</p><p> ❮ Предыдущий<br /> Полный справочник HTML<br /> Следующий ❯</p><p></p><h5><span class="ez-toc-section" id="%D0%92%D0%AB%D0%91%D0%9E%D0%A0_%D0%A6%D0%92%D0%95%D0%A2%D0%90"></span> ВЫБОР ЦВЕТА <span class="ez-toc-section-end"></span></h5><hr/><hr/><hr/><p><h5><span class="ez-toc-section" id="%D0%9B%D1%83%D1%87%D1%88%D0%B8%D0%B5_%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8"></span> Лучшие учебники <span class="ez-toc-section-end"></span></h5><p>Учебник HTML <br /> Учебник CSS <br /> Учебник JavaScript <br /> How To Tutorial <br /> Учебник SQL <br /> Учебник Python <br /> Учебник W3.CSS <br /> Учебник Bootstrap <br /> Учебник PHP <br /> Учебник Java <br /> Учебник C++ <br /> Учебник jQuery</p><p> 9003 010 Учебник<br /> Справочник по HTML <br /> Справочник по CSS <br /> Справочник по JavaScript <br /> Справочник по SQL <br /> Справочник по Python <br /> Справочник по W3.CSS <br /> Справочник по Bootstrap <br /> Справочник по PHP <br /> HTML Colors <br /> Справочник по Java <br /> Справочник по Angular <br /> Справочник по jQuery</p><p><p> Top5 Examples</p><p><p> Top5 Examples <br /> Примеры HTML <br /> Примеры CSS <br /> Примеры JavaScript <br /> Примеры инструкций <br /> Примеры SQL <br /> Примеры Python <br /> Примеры W3.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/majornetik.ru/wp-content/uploads/2018/06/stayl.jpg' /><noscript><img loading='lazy' src='/800/600/http/majornetik.ru/wp-content/uploads/2018/06/stayl.jpg' /></noscript> CSS <br /> Примеры Bootstrap <br /> Примеры PHP <br /> Примеры Java <br /> Примеры XML <br /> Примеры jQuery</p><hr/><p> ФОРУМ |<br /> О</p><p data-readability-styled="true"> W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.<br /> Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.<br /> Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,<br /> куки-файлы и политика конфиденциальности.</p><p> Copyright 1999-2022 Refsnes Data. Все права защищены. <br /> W3Schools использует W3.CSS.</p><h2><span class="ez-toc-section" id="%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA_%D0%BF%D0%BE_HTML_%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D1%82%D0%B5%D0%BA%D1%81%D1%82_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Учебник по HTML. Элементы: основной текст, заголовок, заголовок <span class="ez-toc-section-end"></span></h2><p>   »<br /> HTML  »<br /> Учебное пособие по HTML. Элементы: тело, заголовок, заголовок</p><p> <strong> HTML-элементы </strong> имеют много рангов. Все, что вы видите: абзацы, баннер, навигационные ссылки слева и справа, все это элементы этой страницы.</p><p> Элемент состоит из трех частей: открывающего тега, содержимого элемента и закрытия.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/c0/84/90/c084908747008c2a4b9400d13f7bcbbc.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/c0/84/90/c084908747008c2a4b9400d13f7bcbbc.jpg' /></noscript></p><ol><li> <strong><p> </strong> — тег открывающий <strong> абзац </strong></li><li> Элемент <strong> содержание </strong> — сам абзац.</li><li> <strong></p><p> </strong> — закрывающий тег.</li></ol><p> ***Примечание: <br /> Все веб-страницы будут иметь как минимум базовые элементы: <em> <strong> html, заголовок, заголовок и тело </strong> </em> .</p><h3></h3><p><html> element</h3><p> HTML-документ всегда начинается с тега <em><html> </em> и заканчивается тегом <em></html> </em> . Это стандартная структура HTML. Пожалуйста, откройте Блокнот и скопируйте следующий код:</p><pre> HTML <code> <html> </html> </code> </pre><p> Сохраните документ из меню «Файл/Сохранить как». Выберите «Все файлы» и назовите новый созданный файл «<em> index.html </em>». Нажмите «Сохранить». Теперь откройте файл в браузере, чтобы у вас была возможность обновить страницу (F5).</p><p> Если вы все сделали правильно, ваша веб-страница станет белой!</p><h3><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82"></span> Элемент <span class="ez-toc-section-end"></span></h3><p><head></h3><p> Следующий элемент <em><head> </em>.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/45/5d/b1/455db123f70b63b97ce8b12af75ed7a5.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/45/5d/b1/455db123f70b63b97ce8b12af75ed7a5.png' /></noscript> Пока вы кладете его между <em> html </em> и <em> тело </em> все должно быть просто отлично. «<em> <strong> Голова </strong> </em>» не имеет видимой функции, поэтому мы поговорим об этом аспекте в следующих уроках. Хотя я хочу упомянуть, что <em><head> </em> может предложить браузеру очень полезную информацию. Вы можете ввести здесь другие коды, такие как JavaScript или CSS.</p><p> На данный момент оставим этот тег пустым и введем следующий элемент из списка, но сначала давайте посмотрим без него:</p><pre> HTML <code> <html> <голова> </голова> </html> </code> </pre><p> Если вы сохраните документ и попытаетесь обновить исходную страницу из браузера, вы не увидите никакой разницы. Просто имейте немного терпения, потому что далее мы будем изучать некоторые видимые элементы.</p><h3><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-2"></span> Элемент <span class="ez-toc-section-end"></span></h3><p><title></h3><p> Чтобы все прошло хорошо, вы должны поместить тег title внутрь тега head. то, что вы пишете между этими двумя тегами заголовка (<title> и), будет отображаться как имя браузера, обычно в верхней правой части.

This entry was posted in Популярное