Чат PHP-разработчиков
Заголовок HTML-страницы

Заголовок HTML-страницы

Заголовком страницы называют текст, расположенный в браузере под панелью меню на вкладке сайта. Еще этот текст называют title (тайтл), поскольку именно данный тег используется для его создания.

Чтобы заголовок страницы отображался, тег <title> необходимо поставить внутрь тега <head>.

На примере это будет выглядеть следующим образом.

<head>
  <title>Блог о веб-разработке - WebShake.RU</title>
</head>

А вот так вот отображается заголовок непосредственно в браузере:
Заголовок HTML-страницы в браузере

Данный тег очень важен для страницы, так как именно из него берётся название страницы в поисковой выдаче. Например, вот так выглядит WebShake в выдаче Гугла:
Заголовок HTML-страницы в поисковой выдаче

В свою очередь люди (в том числе и вы), когда что-то ищут в поисковике, читают в первую очередь название страницы. А оно-то и формируется этим тегом <title>. Он должен содержать в себе основную суть страницы в нескольких словах. Также он не должен быть больше 80 символов - иначе остальные символы поисковики обрубят и заменят многоточием. Надеюсь, я смог донести до вас, насколько этот тег важен. Ну а теперь давайте сделаем домашнее задание по данному тегу.

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • Придумайте о чём будет ваша страничка. Я для примера решил, что у меня будет страница по книгам для программиста. Вы же можете выбрать, например, тематику котиков, собачек, или чего угодно. Главное - чтобы тема вам нравилась.
  • Добавьте страничке осмысленный, краткий (не более 80 символов), но при этом ёмкий заголовок.
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (23)


adianon

Собственно это ответ на мой предыдущий вопрос, а можно ли как то играть с шрифтами в head что-бы это и в выдаче поисков или при открытии было видно?

ivashkevich

Играть с шрифтами в title нельзя. Некоторые веб-мастера умудряются засовывать туда символы смайликов, но поисковики их вырезают. На SEO это точно положительно не сказывается. Как я и написал в статье - это должен быть простой текст, который покрывает запрос пользователя.

Haru205
<!DOCTYPE html>
<html>
    <head>
        <title>Блог о жизни</title>
    </head>
</html>
ivashkevich

Не забывайте о том, что каждая страничка должна содержать тег <body> ;)

nastasya95
<!DOCTYPE html>
<html>
<head>
<title>Породистые кошки на продажу</title>
</head>
<body>
<p>В нашем питомнике вы можете приобрести шотландскую вислоухую кошку </p>
</body>
</html>
irina-naletova

Очень нравиться сайт только начала изучать HTML и СSS все подробно и понятно изложено автору Респект и Уважение буду пользоваться материалом сайта в дальнейшем своём обучение

ivashkevich

Спасибо! Удачи в обучении)

lluubboovv
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Чегевара Кальвадос - личная страница</title>
    </head>
    <body>
    <h1>Che Guevara - бенгальский кот</h1>
        Это первый племенной кот нашего питомника, имеет закрытый титул Европейского чемпиона по системе WCF. Сейчас ЧеГевара находится на заслуженном отдыхе.
    </body>
</html>
ivashkevich

Отличная страничка!

Vlad

Доброго времени!
Почему вместо названия заголовка в браузере отображается вкладка - "Сведения о сайте"?

ivashkevich

Привет. Скинь скриншот, непонятно о чем речь.

ReyJiz
<!DOCTYPE html>
<html>

<head>
    <title>ДЕСЕРТ - доставка сладких подарков в Чебоксарах</title>
    <meta charset="utf-8">
</head>

<body>

</body>

</html>
virtual2018

тегу html очень рекомендуют указывать атрибут lang, так как браузер использует его значение для правильного отображения некоторых символов
<html lang=ru>

ivashkevich

Спасибо за дополнение)

elizabet.eea@ya.ru

Вопрос такой, а как-то я могу зафиксировать урок, на котором остановилась?
Чтобы зайдя в след. раз, я поняла на каком уроке я остановилась.

ivashkevich

Ок, подумаю чтобы сделать такое

kekspeks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Клининг. Москва. Недорого</title>
</head>
<body>
<h2 align="center">Клининг в Москве</h2>
<p>Клинингловая фирма Кекспекс поможет Вам убрать бомжатник после веречинки, 
сделает генеарльную уборку после переезда или долгого отсутствия Вас дом, 
подготовит к квартиру к сдаче. У нас есть дополнительные услуги. С прайсом вы можете ознакомиться здесь</p> 
</body>
</html>

Когда-то уже начинала учить, вот что получилось.Хех

Хотя мне кажется, что что-то не ок...

ivashkevich

Всё норм, кроме порядка тегов h1-h6. Но о них позже)

olga-ok

А что обозначает этот <meta charset="utf-8">?

ivashkevich

Кодировка. Про нее еще впереди урок)

Alex38
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Самогонщик</title>
    </head>
    <body>
    <h1>Всё о самогоноварении</h1>
        Подготовка браги,первая выгонка,очистка КАУ,вторая выгонка.Настойки.
    </body>
</html>
Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований