HTML справочник
HTML и XHTML теги
XHTML справочник | HTML и XHTML теги
Некоторые HTML теги, представленные внизу, устарели
Смотрите современные HTML теги пятой версии.
Предисловие
Вы находитесь на странице, с которой, можно сказать, все начиналось. Это одна из тех первых пяти-семи страниц, которые летом 2009 года я осмелился назвать сайтом, а чуть позже разместил на платном хостинге. Некоторые HTML теги, представленные здесь являются наследием более ранних версий Гипертекстового языка разметки документов HTML и уже не используются, поэтому приглашаю вас посмотреть свежие теги HTML 5, а это место пусть останется символом того, что всегда с чего-то нужно начинать.
A
Tег <a> </a> – используется для создания ссылок.
Атрибуты: href – указывает адрес ресурса (url);
<a href="mailto:your@email"> </a> – гиперссылка для отправки письма;
title – всплывающая подсказка;
target – способ открытия документа; значения: "_self" - по умолчанию и "_blank" - открывает в новом окне.
Пример: <a href="http://ab-w.ru" target="_blank"> </a>
Тег <abbr> </abbr> – используется для аббревиатуры.
Тег <acronym> </acronym> – текст между тегов подчеркнут пунктирной линией.
Атрибуты: title – всплывающая подсказка.
Тег <address> </address> – отображает текст курсивом.
В
Тег <b> </b> – устаревший тег для жирного текста, почти не используется.
Тег <big> </big> – применяется для более крупного по размеру текста.
Тег <blockquote> </blockquote> – для цитат, обеспечивает харрактерные отступы.
Тег <body> </body> – внутри этого тега располагается вся видимая часть документа.
Атрибуты: bgcolor – определяет цвет фона документа;
background – определяет фон, им может быть любое изображение;
text – устанавливает цвет текста содержимого HTML документа;
link, alink, vlink – цвет гиперссылок: обычной, при нажатии и на которой уже побывали.
Пример: <body bgcolor="yellow" text="green" link="red" alink="blue">
Тег <br /> – непарный, используется для переноса строки.
Тег <button> </button> – этот тег создает кнопку со встроенным изображением.
C
Тег <caption> </caption> – предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table> </table>, причем сразу после открывающего тега; такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
Атрибуты: align – выравнивание по горизонтали.
Пример: <table> <caption> Текст </caption> ... </table>
Тег <center> </center> – устаревший тег для центрирования, почти не используется.
Тег <cite> </cite> – для цитат, коментариев; текст внутри него курсивный.
Атрибуты: title – всплывающая подсказка.
Тег <code> </code> – используется для написания програмного кода; моноширинный.
Атрибуты: title – всплывающая подсказка.
D
Тег <dd> </dd> – тег описания списка определений, шрифт внутри него жирный.
Пример: <dl title="Это список определений">
<dt>Какое-то определение</dt>
<dd>Описание этого определения</dd>
</dl>
Тег <del> </del> – выдает зачеркнутый текст; рекомендуется использовать именно его вместо тега <s> </s>.
Тег <dfn> </dfn> – отмечает текст курсивом, как определение.
Атрибуты: title – всплывающая подсказка.
Тег <div> </div> – контейнер для содержимого; может содержать внутри себя другие <div> </div>; создает блок; ему можно назначить любое форматирование с помощью CSS.
Тег <dl> </dl> – создает список определений.
Атрибуты: title – всплывающая подсказка.
Пример: <dl title="Это список определений">
<dt>Какое-то определение</dt>
<dd>Описание этого определения</dd>
</dl>
Тег <dt> </dt> – это определение списка определений.
Пример: <dl title="Это список определений">
<dt>Какое-то определение</dt>
<dd>Описание этого определения</dd>
</dl>
Е
Тег <em> </em> – используется для обозначения текста курсивом.
F
Тег <font> </font> – определяет свойства выводимого шрифта.
Атрибуты: size – определяет размер шрифта от 1 до 7, по умолчанию - 3;
color – определяет цвет выводимого текста в режиме RGB.
Пример: <font size="3" color="blue"> </font>
Тег <form> </form> – основа формы, которая предоставляет пользователю возможность ввода и выбора данных и другой информации.
Атрибуты: action – содержит адрес страницы с серверным сценарием;
method – метод передачи данных; возможные значения: "get" или "post";
name – имя, идентификатор формы.
Пример: <form name="имя формы" method="post" action="адрес страницы обработчика">
Логин: <input type="text" name="произвольное имя">
Пароль: <input type="password" name="произвольное имя">
<input type="submit" value="войти">
</form>
H
Tег <h1> </h1> – создает заголовок; имет значения от 1 до 6.
Атрибуты: align – выравнивание заголовка со значениями "left", "right" и "center".
Пример: <h2 align="left"> </h2> – "left" по умолчанию, его можно не указывать.
Tег <head> </head> – содержит индексирующую информацию о документе.
Tег <hr /> – непарный; добавляет горизонтальную линию с отступами по вертикали.
Атрибуты: size – задает толщину линии;
width – определяет ширину линии в пикселях или процентах;
noshade – указывает на то, что линия не имеет тени;
color – задает линии определенный цвет.
Пример: <hr size="3" color="#555555" />
Тег <html> </html> – указывает , что это HTML документ.
I
Tег <i> </i> – преобразует текст в курсивный, почти не используется.
Tег <iframe> </iframe> – плавающий фрейм; является блочным элементом и может располагаться в любой части страницы.
Атрибуты: name – задает имя элементу;
src – указывает адрес выводимого документа;
width – указывает ширину в пикселях или процентах;
height – указывает высоту в пикселях или процентах;
frameborder – при значении "0" или "no", рамка не отображается;
scrolling – прокрутка; значения: "yes", "auto", при значении "no", полоса прокрутки отсутствует;
align – выравнивание; значения: "left", "right".
Пример: <iframe name="имя" src="адрес документа" width="300" height="500" frameborder="no" scrolling="no"> </iframe>
Tег <img /> – непарный; помещает изображения GIF, JPEG, JPG, PNG в документ.
Атрибуты: src – обязательный атрибут, указывает URL адрес изображения;
align – атрибут выравнивания со значениями "left", "right", "top", "bottom", "center", "middle";
alt – всплывающий текстовый коментарий к изображению;
border – задает рамку вокруг изображения, по умолчанию border="0";
ismap – сообщает о том, что изображение является картой-изображением на сервере;
hspace – задает отступы в пикселях по-горизонтали слева и справа от изображения;
vspace – отступы в пикселях по-вертикали сверху и снизу от изображения;
usemap – сообщает, что изображение является картой-изображением на стороне клиента;
height – высота изображения в пикселях или процентах;
width – ширина изображения в пикселях или процентах.
Пример: <img src="xxx.jpg" alt="текст описания">
Tег <input> – элемент формы; создает поля и переключатели.
Атрибуты: type – определяет тип содержимого при вводе; значения: "text", "password", "radio", "checkbox", "submit", "reset", "hidden", "image"(type="image" src="адрес изображения");
name – выполняет роль идентификатора для содержимого;
value – присваевает значение необходимое для идентификации и обработки вводимого содержимого.
Пример: <form name="има формы" method="post" action="адрес страницы обработчика">
Логин: <input type="text" name="произвольное имя">
Пароль: <input type="password" name="произвольное имя">
<input type="submit" value="войти">
</form>
Tег <ins> </ins> – выводит подчеркнутый текст.
K
Tег <kbd> </kbd> – текст внутри этого тега моноширинный.
L
Tег <li> </li> – определяет строку для списка.
Пример: <ol type="1" title="нумерованный список">
<li>Строка списка</li>
<li> Строка списка</li>
</ol>
Tег <link /> – определяет ссылку; используется внутри контейнера <head> </head>.
Пример: <link rel="stylesheet" href="default.css" type="text/css" />
M
Tег <marquee> </marquee> – задает тексту движение в зависимости от значений.
Атрибуты: behavior – определяет тип движения текста; (значения: "alternate" - движение слева направо, "scroll" - достигнув края, текст появляется с противоположной стороны экрана, "slide" - текст останавливается у противоположного края экрана);
direction – определяет направление движения текста; (значения: "down" - вниз, "up" - движение вверх, "left" - движение справа налево, "right" - движение слева направо).
Пример: <marquee behavior="alternate" direction="right"> </marquee>
Tег <meta /> – одиночный; используется для идентификации и индексации документов поисковыми машинами; помещается между тегов <head> </head>.
Пример: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> – эти параметры обеспечивают правильное отображение содержимого и языка документа;
<meta name="description" content="здесь должно быть описание"> – краткое описание вашего сайта для поисковых систем;
<meta name="keywords" content="здесь должно быть описание"> – ключевые слова - основной элемент при индексировании поисковыми машинами вашего сайта.
N
Tег <nobr> </nobr> – запрещает перенос строки, строка сохраняет свою целостность.
O
Tег <ol> </ol> – создает нумерованный список.
Атрибуты: type – определяет тип маркера со значениями: "A" - заглавные буквы, "a" - строчные буквы, "I" - заглавные римские цифры, "i" - строчные римские цифры, "1" - арабские цифры;
start – стартовое значение при использовании арабских цифр;
title – всплывающая подсказка.
Пример: <ol type="A" title="нумерованный список">
<li>Строка списка</li>
<li>Строка списка</li>
</ol>
Tег <option> </option> – обязательный элемент тега <select> </select>.
Атрибуты: selected – индикатор выбранной по умолчанию строки.
Пример: <select size="3">
<option>Строка списка</option>
<option>Строка списка</option>
<option>Строка списка</option>
<option selected>Строка списка</option>
</select>
P
Tег <p> </p> – создает параграф; внутри себя не может содержать другие параграфы.
Атрибуты: align – выравнивание по горизонтали; значения: "left", "right", "justify", "center";
title – всплывающая подсказка.
Пример: <p align="center"> </p>
Tег <pre> </pre> – текст моноширинный; сохраняет исходное количество пробелов.
S
Tег <s> </s> – выводит зачеркнутый по-горизонтали текст.
Tег <samp> </samp> – выводит текст, моноширинным шрифтом.
Tег <select> </select> – выводит обычный или выпадающий список в рамках формы.
Атрибуты: size – если имеет значение больше "1" - список с прокруткой, если равное "1" или не указано - выводится одна строка и список будет выпадающим.
Пример: <select size="3">
<option>Строка списка</option>
<option>Строка списка</option>
<option>Строка списка</option>
<option selected>Строка списка</option>
</select>
Tег <small> </small> – выводит более мелкий текст.
Tег <span> </span> – является контейнером для отрезка текста; внутри абзаца или блока может быть произвольное количество отрезков.
Tег <strong> </strong> – используется для выведения жирного шрифта.
Tег <sub> </sub> – отображает выводимый текст в нижнем регистре: H2SO4.
Tег <sup> </sup> – отображает текст в верхнем регистре: TM.
T
Tег <table> </table> – создает таблицу; можно вкладывать таблицу в ячейку другой таблицы, что часто применяется на практике.
Атрибуты: align – выравнивание относительно страницы; значения: "left", "right" и "center";
background – определяет каким будет задний фон; фоном может быть изображение;
bgcolor – определяет цвет заднего фона таблицы;
border – рамка; есле значение равно "1" или атрибут не указан - рамка не отображается;
bordercolor – определяет цвет рамки;
cellspacing – задает пространство между ячейками таблицы;
cellpadding – задает пространство между содержимым ячейки и ее рамкой;
width – задает ширину таблицы в процентах или пикселях.
Пример: <table width="300" border="1" bordercolor="red">
<tr>
<th>Заголовок столбца</th>
<td>Содержимое ячейки</td>
</tr>
<tr>
<th>Заголовок столбца</th>
<td>Содержимое ячейки</td>
</tr>
</table>
Tег <tbody> </tbody> – предназначен для хранения одной или нескольких строк таблицы, это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты; можно использовать несколько таких тегов в пределах одной таблице.
Атрибуты: align – выравнивание содержимого по горизонтали; значения: "left", "right" и "center";
valign – выравнивание содержимого по вертикали; значения: "top", "bottom", "middle" и "baseline";
bgcolor – определяет цвет фона ячеек.
Пример: <table> <thead> <tr> <td> ... </td> </tr> </thead> <tbody> ... </tbody> </table>
Tег <td> </td> – элемент таблицы; создает ячейку.
Атрибуты: align – выравнивание содержимого по горизонтали; значения: "left", "right" и "center";
valign – выравнивание содержимого по вертикали; значения: "top", "bottom" и "middle";
height – определяет высоту ячейки или строки в процентах или пикселях;
colspan – определяет количество столбцов объединенных в одной ячейке таблицы;
rowspan – определяет количество строк объединенных в одной ячейке таблицы;
title – всплывающая подсказка.
Tег <textarea> </textarea> – элемент формы; создает многострочное поле ввода.
Атрибуты: name – присваевает имя элементу;
rows – задает количество строк текста;
cols – задает количество колонок шириной в одну букву.
Пример: <form name="имя формы" method="post" action="адрес страницы обработчика">
<textarea name="произвольное имя" rows="30" cols="50">
</textarea>
<input type="submit" value="отправить">
</form>
Tег <th> </th> – создает заголовочную ячейку таблицы; текст внутри обычно жирный и выровнен по центру.
Атрибуты: align – выравнивание содержимого по горизонтали;
valign – выравнивание содержимого по вертикали;
bgcolor – определяет цвет фона ячеек;
background – определяет фоновый рисунок ячейки;
bordercolor – определяет цвет рамки;
colspan – объеденяет горизонтальные ячейки;
height – задает высоту ячейки;
nowrap – запрещает перенос строки;
rowspan – объеденяет вертикальные ячейки;
width – задает ширину ячейки.
Пример: <table> <tr> <th>...</th> </tr> </table>
Tег <thead> </thead> – заголовок таблицы; разрешается применять один раз в пределах одной таблицы.
Атрибуты: align – выравнивание содержимого по горизонтали;
valign – выравнивание содержимого по вертикали;
bgcolor – определяет цвет фона ячеек.
Пример: <table> <thead> <tr> <td> ... </td> </tr> </thead> <tbody> ... </tbody> </table>
Tег <title> </title> – его содержимое определяет название страницы в браузере; его место между тегами <head> </head>.
Tег <tr> </tr> – элемент таблицы; создает строку внутри таблицы.
Атрибуты: align – выравнивание содержимого по горизонтали; значения: "left", "right" и "center";
valign – выравнивание содержимого по вертикали; значения: "top", "bottom" и "middle".
Tег <tt> </tt> – задает моноширинный стиль текста.
U
Tег <u> </u> – выводит подчеркнутый текст в документ.
Tег <ul> </ul> – определяющий элемент ненумерованного списка.
Атрибуты: type – указывает тип символа перед строкой; значения: "disk", "circle" и "square";
title – всплывающая подсказка.
Пример: <ul type="square" title="ненумерованный список">
<li>Строка списка</li>
<li>Строка списка</li>
</ul>
Смотрите дополнительно новые HTML 5 теги
Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML справочник | XHTML 
HTML и XHTML теги 
HTML и XHTML мета-теги
