1. Текст

HTML предоставляет множество дискрипторов для оформления, структурирования и стилизации текста. Вот описание основных из них, примеры и рекомендации по использованию:

Абзац текста

Описание: Используется для создания отдельных блоков текста.

Пример:

<p>This is a paragraph of text.</p>

Рекомендации:

  • Используйте для разделения текста на логические абзацы.
  • Не заменяйте <p> на <div> без необходимости, чтобы сохранить семантическую ценность.

Выделение жирным

  • <b>: Выделяет текст визуально без дополнительного смыслового акцента.
  • <strong>: Выделяет текст жирным и добавляет значение важности.

Пример:

<p>This is <b>bold text</b> and this is <strong>important text</strong>.</p>

Рекомендации:

  • Для значимого текста используйте <strong>.
  • <b> применяйте для визуального акцента без семантической нагрузки.

Курсив

  • <i>: Делает текст курсивным без добавления смысла.
  • <em>: Выделяет текст курсивом и подчеркивает его важность.

Пример:

<p>This is <i>italic text</i> and this is <em>emphasized text</em>.</p>

Рекомендации:

  • Используйте <em> для акцента на важном тексте.
  • <i> подойдет для оформления, например, иностранных слов или названий.

Подчеркнутый текст

  • <u>: Визуально подчеркивает текст.
  • <ins>: Используется для текста, добавленного в документ (семантическое значение).

Пример:

<p>This is <u>underlined text</u> and this is <ins>inserted text</ins>.</p>

Рекомендации:

  • Для визуального подчеркивания избегайте <u>, чтобы не путать с гиперссылками.
  • <ins> используйте, если хотите указать на добавленный контент.

Мелкий текст

Описание: Уменьшает размер текста, обычно для уточнений или примечаний.

Пример:

<p>Copyright <small>© 2024</small></p>

Рекомендации:

  • Применяйте для менее важной информации, например, сносок.

Выделение текста

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

Пример:

<p>This is <mark>highlighted text</mark>.</p>

Рекомендации:

  • Используйте для акцента на ключевых частях текста.

Зачеркнутый текст

  • <del>: Используется для текста, который был удален.
  • <s>: Зачеркивает текст без указания на удаление.

Пример:

<p>This is <del>deleted text</del> and this is <s>strikethrough text</s>.</p>

Рекомендации:

  • <del> используйте, если хотите показать изменения в тексте.
  • <s> применяйте для оформления, например, чтобы указать на устаревшую цену.

Цитата

Описание: Используется для длинных цитат.

Пример:

<blockquote>
    "The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt
</blockquote>

Рекомендации:

  • Используйте для цитат, которые занимают более одной строки.
  • Добавляйте атрибут cite для указания источника.

Код

Описание: Отображает текст как моноширинный (например, для кода).

Пример:

<p>To print "Hello World" in Python, use <code>print("Hello World")</code>.</p>

Рекомендации:

  • Применяйте для небольших фрагментов кода. Для больших блоков используйте <pre>.

Предформатированный текст

Описание: Сохраняет пробелы и переносы строки в исходной разметке.

Пример:

<pre>
Line 1
    Indented Line 2
</pre>

Рекомендации:

  • Используйте для отображения формата исходного текста, например, кода.