Шпаргалка по тегам. Как оформлять статьи.

Как оформлять статьи: шпаргалка по тегам

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

Заголовки разделов

Для деления статьи на смысловые блоки используйте заголовки <h2>–<h6>. Тег <h1> в статье не нужен — заголовок поста уже выводится темой отдельно. <h2> — крупные разделы, <h3> — подразделы, <h4>–<h6> — более мелкая иерархия внутри текста.

Пример h4

Так выглядит подзаголовок четвёртого уровня — удобен для коротких смысловых врезок внутри раздела.

Пример h5

Мелкий заголовок с прописными буквами — хорош как ярлык-метка перед абзацем.

Пример h6

Самый маленький заголовок, приглушённого цвета — уместен для служебных пометок вроде «Примечание» или «Источник».

---

Абзацы и разделитель

Обычный текст оформляется тегом <p> — так браузер поймёт, что это отдельный абзац с отступом снизу. Тег <hr> (как чуть выше) визуально разделяет крупные смысловые блоки статьи, например конец одной темы и начало следующей.

Списки

Маркированный список <ul> используйте, когда порядок пунктов не важен:

• Проветривание помещения перед началом работы
• Подготовка материалов и инструментов
• Хорошее освещение рабочего места
  • Естественный свет днём
  • Тёплая лампа вечером

Нумерованный список <ol> — когда важен порядок действий, например пошаговая инструкция:

1. Определите цель и настроение помещения
2. Подберите базовую палитру из двух-трёх цветов
3. Расставьте крупную мебель, затем декор

Список определений <dl> удобен для пар «термин — объяснение»:

Минимализм

Подход в дизайне, при котором убирается всё лишнее, а остаётся только функциональное и осмысленное.

Ваби-саби

Японская эстетика несовершенства — ценность естественных, слегка неидеальных форм и текстур.

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

Внутри абзаца часто нужно расставить смысловые акценты. Жирный текст (тег <strong>) — для важных мыслей и терминов. Курсив (<em>) — для смыслового ударения или названий. Подсветка фоном (<mark>) — чтобы буквально выделить фразу, как маркером в книге. Подчёркнутый текст (<u>) применяют редко, обычно для терминов. Зачёркнутый текст (<s> или <del>) — чтобы показать неактуальную информацию, например старую цену. А вот так выглядит мелкий текст (<small>) — для сносок и пояснений, и запись формулы вроде E = mc² или H₂O с помощью <sup> и <sub>.

Цитаты

Когда нужно выделить чужую мысль или цитату из книги, используйте <blockquote>:

Совершенство достигается не тогда, когда уже нечего добавить, а когда уже нечего убрать.

Антуан де Сент-Экзюпери

Код

Если в статье упоминается название файла, команда или переменная — оформляйте её строчным кодом <code>, например: файл называется style.css, а переменная — --rust. Если же нужно показать целый фрагмент кода или команду в терминале — используйте блок <pre><code>:

function hello() {
  console.log("Привет, мир!");
}

А для обозначения нажатия клавиш применяют тег <kbd>, например сочетание Ctrl + C копирует выделенный текст.

Таблицы

Таблица <table> нужна для структурированных данных — сравнений, характеристик, расписаний:

Сравнение стилей интерьера

Стиль	Цветовая гамма	Материалы
Минимализм	Белый, серый, бежевый	Бетон, стекло, металл
Скандинавский	Светлые, пастельные тона	Светлое дерево, текстиль
Джапанди	Тёплый беж, оливковый	Дерево, керамика, лён

Изображение с подписью

Когда картинке нужна подпись-объяснение, оборачивайте её в <figure> с <figcaption>:

Ссылки

И, конечно, обычная ссылка — оформляется тегом <a href="..."> и в этой теме подчёркнута акцентным цветом.