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) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

1 12 1 1 1 1
1 1 1 1

Браузеры

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

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

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

Документ

См. также

  • Создание первой веб-страницы
  • Структура 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 loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-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 loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-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 loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-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 loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-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 loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-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 Популярное