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

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

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

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

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

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

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

  1. Тег <abbr>

    Тег <abbr>определяет аббревиатуру или аббревиатуру, например HTML, CSS, PHP, JS, CS, и т.д.

    			
    Я читаю о тегах <abbr title="Язык гипертекстовой разметки">HTML</abbr> на сайте <abbr title="Coding Beauty">CB</abbr>.
    			
    		

    Тег <abbr>

    Аббревиатура по умолчанию обозначается пунктирной линией.

    Тег <abbr>

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

  2. Тег <q>

    Тег <q>указывает, что текст внутри него является короткой встроенной цитатой.

    			
    <q>Coding создает информативные руководства по технологиям веб-разработки</q>
    			
    		

    Современные браузеры обычно реализуют этот тег, заключая заключенный в него текст в кавычки:

    Тег <q>

  3. Тег <s>

    Мы используем <s>тег для рендеринга текста с перечеркнутой линией (перечеркнутый). Это полезно для представления вещей, которые больше не актуальны или неверны.

    			
    Купить за <s>200 долл. США</s> 100 долл. США
    			
    		

    Тег <s>

    Указание на изменение цены с помощью тега <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>

    Указание редакционных изменений в документе с помощью тегов <del> и <ins>.

  4. Тег <mark>

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

    			
    Кодирование веб-сайта <mark>Beauty</mark>
    			
    		

    По умолчанию <mark>применяет ярко-желтый фон к заключенному тексту:

    Тег <mark>

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

    Find on Page

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

  5. Тег <wbr>

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

    Когда текст переносится в браузере, слова в конце переноса могут быть слишком длинными и прерываться не в том месте.

    			
    <p>это-очень-длинный-текст-созданный-для-проверки-тега-wbr</p>
    			
    		

    Тег <wbr>

    Текст прерывается в месте, выбранном браузером.

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

    С помощью <wbr>тега мы указываем точные места в слове, где его можно было бы сломать.

    			
    <p>это-очень-длинный-те<wbr />xt-созданный-для-тестирования-тега-wbr</p>
    			
    		

    Тег <wbr>

    Текст прерывается в месте, заданном тегом <wbr>.

  6. Тег <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>
    			
    		

    Тег <details>

    Виджет раскрытия закрыт (состояние по умолчанию).

    Тег <details>

    Виджет раскрытия открыт.

  7. Тег <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>
    			
    		

    Здесь мы группируем страны в списке в соответствии с их континентами.

    Тег <optgroup>

  8. Тег <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>этого же идентификатора.

    Тег <datalist>

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

    Тег <datalist>

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

  9. Тег <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>

  10. Теги <sup> и <sub>

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

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

    			
    <p>Этот текст содержит текст <sub>подстрочный</sub></p> 
    <p>Этот текст содержит текст <sup>надстрочный</sup></p>
    			
    		

    Теги <sup> и <sub>

    Вот более практический пример:

    			
    푥<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

    Теги <sup> и <sub>

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


Похожие материалы

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

Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажем, как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои.

Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю.

наверх