На сегодняшний день от веб-разработчиков часто ожидают, что они будут работать в нескольких языках. В результате, это довольно сложно выучить все, что нам может предложить язык и легко оказаться в ситуации, когда ты не используешь весь потенциал определенных более специализированных, но очень полезных тегов.
К сожалению, мы не приведем весь тот огромный потенциал этих тегов, которые остались в тени. Но никогда не поздно вернуться в игру и начать писать код, который включает всю ту мощь, которая содержится в не слишком часто используемых тегах.
Хотим представить вам наименее используемые и оставшиеся непонятыми теги HTML. До тех пор пока они могут быть менее популярны, они до сих пор удобны в определенных ситуациях.
1. <cite>
Все мы знакомы с тегом <blockquote>, но знаете ли вы о его младшем брате <cite>? Тег <cite> позволяет определять текст внутри элемента как ссылку. Обычно браузер отображает текст внутри тега <cite> курсивом, но это легко можно изменить с помощью CSS.
Тег <cite> очень полезен для цитирования библиографий и других ссылок сайта.
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>
Это позволяет визуально разделить список фильмов.
3. <acronym>
С помощью тега <acronym> можно давать определение или расширенное объяснение группе слов. Когда вы наводите курсором на текст, который находится в теге <acronym>, появляется подсказка с текстом из атрибута title. Например:
The microblogging site <acronym title="Founded in 2006"> Twitter</acronym>
has recently struggled with downtimes.
4. <address>
Тег <address> довольно неизвестный, но это не значит, что он бесполезный! Как подразумевает название тега <address>, он позволяет нам семантически пометить адреса в HTML. Этот отличный маленький тег также выделит курсивом все, что находится в скобках, хотя стили запросто можно изменить через CSS.
<address>Glen Stansberry
1234 Web Dev Lane
Anywhere, USA
</address>
5. <ins> и <del>
Если вы хотите отобразить исправления с помощью разметки, теги <ins> и <del> - это то, что вам нужно. Как подразумевает название, <ins> выделяет то, что было добавлено в документ с помощью подчеркивания, а <del> показывает, что было удалено с помощью перечеркивания.
John <del>likes</del> <ins>LOVES</ins> his new iPod. John LOVES his new iPod.
6. <label>
Элементы форм проще всего вылетают из головы, при разметке документа. Среди элементов формы один из самых забываемых – это тег <label>. Это не только быстрый способ давать метки элементам формы, тег <label> также может содержать атрибут for, чтобы определять для какого элемента дается метка. Теги <label> не только выполняют хорошую стилизацию, они также позволяют делать текст кликабельным для его ассоциации с элементом формы.
<label for="username">Username</label>
<input id="username" type="text" />
7. <fieldset>
Fieldset это маленький атрибут, который может добавить вашим формам свойство логической группировки элементов. После применения, тег <fieldset> рисует рамку вокруг элементов вместе с меткой. Бонус от применения тега <legend> вместе с fieldset в том, что вы можете определять название группы.
<form>
<fieldset>
<legend>Are You Smarter Than a 5th Grader?</legend>
Yes <input name="question" value="yes" type="radio" />
No <input name="question" value="no" type="radio" />
</fieldset>
</form>
8. <abbr>
Тег <abbr> похож на тег <acronym>, за исключением того, что <abbr> используется только для определения аббревиатур. Также, как и с тегом <acronym>, вы можете определять заголовок внутри тега. Когда пользователь наводит курсор на аббревиатуру, внизу появляется полное значение. Тег <abbr> редко используется, но оно очень полезно для беглого чтения, орфографического контроля и поисковых механизмов.
<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.
9. rel
Rel просто невероятно полезный атрибут, так как его можно применить к любому элементу HTML. Это помогает определять дополнительные переменные, которые никак не обозначены специальным образом. Это удобно, когда вы используете JavaScript в своем HTML. Если вы хотите иметь ссылку, которую вы могли бы редактировать, вы можете добавить:
Убрать подсветку кода
<a rel="clickable" href="page.html">This link is editable</a>
JavaScript может искать ссылки со значением "clickable" в атрибуте rel, а затем уже применять какой-то Ajax для ее редактирования. Это одна из многих техник, которую вы можете использовать с атрибутом rel, возможности безграничны.
10. <wbr>
Тег <wbr> совсем неизвестный. Честно говоря, я сомневаюсь, что вы его когда-либо встречали, потому что он почти никогда не используется. Вообще-то я сам его никогда не видел до того, как стал готовить эту статью. По существу, тег позволяет определить место, в котором нужно сделать сброс строки, но только если это необходимо. Этот тег уникален, так как он доверяет разрешению браузера вставить обрыв строки там, где необходимо. Это идеально для создания разметок, в которых не будет горизонтальных прокруток.
Пример использования:
<span>How do you say Supercalifragilistic<wbr>expialidocious?</span>