От автора: если вы решили заняться сайтостроением, то вам нужно знать хотя бы основные теги html. Это те базовые знания, которое помогут вам создать свой первый простой сайт.
В этой статье постараюсь описать основные теги языка html. Всего их более сотни, но действительно важных и постоянно нужных не так много. Самые главные теги
html — это глобальный тег-контейнер, в который помещается все содержимое веб-страницы. Он является парным, впрочем, как и большинство описываемых далее тегов. Если и будут попадаться одинарные, то я об этом скажу.
head — содержит разную информацию, которая никак не будет выводиться на странице, но от нее непосредственно зависит внешний вид информации. Например, в head прописывается кодировка, подключается таблица стилей и файлы javascript. То есть здесь указывается все, что нужно для корректной работы странички. Следующие четыре тега прописываются именно в head.
link — с помощью этого одинарного тега подключаются внешние файлы. Например, иконка или таблица стилей.
script — подключает файлы с расширением js (javascript).
title — задает название страницы, ее заголовок, который будет виден в поисковиках и в браузере.
meta — одинарный тег, в котором прописывается служебная информация, такая, как кодировка или ключевые слова.
body — тело страницы. Контейнер для всего содержимого, которое будет непосредственно выведено на веб-страничку.
Теги для текста, списки
p — создает параграф или абзац, который отделяется от других элементов небольшими вертикальными отступами. Основной элемент для хранения текстовой информации.
blockquote — большая цитата, которая можете содержать в себе другие теги для ее оформления. Может состоять, например, из нескольких абзацев.
h1 — h6 — теги для выделения заголовков на веб-странице. H1 – самый главный и далее по убыванию важности.
Рис. 1. Заголовки в html.
q — маленькая цитата.
b, strong — выделяет текст жирным. Второй тег также придает словам особую важность.
em, i — выделение курсивом.
sub, sup — выводит текст в нижнем/верхнем индексе, заодно уменьшая немного размер шрифта.
ol — в html это тег нумерованного списка, пунктам которого будут присваиваться порядковые номера.
ul — маркированный список. Его пункты просто отмечаются маркером, внешний вид которого можно изменить. Маркированный список делают тогда, когда нет нужно в строгом перечислении каких-то пунктов.
li — парный тег, в который помещается один пункт маркированного или нумерованного списка. То есть ul или ol выступает лишь в роли контейнера.
Рис.2. Маркированный и немаркированный списки.
Ссылки
Для ссылок в html есть отдельный тег — <a>, который имеет один обязательный атрибут:
|
1 |
<a href = "адрес, куда перейти">анкор</a></p> |
Картинки
Картинки в html вставляются с помощью одинарного тега <img>. Обязательным атрибутом является src (source), то есть путь к самой картинке. Остальные параметры (размер, позиционирование, эффекты) лучше настраивать через css.
Таблицы
table — тег-контейнер, в который помещается вся таблица.
tr — ряд таблицы, в который вписываются ее ячейки. Сам ряд никак нельзя выделить, он выступает лишь в роли контейнера.
td — ячейка таблицы. Вот к ней как раз и можно применить какие-то стили, размер, в нее можно вписать информацию, вставить картинку или видео.
Пустые блочные и строчные контейнеры
div — пустой блочный контейнер, не выполняющий больше никаких функций. До сих пор с его помощью, например, верстают боковую колонку на сайте.
span — аналогично с дивов это пустой контейнер, но не блочный, а строчный. Чаще всего применяется для выделения отдельных кусков текста и применения к ним каких-то интересных стилей.
Мультимедиа
В список тегов html можно добавить и более современные. Например, тег video, в атрибутах которого можно задать адрес до видеоролика, а также кодеки для его проигрывания на веб-странице. Сюда же входит audio. С помощью этого парного тега можно вставить аудиозапись.
Формы
form — в этот тег помещается вся форма (обычно для регистрации, заказа чего-то). Имеет атрибуты, связывающие ее с PHP, иначе она не будет работать.
input — основной одинарный тег, который позволяет вставить в форму различные поля (для ввода текста, телефона, выбора даты рождения).
textarea — большое текстовое поле. Обычно в него можно вписать отзыв или комментарий.
Рис. 3. Простая форма, созданная с помощью тегов form и input.
HTML5
Хотелось бы также упомянуть несколько современных тегов, которые появились в HTML5.
header — шапка сайта, статьи или какого-то раздела.
footer — подвал сайта, статьи или какого-то раздела.
aside — второстепенная информация, не имеющая непосредственной связи с главным содержанием. Но в этот тег не советуют вставлять сайдбар (боковую колонку), которую лучше пока делать по-старому с помощью div.
figure — позволяет группировать элементы. Самый распространенный пример – картинка и описание для нее.
section — раздел сайта (обычно со своим заголовком).
article — независимая статья, новость или заметка.
nav — главная навигация сайта.
Конечно, это не все теги, которые появились в HTML5, но практика показывает, что именно перечисленные пригодятся вам больше всего. К сожалению, у всех этих новых элементов нет дружбы со старыми версиями Internet Explorer, поэтому для него нужно реализовывать отдельную поддержку.
В статье были описаны лишь самые распространенные элементы. Полный список тегов html c описанием можно посмотреть в каком-нибудь словаре. Самый популярный в рунете – htmlbook.
Один раз прочитав статью вы не запомните все перечисленные теги. Намного лучше они запоминаются при реальной работе над сайтом. Это были основные теги для создания сайта html. Заходите на наш блог и вы найдете гораздо больше информации по созданию собственного сайта своими руками.
