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

От веб-разработчиков в наши дни часто ожидается знание и работа на разных языках. В результате сложно выучить все, что может предложить язык, и легко найти себя, не используя весь потенциал некоторых более специализированных, но очень полезных тегов.

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

Вот десять из самых недоиспользуемых и неправильно понятых тегов в HTML. Хотя они могут быть менее знакомыми, они все же весьма полезны в определенных ситуациях.

1. <цитировать>

Все мы знакомы с тегом <blockquote>, но знаете ли вы о младшем брате <blockquote> <cite>? <cite> позволяет вам определять текст внутри элемента в качестве ссылки. Обычно браузер отображает текст внутри тега <cite> курсивом, но это можно изменить одним касанием CSS.

Тег <cite> действительно полезен для цитирования библиографических и других ссылок на сайты. Вот пример того, как использовать тег cite в абзаце:

Прорывная организационная книга Дэвида Аллена « Get Things Done » захватила сеть штурмом.

2. <optgroup>

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

Живая демоверсия:

Showtimes

смерч Наполеон Динамит Как насчет Боба? Будь добрым перемотать Незнакомец, чем вымысел

Это позволяет списку выбора визуально отделить списки фильмов.

3. <аббревиатура>

Тег <acronym> — это способ определения или дальнейшего объяснения группы слов. При наведении курсора на текст, в котором используется тег <acronym>, ниже появляется поле с текстом из тега заголовка. Например:

Живая демоверсия:

SEO полна хитрости и магии.

4. <адрес>

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

5. <ins> и <del>

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

Живая демоверсия:

Джон нравится лЮБИТ его новый iPod.

6. <ярлык>

Элементы разметки легче всего забыть при разметке документа. Одним из наиболее забытых элементов формы является тег <label>. Это не только быстрый способ отметить текст метки, тег <label> также может передавать атрибут «for», чтобы указать, какому элементу должна быть присвоена метка. Эти теги <label> не только отлично подходят для стилей, но и позволяют сделать заголовок кликабельным для связанного элемента.

7. <fieldset>

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

Живая демоверсия:

8. <abbr>

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

Живая демоверсия:

Сержант Pepper’s Lonely Hearts Club — мой любимый альбом.

9. отн.

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

Javascript может искать ссылку с атрибутом rel «clickable», и он знает, как применить Ajax и разрешить его редактирование inline. Это один из многих методов, которые вы можете использовать с атрибутом rel, поскольку возможности безграничны.

10. <wbr>

Тег <wbr> — невероятно скрытый тег. Если честно, я сомневаюсь, что многие из вас соприкасались с тегом, так как он почти никогда не использовался. (По правде говоря, я не видел тег до того, как начал изучать эту статью.) По сути, этот тег позволяет вам указать место, где вы думаете, что разрыв строки может быть полезен, но только при необходимости. Этот тег является уникальным, так как он полагается на усмотрение браузера вставить строку, если это необходимо. Это идеально подходит для создания макетов, которые вы хотите избежать горизонтальных полос прокрутки.

Если вы хотите добиться того же эффекта, но без использования тега <wbr>, вы также можете попробовать ­­ , Следует отметить, что ни один из этих тегов не имеет полной поддержки во всех браузерах. Чтобы узнать, какие браузеры поддерживают теги, ознакомьтесь с этой статьей Quirksmode.