Помимо наиболее распространенных тегов, таких как <a> и <img>, в спецификации HTML есть целый набор недоиспользуемых тегов с богатой семантической и потенциальной мощью для разметки. В годы, предшествовавшие появлению CSS, разработчики имели право всегда использовать одни и те же теги для управления своей презентацией, которая варьировалась в зависимости от разметки вместо пользовательских правил. Просто подумайте о <b> и <font>.
Теперь, когда CSS хорошо поддерживается, нет никаких причин не использовать правильный тег для правильной работы и начать включать следующие теги в вашу разметку. Поддержка браузеров также очень хороша для самих тегов: они старше, чем вы думаете.
Я не говорю о наполнителях, таких как <acronym> или <abbr>: я знаю, что они не очень полезны, и вы никогда не будете включать их в каждую аббревиатуру в своей основной копии. Эти теги не меняют жизнь, но они имеют значение в удобстве использования и ясности кода. Если вы не уверены, что будет отображаться некоторыми фрагментами, я советую вам попробовать их в своем браузере. Они были протестированы и работоспособны в Firefox 3.6.
1. <fieldset> — это способ сгруппировать набор полей формы, таких как поля ввода или текстовые области. Использование длинных форм не является преимуществом удобства использования, но при необходимости вы можете разделить форму на несколько разделов, используя этот элемент блока.
2. <legend> идет рука об руку с <fieldset>: когда вы вставляете его в fieldset, его содержимое будет отображаться как заголовок группы полей:
<form>
<fieldset>
<legend>My fields<legend>
<p>Enter your name... <input type="text" name="nickname" /></p>
</fieldset>
</form>
3. <label> обладает как семантической, так и практической силой, которую я обычно никогда не использовал для блага. Метка должна быть связана с полем формы одним из двух способов, которые я покажу. Когда метка связана с полем таким образом, она действует как расширение для нее; например, нажатие на ярлык флажка включит и выключит сам ящик. Вместо этого, щелкнув метку текстового поля, можно было бы сфокусироваться на нем и поместить курсор в него, что сделает пользователя готовым к записи. Таким образом, ярлыки расширяют область, доступную для пользователя
Но это не все. Метки также имеют семантическую связь с элементами формы и, как таковые, считываются программами чтения с экрана при обращении к форме. Нет причин изобретать стилизованные теги <div> для ваших форм: вместо этого вставляйте метки.
Вы можете связать метку с полем, включив поле в саму метку:
<label><input type="checkbox" name="agree" /> I agree to the terms and conditions</label>
Или вы можете использовать идентификатор для входного тега, на который вы ссылаетесь в метке. Какой метод вы должны использовать, это вопрос упрощения применения стилей к обоим элементам.
<label for="nickname">Nickname</label>
<input type="text" id="nickname" name="nickname" />
4. <кнопка> блочный элемент является гораздо более гибким , чем его кузен <входной тип = «кнопка»> и <входной тип = «представить»>. Причина в том, что вы можете вкладывать другие теги в содержимое <button>.
Таким образом, вы можете перейти от простой кнопки:
<input type="button" value="A button" />
к более сложному:
<button><strong>A strong button</strong></button>
5. <dl> обозначает Список определений. Это эквивалент <ol> и <ul>, когда базовый элемент представляет собой кортеж, состоящий из двух значений: name и content. Первоначально они использовались для глоссариев, но вы можете найти гораздо больше креативных решений в Интернете.
6. <dt> — это термин определения, используемый в списке определений выше. Оставайтесь с нами на три строки, чтобы увидеть пример кода, который включает в себя оба.
7. <dd> — это определение содержания.
Например, Zend Framework по умолчанию отображает формы следующим образом:
<form>
<dl>
<dt>Nickname:</dt>
<dd><input type="text" name="nickname" /></dd>
</dl>
</form>
И это действительно способ удалить некоторые из правил <div class = «label»>.
8. <optgroup> используется для группировки параметров внутри элемента select. Когда имеется много тегов <option>, простой иерархический уровень может помочь пользователю в его выборе. Только сами параметры могут быть выбраны, но метки optgroup будут действовать как заголовок для группы.
<select name="enemy">
<optgroup label="Milky Way">
<option value="Apophis">Apophis</option>
<option value="Anubis">Anubis</option>
<option value="Replicators">Replicators</option>
</optgroup>
<optgroup label="Pegasus galaxy">
<option value="Wraith">Wraith</option>
<option value="Genii">Genii</option>
</optgroup>
</select>
9. <blockquote> — это блочный элемент, предназначенный для цитирования других источников. Вероятно, это один из наиболее популярных тегов, описанных в этой статье. Вы можете попрощаться с <div class = «quote»>, если вы еще этого не сделали.
10. <col> и <colgroup> при вставке между тегом <table> и его содержимым соответственно действуют как заполнители для столбца или набора столбцов. Всякий раз, когда вы хотите применить стили на основе столбцов, вместо того, чтобы повторять классы во всех ячейках таблицы, вы можете просто организовать их вокруг столбцов:
<table>
<col style="background-color: grey;" />
<col style="background-color: blue;" />
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
Я надеюсь, что вы получили несколько советов, о которых вы не знали, — не стесняйтесь добавлять свои обычно пренебрегаемые теги HTML в комментарии, если вы считаете, что они действительно будут полезны.