Как сделать заголовок текста в html, тег h, h1

В данной статье мы рассмотрим как сделать заголовок текста в html коде страницы сайта. В html языке есть специальные теги семейства h(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), которые предназначены для создания заголовка страницы или текста.

Теги семейства h

• <h1> — html код главного тега, обычно ипользуется как заголовок всей страницы в самом начале содержания.
• <h2> — 2-й по значимости заголовок (html код), обычно используется для разделения по смыслу несколько частей содержания страницы.
• <h3> — 3-й по значимости заголовок страницы (html код), как правило, используется в качестве подзаголовка тега <h2>.
• <h4>, <h5> и <h6> — 4, 5 и 6 по степени важности заголовки.

Сделать заголовок текста страницы в html очень просто — достаточно между тегами <h>(<h1>, <h2>,…) написать его содержание. В результате, написанный текст получит заданные по умолчанию размер, отступы станет заголовком.

Пример кода html заголовков страницы

<h1>Главный заголовок</h1>
<h2>2 Второстепенный</h2>
<h3>3 Заголовок</h3>
<h4>4 Заголовок</h4>
<h5>5 Заголовок</h5>
<h6>6 Заголовок</h6>

Результат в браузере

Как изменить размер и цвет заголовка

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

<h1 style="color:#cc3333; text-align:center; margin: 10px 10px 10px 10px ">Главный заголовок</h1>

Результат в браузере

В примере выше, мы применили следующие свойства:

• Color задает цвет (cc3333 — код красного оттенка);
• text-align определяет горизонтальное выравнивание(center — по центру);
• margin задает 4 цифры( 10px 10px 10px 10px) определяющие отступ в пикселях сверху, справа, снизу и слева соответственно.

Опасности применения тегов h

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

Безопасная концентрация тегов <h>

<h1> заголовок желательно использовать в html коде только 1 раз на странице, лучше в самом начале содержания. При более частом использовании есть вероятность попасть под фильтры поисковых систем за переоптимизацию, что приведет к ухудшению позиций.

<h2>, <h3>, <h4>, <h5>, <h6>. Все остальные теги <h>, кроме <h1> желательно использовать не чаще, чем раз в 3-4 абзаца текста(или раз в 9-12 предложений). За более частое использование поисковики также могут занизить позиции сайта.

Интервалы указаны примерно, допускается отклонение при условии сохранения пропорции для всего текста. Допустим, на странице 3 тега <h> в такой последовательности:

• <h2>1 Подзаголовок</h2>
  …1 абзац текста…
• <h3>1.1 Подзаголовок</h3>
  …5 абзацев текста…
• <h2>2 Подзаголовок</h2>
  …3 абзаца текста…

То есть между первым тегом <h2> и вторым <h3> 1 абзац, между вторым <h3> и третьим <h2> 5 абзацев и после третьего <h2> еще 3. Как видно теги заголовков <h> распределены неравномерно, но проблем со стороны поисковых систем возникнуть не должно, потому что на 9 абзацев текста приходится всего 3 тега, что соответствует безопасной пропорции, указанной выше.

Как вы уже поняли интервал в 3-4 абзаца текста (или раз в 9-12 предложений) должен быть соблюден между любыми тегами <h> (<h2>, <h3>, <h4>, <h5>)

Если заголовки нужны чаще, чем безопасная концентрация

Если смысловые части вашего текста короткие и для их разделения требуется более частое использование заголовков и подзаголовков, то используйте другие теги вместо <h>, а именно <span>(строчный элемент) или <div>(блочный элемент). <div> или <span> можно использовать почти в любом количестве и концентрации, не опасаясь санкций со стороны поисковых систем за переоптимизацию. При этом внешний их внешний вид будет абсолютно одинаковым.

На одной странице можно использовать любые теги, поэтому вы можете сделать основные заголовки с помощью <h>, а для второстепенных использовать <div> или <span>. Подробнее о том, как сделать заголовок текста в html с помощью без тега h через <div>, <span> рассмотрим в отдельной статье.