Заголовок страницы - html код, тег h
В данной статье мы рассмотрим как сделать заголовок текста в 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 заголовков страницы
<h2>2 Второстепенный</h2>
<h3>3 Заголовок</h3>
<h4>4 Заголовок</h4>
<h5>5 Заголовок</h5>
<h6>6 Заголовок</h6>
Результат в браузере
Как изменить размер и цвет заголовка
Любые, свойства тегов h, которые заданы по умолчанию можно изменить с помощью задания собственных стилей.
Пример изменения цвета, расположения и отступов
Результат в браузере
В примере выше, мы применили следующие свойства:
- 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> в такой последовательности:
...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> рассмотрим в отдельной статье.
