20+ полезных HTML тэгов, о которых пора вспомнить

Человек использует свой мозг далеко не на 100%, и даже не 50% (как правило, ученые называют цифры от 3 до 7%). Аналогичная ситуация творится практически во всех сферах. Мы предпочитаем использовать те приемы, с которыми работали ранее, тем самым не давай себе развиваться и забывая то, что знали ранее.

Например, если вы лет 5 назад учились играть на гитаре, а потом бросили, то какие-то базовые навыки у вас останутся, но пальцы по струнам уже не будут бегать так быстро, как если бы вы продолжили развиваться. Вариант второй: вы могли остановиться на трех аккордах и одном переборе (в принципе большинство песен можно сыграть на этой универсальной комбинации), но согласитесь - результат будет гораздо лучше, если количество аккордов возрастет хотя бы до 20, переборов - до 3 и плюс пару боев. Тут же в качестве бонуса к развитию навыка вы получаете толпу заказчиков фанатов и поклонниц, которые бегают за вами умоляя сыграть:)

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

1. Тэг для комментариев: <!– –>

Очень простой html тэг, который почему-то используется редко. Оставляя комментарии в коде, вы облегчите жизнь тому, кто потом с этой версткой будет работать (например, программисту). Благодаря комментариям, можно скрывать временно ненужные блоки. Да и вам самим через полгода будет проще разобраться в коде, если в нем были оставлены пояснения (особенно это касается изучения нового материала).

2. Тэги для таблицы: <thead>, <tbody>, <tfoot>

Тэг <thead> - обозначает “шапку” таблицы
Тэг <tbody> - “подвал” таблицы (должен идти сразу же после <thead>)
Тэг <tfoot> - собственно само содержимое.


<table>
<thead>
<tr>
<td>Страна</td>
<td>Тур</td>
<td>Цена</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого</td>
<td></td>
<td>$2000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Болгария</td>
<td>авто</td>
<td>$700</td>
</tr>
<tr>
<td>Турция</td>
<td>авто</td>
<td>$800</td>
</tr>
<tr>
<td>Египет</td>
<td>авиа</td>
<td>$500</td>
</tr>
</tbody>
</table>


Семантическая верстка еще никому не повредила, да и знание стилей поможет вам потом украсить данные буквально за несколько строк (об этом будет отдельный урок).

3. Тэги для заглавий – <h1>,<h2>,<h3>,<h4>,<h5>, <h6>

Те из вас, кто занимается продвижением, наверняка наслышаны о необходимости использования тэга <h1>. Максимум, как правило, доходят до <h3>. В следующий раз оформляя какой-то заголовок (или подзаголовок в разделе), помните, что помимо div’ов есть <h1>,<h2>,<h3>,<h4>,<h5>, <h6>

4. Тэгия <ins> и <del>

Рекомендую использовать эти тэги в интернет-магазинах. Например:


<p><strong>Цена товара:</strong> <del>1250</del> <ins>700</ins> руб.</p>


Цена товара: 1250 700 руб.

5. Тэг для адреса <address>

Хотите написать в “подвале” адрес компании, а для стилевого оформления используете div? Тогда мы идем к вам еще раз вспомните про семантическую верстку и делайте так:


<address>191024, г. Санкт-Петербург
ст. м.Площадь Александра Невского, Невский проспект
д. 147, офис 301
</address>


6. Тэги сокращений <acronym> и <abbr>

Тэг <acronym> указывает на то, что текст является акронимом (аббревиатура, образованная из начальных букв слов или словосочетаний, произносимая как единое слово, а не побуквенно, например ABBA).
Тэг <abbr> указывает на то, что последовательность символов является аббревиатурой.
Всплывающие подсказки в том и другом случае прописываются с помощью тэга title.

Например:


<p>Лето - время поступления в <acronym title="Высшее Учебное Заведение">ВУЗ</acronym></p>


Лето - время поступления в ВУЗ

7. Тэги для цитат <blockquote> и <cite>

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

Например:


<blockquote>
<p>На голодный желудок русский человек ничего делать и думать не хочет, а на сытый - не может.</p>
<p>Фаина Раневская</p>
</blockquote>


На голодный желудок русский человек ничего делать и думать не хочет, а на сытый - не может.

Фаина Раневская

8. Тэг для выпадающего списка <optgroup>

Без лишних слов:


<select>
<optgroup label="AUDI">
<option value="A4">A4</option>
<option value="A5">A5</option>
<option value="A6">A6</option>
<option value="A8">A8</option>
</optgroup>
<optgroup label="LEXUS">
<option value="ES">ES</option>
<option value="GS">GS</option>
<option value="GX">GX</option>
<option value="HS">HS</option>
</optgroup>
</select>


9. Тэги для работы с формой и полями <fieldset>, <legend> и <label>

Тэг <fieldset> позволяет сгруппировать элементы формы, что облегчает работу с большим количеством данных. Браузеры, как правило, эти блоки ограничивают рамками.
Тэг <legend> применяется для создания заголовка к группе элементов.
Тэг <label> устанавливает связь между текстом и input’ом.

Например:


<form>
<fieldset>
<legend>Персональные данные: </legend>
<label>Имя: <input type="text" size="30" /></label>
<label>Фамилия: <input type="text" size="30" /></label>
<label>Email: <input type="text" size="30" /></label>
</fieldset>
</form>


*Примеры в статье приводятся без стилевого оформления, т.к. это тема отдельных уроков

Спасибо за добавление статьи в: