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

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

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

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

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

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

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

2. Тэги для таблицы: , ,

Тэг обозначает шапку таблицы
Тэг подвал таблицы (должен идти сразу же после )
Тэг собственно само содержимое.


































СтранаТурЦена
Итого$2000
Болгарияавто$700
Турцияавто$800
Египетавиа$500

Страна Тур Цена
Итого $2000
Болгария авто $700
Турция авто $800
Египет авиа $500

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

3. Тэги для заглавий –

,

,

,

,

,

Те из вас, кто занимается продвижением, наверняка наслышаны о необходимости использования тэга

. Максимум, как правило, доходят до

. В следующий раз оформляя какой-то заголовок (или подзаголовок в разделе), помните, что помимо divов есть

,

,

,

,

,

4. Тэгия и

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


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


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

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

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


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

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

6. Тэги сокращений и

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

Например:


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


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

7. Тэги для цитат
и

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

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

Например:



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


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



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

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

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

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



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

Тэг

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

Например:




Персональные данные:





Персональные данные:



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

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 
Рекомендуем:

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.