Интересные 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>. С помощью неразрывного пробела, мы указываем браузеру, между какими словами нельзя делать сброс строки, в следствие чего, эти слова переносятся вместе:

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

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

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

Пример:

А Вы любите спать?



 В данном примере не нужно мышкой целиться в radio-инпут, теперь чтобы выбрать нужный вариант ответа, достаточно нажать на сам текст, заключенный в <label>.

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

Пример: FCRK number one.

Атрибут rel

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

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

Тут, например, можно скриптом взять все ссылки с атрибутом rel=»show» и повесить на них функцию по показу большой картинки.

 

Запись опубликована в рубрике HTML с метками , , , , , , , , , , , , , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*