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

Сегодня вместо тегов рекомендуется использовать css для придания нужного внешнего вида тексту. Тем не менее давайте посмотрим, как сделать в html зачеркнутый текст.

HTML-теги для зачеркнутого текста

В большинстве случаев вам может пригодится парный тег <s>. Он является сокращенным вариантом записи <strike>, который уже устарел. Текст в этом контейнере отображается как зачеркнутый. Нужно сказать, что тег <s> хорошо поддерживается только спецификацией HTML5, поэтому хорошо будет четко написать в самом начале html-документа:
<!DOCTYPE html>

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

Тег del имеет два атрибута, которое можно указать только для него. Во-первых, это cite. Атрибут, который позволяет прописать ссылку на документ, где указана причина редактирования. Во-вторых, datetime – это дата и время редактирования текста. Задается в формате ISO 8601. Рекомендуется писать дату и время с минутами.

Как зачеркнуть текст с помощью css

А вот в css текст зачеркивается по-другому. Это делается с помощью свойства text-decoration и его значения line-through. Пример:

p.error{
	text-decoration: line-through;
}

Текст в абзацах с классом error будет зачеркнут.

Если вам надо зачеркнуть отдельный фрагмент, слово или даже букву, то их необходимо заключить в тег <span> (парный). Далее присвоить ему произвольный стилевой класс и уже через него обратиться к новому элементу, применив для него нужный стиль.

Произвольный текст, а вот тут ошибка.

Span.error{
	Text-decoration: line-through;
}

Конечно, с помощью html зачеркнутый текст сделать чуть проще, потому что его достаточно заключить в нужные теги, но css будет удобно использовать, когда нужно зачеркнуть целый абзац, пункт списка или заголовок. Тогда вообще никаких тегов не надо, можно сразу обратиться к нужному элементу и задать стиль.

К тому же, в css перечеркнутый текст — это только оформление и никакого дополнительного смысла не несет. Хотя в html тоже есть тег s, который позволяет просто зачеркнуть слова.

В общем, используйте такой способ оформления текста, который вам больше всего нравится. И подписывайтесь на новые статьи, если интересно.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: