В этом уроке мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тега <font></font>. Существуют шесть уровней заголовков, от h1 до h6. Заголовок h1 используется на странице один раз — это основной заголовок, то есть название статьи. Заголовки h4, h5 и h6 используются редко — при сложной многоуровневой структуре текста. Самые распространенные — h2 и h3.
Для поисковых систем, индексирующих страницы сайта, считают содержание заголовков важными ключевыми словами. Заголовки существенно влияют на ранжирование в поиске. Без заголовков страница будет плохо работать с точки зрения SEO.
Виды заголовков
Итак, как выглядят заголовки:
Вводя заголовки в текст, вы позволяете посетителю сайта более легко ориентироваться на странице. Заголовками определяется структура внутри текста.
Напишем небольшой текст и оформим все нужные заголовки, заключив их между соответствующими тегами. Код будет выглядеть так:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title>Оформляем заголовки</title> </head> <body> <h1>Как оформить заголовки и размер текста</h1> В этом уроке мы научимся выделять текст при помощи заголовков. <h2>Виды заголовков<h2> Итак, как выглядят заголовки </body> </html> |
Как в итоге выглядят заголовки и какой получается структура текста — вы видите непосредственно на этой странице.
Визуально заголовки отображаются более крупным полужирным шрифтом. Также по желанию их можно оформить другим цветом, как реализовано на этом сайте.
Из шести доступных уровней заголовка оптимально использовать не более трёх на странице, если нет особой необходимости в более сложной структуре. Записи с большим количеством уровней (то есть с глубокой иерархией) получаются громоздкими и трудными для навигации.
Заголовки должны расставлять правильно! Например, после h1 не может идти заголовок h3 — только h2.
Соответственно, при сложной структуре статьи правильной будет такая расстановка заголовков:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h1>Основной заголовок h1</h1> <p>Абзац</p> <h2>Первый подзаголовок h2</h2> <p>Абзац</p> <h3>Подзаголовок h3</h3> <p>Абзац</p> <h2>Второй подзаголовок h2</h2> <p>Абзац</p> <h3>Подзаголовок h3</h3> <p>Абзац</p> <h4>Подзаголовок h4</h4> <p>Абзац</p> <h2>Третий подзаголовок h2</h2> |
Так делать нельзя:
| 1 2 3 4 5 6 7 8 9 10 | <h1>Основной заголовок h1</h1> <p>Абзац</p> <h3>Подзаголовок h3</h3> <p>Абзац</p> <h3>Подзаголовок h3</h3> <p>Абзац</p> <h4>Подзаголовок h4</h4> <p>Абзац</p> |
Или:
| 1 2 3 4 5 6 7 8 9 10 11 | <h1>Основной заголовок h1</h1> <p>Абзац</p> <h2>Подзаголовок h2</h2> <p>Абзац</p> <h2>Подзаголовок h2</h2> <p>Абзац</p> <h4>Подзаголовок h4</h4> <p>Абзац</p> <h2>Подзаголовок h3</h3> |
Как задать цвет заголовкам
Чтобы выделить заголовки другим цветом, нужно добавить свойство color.
Например, пропишем для заголовков h1, h2, h3 красный, синий и зеленый цвет. Сделать это можно в двух вариантах, но результат будет один:
В коде страницы это выглядит так:
| 1 2 3 4 5 | <h1 style="color: red">Основной заголовок h1 красного цвета</h1> <h2 style="color: blue">Заголовок второго уровня h2 синего цвета</h2> <h3 style="color: green">Заголовок третьего уровня h3 зеленого цвета</h3> |
Или так:
| 1 2 3 4 5 | <h1 style="color: #FF0000">Основной заголовок h1 красного цвета</h1> <h2 style="color: #0000FF">Заголовок второго уровня h2 синего цвета</h2> <h3 style="color: #008000">Заголовок третьего уровня h3 зеленого цвета</h3> |
Как изменить размер текста
Теги h предназначены именно для выделения заголовков. Если нужно выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тега <font></font>, который устанавливает желаемый размер шрифта:
Свойства large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения:
- экстра-маленький (x-small, xx-small),
- экстра-большой (x-large, xx-large).
Свойства larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
Примеры кода текста с абсолютными значениями:
| 1 2 3 4 5 6 7 8 | <span style="font-size: xx-large;"> это текст со значением xx-large </span> <span style="font-size: x-large;"> это текст со значением x-large</span> <span style="font-size: large;"> это текст со значением large</span> <span style="font-size: medium;"> это текст со значением medium </span> <span style="font-size: small;"> это текст со значением small </span> <span style="font-size: xx-small;"> это текст со значением xx-small </span> |
И вот как он выглядит:
Также можно указать в процентах. 100% — задается относительный размер (в процентах относительно родительского). Например:
| 1 2 3 | <span style="font-size: 200%;"> это текст со значением 200% </span> |
Это означает, что размер текста будет составлять 200% от базового размера шрифта.
это текст со значением 200%
И один совет — не злоупотребляйте сильно крупными выделениями текста! Всё должно быть в меру.
Статья была полезной?