Семантическая разметка

Структура текста

Язык семантической разметки оперирует структурными элементами текста.

На верхнем уровне текст состоит из блочных элементов: абзацев, заголовков, списков, таблиц и т.д.

Блоки могут содержать строчные элементы: ссылки, термины, эмфазис и т.д.

Основные правила

• Пустые строки: блочные элементы отделяются друг от друга как минимум одной пустой строкой.
• Значащие отступы: количество пробелов в начале строки играет важную роль в структурных блоках (например, в списках).
• Пробелы: отступы задаются только обычными пробелами с кодом 0x20.

Абзац

Строка текста автоматически становится абзацем (HTML-элемент <p>).

Абзацы (как и остальные блоки) отделяются друг от друга пустой строкой.

Пример: абзацы

Это первый абзац.

Это второй абзац.
Этот текст также относится ко второму абзацу,
тк. не отделяется от него пустой строкой.

Это третий абзац.

Заголовки

Заголовки начинаются с символов решетки #.

Количество «решеток» определяет уровень заголовка: от первого до шестого (HTML-элементы <h1> — <h6>).

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

# Заголовок первого уровня

## Заголовок второго уровня

### Заголовок третьего уровня

#### Заголовок четвертого уровня

Заголовки

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

Заголовки

Заголовки не связаны друг с другом иерархически.

Заголовок первого уровня

Заголовок первого уровня в большинстве случаев подставляется автоматически, поэтому его не следует использовать.

Контролируйте вложенность

• Упрощайте структуру документов, не допускайте уход «в глубину».
• Страница не должна иметь больше двух уровней вложенности (например, раздел и подраздел).
• Рассмотрите возможность разделения страницы на несколько самостоятельных документов.

Списки

Списки позволяют оформлять перечисления. Списки состоят из элементов, причем каждый элемент — это самостоятельный блок.

Элементы списка начинаются маркерами: звездочкой * или цифрой с точкой 1..

После маркера обязательно ставится пробел.

Маркированный список

* Элемент 1

* Элемент 2

* Элемент 3

Этот текст уже не относится к списку.

Нумерованный список

1. Элемент 1

2. Элемент 2

3. Элемент 3

Этот абзац не относится к списку.

Составные элементы списка

Блочные элементы можно поместить «внутрь списка» с помощью отступов:

1. Список, первый элемент.

   Этот абзац принадлежит первому элементу.

2. Второй элемент списка.

Вложенные списки

Списки могут быть смешанными, т.е. нумерованный список может содержать вложенный маркированный и наоборот.

* Элемент 1

  * Элемент 1-1
  * Элемент 1-2
  * Элемент 1-3

* Элемент 2

  1. Элемент 2-1
  1. Элемент 2-2

Пример: вложенные списки

* Здесь элемент списка состоит из абзаца.
  Далее следует вложенный список:

  * один;
  * два;
  * три;

  И еще один абзац, все еще в первом элементе «верхнего» списка.

* Но этот текст относится уже ко второму элементу.

А этот текст вообще не принадлежит списку,
он относится к следующему за ним абзацу.

Ссылки

В текст можно вставить ссылку, которая будет открыта в новом окне.

Синтаксис

[Текст ссылки](URL)

Пример: ссылки

Здесь есть [ссылка на обратную связь](http://eduterra.pro/contact.html).

Пример: список ссылок

* [Новости](/blog)

* [Цены](/pricing.html)

* [Обратная связь](/contact.html)

Логическое выделение

Выделение применяется для акцентирования внимания читателя на каком-либо участке текста.

В зависимости от степени выделения можно использовать либо курсивное начертание, либо полужирный шрифт.

Пример: выделение

Этот текст содержит фрагмент, выделенный _курсивным шрифтом_.

Пример: выделение

Этот текст содержит фрагмент, выделенный *полужирным шрифтом*.

Избегайте «пестрящего» текста

Используйте логическое выделение, ссылки и другие элементы оформления только по необходимости.

Перенасыщение текста визуальными элементами усложняет восприятие и рассредотачивает внимание читателя.

Соблюдайте баланс между «голым текстом» и «новогодней ёлкой».