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

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

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

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

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

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

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

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

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

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

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

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

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

Приветствую вас, дорогой читатель, случайно или умышленно зашедший на мой блог!

В данной статье я покажу несколько способов как сделать в html зачёркнутый текст.

Навигация по статье:

Выглядеть он будет вот так: зачеркнутый текст в html

Для чего это может понадобится?

  • Такой текст можно использовать для задания акционных цен, когда старая зачёркнута, а новая нет.
  • Для общения на форумах и в сосетях. Я не очень понимаю зачем, но люди часто используют этот приём =)
  • Для размещения текстов на сайте.

Для создания такого зачёркнутого текста можно воспользоваться одним из специальных тегов.

Использование тегов stike и s для зачёркивания текста

Тег strike

Используется он аналогично любым другим строчным (инлайновым) тегам. То есть вы просто ставите этот тег в начале и в конце слова или фразы, которую нужно зачеркнуть.

Читайте также:  Как кнопками копировать и вставить

Сам код для зачёркнутого текста будет выглядеть так:

Вот что получится в итоге:

html тег для зачеркнутого текста

Тег s

Тот же тег stike, но в сокращённом виде.
html код зачеркнутого текста будет выглядеть так:

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

html тег для зачеркнутого текста

Конечно, в их использовании нет ничего критичного. Просто всё оформление текста лучше задавать через CSS. Данные теги считаются уже устаревшими так как сейчас для создания подчёркнутого текста стараются использовать не их, а стилизацию через CSS или тег del.

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

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

Если честно, то я ещё не сталкивалась с необходимостью помечать какой-то текст как удалённый, поэтому на практике его чаще всего используют просто для зачёркивания текста.

Для того чтобы сделать зачёркнутый текст при помощи html можно воспользоваться следующим кодом:

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

html тег для зачеркнутого текста

Как видите полученный результат ничем не отличается от того что мы получили при использовании тегов strike и s.
Использование тега del более предпочтительно для использования при вёрстке сайтов.

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

Самым оптимальным вариантом для создание зачёркнутого текста на html странице будет использование CSS. Правда этот способ немного дольше и длиннее, поэтому его применение не всегда оправдано.

Для создания зачёркнутого текста в CSS существует специальное CSS свойство text-decoration со значением line-through
Для того чтобы сделать зачёркнутый текст нужно его заключить в тег span или любой другой и присвоить этому тегу определённый класс, а затем в CSS для этого класса указать свойство text-decoration:line-through;

Читайте также:  Вздулся повер банк что делать

html код зачёркнутого текста будет выглядеть так:

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

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

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

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

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

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

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

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

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

Читайте также:  Fonts for instagram online

Еще раз повторюсь: если вам безразлична идеология языка разметки 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

Ссылка на основную публикацию
Как сбросить графический ключ на xiaomi
Что такое графический пароль? Графический пароль – аналог обычного пароля, который был создан для удобства ввода на мобильных телефонах с...
Как разблокировать айфон зная apple id
Пользователи популярных смартфонов от Apple часто ставят на гаджет пароль, чтобы повысить безопасность мобильного устройства и избежать неприятностей – кражи,...
Как разблокировать домофон если отключили
Домофон — вещь нужная и полезная. Установленная в подъезде система отлично защищает жилище обывателей от проникновения посторонних людей. Второе преимущество...
Как сбросить защитный код на нокиа
Секретные коды Nokia для сброса, проверки и настроек. На этой странице собраны все полезные секретные и не секретные коды для...
Adblock detector