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. Эти редкие теги могут быть весьма полезны в определенных ситуациях, несмотря на их редкое использование.

2.86
1
2
3
4
5

Голосов: 127

10 редких тегов HTML, которые редко используют Косая граница блока или граница с наклоном Как в CSS связывать объекты? Масштабирование в CSS средствами zoom и transform Эффект пульсации элемента на чистом CSS Красивая форма обратной связи на чистом CSS Что такое Pixel Perfect верстка? Адаптивная верстка. Правильные медиа выражения для retina. Формат ссылки для телефонных звонков Icon Fonts или SVG? Скошенные элементы на CSS3 Стилизуем placeholder при помощи CSS Адаптивный CSS3 Manasory без JavaScript Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. CSS прижать footer к низу окна браузера Создаём отзывчивые письма без медиа-запросов Кроссбраузерная стилизация select на CSS Специальные символы HTML Треугольники по средствам CSS Стилизация элементов checkbox и radio button на CSS3 Как убрать свечение вокруг текстового поля? Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах 17 CSS/HTML эффектов с кроссбраузерными решениями Пять полезных CSS селекторов Медиа типы в CSS Базовые правила HTML верстки писем для E-Mail рассылки Создаём адаптивный сайт

Возможно, вам будет интересно

Icon Fonts или SVG?

Графические иконки - главный элемент буквально всякого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. В случае если не брать в расчет нормальные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Собственно что из них лучше? Разберемся ниже.

Читать подробнее

Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.

Подробая статья о flexbox с живыми примерами. Описание основных принципов, всех css свойств. Преимущества и недостатки. Поддержка флексбокс браузерами.

Читать подробнее

17 CSS/HTML эффектов с кроссбраузерными решениями

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.

Читать подробнее

Косая граница блока или граница с наклоном

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

Читать подробнее