10 редких тегов HTML, которые редко используют

Изучение некоторых из наименее известных и используемых тегов в HTML, полезных для конкретных случаев использования, несмотря на низкую популярность.

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

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

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

Тег <abbr>

Тег <abbr>определяет аббревиатуру или аббревиатуру, например HTML, CSS, PHP, JS, CS, и т.д.
```
			
Я читаю о тегах <abbr title="Язык гипертекстовой разметки">HTML</abbr> на сайте <abbr title="Coding Beauty">CB</abbr>.
			
		
```
Аббревиатура по умолчанию обозначается пунктирной линией.

Наведение курсора на элемент <abbr>.
Тег <q>

Тег <q>указывает, что текст внутри него является короткой встроенной цитатой.
```
			
<q>Coding создает информативные руководства по технологиям веб-разработки</q>
			
		
```
Современные браузеры обычно реализуют этот тег, заключая заключенный в него текст в кавычки:
Тег <s>

Мы используем <s>тег для рендеринга текста с перечеркнутой линией (перечеркнутый). Это полезно для представления вещей, которые больше не актуальны или неверны.
```
			
Купить за <s>200 долл. США</s> 100 долл. США
			
		
```
Указание на изменение цены с помощью тега <s>.

Подобно тегу <s>, <del>который также отображает зачеркнутый текст, но предназначен для использования с <ins>тегом для обозначения редакционных изменений в уже опубликованном документе.
```
			
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <style> 
      del { 
        background-color: lightsalmon; 
      }
      ins { 
        украшение текста: нет; 
        цвет фона: светло-зеленый; 
      } 
    </style> 
  </head> 
  <body> 
    Мой любимый язык программирования — <del>JavaScript</del> 
    <ins>TypeScript</ins> 
  </body> 
</html>
			
		
```
Указание редакционных изменений в документе с помощью тегов <del> и <ins>.
Тег <mark>

Мы используем <mark>тег для определения текста, который должен быть помечен или выделен.
```
			
Кодирование веб-сайта <mark>Beauty</mark>
			
		
```
По умолчанию <mark>применяет ярко-желтый фон к заключенному тексту:

Этот тег полезен для выделения результатов текстового поиска в документе, как это делают многие браузеры при использовании Find on Page инструмента.

Отображение результатов поиска по букве «е» с <mark>тегом.
Тег <wbr>

Тег <wbr>(Word Break Opportunity) определяет определенные позиции в тексте, где можно было бы добавить разрыв строки.

Когда текст переносится в браузере, слова в конце переноса могут быть слишком длинными и прерываться не в том месте.
```
			
<p>это-очень-длинный-текст-созданный-для-проверки-тега-wbr</p>
			
		
```
Текст прерывается в месте, выбранном браузером.

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

С помощью <wbr>тега мы указываем точные места в слове, где его можно было бы сломать.
```
			
<p>это-очень-длинный-те<wbr />xt-созданный-для-тестирования-тега-wbr</p>
			
		
```
Текст прерывается в месте, заданном тегом <wbr>.
Тег <details>

С помощью <details>тега мы можем указать дополнительные сведения о веб-странице в виджете раскрытия информации, который пользователь может просмотреть или скрыть, когда захочет.
```
			
<details>
  <summary>Lorem Ipsum</summary> 
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti eos 
  quod fugiat Quasi Repudiandae, минус quae facere. Сед, киа? Quod 
  cupiditate asperiores neque iste consectetur tempore eum repellat incidunt 
  qui. 
</details>
			
		
```
Виджет раскрытия закрыт (состояние по умолчанию).

Виджет раскрытия открыт.
Тег <optgroup>

Тег <optgroup>группирует связанные параметры в <select>элементе. Это может облегчить пользователям понимание их выбора, когда список вариантов длинный.
```
			
<select name="country" id="countries"> 
  <optgroup label="Северная Америка"> 
    <option value="us">США</option> 
    <option value="ca">Канада</option> 
  </optgroup> 
  <optgroup label="Европа"> 
    <option value="uk">Великобритания</option> 
    <option value="fr">Франция</option> 
  </optgroup> 
</select>
			
		
```
Здесь мы группируем страны в списке в соответствии с их континентами.
Тег <datalist>

Мы используем <datalist>элемент, чтобы указать список предопределенных опций для <input>элемента. Он содержит набор <option>элементов, представляющих рекомендуемые или разрешенные параметры, из которых может выбирать пользователь.
```
			
<form>
  <label for="lang">Выберите язык:</label> 
  <input list="langs" name="lang" id="lang" />
  <datalist id="langs"> 
    <option value="Английский" /> 
    <option value="Французский" /> 
    <option value="Испанский" /> 
    <option value="Китайский" /> 
    <option value="Немецкий " /> 
  </datalist> 
</form>
			
		
```
Чтобы связать <input>элемент с <datalist>элементом, мы устанавливаем idатрибут <datalist>и устанавливаем listатрибут <input>этого же идентификатора.

Список доступных вариантов ввода отображается в раскрывающемся списке.

Доступные параметры меняются в зависимости от того, что пользователь вводит при вводе.

Тег <fieldset>

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

			
<form> 
  <fieldset> 
    <legend>Имя</legend>
    <label for="fname">Имя:</label> 
    <input type="text" id="fname" name="fname" /><br /> 
    <label for="mname">Отчество:< /label> 
    <input type="text" id="mname" name="mname" /><br /> 
    <label for="lname">Фамилия:</label> 
    <input type="text" id= "lname" name="lname" /> 
  </fieldset> 
  <br /> 
  <label for="email">Электронная почта:</label> 
  <input type="email" id="email" name="email" / > 
  <br /><br /> 
  <label for="password">Пароль:</label> 
  <input type="password" id="password" name="password" /> 
</form>

Мы используем <legend>тег, чтобы определить заголовок для <fieldset>элемента.

Тег <fieldset>

Теги <sup> и <sub>

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

С другой стороны, текст нижнего индекса отображается на полсимвола ниже обычной строки. Он также имеет меньший шрифт, и мы используем <sub>тег для его отображения.
```
			
<p>Этот текст содержит текст <sub>подстрочный</sub></p> 
<p>Этот текст содержит текст <sup>надстрочный</sup></p>
			
		
```
Вот более практический пример:
```
			
푥<sup>2</sup> - 3푥 - 28 = 0. Найдите 푥. <br /> 

 
H<sub>2</sub>SO<sub>4</sub> + NaOH → Na<sub>2</sub>SO<sub>4</sub> + 
H<sub>2</sub>O
			
		
```

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

Голосов: 63