Забытые HTML-теги

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

Для начала предлагаю пройти тест, где за 5 минут нужно вспомнить как можно больше html-тегов.

56

Сомневаюсь, что вы вспомните их все, я вот не смог, мой результат вы видите. Да и не страшно, некоторые теги, такие, например, как <font> уже просто морально устарели. Однако есть и такие, которые не используются современными веб-разработчиками совершенно напрасно.

<fieldset>

Группирует элементы формы. Очень удобен при создании сложных форм, где большое количество полей. Сгруппировав их в логическом порядке вы облегчите пользователю заполнение формы. К примеру, можно сгруппировать обязательные и необязательные для заполнения поля. Визуально браузер отображает группу полей с рамкой, но стиль отображения всегда можно изменить с помощью CSS.

<form action="">
<fieldset>
<input type="text" />
<input type="text" />
</fieldset>
<fieldset>
<input type="text" />
<input type="text" />
</fieldset>
<input type="submit" value="отправить" />
</form>

<legend>

Создаёт заголовок у группы полей. Указывается сразу после открывающего тега fieldset.

<form action="">
<fieldset>
<legend>Заголовок</legend>
<input type="text" />
<input type="text" />
</fieldset>
<fieldset>
<legend>Заголовок формы</legend>
<input type="text" />
<input type="text" />
</fieldset>
<input type="submit" value="отправить" />
</form>

Пример:

<label>

Метка (заголовок) для элементов формы. Имеет атрибут for, который указывает, какому именно элементу соответствует метка. Для этого значение атрибута должно совпадать с id элемента. При этом кликнув на метку активируется соответствующий элемент: поле ввода, «флажок» (checkbox) или переключатель (radiobutton). Учитывая это, рекомендую в CSS указывать для метки «привязанной» к radiobutton или checkbox стиль cursor:pointer , что облегчит пользователю «попадание» курсором в такой переключатель.

Существует два способа написания тега label:

<label for="sample">метка</label><input id="sample" type="text" />

И второй способ, где label служит контейнером для input:

<label for="newsample">метка<input id="newsample" type="text" /></label>

<optgroup>

Группирует элементы выпадающего списка select. Имеет атрибут label, значение которого отобразится как заголовок группы.

<select id="" name=""> 
<option value="sel">Выбрать марку...</option>
<optgroup label="импортные"></optgroup> 
<option value="sony">Sony</option> 
<option value="ph">Philips</option>
<option value="pan">Panasonic</option>
<optgroup label="отечественные"></optgroup>
<option value="rol">Rolsen</option>
<option value="pol">Polar</option>
</select>

Пример:

<cite>

Форматирует текст как цитату. В отличие от более известного blockquote является строчным элементом, что позволяет указывать цитату внутри блока текста. Браузеры отображают текст заключённый в тег cite наклонным.

Цицерон сказал, что мы можем понять, что угодно, если будем двигаться постепенно и записывать уже понятое

<del> и <ins>

Применяются при редактировании ранее опубликованного документа. Допустим, у вас есть текст, в котором содержится устаревшая, неверная, потерявшая актуальность информация. Такой текст можно отформатировать тегом <del>. Если к тому же вместо устаревшей информации добавляется новая, то такой текст можно отформатировать тегом <ins>.

Теги имеют атрибут datetime, с помощью которого указывается, когда были внесены изменения, и атрибут cite указывающий причину изменения. Но пользователь этих данных не увидит, для него можно создать подсказку, использовав атрибут title.

Выглядеть это будет так:
Цена 100$ 89.90$

<address>

C помощью тега <address> указывается данные автора документа. Обратите внимание, в спецификации HTML указано, что этот тег предназначен именно для хранения информации об авторе, а не для того чтобы с помощью него указывать географическое положение кого-либо. Поисковые системы анализируют содержимое этого тега для сбора информации об авторах сайтов.

<abbr>

Для обозначения аббревиатуры — слова, образованного из названий начальных букв или из начальных звуков слов, входящих в исходное словосочетание.

ФБР — Федеральное бюро расследований
КГБ — Комитет государственной безопасности

Внимание! Internet Explrer 6 не поддерживает тег <abbr>.

<acronym>

Акроним — аббревиатура, образованная из начальных букв слов или словосочетаний, произносимая как единое слово, а не побуквенно.
У тега <acronym> есть атрибут title, в котором указывается полное значение аббревиатуры, в несокращённом виде.

Позже, агитируя за перестройку комсомола, М.С. Горбачев скажет: «Сейчас нередко сетуют на то, что комсомол безынициативен, мало у него самостоятельности».

<hr>

Горизонтальная линия-разделитель. Тег <hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.