Выделяешь ли текст жирным добавляя и стилизуя тег span

Выделяешь ли текст жирным добавляя и стилизуя тег span

При разработке веб-приложений часто нужно выделить текст жирным. Существует важное различие между использованием семантических тегов (strong, b) и просто стилизацией span'а. Правильный выбор влияет на семантику HTML, доступность и SEO.

Различие между тегами

Тег <strong>

<!-- Семантический тег для логически важного контента -->
<p>Это <strong>очень важная информация</strong> для понимания.</p>

• Семантическое значение: показывает, что текст логически важен
• Стиль по умолчанию: жирный (font-weight: bold)
• Доступность: скрин-ридеры выделяют интонацией
• SEO: поисковые системы придают больший вес содержимому

Тег <b>

<!-- Презентационный тег, без семантического значения -->
<p>Обратите внимание на <b>эту часть текста</b> в инструкции.</p>

• Семантическое значение: отсутствует, просто визуальное выделение
• Стиль по умолчанию: жирный
• Доступность: скрин-ридеры не выделяют
• SEO: поисковые системы не учитывают

Тег <em>

<!-- Для логически выделенного текста -->
<p>Это <em>действительно</em> важно понять.</p>

• Семантическое значение: логическое выделение (обычно наклонный)
• Стиль по умолчанию: курсив (font-style: italic)

Тег <i>

<!-- Просто курсив без семантики -->
<p>Название фильма: <i>Начало</i></p>

Стилизация span - ПЛОХОЙ подход

<!-- ПЛОХО! Теряется семантика -->
<p>Это <span style="font-weight: bold;">очень важная</span> информация.</p>

<!-- ПЛОХО! Добавляем класс, но все равно без семантики -->
<p>Это <span class="bold">очень важная</span> информация.</p>

<!-- ХОРОШО! Сохраняется семантика -->
<p>Это <strong>очень важная</strong> информация.</p>

Почему не нужно использовать span с стилями для жирного текста?

1. Семантика

<!-- Теряется контекст для машин и вспомогательных технологий -->
<span class="font-bold">Важная информация</span>

<!-- Остается контекст -->
<strong>Важная информация</strong>

2. Доступность

<!-- Скрин-ридер прочитает просто текст -->
<span class="bold">Специальное предложение</span>

<!-- Скрин-ридер выделит интонацией -->
<strong>Специальное предложение</strong>

3. SEO

<!-- Поисковые системы не учитывают стилизацию -->
<p>Купите <span class="bold">премиум подписку</span> со скидкой 50%</p>

<!-- Поисковые системы понимают важность текста -->
<p>Купите <strong>премиум подписку</strong> со скидкой 50%</p>

Правильные подходы к выделению текста

HTML5 - семантический подход

<!-- Для логически важного текста -->
<p>Это <strong>очень важная информация</strong> для успеха.</p>

<!-- Для выделенного (выделяемого) текста -->
<p>Обратите внимание на <em>эту часть текста</em>.</p>

<!-- Когда важна только визуализация (редко) -->
<p>Название книги <i>Война и мир</i> известно всем.</p>

<!-- Для технических обозначений -->
<p>Формула: <b>E=mc²</b></p>

Стилизация семантических тегов

Если нужна специальная стилизация, стилизуй семантические теги:

/* Кастомный стиль для strong -->
strong {
  color: #d63031;
  font-weight: 700;
  text-transform: uppercase;
}

/* Кастомный стиль для em -->
em {
  font-style: italic;
  color: #0984e3;
  font-weight: 600;
}

<!-- Используем стилизованные семантические теги -->
<p>Это <strong>очень важная информация</strong> для понимания.</p>
<p>Это <em>действительно</em> нужно заметить.</p>

React компоненты - правильный подход

// ПЛОХО! Семантика теряется
interface BoldProps {
  children: React.ReactNode;
}

function Bold({ children }: BoldProps) {
  return <span className="font-bold">{children}</span>;
}

// ХОРОШО! Сохраняем семантику
function Strong({ children }: { children: React.ReactNode }) {
  return <strong className="font-bold text-red-600">{children}</strong>;
}

function Emphasis({ children }: { children: React.ReactNode }) {
  return <em className="text-blue-600">{children}</em>;
}

// Использование
function Article() {
  return (
    <article>
      <p>Это <Strong>очень важная информация</Strong> для успеха.</p>
      <p>Это <Emphasis>действительно</Emphasis> нужно заметить.</p>
    </article>
  );
}

Tailwind CSS с семантическими тегами

<!-- Стилизуем семантический тег через Tailwind -->
<p class="text-base leading-relaxed">
  Это <strong class="font-bold text-red-600">очень важная информация</strong>.
</p>

<!-- Для курсива -->
<p class="text-base leading-relaxed">
  Это <em class="italic text-blue-600">действительно</em> важно.
</p>

// В TypeScript компоненте с Tailwind
export function Article() {
  return (
    <article className="prose">
      <p>
        Это <strong className="text-red-600">очень важная информация</strong> для понимания.
      </p>
      <p>
        Обратите внимание на <em className="text-blue-600">эту часть</em> текста.
      </p>
    </article>
  );
}

Когда использовать каждый тег

Чеклист правильного использования

• Использую <strong> для логически важного контента
• Использую <em> для выделения с эмфазой
• Не стилизую span для жирного текста
• Стилизую семантические теги, если нужен кастомный вид
• Проверяю семантику с помощью скрин-ридера
• Убеждаюсь, что структура понятна без стилей

Семантический HTML — это не просто лучшая практика, это основа доступного и SEO-оптимизированного веб-приложения.