10 тегов HTML, которые редко используют новички

<!— Начало навигации —>
<ul>
<li>Пункт меню 1</li>
<li>Пункт меню 2</li>
</ul>
<!— Конец навигации —>
<!— Начало основного контента —>
<p>Это основной контент.</p>
    …

<thead>, <tbody>, и <tfoot>

<thead>

Оборачиваем строки таблицы в <thead></thead>. Таким образом формируется заголовок таблицы.

<tfoot>

Обернув строки в <tfoot></tfoot> формируем итоговые строки внизу таблицы. Строки <tfoot /> должны определяться до строк <tbody />, таким образом, итоговые строки выводятся на экран до остальных строк таблицы.

<tbody>

<tbody></tbody>.

<table>
<thead>
<tr>
<td>Пунтк</td>
<td>Кол-во</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Сумма</td>
<td>7</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>#1</td>
<td>3</td>
</tr>
<tr>
<td>#2</td>
<td>4</td>
</tr>
</tbody>
</table>

Выпадающий список является великолепным способом представить данные для выбора пользователя. Они не только занимают мало места, но и знакомы пользователям и легки в применении. Чудесным свойством <optgroup /> является возможность создавать категории (или подзаголовки) для элементов списка.

<select>
<optgroup label=»Бейсбольные команды»>
<option value=»Detroit Tigers»>Detroit Tigers</option>
<option value=»Chicago Cubs»>Chicago Cubs</option>
</optgroup>
<optgroup label=»Футбольные команды»>
<option value=»Detroit Lions»>Detroit Lions</option>
<option value=»Chicago Bears»>Chicago Bears</option>
</optgroup>
</select>

<h1>,<h2>,<h3>,<h4>,<h5>, и <h6>

Конечно, каждый использует заголовки. Но если быть честным, то когда вы в последний раз использовали <h3 /> или заголовок еще более низкого уровня? Заголовки позволяют строить меньше семантических конструкций, таких как  дополнительные стили для текста в <div />.

<fieldset> и <legend>

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

<form>
<fieldset>
<legend>General Information: </legend>
<label>Name: <input type=»text» size=»30″ /></label>
<label>Email: <input type=»text» size=»30″ /></label>
<label>Date of birth: <input type=»text» size=»10″ /></label>
</fieldset>
</form>

<label>

Тег <label> никак не влияет на стиль. Он влияет на функциональность страницы.

<label> используется для определения метки элемента ввод. Метка сама воспринимает нажатия кнопки мыши, делая активным соответствующее поле ввода. Такое свойство меток действует для текстовых полей и радио кнопок.

<form>
<label>Имя: <input type=»text» size=»30″ /></label>
<label>Мужчина: <input type=»radio» name=»sex» /></label>
<label>Женщина: <input type=»radio» name=»sex» /></label>
</form>

<blockquote>

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

<blockqoute>
Пример использования тега &lt;blockquote&gt;
</blockqoute>

<cite>

Нельзя сказать, что <cite> относится к <blockquote>, но обычно их используют вместе.

Вспомните о теге <cite>, когда вам нужно процитировать кого-нибудь.
Пример использования тега <blockquote> совместно с тегом <cite>. Данное предложение заключено в тег <cite>.

<blockqoute>
    Пример использования тега blockquote совместно с тегом cite.
<cite>Данное предложение заключено в тег &lt;cite&gt;.</cite>
</blockqoute>

<dl>

Использование списков дает великолепные возможности для организации информации. Каждый знает о <ul>, но как часто вы используете <ol> и <dl>? Вероятно название «список определений» может смутить начинающего разработчика и заставить его думать, что такой список можно использовать только для вставки определений и условий. Однако такое положение не соответствует действительности.
Типы списков
Неупорядоченный список (ul)
Упорядоченный список (ol)
Список определений (dl)
Что они делают
Неупорядоченный список (ul): список с указателями точками
Упорядоченный список (ol): пронумерованный список
Список определений (dl): Список с определениями элементов
Причины использования списков
Последовательный стиль контента
Просто создать
Универсальны

Способ вывода информации каждым типом списка  отличается от другого. Наверняка не нужно останавливаться на <ul> и <ol>, но структура списка определений требует дополнительных разъяснений.

<dl>
<dt>Пункт списка #1</dt>
<dd>Определение для пункта списка #1</dd>
<dt>Пункт списка #2</dt>
<dd>Определение для пункта списка #2</dd>
</dl>

Вместо определения элемента списка (<li>), мы используем два тега: <dt> и <dd>. <dt> определяет каждый пункт списка, а <dd> описывает выше стоящий пункт. Ниже приведен список в соответствии с ранее показанным кодом списка определений.

При использовании HTML нужно использовать коды ASCII, когда требуется вставить какой-нибудь символ. Такое правило требует дополнительных действий, но оно гарантирует, что все символы будут правильно выведены на экран пользователя, и браузер не воспримет их как часть разметки. Вам никогда не попадался какой-нибудь текст, который отображается неправильно? Обычно проблемный текст создается с использованием кавычек, апострофов, знаков больше-меньше и так далее. Таких символов на самом деле не много, и стоит запомнить их коды ASCII.