Топ популярных HTML-тегов

На свете существует огромное количество HTML-тегов, но реально, при верстке сайта, применяется всего лишь малая их часть. Начинающий веб-мастер стремится впитать в себя огромное количество ненужной информации об этих самых тегах, в дальнейшем большая ее часть оказывается не применяемой. В данной статье я приведу список HTML-тегов, действительно необходимых для веб-мастера.

Для желающих более подробно познакомится с html тегами, рекомендую on-line учебник по HTML и CSS.

С места в карьер.

Абзац

Замечательный тег <p>, который позволяет нам сформировать абзацы в тексте. Если текст сформирован в абзацы, то очень удобно управлять его отступами и шрифтом.

Заголовок

Заголовки формируются посредством тегов <h1>…<h6>. Конечно видоизменить текст на странице можно используя CSS, но именно заголовочные теги имеют большой вес при оценке релевантности страницы поисковому запросу (подробнее о поисковой оптимизации).

Ссылка

Гиперссылку можно сформировать используя тег <a>.

Перевод строки

Для перевода строки используется тег <br>. С его помощью так же можно формировать отступы по вертикали (если лень использовать стили).

Выделение текста

Для выделения части текста цветом или другим шрифтом (а может быть и тем и другим) идеально подходит тег <span>. Данный тег, в отличии от тега <div>, о котором речь пойдет ниже, не является блочным. А, значит, содержимое тега <span> не будет переносится на новую строку. Но, в отличии от тега <div>, нет возможности использовать все прелести позиционирования посредством CSS.

Блочный элемент

Если у вас есть блок с изображением или текстом, то для его позиционирования идеально подойдет тег <div>. Данный тег так же используется для реализации блочной верстки, которая, в отличие от табличной верстки, более структурирована и позволяет ускорить загрузку страницы в 2-3 раза. Почитать подробнее о блочной верстке.

По возможности нужно использовать именно блочный подход к верстке. Конечно, многие привыкли к табличной верстке (т.к. еще совсем недавно это был единственный инструмент, позволяющий сверстать сложную страницу), но все современные браузеры хорошо поддерживают верстку div-ами и необходимо пользоваться плодами прогресса.

Таблица

Ну куда же без нее. Таблицу позволяют сформировать теги <table>, <tr>, <td> и <th> для извращений. Так же таблицы применяются для верстки страниц (ох уж мне эта табличная верстка).

В случае применения таблиц в качестве инструмента табличной верстки,  а так же для изменения вида таблиц, необходимо пользоваться свойствами тега <td>:

• <colspan> — позволяет объединить несколько ячеек в одну. <td colspan=»2″> означает, что две ячейки будут объединены в одну.
• <rowspan> — по аналогии с тегом <colspan> объединяет строки.

Пример использования данных свойств.

Списки

Список должен открываться тегом <ul> (если список маркированный) или тегом <ol> (если список нумерованный), каждый из пунктов списка формируется тегом <li> .

Формы, для получения информации от пользователя

Вы наверняка видели на сайте поля ввода текста, пароля, кнопки отправки данных. Все это формируется посредством применения форм.

Все поля ввода оборачиваются тегом <form>, который отвечает за обозначение метода передачи данных и обрабатывающего скрипта.

Поля ввода и кнопки формируются тегами <input>. В зависимости от того, какой тип тега <input> указан в свойствах это будет либо поле ввода, либо поле ввода со скрытыми символами (для пароля), либо кнопка отправки данных.

В случае необходимости применения многострочного поля ввода применяется тег <textarea>. В свойствах этого тега можно задать количество символов в строке и количество столбцов.

Вот и вся HTML-примудрость.

С уважением, Андрей Морковин.