Интересные HTML теги, о которых никто не знает

Наверно не многие из Вас знают, что в языке HTML есть специальный тег для задания аббревиатур, или тег для обозначения адреса. В данной заметке будет приведено несколько html тегов которые могут очень пригодиться при создании сайтов, но очень редко используются.

Атрибут tabindex

Этот тег определяет порядок перехода между полями формы по клавише «Tab»:

<form action="#">
  <input type="text" tabindex="1" />
  <a href="#">Забыли пароль</a>
  <input type="password" tabindex="2" />
  <input type="button" value="Войти" tabindex="3" />
</form>

В этом примере по нажатию клавиши «Tab» мы пропускаем ссылку «Забыли пароль».

Тег <wbr>

Тег <wbr> позволяет указать браузеру, где нужно сделать сброс строки, когда это необходимо:

А знали ли вы, что этот тег<wbr>используется очень редко?

Нeразрывный пробел &nbsp;

Нeразрывный пробел &nbsp; — это антоним к тегу <wbr>. С помощью неразрывного пробела, мы указываем браузеру, между какими словами нельзя делать сброс строки, в следствие чего, эти слова переносятся вместе:

Покупайте лучшую офисную бумагу у компании «Бумага Качество Инвест»!

В данном случае название фирмы перенесется на следующую строку вместе, а не раздельно.

Тег <cite>

Тег <cite> является «младшим братом» тега <blockquote>. Этот тег определяет текст на странице как ссылку. По-умолчанию, текст внутри этого тега выделяется курсивом, что легко меняется с помощью стилей.

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

Тег <optgroup>

Тег <optgroup> позволяет логически и визуально объединить элементы select-а:

<select>
  <optgroup label="Цвета">
  <option>Красный</option>
  <option>Зеленый</option>
  <option>Белый</option>
  </optgroup>
  <optgroup label="Порядок">
  <option>Первый</option>
  <option>Второй</option>
  <option>Третий</option>
  </optgroup>
</select>

Пример:

КрасныйЗеленыйБелыйПервыйВторойТретий

Тег <acronym>

Тег <acronym> позволяет дать слову или группе слов всплывающую подсказку. Подсказка из атрибута title всплывает при наведении мыши на слово заключенное в тег <acronym>:

<acronym title="Командный вид спорта, в котором целью является забить
мяч в ворота соперника ногами или другими частями тела (кроме рук)
большее, чем команда соперника количество раз">Футбол</acronym>
очень популярен в мире.

Пример: Футбол очень популярен в мире.

Тег <address>

Как видно из названия, этот тег семантически выделяет адреса на странице. Адрес выделяется курсивом, что тоже легко меняется с помощью стилей:

<address>г. Арзамас, ул. Гагарина, д. 47, кв. 54</address>

Теги <ins> и <del>

Эти теги позволяют семантически выделить, что было до изменения на сайте и что стало после. Текст, заключенный в тег <del> зачеркивается, а заключенный в <ins> — подчеркивается:

<del>Было</del> <ins>Стало</ins>

Тег <label>

Этот тег нужно(!) использовать во всех формах. С помощью этого тега задаются метки элементам формы. Иными словами, при клике мышью на текст в теге <label> переводится фокус к соответствующему элементу формы, что существенно упрощает навигацию по форме. Например, этот тег просто незаменим в голосовалках:

<form action="#">
  <h6>А Вы любите спать?</h6>
  <input type="radio" id="id1" />
  <label for="id1">Да</label>
  <br />
  <input type="radio" id="id2" />
  <label for="id2">Нет</label>
  <br />
  <input type="radio" id="id3" />
  <label for="id3">Я люблю есть</label>
</form>

Тег <fieldset>

Тег <fieldset> логически группирует элементы формы. С помощью тега <legend> можно задать название группе. Визуально группа выделяется рамкой вместе с меткой:

<form action="#">
  <fieldset>
    <legend>Ваш пол</legend>
    <input type="radio" />
    Мужской
    <input type="radio" />
    Женский
  </fieldset>
</form>

Тег <abbr>

Тег <abbr> похож на тег <acronym>, только используется для аббревиатур

<abbr title="Football Club Rubin Kazan">FCRK</abbr> number one.

Атрибут rel

Этот атрибут можно ставить в любые теги (хотя W3C с этим не согласится), что очень полезно при обращении, например, через ява скрипт ко всем тегам с определенным атрибутом:

<a href="picture.png" rel="show">Увеличить картинку</a>