Тег <div> и <span> в HTML
Элемент span в HTML - это универсальный строчный контейнер, который применяется для точечного оформления или логического выделения частей содержимого.
Основные сферы использования <span>
Стилизация текста
Работа с JavaScript
Формы и валидация
Микроразметка и семантика
Верстка сложных компонентов
Анимация и эффекты
Таблицы данных
Интеграция с фреймворками
Примеры использования тега <span>
1. Стилизация текста
Можно выделять важные части текста, добавлять акценты,
помечать ключевые моменты или показывать устаревшую информацию.
Также можно менять цвет, размер
и шрифт отдельных элементов текста.
2. Работа с JavaScript
Показать скрытое содержимое
Это содержимое было скрыто и показано с помощью JavaScript через обработчик события на элементе span.
Запустить анимацию
Этот текст будет анимирован
3. Формы и валидация
Email адрес:
Проверить email
4. Микроразметка и семантика
Рейтинг продукта:
4.8 из
5 на основе
125 отзывов
Цена: 49.99 USD
5. Верстка сложных компонентов
Вкладка 1
Вкладка 2
Вкладка 3
Содержимое первой вкладки, реализованной с помощью span.
Содержимое второй вкладки.
Содержимое третьей вкладки.
6. Анимация и эффекты
Наведите курсор на этот текстЭто всплывающая подсказка на чистом CSS чтобы увидеть подсказку.
Подсветить текст
Этот текст будет подсвечен анимацией
7. Таблицы данных (эмуляция)
Продукт
Цена
Количество
Телефон
299.99 USD
15 шт.
Ноутбук
899.99 USD
8 шт.
8. Интеграция с фреймворками (эмуляция)
Кнопка фреймворка
Имя пользователя
Панель пользователя
Итог
Итог - span нейтральный элемент для точечных задач: скриптов, семантики и доступности. Его главное преимущество - он не меняет структуру документа и остается невидимым для пользователя до применения стилей или скриптов.
Эта страница создана исключительно с использованием тегов div и span (за исключением обязательных meta-тегов) в демонстрационных целях.