📑 Урок 3. Разметка текста HTML. Абзацы, списки, заголовки
🔎Данный урок прочитали: 244
🖨️Версия для печати
Всем известно, что самой ценной составляющей каждой страницы вашего сайта является контент. Уникальный, грамотный, интересный текст завоевывает новых посетителей, заставляет возвращаться на ресурс старых. Помимо качества статьи ключевое значение в организации написания контента является его разметка. Чтобы правильно организовать текст на сайте нужно хорошо знать структуру 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>🎓Поделиться уроком:
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.