Всем известно, что самой ценной составляющей каждой страницы вашего сайта является контент. Уникальный, грамотный, интересный текст завоевывает новых посетителей, заставляет возвращаться на ресурс старых. Помимо качества статьи ключевое значение в организации написания контента является его разметка. Чтобы правильно организовать текст на сайте нужно хорошо знать структуру HTML и теги для верстки текста. В этой статье мы рассмотрим абзацы, заголовки различного уровня, списки, цитаты, выделения, переносы текста и верстку этих элементов.
Абзацы, заголовки текста и списки. Основа верстки контента
Любая информация должна быть правильно структурирована для удобство чтения. В статьях на сайте основной единицей текста является абзац, его выделяем с помощью тега <p>, закрываем аналогичным тегом со слешем в начале </p>. Стилистически абзац имеет отступ снизу, всегда начинается с новой строки.
Для выделения основных пунктов, разделов в статье используют заголовки различного уровня. Если информации много, то наличие заголовков помимо главного обязательно, тем более для продвижения в поисковых системах это имеет особое значение. Заголовки бывают шести уровней. От <h1> до <h6>. В реальных примерах чаще всего можно встретить заголовки до третьего уровня. Их количество в статье варьируется, самый главный заголовок H1 должен встречаться в теле (body) только один раз, количество заголовков H2 желательно не делать больше 2-3, но это не строгое правило. По сути заголовки отображают иерархию страницы, перескакивать уровни не следует.
Далее поговорим еще об одном инструменте для написания статьи — это маркированные и нумерованные списки. Для их обертки в случае с маркированным используют теги <ul></ul>, нумерованным теги <ol></ol> а элементы списка оборачивают тегом <li>. Для нумерованного списка есть атрибут start, благодаря которому можно назначить номер начального элемента. Списки можно делать многоуровневыми, с бесконечной вложенностью. Сначала создаем список первого уровня, затем внутри тега li располагаем еще один список, данный прием часто используют для создания меню на сайте.
Выделение текста, переносы, цитаты. Выделяем важное в статье
Зачастую помимо визуального эффекта в статье нужно добавить и смысловую важность части текста или фразе, для этого используют два тега <b> и <strong>. Выглядит текст обернутый этими тегами абсолютно идентично, он выделен полужирным шрифтом, однако в плане смыслового контента strong отмечает более важную информацию. Данные теги применяются внутри более крупных элементов, абзацей, списков и т.д.
Далее поговорим о тегах, которые выделяют текст статьи курсивом, они тоже идентичны внешне, но отличаются по смыслу текста, заключенного в них, речь пойдет о тегах <i> и <em>. Тегом <em> мы выделим часть статьи, которая меняет смысловую нагрузку в предложении, а тегом <i> чаще всего размечают специфические слова или термины, возможно, иностранные заимствования.
Немного поговорим о тегах, которые используются реже других и не так часто встречаются в контенте. Например:
- тег для переноса текста на новую строку <br>
- теги для выделения цитат <blockquote> (длинные цитаты), <q> (небольшие элементы цитирования в предложении), <cite> (автор, источник цитаты)
- тег для создания верхнего <sup> и нижнего индекса <sub> в формулах или уравнениях
Пример верстки статьи
Пришло время посмотреть на пример сверстанной статьи, что же у нас получилось
<!DOCTYPE html>
<head>
<title>Заголовок</title>
<meta charset="utf-8">
<meta name="description" content="описание">
<meta name="keywords" content="ключевые, слова, через, запятую">
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Пример абзаца. Пример абзаца. Пример абзаца. Пример абзаца.</p>
<p>Пример абзаца. Пример абзаца. Пример абзаца. Пример абзаца.</p>
<p>Пример абзаца. Пример абзаца. Пример абзаца. Пример абзаца.</p>
<h2>Заголовок второго уровня</h2>
<p>Снова пример длинного, <b>интересного</b> абзаца. С очень <strong>важной</strong> информацией и <i>иностранными</i> терминами.</p>
<ul>
<li>1 пункт
<ul>
<li>1.1 пункт</li>
<li>1.2 пункт</li>
<li>1.3 пункт</li>
</ul>
</li>
<li>2 пункт</li>
<li>3 пункт</li>
</ul>
</body>
</html>