Урок html 3. Параграфы и заголовки

Урок 3. Параграфы(абзацы) и заголовки

На данном уроке мы познакомимся с выводом текста на HTML страницах. Тема не сложная, немного вспомнив школьные уроки – сразу станет всё понятно. А если не вспомнили – не страшно, сейчас напомню! Текст должен быть разделен на логические блоки и озаглавлен. Это позволяет нам быстро понять суть текста и найти в нем нужный блок.

Что такое абзац. Разница стандартов русского и английского языков

Прежде чем начать создавать абзацы на HTML страницах, давайте разберемся, что такое абзац вообще и какими они бывают. Не буду углубляться в русский язык, все помнят, что такое абзац из школы, а кто не помнит, тот легко найдет информацию в интернете. В общих чертах абзац – это некоторая логическая единица текста, состоящая из нескольких предложений, объединенных общей мыслью, предназначены для усиления смыслового акцента. Конечно, это не совсем точно, википедия выдает более замудреное определение.

Но это не главное. Гораздо важнее – это как мы выделяем абзац в тексте. Все помнят как? Ну конечно – это красная строка. Красная строка – это русский стандарт выделения абзацев. Любой англоязычный текст не будет содержать красных строк. Английский вариант – это пустая строка между блоками текста, два абзаца разделяются пустым пространством. Почему я на этом акцентировал внимание? Да потому, что HTML не ориентирован на правила русского языка. Если вы выделите в тексте абзацы средствами HTML, то увидите не красные строки, а пустые промежутки между абзацами. Иногда встречаются совмещенные стили. Абзацы разделены пустой строкой и первое предложение с красной строки. Не делайте так. Это слишком, моветон. Выберите один из стилей (либо красная строка, либо пустые строки) и используйте везде его.

Зачем нужны абзацы (параграфы)

Как следует из определения, цель абзацев – логическое разбиение текста на некоторые единицы. Как бы мы не форматировали наш текст абзацами – это нужно только читателю нашей статьи. Для поискового продвижения роль абзацев косвенная. Поисковик не будет анализировать, с красной строки мы делаем абзац или нет, правильно мы разбили текст на абзацы или нет. Абзацы нужны для того чтобы нашим посетителям было комфортно читать. Как колонки в газете – можно было бы и без них всё в одну строку написать, но это неудобно читать. Так и абзацы в тексте на сайте – нужно сделать так, чтобы нашему посетителю было понятно и удобно, максимально комфортно.

Косвенная роль абзацев, для поисковых систем, заключается в поведенческих факторах. Если текст оформлен красиво, понятно, удобно, значит и посетитель будут с удовольствием читать и находить в тексте нужную информацию.

Подумайте, как вы читаете статьи в интернете. В большинстве случаев вы не читаете от корки до корки. Да никто не читает от корки до корки. Сейчас столько информации в сети, если мы будем читать от начала до конца все статьи, мы просто зачитаемся. Пользователь должен найти на страницах нашего сайта ответ на свой вопрос. Просмотрел оглавление, нашел нужный пункт, перешел, бегло прошелся по абзацам, выбрал нужный и прочитал. Вот что нужно нам от пользователя – удовлетворение его запроса (вопроса).

Использование абзацев

С теорией разобрались, давайте посмотрим, как это выглядит на практике. В пределах блока body использовать абзацы можно в любом месте. Для этого в HTML используется тег <p>. Этот парный тег, а значит нужно помнить, что его нужно закрывать.

<p>Съешь еще этих мягких французских булок да выпей чаю</p>

По умолчанию между абзацами расстояние = 1em. Это специальная единица, которая равна размеру шрифта. Удобство в том, что изменив размер шрифта, расстояние так же измениться. Забегая вперед, скажу, что у любого тега можно указать стиль отображения через таблицу, называемую css (об этом позже). А можно прописать стиль непосредственно в теге с помощью атрибута style:

<p style=“margin:0; text-indent:1.5em;“>Съешь еще этих мягких французских булок да выпей чаю</p>
<p style=“margin:0; text-indent:1.5em;“>Съешь еще этих мягких французских булок да выпей чаю</p>

Опять же, забегая вперед, margin:0; уберет все отступы абзаца, сдвинув абзацы в сплошной текст, а text-indent:1.5em; сделает отступ для первого предложения. Таким образом, мы получим абзацы в русском стиле – без отступов между строками, но с красной строки.

По правилам хорошего тона написания HTML, весь текст должен быть заключен в теги абзацев <p>.

Атрибуты и значения

align = “left | right | center | justify“ – определяет выравнивание.
left – по левому краю,
right – по правому краю,
center – по центру,
justify – по ширине.

Так же могут быть применены стандартные атрибуты, например style, class, id,…

Пример:

HTML:

<p align="center"><em><strong>Этот</strong> текст абзаца размещен по центру.</em></p>

Результат:

Этот текст абзаца размещен по центру.

HTML параграф не может содержать внутри себя блочные элементы, такие как заголовки <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, блок <div> и другие параграфы. Но может содержать теги, относящиеся к форматированию текста, например <strong>, <bold>, <em>.

Назначение заголовков

С заголовками проще и понятнее. Здесь особо объяснять нечего. Заголовки служат для обозначения основной мысли текста. У заголовков в HTML есть уровни вложенности, которые образуют подзаголовки. Таких уровней шесть. Каждому уровню заголовков можно придать свой собственный размер, шрифт, цвет и прочие индивидуальные особенности. Если говорить про заголовки не только с технической точки зрения, но и с точки зрения СЕО, то заголовки нужно использовать по назначению, и в самом верхнем уровне должен быть только один основной заголовок на странице. Это важно для поисковиков.

Применение заголовков

Как и абзац, заголовок парный тег. Может использоваться один из:

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Можно использовать стили для каждого заголовка непосредственно в HTML коде, можно «прикрутить» с помощью CSS.

Атрибуты и значения

align = “left | right | center | justify“ – определяет выравнивание.
left – по левому краю,
right – по правому краю,
center – по центру,
justify – по ширине.

Так же могут быть применены стандартные атрибуты, например style, class, id,…

Пример:

HTML:

<h3 align=center>Заголовок по центру страницы.</h3>

Результат:

Заголовок по центру страницы.

Самое главное – это помнить, что всё должно быть в меру. Тег <h1> показывает нам где в тексте самый главный заголовок – тема нашей статьи (страницы). Он должен быть один на странице. Весь текст должен быть разбит на абзацы. Создавайте приятные на вид и понятные тексты, в которых легко ориентироваться человеку – и тогда у вас будут хорошие поведенческие факторы. А поисковики это любят! Всем успехов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.