Заголовки (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 — служит для уменьшения размера шрифта на единицу, если сравнивать с обычным текстом.

<p>Seo <small>оптимизация</small> сайтов, блогов, порталов.</p>



• Sub — текст отображается в виде нижнего индекса

<p>H<sub>2</sub>O - химическая формула воды</p>



• Sup — отображение текста в виде верхнего индекса

<p>X<sup>2</sup>=Y - математическая формула</p>

Безусловно, это только некоторые элементы физического форматирования, однако я выбрал только те, которые валидны по отношению к 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[c] = b[c].replace( rcs, '' );
			b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
		}());
</code>



• Del — выделяет текст, перечеркивая его. Очень полезно, когда надо отметить текст, удаленный из новой версии документа. Применение этого тега позволяет отслеживать изменения, которые были сделаны в тексте.

<p>До сих пор <del>не было обновлений</del> блога</p>



• Ins — выделяет текст, подчеркивая его. Показывает тем самым, что этот фрагмент текста был вставлен после опубликования документа.

<p>До сих пор <del>не было обновлений</del> блога, <ins>но теперь этот недостаток будет исправлен</ins></p>



• 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 текста. Продолжение обязательно последует.