Как сделать зачеркнутый текст в html

В HTML для отображения зачеркнутого текста используется тег <s> или <del>. Тег <s> применяется для стилистического эффекта, когда необходимо показать устаревшую или неактуальную информацию, не влияя на смысл документа.

Тег <del> предназначен для указания удаленного контента. Его преимущество в том, что современные поисковые системы и вспомогательные технологии распознают его как сигнал об изменении текста, что важно при редактировании документов или юридических заметок.

Применение выглядит просто: <s>старый текст</s> или <del>удаленный текст</del>. При этом оба тега поддерживаются всеми современными браузерами и корректно отображаются без дополнительных CSS-правил.

Для более гибкого контроля можно комбинировать зачеркнутый текст с другими тегами, например, <s>важное изменение</s>, чтобы одновременно выделить и показать устаревшую информацию.

Выбор между <s> и <del> зависит от цели: визуальное оформление или документирование изменений. В реальных проектах часто используют <s> для интерфейсов и <del> для редактируемых текстов с историей версий.

Использование тега <del> для вычеркнутого текста

Тег <del> в HTML обозначает удалённый или устаревший контент. Он визуально вычеркивает текст и сохраняет смысловую семантику, указывая на изменения в документах. Например, в юридических или редакционных публикациях <del> позволяет фиксировать удалённые данные без потери истории.

Применение тега <del> не ограничивается визуальным эффектом: современные поисковые системы учитывают его для анализа изменений текста. В отличие от CSS-подхода через text-decoration: line-through;, <del> сообщает о намеренном удалении информации.

Для корректного использования рекомендуется сочетать <del> с атрибутом cite, указывающим источник изменения, и datetime, фиксирующим дату корректировки. Пример: <del cite="https://example.com" datetime="2025-08-26">старый текст</del>. Это особенно важно для документации, статей с обновлениями и юридических материалов.

В интерактивных проектах <del> можно использовать совместно с тегом <ins> для отображения новых версий текста. Такой подход улучшает восприятие изменений и поддерживает структурированную историю редактирования.

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

Применение тега <s> для простого перечеркивания

Тег <s> предназначен для обозначения текста, который утратил актуальность или больше не применим. В отличие от <del>, он не подразумевает удаления информации, а лишь визуальное перечеркивание.

Синтаксис тега прост:

<s>Ваш текст здесь</s>

Особенности использования:

Тег является строчным, поэтому не нарушает поток текста.
Поддерживается всеми современными браузерами без дополнительных стилей.
Можно применять внутри других тегов, таких как , или <li>.

Примеры практического применения:

Отметка устаревших цен в интернет-магазине:
<s>2000 руб.</s> 1500 руб.
Подчеркивание изменений в документации:
Текущий статус: <s>В разработке</s> Готово
Отображение отмененных условий в предложениях:
<s>Бесплатная доставка</s> – доставка по стандартной цене

Рекомендации по использованию:

Не использовать для акцентов или декоративного перечеркивания без смысловой нагрузки.
Для указания удаления информации лучше применять <del> с датой изменения.
Комбинировать с для дополнительной стилизации, если нужно изменить цвет линии или толщину.

Создание зачеркнутого текста через CSS свойство text-decoration

Для применения зачеркнутого текста в CSS используется свойство text-decoration с параметром line-through. Это работает как для отдельных элементов, так и для классов, позволяя гибко управлять стилем текста.

Пример использования для отдельного элемента:

Зачеркнутый текст

Для более масштабного применения создаются CSS-классы. Например:

.strikethrough { text-decoration: line-through; }

и в HTML:

Текст с линией посередине

Свойство text-decoration поддерживает комбинирование значений, что позволяет одновременно использовать подчеркивание и зачеркивание:
text-decoration: underline line-through;

Для управления толщиной и стилем линии применяется text-decoration-thickness и text-decoration-style. Например:
text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-style: wavy;

создает заметное волнистое зачеркивание.

Свойство наследуется, если задано на родительском элементе, но можно отменить для дочерних с помощью text-decoration: none;. Это позволяет точно контролировать, какие элементы должны быть зачеркнутыми.

Для адаптивного дизайна рекомендуется задавать text-decoration-thickness в относительных единицах (em), чтобы линия корректно масштабировалась вместе с размером шрифта.

Зачеркивание текста с помощью inline-стилей

Для применения зачёркивания через inline-стили используется свойство text-decoration со значением line-through. Это позволяет управлять зачёркиванием конкретного фрагмента текста без создания отдельного CSS-класса.

Пример синтаксиса: Зачеркнутый текст. Тег span подходит для коротких фрагментов текста, а div – для целых блоков.

Для точной настройки можно комбинировать с другими стилями: цветом, толщиной и шрифтом. Например: Важно. Это создаёт яркий зачёркнутый текст с подчёркнутой важностью.

Использование inline-стилей удобно для быстрого тестирования или внесения изменений в отдельные элементы, но для повторного применения на нескольких страницах рекомендуется переносить стили в отдельный CSS-файл.

Множественные способы сочетания зачеркнутого и выделенного текста

Для одновременного применения зачёркивания и выделения текста HTML предоставляет несколько подходов. Самый прямой способ – объединение тегов <del> или <s> с  или . Например, <del>Текст</del> подчеркнёт важность и одновременно зачеркнёт слова.

Можно менять порядок вложения тегов. <del>Текст</del> делает текст наклонным и зачёркнутым. При этом браузеры корректно отображают оба эффекта, а CSS не требуется.

Использование CSS через тег  обеспечивает точный контроль над стилем. Пример: Текст позволяет комбинировать жирность, наклон и цвет с зачёркиванием, что полезно при динамическом форматировании.

Для более сложных комбинаций можно применять несколько слоёв . Например, Текст создаёт одновременно зачёркнутый, наклонный и выделенный фоновой подсветкой текст.

Важно соблюдать семантику: <del> лучше использовать для удаления или исправления информации, а  и  – для смыслового акцента. Это сохраняет доступность и корректное восприятие экранными читалками.

При необходимости применения анимаций или интерактивных эффектов комбинации CSS позволяют менять стиль зачёркивания на ходу: Текст изменяет цвет при наведении без потери форматирования.

Использование JavaScript для динамического перечеркивания

Для динамического перечеркивания текста в HTML можно использовать метод element.style.textDecoration. Он позволяет менять стиль текста без изменения разметки. Например, при клике на элемент его текст можно зачеркнуть и снять перечеркивание по повторному клику.

Пример кода:

const item = document.getElementById('task'); item.addEventListener('click', () => { if (item.style.textDecoration === 'line-through') { item.style.textDecoration = 'none'; } else { item.style.textDecoration = 'line-through'; } });

Для работы с несколькими элементами используют querySelectorAll и цикл forEach. Это позволяет добавлять динамическое перечеркивание ко всем элементам с одинаковым классом.

Пример для списка:

const tasks = document.querySelectorAll('.task'); tasks.forEach(task => { task.addEventListener('click', () => { task.style.textDecoration = task.style.textDecoration === 'line-through' ? 'none' : 'line-through'; }); });

Можно комбинировать с сохранением состояния в localStorage, чтобы перечеркнутые элементы оставались таковыми после перезагрузки страницы. Для этого при каждом изменении стиля записывают состояние в localStorage, а при загрузке страницы восстанавливают его.

JavaScript также позволяет добавлять анимацию перечеркивания с помощью CSS-переменных и transition, изменяя свойство width псевдоэлемента ::after для плавного появления линии.

Вопрос-ответ:

Как сделать зачеркнутый текст в HTML с помощью стандартных тегов?

Для создания зачеркнутого текста используется тег или . Тег применяется для текста, который утратил актуальность, но не удален, а чаще указывает на удаленные элементы. Например: <s>старый текст</s> или <del>удаленный текст</del>. Браузеры отображают их одинаково – текст будет перечеркнут.

Можно ли сделать зачеркнутый текст с помощью CSS?

Да, CSS позволяет задать зачеркнутый текст через свойство text-decoration. Например: текст. Такой способ удобен, если нужно применять стиль выборочно или для множества элементов без использования дополнительных тегов.

Чем отличаются теги ~~и ~~при работе с поисковыми системами и доступностью?~~~~

Тег несет семантическую нагрузку: поисковые системы и вспомогательные технологии распознают его как удаленный контент. Тег просто перечеркивает текст визуально, не давая дополнительной информации о его состоянии. Если важно показать, что текст был изменен или удален, лучше использовать .

Можно ли комбинировать зачеркнутый текст с другими стилями, например, цветом или курсивом?

Да, зачеркнутый текст можно комбинировать с другими CSS-свойствами. Например, пример сделает текст перечеркнутым, красным и курсивным одновременно. Важно помнить, что порядок стилей в CSS не влияет на визуальный результат, если они не конфликтуют.

Как сделать зачеркнутый текст в HTML с использованием классов?

Можно создать класс в CSS и присвоить его любому элементу. Например, в CSS: .crossed { text-decoration: line-through; }, а в HTML: зачеркнутый текст. Такой метод удобен для повторного использования одного и того же оформления на нескольких элементах страницы.

Как сделать зачеркнутый текст в HTML без использования CSS?

В HTML есть тег , который позволяет зачеркнуть текст прямо в разметке. Например, запись ~~Пример текста~~ отобразится как зачеркнутый текст. Этот способ прост и не требует подключения стилей, но считается устаревшим для оформления, поэтому его чаще используют для подчёркивания отменённых элементов, вроде старых цен или исправленных слов.