5 уникальных элементов HTML, о которых вы могли не знать
![](/static/storage/123411335798028371136548176990746500546.png)
HTML предлагает огромное количество элементов, которые могут улучшить способ представления контента в Интернете. Большинство разработчиков знакомы со стандартными тегами <div>
, <p>
и <a>
, но есть и менее известные элементы, которые могут быть весьма полезны. Представляем вам пять уникальных элементов HTML, о которых вы могли не знать:
1. Тег q /q
Тег <q>
определяет короткую цитату. Он идеально подходит для включения кавычек в текст.
Пример:
<q>Hi 👋, my name is Matin.</q>
Результат:
![](/static/storage/212162514397402698966649808419303182100.png)
2. Тег s /s
HTML-элемент <s>
отображает текст в виде зачеркнутой строки. Используйте элемент <s>
для обозначения того, что уже неактуально или неточно.
Пример:
<p>Old Price <s>100</s></p>
<p>New price 50</p>
Результат:
![](/static/storage/276132370107733496928306775505356549859.png)
3. Тег mark /mark
HTML-элемент <mark>
представляет собой текст, который помечается или выделяется для ссылки или обозначения в связи с его значимостью в окружающем контексте.
Пример:
<p>Hi, you should <mark>Follow me</mark> for more amazing content. Thanks!</p>
Результат:
![](/static/storage/222596086011962824823311867200742458608.png)
4. Тег ruby /ruby
HTML-элемент <ruby>
представляет собой небольшие примечания, которые отображаются над, под или рядом с основным текстом и обычно используются для отображения произношения восточноазиатских символов.
Пример:
<ruby>マティン <rp>(</rp><rt>Matin</rt><rp>)</rp></ruby>
Результат:
![](/static/storage/303825552199517564731964625977142689744.png)
5. Тег details /details
HTML-элемент <details>
создает виджет раскрытия информации, в котором информация видна только при переключении виджета в состояние «открыто». С помощью элемента <summary>
можно добавить краткое описание или метку.
Пример:
<details open>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
Результат:
![](/static/storage/244262839531730164905493454229864415858.png)
Эти уникальные элементы HTML могут быть чрезвычайно полезны в определенных ситуациях, повышая семантическую насыщенность и функциональность вашего веб-контента. В следующий раз, когда вы будете создавать веб-страницу, подумайте об использовании этих тегов, чтобы улучшить пользовательский интерфейс и повысить удобство пользования сайтом.