Тег зачеркнутого текста в html

Тег зачеркнутого текста в html

Сервисы
Избранные доки
Метки (все метки)
Дополнительно

До сих пор для зачеркивания текста в HTML-коде широко применяется тег , который является сокращенным написанием тега . Среди множества значений английского слова «strike» имеются «черкать» и «вычеркивать». Вот как выглядят результаты использования этих двух тегов:

  1. текст, зачеркнутый с помощью тега → текст, зачеркнутый с помощью тега
  2. текст, зачеркнутый с помощью тега → текст, зачеркнутый с помощью тега

Как видим, результат идентичен. Все современные браузеры понимают эти теги, но, тем не менее, оба они нерекомендованы для использования. В спецификациях XHTML и HTML5 они вообще отсутствуют. Да и в спецификации HTML 4.0 тоже описываются как нежелательные.

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

И хотя вам могут быть безразличны такие академические подробности, но все же не пользуйтесь этими устаревшими тегами. Если нужно зачеркнуть текст в HTML, лучше использовать тег . Вот результат его применения:

  1. текст, зачеркнутый с помощью тега → текст, зачеркнутый с помощью тега

Как видим, визуально нет никакой разницы между , и , но по смыслу – очень даже большая разница.

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

Читайте также:  Менеджер рабочих столов для windows 10

Еще раз повторюсь: если вам безразлична идеология языка разметки HTML и важен только визуальный эффект, просто считайте, что для зачеркивания текста предназначен тег а не или . Хотя бы из таких же соображений, по которым пишете «профеССионализм» а не «профеСионализм».

Кроме того, тег более функционален, чем и . Он умеет передавать дополнительную информацию о тексте с помощью атрибутов «cite» и «datetime»:

  • Атрибут «cite» предназначен содержать ссылку на документ, в котором приведена причина удаления данного текста и, может быть, другие подробности о его редактировании.
  • Атрибут «datetime» предназначен указывать дату и время редактирования данного текста.

Что же делать, если вам нужно вывести текст как зачеркнутый, но помечать его как удаленный не хотите? Как уже было упомянуто выше, вам поможет CSS. Более конкретно – свойство «text-decoration», которое имеет значение «line-through». Вот так, например, это можно сделать:

  1. текст, зачеркнутый средствами CSS → текст, зачеркнутый средствами CSS

Чересчур много кода? Согласен. Поэтому можно его уменьшить вынеся инструкции CSS в отдельный файл. В нем можно, например, следующим образом описать класс зачеркнутого текста:

Это позволит писать в HTML-коде следующим образом:

  1. текст, зачеркнутый средствами CSS → текст, зачеркнутый средствами CSS

Этот код также длинее, чем в случае с , но если желаете приобщиться к семантическому Вебу, с подобной избыточностью придется примириться. Удачного вам зачеркивания!

Автор: Дмитрий Скоробогатов, 21.01.2011

Последнее редактирование: 2011-01-21 16:17:03

Для зачеркивания текста в HTML применяется тег strike:

Результат выполнения данного кода:

Данный тег не имеет атрибутов. Вместо тега HTML strike может использоваться и сокращенная его версия — s (аналогично, жирный — b, курсив — i, подчеркнутый — u):

Читайте также:  Кнопка на маршрутизаторе wifi

Как вы можете видеть, результат аналогичен:

Конструктор LEGO "Нубекс"

Использование тега s и strike считается неверным с точки зрения валидации кода (необходимо использовать переходной Doctype). Или другой вариант — использовать CSS.

Перечеркнутый текст: CSS

С помощью CSS текст можно "декарировать" при помощи свойства text-decoration. Это свойство может принимать следующие значения:

  • line-through — используется для перечеркивания текста;
  • underline — подчеркивает текст;
  • overline — используется для помещения линии над текстом (надчеркнутый текст);
  • blink — тест мигает (каждую секунду);
  • none — позволяет отменить все эффекты, примененные к тексту.

Указанные значения могут быть применены одновременно, для этого нужно записать нужные параметры через пробел. Например, применим одновременно подчеркивание, надчеркивание и мигание:

Сделаем теперь перечеркнутый текст при помощи CSS:

Первыми тегами для зачёркнутого текста были и .

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели , он помечает текст как удаленный, что семантически правильнее.

По виду они не отличается:

Изменить цвет линии

Первый способ

С помощью CSS свойства text-decoration-color , который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

Также можно изменить стиль линии с помощью text-decoration-style .

Значение Описание Пример
text-decoration-style: solid; Одинарная линия Текст
text-decoration-style: double; Двойная линия Текст
text-decoration-style: dotted; Точечная линия Текст
text-decoration-style: dashed; Пунктирная линия Текст
text-decoration-style: wavy; Волнистая линия Текст

Второй способ

Тегу задается цвет линии, вложенному цвет текста.

Третий способ

Линия добавляется псевдо элементом :before , но у текста не должно быть переносов.

При такой реализации, можно расположить линию за текстом.

Ссылка на основную публикацию
Сравнить технические характеристики rx330 и rx350
Линейка популярных люксовых SUV Lexus RX пополнилась новой модификацией – RX 350. Теперь покупателем RX быть еще приятнее – ведь...
Сколько рублей получают ютуберы
Видеохостинг YouTube — не только развлекательная площадка, но и хороший источник дохода. Тысячи пользователей выкладывают ролики, пытаясь привлечь внимание аудитории....
Сколько света мотает компьютер
Выбирая комплектующие для персонального компьютера (ПК) обычно обращают внимание на производительность и объем памяти, порой забывая о том, сколько же...
Сравнить процессоры кирин и снапдрагон
Snapdragon 636 vs. Kirin 960: кто лучше? Результаты тестов и сравнительных таблиц, описанных в этой статье, помогут определить, какой из...
Adblock detector