Где используется тег span?

Где используется тег span?

Span — это один из самых часто используемых HTML тегов. Это простой, но мощный инструмент для стилизации и манипуляции текстом и элементами на странице.

Что такое span?

<!-- span — встроенный (inline) элемент без семантического значения -->
<p>Это обычный текст, <span>а это выделенный текст</span>, и снова обычный.</p>

Span — это:

• Встроенный (inline) элемент — не создаёт новую строку
• Нейтральный — не имеет семантического значения
• Универсальный — используется для стилизации и скрипта
• Лёгкий — не добавляет дополнительный вес

Основные варианты использования

1. Стилизация части текста

<!-- Выделить цветом только часть текста -->
<p>В компании работают <span style="color: red;">100 сотрудников</span>, которые разрабатывают...</p>

<!-- С классом CSS -->
<p>Посетите наш <span class="highlight">официальный сайт</span> для получения информации</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
  padding: 2px 4px;
}

2. Выделение ключевых слов

<h2>Результаты поиска</h2>
<p>Мы нашли <span class="search-term">React</span> в 1500 статьях</p>
<p>Популярные статьи о <span class="search-term">React</span> для начинающих</p>

.search-term {
  background-color: #ffeb3b;
  padding: 2px 4px;
}

3. Форматирование текста в разных контекстах

<!-- Выделение цены -->
<p>Стоимость: <span class="price">$99.99</span></p>

<!-- Выделение статуса -->
<p>Статус: <span class="status-active">Активно</span></p>

<!-- Выделение кода в тексте -->
<p>Используй функцию <span class="code">getElementById()</span> для поиска элемента</p>

4. Подсчёт символов или преобразования

<!-- Отобразить цену с валютой -->
<p>Цена: <span class="currency">$</span><span class="amount">99.99</span></p>

<!-- Счётчик символов -->
<textarea id="text"></textarea>
<p>Осталось <span id="char-count">500</span> символов</p>

5. Иконки и инлайн элементы

<!-- Иконка рядом с текстом -->
<button>
  <span class="icon">🔍</span>
  <span>Поиск</span>
</button>

<!-- Значок рейтинга -->
<p>
  <span class="rating">★★★★☆</span> (4 из 5 звёзд)
</p>

Практические примеры в React

1. Выделение части текста

import React from 'react';
import { cn } from '@/lib/utils';

interface HighlightProps {
  text: string;
  searchTerm: string;
  className?: string;
}

export function Highlight({ text, searchTerm, className }: HighlightProps) {
  // Разбиваем текст на части и выделяем совпадения
  const regex = new RegExp(`(${searchTerm})`, 'gi');
  const parts = text.split(regex);
  
  return (
    <span>
      {parts.map((part, i) => (
        regex.test(part) ? (
          <span key={i} className={cn('bg-yellow-200 font-medium', className)}>
            {part}
          </span>
        ) : (
          <span key={i}>{part}</span>
        )
      ))}
    </span>
  );
}

// Использование
<Highlight 
  text="React — это библиотека для создания интерфейсов" 
  searchTerm="React" 
/>

2. Динамический счётчик

export function CharCounter() {
  const [text, setText] = React.useState('');
  const maxChars = 500;
  const remaining = maxChars - text.length;
  
  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        maxLength={maxChars}
      />
      <p>
        Осталось <span className="font-medium text-blue-600">{remaining}</span> символов
      </p>
    </div>
  );
}

3. Форматирование цены

interface PriceProps {
  amount: number;
  currency?: string;
}

export function Price({ amount, currency = '$' }: PriceProps) {
  const formatted = amount.toFixed(2);
  
  return (
    <span className="text-lg font-semibold">
      <span className="text-sm">{currency}</span>
      {formatted}
    </span>
  );
}

// Использование
<Price amount={99.99} /> // Выведет: $99.99

4. Подсвечивание синтаксиса

import React from 'react';

interface SyntaxHighlightProps {
  code: string;
}

export function SyntaxHighlight({ code }: SyntaxHighlightProps) {
  const keywords = ['const', 'let', 'function', 'return', 'if', 'else'];
  const strings = /["'`].*?["'`]/g;
  const comments = /\/\/.*?$/gm;
  
  let highlightedCode = code;
  
  // Подсвечиваем ключевые слова
  keywords.forEach(keyword => {
    const regex = new RegExp(`\\b${keyword}\\b`, 'g');
    highlightedCode = highlightedCode.replace(
      regex,
      `<span class="text-purple-600">${keyword}</span>`
    );
  });
  
  return (
    <pre className="bg-gray-100 p-4 rounded">
      <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
    </pre>
  );
}

5. Badge компонент

interface BadgeProps {
  label: string;
  variant?: 'primary' | 'success' | 'danger' | 'warning';
}

export function Badge({ label, variant = 'primary' }: BadgeProps) {
  const variantStyles = {
    primary: 'bg-blue-100 text-blue-800',
    success: 'bg-green-100 text-green-800',
    danger: 'bg-red-100 text-red-800',
    warning: 'bg-yellow-100 text-yellow-800',
  };
  
  return (
    <span className={cn('px-2 py-1 rounded-full text-xs font-medium', variantStyles[variant])}>
      {label}
    </span>
  );
}

// Использование
<Badge label="Новое" variant="success" />
<Badge label="Популярное" variant="primary" />
<Badge label="Архив" variant="danger" />

Span vs другие элементы

<!-- Span: просто контейнер без семантики -->
<p>Это <span>обычный текст в контейнере</span></p>

<!-- Strong: для семантически важного текста -->
<p>Это <strong>очень важный текст</strong></p>

<!-- Em: для эмфазы -->
<p>Это <em>подчёркнутый текст</em></p>

<!-- Mark: для выделённого текста -->
<p>Это <mark>результат поиска</mark></p>

<!-- Code: для кода в тексте -->
<p>Функция <code>getElementById()</code> ищет элемент</p>

Когда использовать span?

Хорошие случаи использования

<!-- 1. Стилизация части текста -->
<p>Цена: <span class="price">$99</span></p>

<!-- 2. Оборачивание текста для JavaScript -->
<p>Привет, <span id="user-name"></span>!</p>

<!-- 3. Выделение ключевого слова -->
<p>Результаты для: <span class="highlight">JavaScript</span></p>

<!-- 4. Иконки рядом с текстом -->
<button><span class="icon">✓</span> Готово</button>

<!-- 5. Счётчик или динамический текст -->
<span id="cart-count" class="badge">0</span>

Плохие случаи использования

<!-- Плохо: span вместо семантических элементов -->
<span style="font-weight: bold; font-size: 24px;">Заголовок</span>
<!-- Лучше: <h1>Заголовок</h1> -->

<!-- Плохо: span вместо <p> для блока текста -->
<span>Это целый абзац текста, который должен быть в отдельном элементе...</span>
<!-- Лучше: <p>Это целый абзац текста...</p> -->

<!-- Плохо: span вместо семантических элементов для кода -->
<span style="font-family: monospace;">const x = 5;</span>
<!-- Лучше: <code>const x = 5;</code> -->

Производительность с span

<!-- Хорошо: минимальное использование span -->
<p>Текст с <span class="highlight">одним выделением</span></p>

<!-- Плохо: слишком много span элементов -->
<p>
  <span>Текст</span> <span>с</span> <span>очень</span> <span>большим</span>
  <span>количеством</span> <span>span</span> <span>элементов</span>
</p>

Доступность (Accessibility)

<!-- Плохо: span скрывает смысл -->
<p>Статус: <span>✓ Активно</span></p>

<!-- Лучше: используй aria-label -->
<p>Статус: <span aria-label="Активно">✓</span></p>

<!-- Или используй семантические элементы -->
<p>Статус: <strong aria-label="Активно">✓ Активно</strong></p>

Заключение

Span — это универсальный инструмент для:

• Стилизации части текста или элемента
• Группировки текста для JavaScript манипуляции
• Выделения ключевых слов и чисел
• Создания инлайн компонентов (иконки, бейджи, счётчики)

Основной принцип: используй span когда нужна стилизация или JavaScript управление встроенным элементом, но нет семантического смысла. Для семантически значимого контента используй более специфичные теги (strong, em, code, mark).