HTML-теги, которые считаются важными, – это те, которые часто используются, однако это не так. Есть некоторые важные HTML-теги, которые большинство людей не используют и в итоге тратят время на написание эквивалентных CSS.
Давайте разберемся в этом
1.Тег <s>
Тег <s> определяет текст, который больше не является правильным, точным или актуальным. Текст будет отображаться с чертой через него.
S обозначает зачеркивание.
Обычно используется на сайте электронной коммерции для обозначения снижения цены
<h4>Price
<s>£15</s>
<span>£9</span>
</h4>
Люди часто предпочитают использовать тег span, а затем добавлять свойство text-decoration в CSS, однако это довольно удобно.
2.Теги <ruby>, <rt> и <rp>
HTML-элемент <ruby> представляет собой небольшие аннотации, которые отображаются над, под или рядом с основным текстом, обычно используемые для демонстрации произношения восточноазиатских символов. Он также может использоваться для аннотирования других видов текста.Он предотвращает нас от написания унылых CSS
<ruby>帶翅膀<rt>Carmine</rt></ruby>
<ruby>的老鼠<rt>Falcone</rt></ruby>
3.Тег <details>tag
Тег <details> определяет дополнительные детали, которые пользователь может открывать и закрывать по требованию.
Этот тег часто используется для создания интерактивного виджета, который пользователь может открывать и закрывать. По умолчанию виджет закрыт. Когда он открыт, он расширяется и отображает содержимое внутри.
<details>
<summary>Click me to see the Answer</summary>
<p>
The Ability to speak doesn’t make you intelligent
.</p>
</details>
4.Тег <optgroup>
Тег <optgroup> используется для группировки связанных опций в элементе <select> (выпадающий список).
Этот тег на самом деле очень полезен, он добавляет дополнительный стиль в наш тег
Select и делает его немного более привлекательным и организованным.
Если у вас длинный список опций, группы связанных опций легче обрабатывать пользователю.
<form >
<label for="swords">Choose a Sword:</label>
<select name="swords" id="swords">
<optgroup label="Valyrian Steel">
<option value="Oathkeeper">Oathkeeper</option>
<option value="Widows Wail">Widows Wail</option>
</optgroup>
<optgroup label="Knifes">
<option value="mercedes">Needle</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
5.Тег <meter>
Тег <meter> определяет скалярное измерение в известном диапазоне или дробное значение. Это также известно как измеритель.
Он также достаточно функционален, так как мы можем определить, при каком проценте/значении цвет измерителя должен измениться, например, если вы дадите значение меньше 33 (т.е. низкое значение), цвет измерителя станет красным, аналогично для высокого и оптимального значения,
Это очень полезный HTML тег, так как если вы склонны делать CSS, то в итоге мы можем написать длинную простыню CSS.
Примеры: Использование диска, релевантность результата запроса и т.д.
<p> 0L <meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="20">
at 50/100
</meter> 5L</p>
<p> 0L <meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter> 5L</p>
<p> 0L <meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="80">
at 50/100
</meter> 5L</p>
6.Тег <progress>
HTML-элемент <progress> отображает индикатор, показывающий ход выполнения задачи, обычно в виде индикатора выполнения.
Обычно я видел, как многие люди пишут CSS, чтобы создать индикатор прогресса, некоторые даже создают отдельные компоненты.
в react
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
7.Тег kbd
Тег <kbd> используется для определения клавиатурного ввода. Содержимое внутри него отображается моноширинным шрифтом браузера по умолчанию.
Я был удивлен, когда узнал, что этот тег не устарел, поскольку большинство людей предпочитают вместо него использовать стиль span.
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
8.Тег bdo
BDO расшифровывается как Bi-Directional Override.
Тег <bdo> используется для переопределения текущего направления текста.
Его можно использовать для создания игр или в анимации. Это один из редких HTML-тегов и, вероятно, наименее используемый.
<p><bdo dir="rtl">May the force be with you
.</bdo></p>
Спасибо за прочтение этой статьи Хорошего дня