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

Заголовки всех уровней

Заголовки помогают структурировать контент и улучшают читаемость. Вот примеры всех уровней:

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

Заголовок H1 обычно используется только один раз на странице — для основного заголовка статьи.

Заголовок второго уровня (H2)

Заголовки H2 разделяют основные секции статьи. Они имеют декоративную линию снизу.

Заголовок третьего уровня (H3)

Заголовки H3 используются для подразделов внутри секций H2.

Заголовок четвёртого уровня (H4)

Заголовки H4 подходят для ещё более детального деления контента.

Заголовок пятого уровня (H5)

Заголовки H5 используются редко, но могут быть полезны для сложных документов.

Заголовок шестого уровня (H6)

Заголовки H6 — самые маленькие, часто стилизованы как капитель или с особым форматированием.

Форматирование текста

Текст можно оформлять различными способами для выделения важной информации:

Жирный текст используется для выделения ключевых понятий
Курсивный текст подчёркивает термины или названия
Жирный курсив комбинирует оба стиля
~~Зачёркнутый текст~~ показывает устаревшую информацию
==Выделенный текст== привлекает особое внимание
Инлайн-код для названий функций, переменных или команд

Обычный параграф с обычным текстом. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Списки

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

Простой маркированный список:

Первый элемент списка
Второй элемент списка
Третий элемент списка
Четвёртый элемент с более длинным текстом, который может переноситься на несколько строк

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

Нумерованные списки идеальны для пошаговых инструкций:

Определите цель обучения
Выберите подходящий курс
Составьте расписание занятий
Начните обучение
Практикуйтесь регулярно

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

Списки могут содержать подсписки:

Основы коучинга
- Что такое коучинг
- История развития
- Основные принципы
Методологии
- GROW модель
- Колесо баланса
- Шкалирование
  - Количественное шкалирование
  - Качественное шкалирование
Практика
- Работа с клиентами
- Супервизия

Смешанные вложенные списки

Первый этап
- Подготовка материалов
- Настройка окружения
Второй этап
- Выполнение задач
  1. Задача А
  2. Задача Б
  3. Задача В
- Проверка результатов
Третий этап

Цитаты

Блок цитаты используется для выделения важных мыслей или цитирования источников:

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

— Международная федерация коучинга (ICF)

Ещё одна цитата без указания автора:

Единственный способ делать великие дела — любить то, что вы делаете.

Код

Инлайн-код

Используйте инлайн-код для упоминания переменных, функций() или коротких команд терминала.

Блоки кода

Для больших фрагментов кода используются блоки:

// Пример функции для расчёта прогресса обучения
function calculateProgress(completed, total) {
  if (total === 0) return 0;

  const percentage = (completed / total) * 100;
  return Math.round(percentage);
}

// Использование
const progress = calculateProgress(7, 10);
console.log(`Ваш прогресс: ${progress}%`);

Пример CSS кода:

.course-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-4px);
}

Таблицы

Таблицы помогают структурировать сравнительную информацию:

Формат обучения	Преимущества	Недостатки	Стоимость
Онлайн	Гибкость, доступность	Меньше живого общения	₽₽
Офлайн	Живое общение, нетворкинг	Привязка к месту	₽₽₽
Гибрид	Баланс форматов	Сложнее организация	₽₽₽

Ещё пример таблицы с выравниванием:

Уровень	Опыт	Рекомендуемые курсы
Начинающий	0-1 год	Основы коучинга
Средний	1-3 года	Продвинутые техники
Эксперт	3+ лет	Мастерские классы

Горизонтальная линия

Горизонтальная линия разделяет тематические блоки:

После линии начинается новый смысловой блок.

Ссылки

Текст может содержать внутренние ссылки на другие страницы сайта и внешние ссылки на сторонние ресурсы.

Выноски (Callouts)

Информация: Это информационная выноска для дополнительных пояснений.

Внимание: Это предупреждение о возможных проблемах.

Успех: Это сообщение об успешном выполнении действия.

Ошибка: Это сообщение об ошибке или критичной информации.

Комбинированный контент

Можно комбинировать разные элементы для создания насыщенного контента:

Пример: Выбор курса

При выборе курса обратите внимание на следующие ключевые факторы:

Аккредитация программы
- Проверьте наличие сертификации ICF
- Узнайте о партнёрствах с профессиональными организациями
Опыт преподавателей

Выбирайте программы, где преподаватели имеют не менее 5 лет практического опыта.
Формат обучения

Критерий Онлайн Офлайн
Гибкость ✓✓✓ ✓
Нетворкинг ✓ ✓✓✓
Стоимость ✓✓✓ ✓
Отзывы выпускников

Критерий	Онлайн	Офлайн
Гибкость	✓✓✓	✓
Нетворкинг	✓	✓✓✓
Стоимость	✓✓✓	✓

После анализа этих факторов используйте код для расчёта соответствия:

def calculate_match(course, preferences):
    score = 0
    for key, weight in preferences.items():
        if course.get(key):
            score += weight
    return score / sum(preferences.values()) * 100

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