8 неизвестных HTML-тегов, которые на самом деле весьма полезны

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>
Войти в полноэкранный режим Выйти из полноэкранного режима

Спасибо за прочтение этой статьи Хорошего дня

Оцените статью
Procodings.ru
Добавить комментарий