HTML имеет много тегов, которые многие люди используют каждый день, такие как <div>, <p> и <a>. Но также есть некоторые скрытые возможности, которые часто остаются незамеченными. Эти теги могут помочь сделать веб-сайты более привлекательными, доступными и содержательными без особых усилий.

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

Содержание

  1. Тег <q>: Краткие встроенные цитаты

  2. Тег <s>: Зачеркнутый текст

  3. Тег <mark>: Выделенный текст

  4. Тег <ruby>: Аннотирование текста на восточноазиатских языках

  5. Тег <time>: Семантическое время и дата

  6. Тег <bdi>: Изоляция текста в обоих направлениях

  7. Тег <dfn>: Определение терминов

  8. Тег <wbr>: Возможности переноса строки

  9. Тег <ins>: Вставленный текст

  10. Тег <del>: Удалённый текст

  11. Заключение

Тег <q>: Короткие встроенные цитаты

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

Описание и синтаксис

Основная структура тега <q> проста:

<p>She said, <q>This is amazing!</q></p>

Это будет отображаться как:
Она сказала: «Это потрясающе!»

Как он отличается от элемента <blockquote>

Тег <q> предназначен для коротких цитат внутри предложения. С другой стороны, элемент <blockquote> используется для более длинных цитат, которые обычно требуют отдельного пространства или абзаца.

Например:

<blockquote>
  "This is a long quote that needs its own space. It is different from a short quote."
</blockquote>

Этот блок будет отображаться с отступом и предназначен для выделения большего фрагмента цитируемого текста.

Сценарии использования: добавление цитат внутри абзацев

Тег <q> идеально подходит для случаев, когда вам нужно упомянуть цитату в предложении, не отделяя ее слишком сильно. Например, когда вы цитируете кого-то в статье или блоге:

<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>

В этом случае тег <q> сохраняет цитату короткой и внутри одного абзаца.

Профессор сказал: Практика делает совершенство во время занятия.

Совместимость браузеров и советы по стилизации

Большинство современных браузеров автоматически добавляют кавычки к содержимому внутри тега <q>. Но вы можете изменить его внешний вид с помощью CSS, если это необходимо. Вот как вы можете его стилизовать:

q {
  quotes: "«" "»";
  font-style: italic;
}

Этот код изменит кавычки на французские (« и ») и сделает цитату курсивом.

Большинство браузеров поддерживают тег <q>, поэтому вам не нужно беспокоиться о проблемах совместимости для современных пользователей. Однако для старых браузеров может понадобиться дополнительное внимание, поэтому всегда проверяйте, используют ли ваши пользователи старые версии.

Тег <s>: Зачеркнутый текст

Тег <s> используется для отображения текста, который больше не является правильным, актуальным или был удален. Он ставит линию через середину текста, которую мы называем “зачеркнутым”. Этот тег часто используется для указания на что-то, что было отредактировано или обновлено.

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

Тег <s> прост в использовании. Оберните его вокруг текста, который вы хотите зачеркнуть:

<p>This product was <s>$50</s> now only $30!</p>

Это будет отображаться как:
Этот продукт стоил $50, теперь всего $30!

Распространенные случаи использования: Указание на удаленный или неактуальный контент

Тег <s> отлично подходит для отображения изменений цен, исправлений или контента, который больше не действителен. Например:

Обновления цен:

<p><s>$75</s> $50 (Limited Offer!)</p>

$75 $50 (Лимитированное предложение!)

Исправления или изменения:

<p><s>Old website address</s> New website address</p>

Старый веб-адрес Новый веб-адрес

Контент, который более не актуален:

<p>This feature is <s>no longer available</s>.</p>

Эта функция больше не доступна.

Возможности стилизации с помощью CSS

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

s {
  text-decoration: line-through;
  color: red;
}

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

Семантическое значение по сравнению с визуальным оформлением

Тег <s> имеет некоторое семантическое значение. Обычно он представляет контент, который когда-то был действителен, но теперь неверен или устарел. Это не просто изменение стиля. Например, он идеально подходит для отображения изменений в юридических документах, исправлений в блогах или обновлений цен.

С другой стороны, если вы используете зачеркивание просто для визуального оформления без указания того, что текст неверен, лучше использовать CSS напрямую, так:

span.strike {
  text-decoration: line-through;
}

А затем применить его в вашем HTML:

<p>This text is <span class="strike">crossed out</span> just for fun!</p>

Этот подход чисто стилистический и не несет того же значения, что и тег <s>.

Тег <mark>: Выделенный текст

Тег <mark> используется для выделения текста. Он помогает привлечь внимание к определенным частям вашего контента, выделяя их. По умолчанию браузеры выделяют текст желтым фоном, когда используется тег <mark>.

Назначение тега <mark>

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

Вот пример того, как это работает:

<p>This is a <mark>highlighted</mark> word.</p>

Это будет отображаться как:
Это выделенное слово.

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

Выделение ключевых терминов: Если вы хотите выделить важные слова или фразы в статье или блоге, тег <mark> – простой способ сделать это:

<p>The most important concept here is <mark>efficiency</mark>.</p>

Самая важная концепция здесь – эффективность.

Результаты поиска: При отображении результатов поиска на веб-странице использование тега <mark> для выделения соответствующих терминов упрощает пользователям поиск нужной информации:

<p>Your search for <mark>HTML</mark> found these results:</p>

Ваш поиск по HTML дал следующие результаты:

Недавние обновления: Также можно использовать тег <mark> для отображения новых обновлений или изменений в вашем контенте:

<p>We have recently added the <mark>new feature</mark> to the app.</p>

Мы недавно добавили новую функцию в приложение.

Как эффективно стилизовать выделенный текст

Хотя цвет по умолчанию для <mark> желтый, вы можете изменить его с помощью CSS, чтобы он соответствовал дизайну вашего веб-сайта. Вот пример того, как настроить выделенный текст:

mark {
  background-color: lightblue;
  color: black;
  padding: 2px;
}

Это придаст тексту светло-голубой фон с черным текстом.

Если вы хотите, чтобы текст выделялся еще больше, вы можете добавить рамку или изменить стиль шрифта:

mark {
  background-color: yellow;
  color: black;
  font-weight: bold;
  border-radius: 4px;
}

Это сделает выделенный текст более аккуратным и заметным.

Поддержка браузеров и соображения доступности

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

Использование светлого фона с темным текстом — хорошее правило. Проверка цветового контраста гарантирует, что выделенный контент остается доступным для всех, включая тех, кто использует программы чтения с экрана.

Тег <ruby>: аннотирование текста восточноазиатских языков

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

Определение и случаи использования <ruby>

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

Вот базовый пример:

<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>

Это показывает японские иероглифы 漢字 с их произношением (фуригана), отображаемым над или рядом с ними как かんじ (кандзи).


漢 かん 字 じ

Важность подэлементов <rp> и <rt>

Элемент <rt> используется внутри тега <ruby> для определения аннотации (например, произношения) для основного текста. Он означает “текст руби”.

<ruby>漢 <rt>かん</rt></ruby>

Это покажет 漢 с かん (кан) над ним в качестве аннотации.


漢 かん

Элемент <rp>, сокращение от “скобки руби”, используется в качестве резерва для браузеров, которые не поддерживают тег <ruby>. Он оборачивает дополнительные символы, такие как скобки, вокруг текста руби, чтобы показать, что это аннотация:

<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>

Если браузер не поддерживает руби-аннотации, он отобразит произношение в скобках, как здесь:
漢 (かん).

Практические примеры: Руби-аннотации для изучения языка

Тег <ruby> – полезный инструмент для изучающих язык. Он может показывать произношение незнакомых слов или символов непосредственно над или рядом с ними. Это упрощает чтение и изучение новой лексики для начинающих.

Например, предположим, вы хотите помочь кому-то выучить китайское слово “человек”:

<ruby>人 <rt>rén</rt></ruby>

Это покажет 人 с произношением rén над ним.


人 rén

Для более длинных предложений:

<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>

Это помогает учащимся видеть иероглифы и правильное произношение.

Я wǒ являюсь shì студентом xuéshēng.

Совместимость между браузерами и соображения рендеринга

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

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

ruby rt {
  font-size: 0.75em;
  color: gray;
}

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

Использование <ruby> – отличный способ улучшить читаемость для изучающих язык или читателей, незнакомых с определенными письменностями. Просто помните о проверке поддержки браузеров и добавлении резервных вариантов для лучшего пользовательского опыта на разных устройствах.

Тег <time>: семантическое время и дата

Тег <time> используется для обозначения дат или времени в машинно-читаемом формате. Это помогает поисковым системам, браузерам и другим инструментам более четко распознавать информацию, связанную со временем, что полезно для повышения видимости в поисковых результатах или для лучшего парсинга данных.

Использование тега <time> для машинно-читаемых дат и времени

Когда вы используете тег <time>, это позволяет вам предоставлять даты или время, которые легко читаемы как для людей, так и для компьютеров. Это особенно полезно на блогах, новостных статьях или страницах событий.

Вот пример:

<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>

Текст “1 октября 2024 года” увидят пользователи, но атрибут datetime предоставляет машинно-читаемую версию даты. Поисковые системы теперь могут легко интерпретировать эту дату.

Опубликовано

Вы также можете использовать тег <time>, чтобы отображать время:

<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>

Это делает ясным для пользователей и машин, когда происходит событие.

Событие начинается в .

Как <time> улучшает SEO и парсинг данных для деталей событий

Поисковые системы полагаются на структурированные данные, чтобы лучше понимать содержание. Тег <time> дает им более ясное представление о том, когда происходят события, публикации или сроки, улучшая релевантность результатов поиска. Например, поисковые системы могут лучше отображать дату публикации поста в блоге или время события.

Для страницы события следующий пример предоставляет как удобную для человека, так и удобную для машины информацию о времени:

<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>

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

Примеры использования в статьях, блогах и страницах событий

Вот несколько практических примеров того, как вы можете использовать тег <time>:

  1. Блог-посты: Вы можете отобразить дату публикации или последнего обновления статьи:

     <p>Последнее обновление <time datetime="2024-09-28">28 сентября 2024</time>.</p>

  2. Списки событий: Вебсайты мероприятий могут использовать тег <time> для указания времени проведения события:

     <p>Наше следующее собрание состоится <time datetime="2024-11-10">10 ноября 2024 года</time> в <time datetime="18:00">18:00</time>.</p>

  3. Сроки: При представлении важных сроков используйте тег <time> для ясности:

     <p>Отправьте свое заявление до <time datetime="2024-10-30T23:59">30 октября 2024 года, 23:59</time>.</p>

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

Поддержка браузеров и доступность

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

Тег <bdi>: Изоляция текста с двунаправленной поддержкой

Тег <bdi> означает “изоляцию с двунаправленной поддержкой” и используется для предотвращения проблем с направлением текста на многоязычных веб-сайтах. Этот тег особенно полезен при работе с контентом, включающим как языки, читаемые слева направо (LTR), так и справа налево (RTL).

Роль тега <bdi> на многоязычных сайтах

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

Например, если вы хотите отобразить ввод пользователя (например, имя пользователя) рядом с другим текстом, и вы не знаете, на каком языке будет имя пользователя, вы можете использовать <bdi>, чтобы убедиться, что это не повлияет на порядок текста.

Как использовать тег <bdi> для предотвращения проблем с направлением текста

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

Вот простой пример:

<p>User <bdi>اسم</bdi> has logged in.</p>

Если имя пользователя на арабском языке (читается справа налево), тег <bdi> гарантирует, что остальное предложение (написанное на английском и читается слева направо) не будет нарушено. Без тега <bdi> предложение могло бы отображаться неправильно из-за смешения направлений текста.

Еще один пример с числами:

<p>Invoice number: <bdi>#1234</bdi></p>

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

Примеры использования тега <bdi>

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

Вот пример на форуме:

<p><bdi>مستخدم</bdi> liked your post!</p>

Без тега <bdi> текст может отображаться некорректно, но с ним как арабское имя пользователя, так и английский текст отображаются правильно.

Совместимость с браузерами

Тег <bdi> поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari и Edge. Это легкое решение, не требующее специального стилизирования, и помогает сохранить аккуратный макет контента при работе с многоязычным текстом.

Тег <dfn>: Определение терминов

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

Как использовать тег <dfn> для обозначения определений

Тег <dfn> прост в использовании. Вы оборачиваете им слово или фразу, которую хотите определить. Обычно термин появляется рядом с объяснением его значения.

Пример:

<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>

Здесь тег <dfn> подчеркивает, что “DOM” – это определяемый термин.

DOM (Document Object Model) – это программный интерфейс для веб-документов.

Лучшие практики предоставления объяснений в статье

При использовании тега <dfn> убедитесь, что определяемый термин следует непосредственно за его объяснением. Это делает все понятным и помогает читателям сразу связать термин с его значением.

Также стоит использовать тег <dfn> только при первом упоминании термина, так как повторное использование его может запутать читателя.

Например, в технической статье об HTML:

<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>

В этом случае “API” определяется при первом упоминании, и дальнейшее использование “API” уже не требует тега <dfn>.

Как тег <dfn> улучшает ясность технического контента

Использование тега <dfn> в техническом письме – отличный способ сделать контент более понятным. Он четко сигнализирует читателям, когда вы вводите новый термин, что особенно полезно при объяснении сложных идей. Это помогает улучшить читаемость и позволяет пользователям быстрее освоить ключевые понятия.

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

Пример использования тега <dfn>

<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>

В этом предложении читателю вводится термин “URL”, за которым следует четкое объяснение. Этот метод введения терминов с помощью тега <dfn> помогает сделать технический контент гораздо более читабельным и понятным, особенно для тех, кто не знаком с темой.

Тег <wbr>: Возможности разрыва строки

Тег <wbr> используется для указания, где слово или URL могут быть разделены для создания разрыва строки, если это необходимо. Это полезно при работе с длинными словами, URL или любым текстом, который может нарушить макет веб-страницы.

Что такое тег <wbr> и почему он необходим для длинных слов или URL

Иногда длинные слова или URL могут испортить дизайн веб-страницы, вызывая горизонтальную прокрутку или нарушая макет. Тег <wbr> дает браузеру подсказку о том, где разорвать слово, но только если это необходимо. Это помогает сохранить текст читабельным и предотвращает переполнение.

Например, если у вас есть длинный URL, вы можете разместить тег <wbr>, чтобы указать браузеру, где он может разорвать текст:

<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>

Если браузеру нужно разорвать URL, он сделает это после <wbr>, что обеспечит сохранение дизайна.

Лучшие практики для управления переносом слов и переполнением текста

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

Вот еще один пример с длинным словом:

<p>This word is too long: anti<wbr>disestablishmentarianism.</p>

Если слово становится слишком длинным для строки, браузер разобьет его после “анти-“, не влияя на читаемость.

В сочетании с CSS вы также можете контролировать перенос слов и переполнение текста для лучших результатов:

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

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

Поддержка браузера для <wr> и потенциальные проблемы

Тег <wbr> поддерживается во всех основных браузерах, включая Chrome, Firefox, Safari и Edge. Он легкий и не требует специального стилизации для работы.

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

Например:

<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>

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

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

Тег <ins>: Вставленный текст

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

Что такое тег <ins> и в чем отличие от тега <s>?

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

Пример:

<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>

Здесь тег <ins> подчеркивает то, что было добавлено, а тег <s> показывает, что было вычеркнуто как устаревшее.

Это новый текст, который был добавлен.

Это старый текст, который больше не актуален.

Использование для отслеживания редактирования документов или версионирования

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

Пример документа с изменениями:

<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>

Это дает понять читателю, что раздел о “конфиденциальности данных” был недавно добавлен.

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

Варианты оформления для подчеркивания изменений

По умолчанию тег <ins> отображается с подчеркиванием, но вы можете настроить его с помощью CSS для лучшего акцента, особенно если хотите, чтобы изменения выделялись больше.

Вот как можно стилизовать тег <ins> с различными визуальными эффектами:

ins {
  background-color: #d4edda;
  color: green;
  text-decoration: none; /* Убирает стандартное подчеркивание */
}

Это придаст вставленному тексту зеленый цвет и светло-зеленый фон, делая его более заметным.

Вы также можете добавить различные стили, такие как жирный шрифт или рамку:

ins {
  font-weight: bold;
  border-bottom: 2px solid green;
}

Эти варианты оформления облегчают пользователям определение того, что было добавлено или изменено, улучшая читаемость и прозрачность правок в документе.

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

Тег <del>: Удаленный текст

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

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

Основная задача тега <del> — визуально показать, что некоторый контент был удален. Это распространено в документах, статьях или коде, где изменения должны быть видны читателю. Удаленный текст обычно будет зачеркинут, что указывает на то, что он больше не актуален или действителен.

Пример:

<p>This product costs <del>$50</del> $40 now.</p>

В этом примере изменение цены очевидно. Старая цена ($50) зачеркнута, а новая цена ($40) идет сразу после.

Как это можно объединить с <ins> для отслеживания переработок

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

Пример отслеживания изменений:

<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>

Здесь легко увидеть, что “понедельник” был заменен на “вторник”, и читателю точно известно, что изменилось.

Лучшие практики для отображения и стилизации удаленного контента

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

Вот пример настройки внешнего вида удаленного текста:

del {
  color: red;
  text-decoration: line-through;
}

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

del {
  color: gray;
  opacity: 0.7;
}

Этот стиль уменьшает акцент на удаленном контенте, делая его менее отвлекающим, но все еще видимым для читателей.

Тег <del> предоставляет простой и эффективный способ отслеживания и отображения изменений, особенно в сочетании с тегом <ins>. Это важно для обеспечения прозрачности и ясности документов для всех, кто просматривает правки или обновления.

Заключение

Использование этих уникальных HTML-элементов расширяет возможности веб-сайтов, что помогает создавать более содержательный и доступный контент. Теги, такие как <q>, <s>, <mark>, <ruby>, <time>, <bdi>, <dfn>, <wbr>, <ins> и <del> приносят свои собственные преимущества для конкретных задач. Эти элементы делают больше, чем просто стилизуют текст; они добавляют контекст, улучшают пользовательский опыт и улучшают структуру документа.

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

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