На свете существует огромное количество HTML-тегов, но реально, при вёрстке сайта, применяется всего лишь малая их часть. Начинающий вебмастер стремится впитать в себя огромное количество ненужной информации об этих самых тегах. В дальнейшем, большая её часть оказывается не применяемой. В данной статье, я приведу список HTML-тегов, действительно необходимых для вебмастера.
Для желающих более подробно познакомиться с html-тегами, рекомендую онлайн-учебник по HTML и CSS.
С места в карьер.
Абзац
Замечательный тег <p>, который позволяет нам сформировать абзацы в тексте. Если текст сформирован в абзацы, то очень удобно управлять его отступами и шрифтом.
Заголовок
Заголовки формируются посредством тегов <h1>...<h6>. Конечно, видоизменить текст на странице можно, используя CSS. Но именно «заголовочные» теги имеют большой вес при оценке релевантности страницы поисковому запросу (подробнее о поисковой оптимизации).
Ссылка
Гиперссылку можно сформировать, используя тег <a>.
Перевод строки
Для перевода строки, используется тег <br>. С его помощью также можно формировать отступы по вертикали (если лень использовать «стили»).
Выделение текста
Для выделения части текста цветом или другим шрифтом (а может быть и тем, и другим), идеально подходит тег <span>. Данный тег, в отличие от тега <div>, о котором речь пойдёт ниже, не является блочным. А значит, содержимое тега <span> не будет переноситься на новую строку. Но, в отличии от тега <div>, у тега <span> нет возможности использовать все прелести позиционирования посредством CSS.
Блочный элемент
Если у вас есть блок с изображением или текстом, то для его позиционирования идеально подойдёт тег <div>. Данный тег также используется для реализации блочной вёрстки, которая, в отличие от табличной вёрстки, более структурирована и позволяет ускорить загрузку страницы в 2-3 раза. Почитать подробнее о блочной вёрстке.
По возможности, нужно использовать именно блочный подход к вёрстке. Конечно, многие привыкли к табличной вёрстке (т. к. ещё совсем недавно это был единственный инструмент, позволяющий сверстать сложную страницу), но все современные браузеры хорошо поддерживают вёрстку «дивами» и необходимо пользоваться плодами прогресса.
Таблица
Ну, куда же без неё? Таблицу позволяют сформировать теги <table>, <tr>, <td> (и <th> для извращений). Также таблицы применяются для вёрстки страниц (ох уж мне эта табличная вёрстка).
В случае применения таблиц в качестве инструмента табличной вёрстки, а также для изменения вида таблиц, необходимо пользоваться свойствами тега <td>:
- <colspan> — позволяет объединить несколько ячеек в одну. Запись «<td colspan="2">» означает, что две ячейки будут объединены в одну.
- <rowspan> — по аналогии с тегом <colspan> объединяет строки.
Пример использования данных свойств.
Списки
Список должен открываться тегом <ul> (если список — маркированный) или тегом <ol> (если список — нумерованный), каждый из пунктов списка формируется тегом <li>.
Формы для получения информации от пользователя
Вы, наверняка, видели на сайте поля ввода текста, пароля, кнопки отправки данных. Всё это формируется посредством применения форм.
Все поля ввода оборачиваются тегом <form>, который отвечает за обозначение метода передачи данных и обрабатывающего скрипта.
Поля ввода и кнопки формируются тегами <input>. В зависимости от того, какой тип тега <input> указан в свойствах, это будет либо поле ввода, либо поле ввода со скрытыми символами (для пароля), либо кнопка отправки данных.
В случае необходимости применения многострочного поля ввода применяется тег <textarea>. В свойствах этого тега можно задать количество символов в строке и количество столбцов.
Вот и вся HTML-примудрость.
Автор: Андрей Морковин.
Ещё материалы по этой теме:
- Раскрутка сайта. Часть 2. Маркетинг
- Раскрутка сайта. Часть 1. Поисковая оптимизация
- Юзабилити сайта: Ориентируем пользователя на сайте
- Кратко о техдизайне (создаём иконку)
- Введение: Как делать сайты
Комментарии:
Never Lex
Чтобы нарисовать красивую таблицу (не макет сайта, а частную задачу, прайс-лист, например) имхо следует пользоваться всей полнотой тегов семейства table. А именно tbody, thead, tfoot, caption (это те, которых вы не назвали). Можно конечно оформить всё классами, но так удобней и семантичней. Например, вот такой прайс: *** (делал для заказчика).
Александр
Написали бы как с помощью css нарисовать красивые стили для таблицы.
Блин замучился уже