меню

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


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

Стилизуем placeholder при помощи CSS

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Адаптивная верстка. Правильные медиа выражения для retina.

Мне приходилось встречать довольно много разные способы определения мониторов retina. Одни являются объемными, другие наоборот. Давайте рассмотрим, какие из media quires изпользовать для ретинизации.

Специальные символы HTML

Специальные символы HTML. Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;)

Базовые правила HTML верстки писем для E-Mail рассылки

Для того, чтобы email рассылка смотрелась максимально одинаково в большинстве почтовых клиентах, необходимо придерживаться некоторых базовыx правил HTML верстки email-писем.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту