10 редких HTML тегов, о которых вам стоит знать

На сегодняшний день от веб-разработчиков часто ожидают, что они будут работать в нескольких языках. В результате, это довольно сложно выучить все, что нам может предложить язык и легко оказаться в ситуации, когда ты не используешь весь потенциал определенных более специализированных, но очень полезных тегов.
К сожалению, мы не приведем весь тот огромный потенциал этих тегов, которые остались в тени. Но никогда не поздно вернуться в игру и начать писать код, который включает всю ту мощь, которая содержится в не слишком часто используемых тегах.
Хотим представить вам наименее используемые и оставшиеся непонятыми теги HTML. До тех пор пока они могут быть менее популярны, они до сих пор удобны в определенных ситуациях.

1. <citе>
Все мы знакомы с тегом blockquote, но знаете ли вы о его младшем брате < сitе >? Тег < сitе > позволяет определять текст внутри элемента как ссылку. Обычно браузер отображает текст внутри тега <сitе> курсивом, но это легко можно изменить с помощью CSS.
Тег < сitе > очень полезен для цитирования библиографий и других ссылок сайта.

2. < optgroup >
Тег optgroup предоставляет возможность добавить небольшое описание между группами вариантов выпадающего списка. Например, если вам нужно сгруппировать список фильмов по времени, это будет выглядеть так:

<label for="showtimes"> Showtimes label>
<select id="showtimes" name="showtimes">
<optgroup label="1PM">
<option value="titanic"> Twister option>
<option value="nd"> Napoleon Dynamite option>
<option value="wab"> What About Bob? option>
optgroup>
<optgroup label="2PM">
<option value="bkrw"> Be Kind Rewind option>
<option value = "stf"> Stranger Than Fiction option>
optgroup>
select>

Это позволяет визуально разделить список фильмов.
Живой пример:
Showtimes

3. < acronym >
С помощью тега acronym можно давать определение или расширенное объяснение группе слов. Когда вы наводите курсором на текст, который находится в теге acronym , появляется подсказка с текстом из атрибута title. Например:

1 2	The microblogging site <acronym title="Founded in 2006"> Twitteracronym> has recently struggled with downtimes.

Живой пример:
The microblogging site Twitter has recently struggled with downtimes.

4. < address >
Тег address довольно неизвестный, но это не значит, что он бесполезный! Как подразумевает название тега address , он позволяет нам семантически пометить адреса в HTML. Этот отличный маленький тег также выделит курсивом все, что находится в скобках, хотя стили запросто можно изменить через CSS.

<address>Glen Stansberry  
1234 Web Dev Lane  
Anywhere, USA 
address>

Живой пример:

Glen Stansberry 1234 Web Dev Lane Anywhere, USA

5. < ins > и < del >
Если вы хотите отобразить исправления с помощью разметки, теги ins и del - это то, что вам нужно. Как подразумевает название, ins выделяет то, что было добавлено в документ с помощью подчеркивания, а del показывает, что было удалено с помощью перечеркивания.

1	John <del>likesdel> <ins>LOVESins> his new iPod. John LOVES his new iPod.

Живой пример:
John ~~likes~~
LOVES
his new iPod. John LOVES his new iPod.

6. < label >
Элементы форм проще всего вылетают из головы, при разметке документа. Среди элементов формы один из самых забываемых – это тег label . Это не только быстрый способ давать метки элементам формы, тег label также может содержать атрибут for, чтобы определять для какого элемента дается метка. Теги label не только выполняют хорошую стилизацию, они также позволяют делать текст кликабельным для его ассоциации с элементом формы.

1 2	<label for="username">Usernamelabel> <input id="username" type="text" />

Живой пример:
Username

7. < fieldset >
Fieldset это маленький атрибут, который может добавить вашим формам свойство логической группировки элементов. После применения, тег fieldset рисует рамку вокруг элементов вместе с меткой. Бонус от применения тега legend вместе с fieldset в том, что вы можете определять название группы.

<form>
<fieldset>
<legend>Are You Smarter Than a 5th Grader?legend>
Yes <input name="yes" value="yes" type="radio" />
No <input name="no" value="no" type="radio" />
fieldset>
form>

Живой пример:

8. abbr
Тег abbr похож на тег acronym , за исключением того, что abbr используется только для определения аббревиатур. Также, как и с тегом acronym , вы можете определять заголовок внутри тега. Когда пользователь наводит курсор на аббревиатуру, внизу появляется полное значение. Тег abbr редко используется, но оно очень полезно для беглого чтения, орфографического контроля и поисковых механизмов.

1	<abbr title="Sergeant">Sgt.abbr> Pepper's Lonely Hearts Club is my favorite album.

Живой пример:
Sgt. Pepper's Lonely Hearts Club is my favorite album.

9. rel
Rel просто невероятно полезный атрибут, так как его можно применить к любому элементу HTML. Это помогает определять дополнительные переменные, которые никак не обозначены специальным образом. Это удобно, когда вы используете JavaScript в своем HTML. Если вы хотите иметь ссылку, которую вы могли бы редактировать, вы можете добавить:

1	< a rel="clickable" href="page.html"> This link is editable < / a>

JavaScript может искать ссылки со значением "clickable" в атрибуте rel, а затем уже применять какой-то Ajax для ее редактирования. Это одна из многих техник, которую вы можете использовать с атрибутом rel, возможности безграничны.

10. wbr
Тег wbr совсем неизвестный. Честно говоря, я сомневаюсь, что вы его когда-либо встречали, потому что он почти никогда не используется. Вообще-то я сам его никогда не видел до того, как стал готовить эту статью. По существу, тег позволяет определить место, в котором нужно сделать сброс строки, то только если это необходимо. Этот тег уникален, так как он доверяет разрешению браузера вставить обрыв строки там, где необходимо. Это идеально для создания разметок, в которых не будет горизонтальных прокруток.
Пример использования:

1	<span>How do you say Supercalifragilistic<wbr>expialidocious?span>

6 июля 2009 г.