Заголовки html (теги h1-h6), html форматирование текста (теги strong, b, em, i, blockquote, pre)

Здравствуйте, уважаемые читатели! Продолжаю публикации в разделе «Основы html» и сегодняшний пост будет посвящен формированию заголовков html (теги h1-h6), а также способам форматирования html текста путем выделения необходимых слов или фраз (теги strong, b; em, i) и фрагментов текста (теги blockquote, pre).

Надо сказать, что данные инструменты очень часто бывают востребованными в работе вебмастера, поэтому я счел нужным о них рассказать, тем более, что правильное применение вышеназванных тегов html способствует успешной раскрутке проекта. Вообще говоря, вся информация, которую я предлагаю, очень важна, ее объем продуман, поэтому старайтесь ознакомиться с ней как можно ближе, ничего лишнего я стараюсь не давать.

Это касается как настоящего раздела, посвященного основам html, так и других рубрик. В рамках данной рубрики мы уже рассмотрели понятие языка гипертекстовой разметки html, а также определение тегов html и их атрибутов. Напомню очень важное правило: блочные теги могут содержать другие блочные элементы, однако размещать блочные теги внутри строчных категорически не рекомендуется.

Теги заголовков h1-h6

Уверен, многие из вас уже неоднократно сталкивались с тегами заголовков h1-h6, однако, возможно, некоторые недооценивают их важность с точки зрения seo. Дело в том, что эти теги играют не последнюю роль в деле оптимизации и раскрутки сайта и я постараюсь коснуться этого аспекта тоже. Название элементы h1-h6 получили от заглавной буквы английского слова "Header" (заголовок). Синтаксис заголовков в html коде выглядит следующим образом:

<h1>Содержание заголовка h1</h1>
<h2>Содержание заголовка h2</h2>
<h3>Содержание заголовка h3</h3>
<h4>Содержание заголовка h4</h4>
<h5>Содержание заголовка h5</h5>
<h6>Содержание заголовка h6</h6>

Прописывая этот кусок html кода при отображении в браузере мы получаем:

Самый верхний уровень 1, самый низкий - 6. Таким образом любой текст можно классифицировать с точки зрения его важности. Теги h1-h6 являются блочными, поэтому заголовок, определяемый ними, занимает все возможное пространство по ширине. Однако, несмотря на то, что эти элементы являются блочными, они не должны содержать другие блочные теги, только строчные. Если касаться оптимизации статей и всего ресурса в целом, то можно выделить несколько рекомендаций:

  • Заголовки h1 h2 h3 наиболее важны с точки зрения ранжирования поисковыми системами, соответственно они наиболее востребованы и часто используемые. Рекомендуется заголовок тега h1 использовать один раз на странице (обычно он располагается на странице со статьей в качестве названия поста, у меня пока на блоге немного не так, но я собираюсь исправить ситуацию). Заголовок h2 применяется для подзаголовков, если материал большой и его надо разделить на логические части, h3 - для подзаголовков логических фрагментов этих частей; кроме того, h2 и h3 допускается использовать на главной странице и страницах категорий.
  • Теги h4, h5, h6 применяются редко, поскольку слабо учитываются при ранжировании. Однако, если статья большая и необходимо выделить какие-то фрагменты для удобства читателей, то приходят на помощь и они (например, в объемном мануале в каждой из частей, определяемой элементом h3, требуется выделить логические куски с подзаголовком h4). Кроме того, теги h4, h5, h6 могут быть использованы для названий каких-либо блоков в сайдбаре, футере (подвале) и т.д.
  • Желательно использовать заголовки h1, h2, h3 в обязательном порядке. Конечно, я не проводил анализа строгости поисковиков при несоблюдении этого правила, однако логично предположить, что это учитывается при ранжировании.
  • Необходимо добавить, что в содержание заголовков, особенно h1-h3, в обязательном порядке должны входить ключевые слова, определяемые при составлении семантического ядра, поскольку поисковые системы именно ключевым словам и фразам придают большое значение.

Ну, и само собой, использование тегов html заголовков, и это главное, делает материал более удобным для восприятия пользователями. Что касается атрибута align тегов h1-h6, то сейчас я о нем говорить не буду, поскольку он не рекомендуется к применению по правилам спецификации html. Как разнообразить внешний вид подзаголовков с помощью приемлемых методов, которые не нарушат валидность html документа, мы поговорим, когда приступим к изучению основ стилей css.

Форматирование текста при помощи специальных HTML тегов

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

Логическое и физическое форматирование - особенности использования каждого из них

Отмечу разницу между тегами логического и физического (визуального) форматирования. Физическое предназначено прежде всего пользователям, которое позволяет выделить для них важные участки текста. Логическое же делает акцент на выделенный текст поисковым машинам, которые учитывают этот участок при ранжировании.

Наиболее ярким примером служат strong и em, которые являются тегами логического форматирования, а соответственно b и i - физического форматирования. При отображении в браузере текста, обрамленного тегами strong и b (выделение жирным), em и i (выделение курсивом), визуальной разницы не ощущается:

<strong>Выделение текста жирным для поисковиков</strong>
<b>Выделение текста жирным для пользователей</b>
<em>Выделение текста курсивом для поисковиков</em>
<i>Выделение текста курсивом для пользователей</i>

Поговаривают, что значение тегов strong и em за последнее время серьезно упало и поисковые машины сейчас мало внимания им уделяют. Однако, я все-таки не советовал бы увлекаться их применением, отмечая ими ключевые слова, тем более, что существует разумная альтернатива в лице элементов em и i.

Какие еще есть теги, позволяющие форматировать текстовое содержание

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

  • Small - служит для уменьшения размера шрифта на единицу, если сравнивать с обычным текстом.
  • Seo <small>оптимизация</small> сайтов, блогов, порталов.

  • Sub - текст отображается в виде нижнего индекса
  • H<sub>2</sub>O - химическая формула воды

  • Sup - отображение текста в виде верхнего индекса
  • X<sup>2</sup>=Y - математическая формула

Безусловно, это только некоторые элементы физического форматирования, однако я выбрал только те, которые валидны по отношению к html 5, остальные рекомендуется заменять стилями css, с которыми вскоре я вас ознакомлю. Далее приведу примеры тегов логического форматирования.

  • Abbr - указывает на то, что данная последовательность символов является аббревиатурой. Расшифровка сокращения осуществляется с помощью атрибута title и всплывает при подведении курсора к тексту.
  • <abbr title="Hyper Text Transfer Protocol">HTML<abbr> - язык гипертекстовой разметки

  • Cite - применяется для выделения цитат
    <cite>Томми Дюар</cite>
    <q>Иногда шаг вперёд требует шага назад.</q>

  • Code - применяется для отображения разнообразных кодов, например, кода скрипта
  • <code>
    (function() {
    			var request, b = document.body, c = 'className', cs = 'customize-support',
     rcs =new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
    
    			request = true;
    
    			b = b.replace( rcs, '' );
    			b += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    		}());
    </code>

  • Del - выделяет текст, перечеркивая его. Очень полезно, когда надо отметить текст, удаленный из новой версии документа. Применение этого тега позволяет отслеживать изменения, которые были сделаны в тексте.
  • До сих пор <del>не было обновлений</del> блога

  • Ins - выделяет текст, подчеркивая его. Показывает тем самым, что этот фрагмент текста был вставлен после опубликования документа.
  • До сих пор <del>не было обновлений</del> блога,
     <ins>но теперь этот недостаток будет исправлен</ins>

  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

Представленные выше теги логического и физического форматирования часто не встречаются при написании html кода, однако знание о них необходимо хотя бы для выяснения их роли в современном продвижении сайтов. Далее рассмотрим еще два тега форматирования текста html, которые играют не последнюю роль.

Как вставить цитату посредством blockquote и выделить текстовый фрагмент с помощью pre

Html тег blockquote служит для форматирования текста, выделяя цитаты внутри документа. Он достаточно распространен и часто используется при написании постов на сайтах и блогах определенной тематики. Вот пример:

Тег blockquote является парным и может включать в себя как блочные (например теги абзацев p), так и строчные элементы.

<p>Абзац текста, заключенный в тег p</p>
<blockquote><p>Абзац текста, заключенный в тег форматирования blockquote.</p></blockquote>

Он не имеет набора уникальных атрибутов, однако к нему могут быть применены универсальные атрибуты и события. В каждой теме оформление цитаты в тексте может быть различным, это зависит от стиля и дизайна шаблона, который определяется стилями css, о которых я уже упоминал неоднократно и до которых обязательно доберемся в ближайшее время.

Ну, и напоследок еще об одном элементе форматирования, который достаточно часто бывает востребованным - теге pre. Этот элемент позволяет отобразить предварительно отформатированный непосредственно в коде html фрагмент текста. Особенность отображения в браузере по умолчанию заключается в том, что любое количество пробелов, которые идут последовательно, передается на вебстранице как один. Тег pre помогает обойти эту специфическую особенность. То есть то и как вы написали, точно будет воспроизведено на странице, если участок текста заключен между открывающим и закрывающим тегами pre.

<pre>
HTML форматирование текста
             с помощью тега pre
       тег pre - парный и блочный элемент
</pre>

Точно в таком же виде текст отобразится в браузере:

HTML форматирование текста
             с помощью тега pre
       тег pre - парный и блочный элемент

Ну, вот, пожалуй, это все, о чем я хотел сегодня рассказать применительно к тегам заголовков h1-h6, а также основным элементам форматирования html текста. Продолжение обязательно последует, поэтому обязательно подписывайтесь на обновления блога, чтобы не пропустить свежие материалы. Ну а в заключение после длинной трудной статьи улыбнитесь, наблюдая за братьями нашими меньшими:

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

34 отзыва

  1. Сергей

    Спасибо за подробную статью на актуальную тему, но сразу же возникают вопросы.

    Прежде всего, заголовки, точнее, их непосредственное использование. Я встречал два мнения.
    1. в коде должно быть название сайта, - заголовок статьи, - подзаголовки. Тег на странице должен быть единственным.
    2. - заголовок статьи и название сайта, - подзаголовки.

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

    Еще вопрос пот тегу strong - опять-таки, ходят слухи, что ПС начинают к нему относиться не просто индифферентно, но враждебно, точнее, к выделению им ключевого слова или фразы. В качестве альтернативы предлагается выделение предложения, содержащего ключ, полностью.

    Я с некоторого момента вообще отказался от этого тега, но о результатах пока говорить рано.

  2. Сергей

    прошу прощения, забыл, что движок вырезает теги:

    1. в коде h1 должно быть название сайта, h2 — заголовок статьи, h3 — подзаголовки. Тег на странице должен быть единственным.
    2. — h1 заголовок статьи и название сайта, h2 — подзаголовки.

  3. Василий

    Игорь, я никак не могу понять, где находиться тег H1. У вас и у меня в шапке стоит изображение. У вас там есть этот тег. При анализе моего сайта одним сервисом, мне в результате сказали, что у меня вообще на сайте нет тега H1. Как его вообще вставить в шапку сайта?

  4. Игорь

    Сергей, многое из того, что касается seo, постигается на практике путем экспериментов. Я не могу однозначно ответить на данный момент, что лучше, да никто не сможет. Нет универсального решения, все зависит от темы ресурса и его раскрученности. Но я понимаю Ваше беспокойство и стремление постичь истину. Как только у меня будут определенные данные по каждому пункту, сразу выложу их в публикации. Что касается тега strong, то, на мой взгляд, выделение ключевых слов или фраз один раз в статье не должно принести никакого вреда, все это ненужный ажиотаж.

  5. Игорь

    Точно так. 🙂

  6. Игорь

    Василий, я прописывал заголовок в функциях темы прямо в админке. Внешний вид - Темы, для моей темы там есть множество опций, с помощью которых можно отредактировать ту или иную область моей темы, в том числе вписать заголовок. А Вы, как я понимаю поменяли исходную шапку своей темы, не так ли? Причем поменяли полностью изображение, а на изображении уже было название Вашего ресурса. Вы же не прописывали h1 в шапку, откуда ему взяться. Посмотрите внимательнее в функциях вашей темы, может там тоже есть похожая функция. Там, где «Управление темами» посмотрите, должны быть ссылки, что-то типа «Настроить», «Опции темы» и уже там уже поищите ссылку на подобии «Название и описание сайта». В моей теме, например, очень многое можно изменить, даже цвета сайта и шапку, загрузив новое изображение. Отпишитесь в комментариях, как получилось.

  7. Василий

    Да я поменял изображение в шапке. На тестовом сайте вернул оригинальное изображение. Все равно H1 нигде не нашел. Поставил очень похожую тему-близнеца, там тоже нет этого тега, только H2. Могут быть темы без тега H1? Потом поставил стандартную тему, на главной странице не нашел этот тега, а на странице тег H1 есть в название статьи. А как его добавить в шапку сайта не знаю.

  8. Игорь

    Василий, почитайте внимательнее мой предыдущий ответ и через админ панель попробуйте прописать название сайта. Должна быть функция управления темой, у вас в css прописаны стили для заголовка h1, я посмотрел.

  9. Василий

    В стандартной теме все есть. В настройках самой темы таких опций нет. Через
    Админ-панель -> Темы -> Настройка и описание сайта. Там я написал Название сайта и
    Краткое описание. Но тега h1 все равно нет. На тестовом сайте поставил заново эту
    тему, вот адрес http://komp.vellisa.ru/. Можно зайти через Яндекс, так как он закрыт
    от индексации. Раньше когда писал в Админ-панели название сайта, то оно добавлялось в шапку, но выглядело не красиво. Сейчас надписи почему-то не добавляются.

  10. Игорь

    Василий, я исследовал Вашу проблему. Дело в том, что согласно стилям css Вашей темы, название, заключенное в теги h1, просто не помещается в шапку. Попробуйте сделать следующее. Если Вы работаете с браузером Chrome, подведите курсор к изображению в шапке и кликните правой кнопкой мыши, из контекстного меню выберите «Просмотр кода элемента». В нижней половине окна увидите код html именно этого изображения, это строчка будет выделена темно-синим цветом. Эта ссылка на изображение шапки Вашей темы. Справа будут представлены стили именно для этого элемента. Кликните правой кнопкой мыши по этой ссылке и из контекстного меню выберите «Delete node». Видите, элемент удалился? Надеюсь, Вы понимаете, что после перезагрузки браузера все станет на свои места, так что экспериментировать можно сколько угодно. Этот элемент у Вас заключен в контейнер <_div class="span-11">. После удаления ссылки на изображения останется ссылка на главную страницу. В качестве анкора этой ссылки пропишите любое слово, заключенное в теги h1, например, World. То есть выглядеть это будет примерно так: заключенная в контейнер span-11 ссылка на главную <_a_href ="http://komp. vellisa.ru_"><_h1>World<_ /h1><_ /a>. И тут же увидите это слово на месте изображения (которое, кстати и не нужно, поскольку там название темы, как я понимаю. Попробуйте вместо этого изображения загрузить картинку меньшего размера и снова попробуйте через админку прописать название сайта. Если не получится, будем действовать более предметно.

  11. Василий

    Игорь, спасибо большое за помощь. Удалил я элемент, дальше как вставить не очень понятно. Методом тыка вставлял это слово, не совсем получилось, но слово было. Изменения названия сайта не получается написать, изменяю, но в шапке ничего не отображается.
    А вообще возможно сделать так, чтобы у меня на основном сайте осталась изображение какое там сейчас и как-то добавить теги h1?

  12. Игорь

    Василий, немного терпения, сейчас слишком занят, как только решу проблему, не обещаю, но попробую помочь, ответ выложу в комментариях.

  13. Василий

    Спасибо Игорь. Конечно я подожду, это не срочное дело.

  14. Евгений

    Согласен теги н необходимая вещь и игнорировать их себе дороже. Если H1 H2 практически автоматом появляются на странице ( заголовок статьи и сайта) то H3 стоит самому ручками прописывать в теле статьи.
    На счет атрибута align к этим тегам спорный вариант. влияние его на продвижение пока не заметил, скорее его нет. нарушений сос стороны валидности тоже нет. Так что полагаю это на усмотрение каждого.

  15. Игорь

    Евгений, влияния на продвижение атрибута align действительно пока нет, а вот что касается валидности, то Вы погорячились. Он не рекомендуется к использованию не только в соответствии со спецификацией html 5, но и даже в соответствии с html 4.01. Вместо этого атрибута рекомендуется использование аналогичного свойства text-align, которое прописывается в css.

  16. Игорь

    Василий, извините, что долго пришлось ждать. Только-только немного разгрузился и вот решил Вашу проблему. Следуйте моим дальнейшим инструкциям, чтобы заголовок H1 появился в шапке. Для начала необходимо отредактировать Ваше изображение в шапке. Оно у Вас находится здесь: http://vellisa.ru/wp-content/themes/cooltext643525798.png , то есть в папке с текущей темой. Загрузите его на компьютер с помощью FileZilla, например. Откройте его в любом графическом редакторе, даже простая программа paint подойдет. Там сотрите простым ластиком надпись 'vellisa.ru'. Если этого не сделать, то будет двойная надпись, либо надпись с h1 наложится на нее, будет выглядеть некрасиво. Затем откройте с помощью notepad++ файл header.php, который отвечает за шапку, найдите там строчку:

    <div id="header" class="span-24">

    .
    Документ не должен быть большим, так что, думаю, найдете. Прямо под ней внесите следующую строчку:

    <h1><a href="<?php echo home_url(); ?>">
    <?php bloginfo('name'); ?></a></h1>

    .
    Далее внесите следующие изменения в файл style.css (48 строка):
    #header h1 {
    margin-bottom: -85px !important;
    padding: 45px 0 0 20px;
    font-size: 38px;
    font-weight: bold; (это жирное начертание шрифта, если нужно обычное оформление шрифта, то нужно удалить это свойство)
    В общем, как-то так. Там еще можно подобрать цвет шрифта под дизайн сайта, но сначала попробуйте мой стиль применить. Думаю, все должно получиться.

  17. Василий

    Спасибо большое Игорь за подробное описание и за участие в решении проблемы. Попробую на тестовом сайте, посмотрю, что получиться. Спасибо!

  18. max_zavadskij

    Изложено весьма информативно! Спасибо! Интересно было почитать!

  19. Игорь

    Спасибо за комментарий.

  20. Ева

    У вас хороший блог) читаю всегда с удовольствием.

  21. Катя

    У меня в шаблоне в шапке сайта изначально было прописан адрес блога в h1, а при добавлении статей на сайт, каждая статья имеет тоже заголовок h1. Я так понимаю, что это неправильно, да? Ведь на странице же не должно более одного тега h1.
    Скажите, что лучше, изменить адрес блога в шапке на h2 или же вообще убрать тег h из шапки сайта?
    Спасибо.

  22. Игорь

    Да, Катя, два тега H1 на странице перебор. Думаю, вообще убрать тег заголовка из шапки. Дело в том, что, возможно, Вы пожелаете опубликовать статью, которая будет подразделена на несколько подзаголовков, вот тогда и используете H2. Это мое мнение. В принципе, я проделал то же самое, у меня также в шапке раньше присутствовал H1. Я его удалил.

  23. Катя

    Игорь, спасибо большое за быстрый ответ! Вы мне очень помогли!

  24. Игорь

    Пожалуйста, Катя. 🙂

  25. Виктория

    Ой, а картинка у вас какая наглядная - сразу понятна разница между h1 и h6)!

  26. Алла

    Здравствуйте, Игорь! Прошу прощения, если вопрос не совсем по теме...
    Вопрос касается шрифтов. Мне важно, чтобы те шрифты, которые я устанавливаю на своих страницах/записях отражались именно в том виде, в каком я их задаю.
    Смотрела свой сайт на "убитом" старом компе. И с удивлением обнаружила, что некоторые слова, которые я задаю быть "Courier New" вдруг показываются как "Times New Roman". Может такое быть? И если "да", то как эту проблему решить? Заранее спасибо!

  27. Игорь Горнов

    Здравствуйте,Алла!
    Насколько я знаю, все современные модификации популярных браузеров корректно отображают заданный шрифт. Ошибки могут возникать только в том случае, если пользователь применяет старые версии обозревателей. Наверняка на вашем старом компьютере установлен такой же древний веб-браузер. Думаю, только это обстоятельство вызвало некорректное отображение шрифта.

  28. Алла

    уфф, гора с плеч! мне очень важно доносить качественно информацию. Особенно касаемо обучающих материалов. Спасибо!

  29. Игорь Горнов

    Не за что, Алла!

  30. Андрей

    Спасибо большое Игорь за качественную информацию, данные знания обязательно пригодятся. Посмотрел карту Вашего сайта, заголовки статей, без раздумья подписываюсь на обновления. С Вашего позволения буду периодически заглядывать на блог и изучать статьи.
    С уважением, Андрей.

  31. Игорь Горнов

    Конечно, Андрей, пожалуйста.

  32. Викторин

    Скажу честно прочитал статью с интересом, могу сказать Вас блог довольно полезный!

  33. Амос

    Спасибо. Прочитал с интересом, и вообще полезный у Вас блог

  34. Сергей

    Хорошая статья, если бы еще написали стоит ли прописывать title для всех типов заголовков и ссылок (например как я попробовал прописать тут http://art-holster.ru/ , используя ключевое слово "купить картину") то было бы вообще хорошо 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.