Памятка по тегам HTML / XHTML

HTML & CSS

Язык гипертекстовой разметки — HTML

HyperText Markup Language (HTML) – это язык разметки гипертекста, что означает использование кода, который может быть прочитан человеком и не нуждается в компиляции. По сути, web-страницы размечены таким кодом для того, чтобы «объяснить» браузеру, как отображать содержимое. Когда Вы используете HTML, то пишете с помощью HTML-тегов, которые состоят из:

знака «меньше» — «< »
буквы или слова
далее может идти любое количество HTML-атрибутов в виде пары «имя=значение»
в конце идет знак «больше» — «>»

Пример: <font style="font-size:15px;">Шрифт размером 15 пикселей</font>

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

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

Тэги HTML

В колонке «Статус» для некоторых тегов указано дополняющее определение тега:

«HTML5» — новый тег, который появился в спецификации HTML5.
«Устаревший тег» — тег, который уже не поддерживается спецификацией HTML5.
«Нест. тег» — нестандартный тег, который не был описан ни в одной из спецификаций, но поддерживается некоторыми браузерами.

Названия тегов	Краткое описание тегов	Статус
<!-- текст -->	↑↓ Определяет комментарии на странице HTML. Код HTML, добавленный внутрь диапазона комментария, не будет срабатывать и отображаться. Синтаксис: <abbr>HTML</abbr> <!-- Комментарий -->
<!DOCTYPE>	↑↓ Определяет тип документа. Синтаксис: HTML 4.01 Strict (строгий) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional (переходный) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset (фреймовый) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict (строгий) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional (переходный) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset (фреймовый) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<a>	↑↓ Предназначен для создания ссылок (гиперссылок). Атрибуты: name — Присваивает имя элементу. href — Присваивает адрес ресурса, к которому ведет ссылка. Для создания ссылки вызова почтовой программы href="mailto:e-mail" title — Всплывающая подсказка Синтаксис: <a href="page.html" title="описание">открыть страницу</a> <a href="http://www.site.ru">ссылка на сайт</a> <a href="mailto:e-mail@.ru">открыть почтовую программу</a> <a name="razdel">присвоить имя</a> <a href="#razdel">перейти к закладке</a>
<abbr>	↑↓ Выделяет в тексте аббревиатуру, обычно подчеркивается пунктирной линией. Атрибуты: title — всплывающая подсказка Синтаксис: <abbr title="Ваше описание">HTML</abbr>
<acronym>	↑↓ Выделяет в тексте акроним, обычно подчеркивается пунктирной линией. Атрибуты: title — всплывающая подсказка Синтаксис: <acronym title="Ваше описание">Генштаб</acronym>	Устаревший тег
<address>	↑↓ Указывает автора документа и его адрес, обычно отображается курсивом. Атрибуты: title — всплывающая подсказка Синтаксис: <address title="Ваше описание">Иванов Иван Иванович</address>
<applet>	Внедряет Java-программы. В разработке.	Устаревший тег
<area>	↑↓ Определяет области карты-изображения, которые являются ссылками на тот или иной документ. Располагается внутри тега <map>. Не требует закрывающего тега. Атрибуты: alt — альтернативный текст для области изображения title — всплывающая подсказка href — указывает путь к открываемому документу shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений: rect — прямоугольная область poly — область представляет собой некий многоугольник circle — область заданная окружностью coords — координаты области nohref — область без ссылки на другой документ target — указывает в каком окне следует открывать документ: _blank — открыть в новом окне _self — открыть в текущем окне (по умолчанию) _parent — открыть документ в фрейме-родителе, если фреймов нет, то работает как _self _top — отменяет фреймы и загружает документ в полном окне браузера, если фреймов нет, то как _self Синтаксис: <img src=»karta.jpg» usemap=»#panel» width=»300″ height=»100″ border=»0″> <map name=»panel»> <area href="primer.html" shape="rect" coords="15,15,80,80" alt="описание" title="описание" target="_blank"> </map>
<article>	Основной контент страницы.	HTML5
<aside>	Боковая панель (сайдбар) сайта.	HTML5
<audio>	Воспроизводит аудиофайлы, создаёт панель управления ими.	HTML5
<b>	↑↓ Делает текст полужирным. Аналогичен тегу <strong> Атрибуты: title — Всплывающая подсказка Синтаксис: <b title="Ваше описание">этот текст будет полужирным</b>
<base>	Базовый адрес страницы. Указывает базовый URL для всех ссылок имеющих относительный URL-адрес на странице.
<basefont>	Форматирует текст для всей страницы.	Устаревший тег
<bdi>	Запрещает изменять направление текста.	HTML5
<bdo>	↑↓ Определяет направление вывода текста. Основное предназначение работа с текстами языковых групп, где чтение происходит справа — налево. Атрибуты: dir — Направление: ltr Слева — направо (по умолчанию) rtl справа — налево title — Всплывающая подсказка Синтаксис: <bdo dir="rtl" title="Ваше описание">Упер казак репу</bdo>
<bgsound>	↑↓ Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки. Не требует закрывающего тега. Атрибуты: loop — Указывает на количество повторов воспроизведения файла: 1 — Постоянное, непрерывное воспроизведение звукового файла 0 — Воспроизведение звукового файла только один раз X — Заданное количество повторов воспроизведения где Х — число повторов src — Указывает путь к звуковому файлу Синтаксис: <bgsound src="music.wav" loop="3">	Нест. тег
<big>	↑↓ Делает текст крупным — увеличивает размер шрифта на единицу. Атрибуты: title — Всплывающая подсказка Синтаксис: <big title="Ваше описание">этот текст будет крупным</big>	Устаревший тег
<blink>	Мигающий (мерцающий) текст.	Нест. тег
<blockquote>	↑↓ Предназначен для создания выделенных цитат. Атрибуты: title — Всплывающая подсказка Синтаксис: <blockquote title="подсказка">Данный текст будет являться цитатой, имея отступы с обеих сторон документа и остального текста</blockquote>
<body>	↑↓ Тело HTML-документа, указывает содержание видимой части (тело) документа. Атрибуты: bgcolor — задаёт цвет фона документа background — указывает адрес рисунка делая его фоном документа text — цвет текста документа link — цвет ссылок vlink — цвет посещённых ссылок alink — цвет нажатой, активной ссылки bgproperties="fixed" — делает рисунок фона фиксированным, при этом фоновое изображение не прокручивается при нажатии PageDown Синтаксис: <body link="#008000" alink="#ff0000" vlink="#ffff00" text="#484800" bgcolor="#ffffff" background="fon.jpg" bgproperties="fixed"> содержание видимой части документа </body>
<br>	↑↓ Перенос (перевод) строки. Не требует закрывающего тега. Синтаксис: <br> или <br />
<button>	Определяет интерактивную кнопку, элемент формы.
<canvas>	Замена флэш-технологии. Область для рисования графики посредством сценариев.	HTML5
<caption>	Заголовок таблицы.
<center>	↑↓ Горизонтальное выравнивание всех элементов по центру документа. Синтаксис: <center>этот текст будет выровнен по центру</center>	Устаревший тег
<cite>	↑↓ Выделяет в тексте цитату, обычно курсивом — название произведения, романа, стиха, песни, картины и т.д. Атрибуты: title — всплывающая подсказка Синтаксис: <cite title="Ваше описание">Лед тронулся! господа присяжные заседатели!</cite>
<code>	↑↓ Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом. Атрибуты: title — всплывающая подсказка Синтаксис: <code title="Ваше описание">Некий программный код</code>
<col>	↑↓ Форматирует одну/несколько колонок таблицы. Атрибуты: align — Устанавливает выравнивание содержимого колонки по краю char — Выравнивает содержимое колонки по заданному символу charoff — Сдвигает содержимое ячейки относительно заданного символа span — Количество колонок, к которым следует применять параметры valign — Задает вертикальное выравнивание содержимого колонки width — Ширина колонок
<colgroup>	Форматирует одну/несколько колонок таблицы, может объединять теги <col>.
<comment>	Выделяет комментарий.	Нест. тег
<datalist>	Выпадающий список. Определяет список вариантов, которые можно выбирать при наборе в текстовом поле ввода.	HTML5
<dd>	↑↓ Определение термина, описание списка определений. Закрывающий тег необязателен. Атрибуты: title — Всплывающая подсказка Синтаксис: <dl> <dt>Определение <dd title="подсказка">Описание определения</dd> </dl>
<del>	↑↓ Выделяет удалённый текст в новой версии документа. Выделенный текст отображается перечёркнутым. Атрибуты: title — всплывающая подсказка Синтаксис: <del title="Ваше описание">Старая цена 1000 руб.</del> — Новая 999 руб.!!!
<details>	Спойлер — открывающийся текст по внутренней ссылке. Позволяет скрыть/показать дополнительную информацию.	HTML5
<dfn>	↑↓ Отмечает текст как определение — впервые встречающийся термин в тексте, обычно отображается курсивом. Атрибуты: title — всплывающая подсказка Синтаксис: <dfn title="Ваше описание">Электроток — это направленное упорядоченное движение заряженных частиц</dfn>
<dialog>	Диалоги.	HTML5
<dir>	Список папок.	Устаревший тег
<div>	↑↓ Определяет блок, используется как контейнер для других объёктов. Преимущественно используется совместно с CSS. Атрибуты: align — Выравнивание блока относительно страницы: left — по левому краю документа (по умолчанию) right — по правому краю документа center — по центру justify — по обоим краям документа title — Всплывающая подсказка. unselectable — Запрещает или разрешает пользователю выделять текст в блоке: on — запрещает off — разрешает Синтаксис: <div style="color: #ff0000; font-size: 22px" unselectable="on" align="center" title="подсказка">Текст в этом блоке нельзя выделить</div>
<dl>	↑↓ Создаёт список терминов и определений. Атрибуты: title — Всплывающая подсказка Синтаксис: <dl title="список"> <dt>Определение <dd>Описание определения </dl>
<dt>	↑↓ Определение термина в списке определений. Закрывающий тег необязателен. Атрибуты: title — Всплывающая подсказка Синтаксис: <dl> <dt title="подсказка">Определение <dd>Описание определения </dl>
<em>	↑↓ Выделяет особенно важный фрагмент текста. Обычно браузерами отображается курсивом. Атрибуты: title — Всплывающая подсказка Синтаксис: <em title="Ваше описание">этот текст будет наклонным</em>
<embed>	Внедряет плагины. Область для внешнего приложения или интерактивного содержимого.	HTML5
<fieldset>	Контейнер для объединения элементов формы — группирует элементы формы.
<figcaption>	Заголовок тега <figure>.	HTML5
<figure>	Контейнер для группировки контента, обычно используется с элементом <figcaption>.	HTML5
<font>	↑↓ Форматирует текст. Атрибуты: size — размер шрифта color — цвет шрифта face — задаёт шрифт из библиотеки шрифтов Синтаксис: <font face="arial" size="+2" color="#ff0000"> этот текст будет напечатан красным цветом с помощью шрифта Аrial размером+2 </font>	Устаревший тег
<footer>	Нижний колонтитул (подвал сайта) — нижняя часть документа или раздела.	HTML5
<form>	Форма для отправки введенных пользователем данных.
<frame>	↑↓ Определяет фрейм в фреймовой структуре документа. Располагается внутри тега <frameset>. Не требует закрывающего тега. Атрибуты: srs — Путь к документу, обязательный атрибут name — Присваивает имя фрейму marginwidth — Отступ в пикселях от левого и правого края фрейма marginheight — Отступ в пикселях от верхнего и нижнего края фрейма scrolling — Определяет наличие полос прокрутки содержимого фрейма no — никогда не показывать полосу прокрутки yes — всегда показывать auto — показывать в том случае если она необходима noresize — Запрещает пользователю изменять размеры фрейма frameborder — Определяет наличие рамок у фрейма: 1 — включить рамку 0 — выключить рамку bordercolor — Задаёт цвет бордюра фрейма Синтаксис: <html> <head> <title>фреймы</title> </head> <frameset rows="30%,70%"> <frame src="primer1.html" marginwidth="0" marginheight="0" noresize> <frame src="primer2.html" name="osnovnoe" scrolling="no" bordercolor="#ff0000"> </frameset> </html>
<frameset>	↑↓ Определяет фреймовую структуру документа. Используется вместо тега <body>. Атрибуты: rows — Определяет количество и размеры горизонтальных фреймов в пикселях процентах или * — использовать всё свободное пространство. cols — Количество и размеры вертикальных фреймов. border — Определяет ширину рамок фреймов в пикселях. frameborder — Определяет наличие рамок у фрейма: 1 — включить рамку 0 — выключить рамку framespacing — определяет ширину рамок фреймов в пикселях. Альтернатива border и frameborder при нулевом значении. Синтаксис: <html> <head> <title>фреймы</title> </head> <frameset rows="15%,85%" framespacing="0" frameborder="0" border="0"> <frame src="logotype.html"> <frameset cols="20%,80%" framespacing="0" frameborder="0" border="0"> <frame src="menu.html"> <frame src="text.html"> </frameset> </frameset> </html>
<h1>	↑↓ Делает текст заголовком. Может иметь значение от <h1> до <h6>. Атрибуты: align — выравнивание заголовка по: center — центру left — левому краю right — правому краю title — Всплывающая подсказка Синтаксис: <h3 title="Ваше описание" align="right">заголовок</h3>
<head>	↑↓ Обрамляет контейнер для метаданных документа. «Голова» определяет место в документе не для отображения видимой его части «тела» и может располагать в себе теги, предназначенные для поисковых машин, а так же название документа. Синтаксис: <head> </head>
<header>	Верхний колонтитул (шапка сайта) — верхняя часть документа или раздела.	HTML5
<hgroup>	Группирует заголовки.	HTML5
<hr>	↑↓ Рисует горизонтальную линию. Не требует закрывающего тега. Атрибуты: align -выравнивание линии по: center — центру left — левому краю right — правому краю size — толщина линии width — ширина линии color — присваивает цвет линии noshade — указывает на отсутствие тени линии Синтаксис: <hr align="left" size="5" width="200" color="#ff0000" noshade>
<html>	↑↓ Указывает программам просмотра html страниц начало и конец HTML-документа. Синтаксис: <html> </html>
<i>	↑↓ Преобразует текст в курсивный (текст с наклонным начертанием). Атрибуты: title — Всплывающая подсказка Синтаксис: <i title="Ваше описание">этот текст будет наклонным</i>
<iframe>	↑↓ Добавляет на страницу плавающий (встроенный) фрейм. Атрибуты: src — Путь к вводимому документу (обязательный атрибут) width — ширина плавающего фрейма в пикселях или процентах height — высота плавающего фрейма scrolling — показ полосы прокрутки: no — никогда не показывать полосу прокрутки yes — всегда показывать auto — показывать в том случае если она необходима align — выравнивание пваюшего фрейма: left — слева right — справа top — выше bottom — ниже frameborder — наличие рамки вокруг плавающего фрейма: 1 — включить рамку 0— выключить рамку Синтаксис: <iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"></iframe>
<img>	↑↓ Выводит графическое изображение (рисунок). Не требует закрывающего тега. Атрибуты: src — адрес рисунка (обязательный атрибут) align — выравнивание рисунка по: center — центру left — левому краю right — правому краю bottom — нижнему краю top — верхнему краю middle — по середине alt — Описание рисунка (когда он не загружен), может выполнять роль всплывающей подсказки title — Всплывающая подсказка border — Толщина рамки bordercolor — Цвет рамки width — Ширина рисунка height — Высота рисунка hspace — Горизонтальный отступ vspace — Вертикальный отступ ismap — Изображение является навигационной картой на сервере usemap — Изображение является навигационной картой на стороне клиента. Синтаксис: <img src="foto.jpg" alt="описание" title="описание" align="right" width="100" height="100" hspace="10" vspace="10" border="2" bordercolor="#ff0000">
<input>	Элемент формы, может быть кнопкой, текстовым полем, переключателем и др.
<ins>	↑↓ Выделяет новый текст в новой версии документа (текст, который был добавлен в документ). Выделенный текст станет подчёркнутым. Противоположен по значению тегу <del>. Атрибуты: title — всплывающая подсказка Синтаксис: <del>Старая цена 1000р.</del> — <ins title="Ваше описание">Новая 999 р.</ins>!!!
<isindex>	Поисковая строка.	Устаревший тег
<kbd>	↑↓ От английского keyboard — клавиатура. Указывает текст вводимый с клавиатуры. Обычно отображается моноширинным шрифтом. Атрибуты: title — всплывающая подсказка Синтаксис: <kbd title="Ваше описание">Текст, набранный клавиатурой</kbd>
<keygen>	Используется для генерации пары ключей. Шифровка/расшифровка данных.	HTML5
<label>	Создаёт связь с элементом формы, элемент формы.
<legend>	Заголовок тега fieldset, элемент формы.
<li>	↑↓ Обозначает элемент списка. Используется в нумерованных и ненумерованных списках (находится между тегами <ul> и <ol>). Закрывающий тег необязателен. Атрибуты: title — Всплывающая подсказка Синтаксис: <ul> <li title="главный пункт">Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul>
<link>	↑↓ Указывает на связь документа с каким либо внешним файлом — позволяет загрузить внешние файлы .css, .xml, .ico и т.д. Не требует закрывающего тега. Тег <link> является ссылкой, но не для людей а для программ, и ведет к внешнему файлу например иконке или таблице стилей.. Располагается в «голове» документа между тегом <head></head> и не выводится браузерами на экран. Атрибуты: href — Путь к файлу rel — Определяет отношения между текущим документом и файлом, на который делается ссылка: shortcut icon — Определяет, что подключаемый файл является иконкой. stylesheet — Определяет, что подключаемый файл содержит таблицу стилей. application/rss+xml — Файл в формате XML для описания ленты новостей. type — тип данных подключаемого файла. Синтаксис: <head> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css" type="text/css"> <title>link</title> </head>
<listing>	Код программы.	Устаревший тег
<main>	Контейнер с основным контентом.
<map>	↑↓ Определяет место в коде документа в котором создаётся описание карты-изображения с помощью тега/тегов <area> Атрибуты: name — указывает имя графического изображения которое является картой. Синтаксис: <img src="karta.jpg" usemap="#panel" width="300" height="100" border="0"> <map name="panel"> <area href="primer.html" shape="rect" coords="15,15,80,80" alt="описание" title="описание" target="_blank"> </map>
<mark>	Выделенный текст — определяет важную часть текста.	HTML5
<marquee>	↑↓ Бегущая строка. Атрибуты: behavior — определяет тип скроллинга, может иметь следующие значения: alternate — колебательные движения от края к краю scroll — прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны slide — прокручивание текста c остановкой. scrollamount — скорость бегущей строки от 1 до 10 loop — задает количество прокруток бегущей строки direction — направление движения текста. значения: up — вверх down — вниз left — влево right — вправо bgcolor — цвет фона бегущей строки height — высота строки width — ширина строки title — Всплывающая подсказка Синтаксис: <marquee behavior="alternate" direction="right" scrollamount="8" bgcolor="#b40000" title="описание">этот текст будет является бегущей строкой</marquee>	Нест. тег
<menu>	Определяет список/меню команд. Обрамляет теги <command>.	HTML5
<meta>	↑↓ Определяет мета-теги, информация в которых предназначена для браузеров и поисковых систем. Не требует закрывающего тега. Мета-теги не видны пользователю и располагаются в заголовке HTML-документа между тегами <head> и </head>. Атрибуты: http-equiv — указывает браузеру как следует обработать основное содержание документа name — информационное имя content — информационное содержание(обязательный атрибут) Атрибуты http-equiv и name могут быть равны любому подходящему идентификатору. Синтаксис: <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <meta name="author" Content="Остап Бендер"> <meta name="copyright" Content="Рога и копыта, Остап Бендер"> <meta name="description" Content="Производим закупку по выгодным ценам рогов и копыт!"> <meta name="keywords" Content="рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене"> </head>
<meter>	Шкала измерения. Определяет скалярное измерение в пределах известного диапазона.	HTML5
<multicol>	Многоколоночный текст.	Нест. тег
<nav>	Важные ссылки страницы — раздел навигационных ссылок.	HTML5
<nobr>	↑↓ Запрещает перенос строки. Противоположен значению тега <br> Синтаксис: <nobr>Длинная, длинная, очень длинная строка… которая не будет переносится на другую строчку так как мы принудительно запретили ей это делать. Из-за неё появится горизонтальная полоса прокрутки, однако, что поделаешь, раз нам так захотелось…</nobr>
<noembed>	Вывод текста при отсутствии браузером поддержки плагинов.	Нест. тег
<noframes>	↑↓ Выводит текст заключенный в него в том случае если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Тег <noframes> должен быть расположен внутри тега <frameset>. Синтаксис: <noframes>Извините, но Ваш браузер не поддерживает фреймы.</noframes>
<noscript>	↑↓ Выводит текст заключенный в него в том случае если браузер пользователя не поддерживает скрипты или они принудительно выключены в его настройках. Синтаксис: <noscript>Извините, но Ваш браузер не поддерживает скрипты.</noscript>
<object>	Внедряет плагины, внешний подключаемый ресурс.	Устаревший тег
<ol>	↑↓ Определяет нумерованный (упорядоченный) список. Атрибуты: type — тип маркера: А — Заглавные буквы а — Строчные буквы I — Заглавные римские цифры i — Строчные римские цифры 1 — Арабские цифры (по умолчанию) title — всплывающая подсказка start — начальное значение для нумерованного списка Синтаксис: <ol type=1 start="24" title="список"> <li>Пункт 24 <li>Пункт 25 <li>Пункт 26 </ol>
<optgroup>	Группирует теги <option> — определяет группу связанных логически элементов списка в выпадающем списке.
<option>	Элемент списка выбора — вариант выбора в выпадающем списке. Находится между тегами <select>, <optgroup>, <datalist>.
<output>	Определяет область, в которую выводится результат расчета (работы скрипта).	HTML5
<p>	↑↓ Создаёт параграф (абзац) текста. Атрибуты: align — Выравнивание параграфа относительно страницы: left — по левому краю документа (по умолчанию) right — по правому краю документа center — по центру justify — по обоим краям документа title — Всплывающая подсказка Синтаксис: <p align="right" title="Ваше описание">Текст</p>
<param>	Значения параметров для объекта — используется внутри элементов <applet> и <object>.
<plaintext>	Предварительно отформатированный текст.	Нест. тег
<pre>	↑↓ Обрамляет предварительно отформатированный текст. Браузер при выводе текста на экран не удаляет пробелы и переносы строк. Атрибуты: title — всплывающая подсказка Синтаксис: <pre title="Ваше описание">Текст текст текст</pre>
<progress>	Отображает текущий прогресс выполнения задачи — шкала прогресса.	HTML5
<q>	↑↓ Предназначен для создания цитат. От <blockquote> отличается тем, что цитата не имеет отступов. А в отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки. Атрибуты: title — Всплывающая подсказка Синтаксис: <q title="подсказка">Данный текст будет являться цитатой.</q>
<rp>	Определяет, что показывать браузеру, который не поддерживает тег <ruby>.	HTML5
<rt>	Определяет объяснение/произношение символов, используется внутри тега <ruby>.	HTML5
<ruby>	Обрамляет аннотацию.	HTML5
<s>	↑↓ Определяет текст, который больше не является правильным и отображает текст перечёркнутым. Аналогичен тегу <strike>. Атрибуты: title — Всплывающая подсказка Синтаксис: <s title="Ваше описание">Этот текст будет перечёркнутым</s>	Устаревший тег
<samp>	↑↓ Выделяет текст как образец. Используется для отметки текста являющемся результатом работы программ. Отображает текст как моноширинный. Отображается моноширинным шрифтом. Атрибуты: title — Всплывающая подсказка Синтаксис: <samp title="Ваше описание">Этот текст является результатом действия некой программы</samp>
<script>	↑↓ Внедряет на страницу скрипт (клиентский сценарий). Атрибуты: defer — Указывает на то что перед выполнением скрипта следует полностью загрузить документ в который он внедрён type — Определяет тип содержимого тега <script> language — Определяет язык скрипта: JScript javascript VBS VBScript src — Путь к внешнему файлу содержащему скрипт Синтаксис: <html> <head> <title>скрипт</title> </head> <body> <script language="vbscript"> Sub knopka() Alert "Привет мир!" End Sub </script> <button onclick="knopka()">кнопка</button> </body> </html>
<section>	Раздел документа — семантически единые разделы страницы.	HTML5
<select>	Группирует теги option. Выпадающий список.
<small>	↑↓ Уменьшает размер шрифта на единицу — отображение текста происходит более мелким шрифтом. Атрибуты: title — Всплывающая подсказка Синтаксис: <small title="Ваше описание">Этот текст будет маленьким</small>
<source>	Внедряет аудио/видео файлы, с помощью тегов audio и video.	HTML5
<spacer>	Пустое пространство.	Нест. тег
<span>	↑↓ Определяет контейнер для внутреннего текста (строчного содержимого). Как правило используется совместно с CSS. Атрибуты: title — Всплывающая подсказка unselectable — Запрещает или разрешает пользователю выделять текст в блоке on — запрещает off — разрешает Синтаксис: <p><span style="color: #ff0000; font-size: 22px" unselectable="on" title="Описание">Первое</span> слово в параграфе имеет собственыые свойства<p>
<strike>	↑↓ Делает текст перечёркнутым. Аналогичен тегу <s>. Атрибуты: title — Всплывающая подсказка Синтаксис: <strike title="Ваше описание">Этот текст будет перечёркнутым</strike>	Устаревший тег
<strong>	↑↓ Выделяет особенно важный фрагмент текста. Обычно браузерами отображается полужирным. Атрибуты: title — всплывающая подсказка Синтаксис: <strong title="Ваше описание">Этот текст будет полужирным</strong>
<style>	↑↓ Служит для определения стилей элементов страницы с использованием разметок CSS. Атрибуты: media — Указывает на устройство вывода, для работы с которым предназначена таблица стилей all — Все устройства screen — Монитор (по умолчанию) print — Принтер projection — Проектор braille — Устройства, основанные на системе Брайля — предназначены для слепых людей speech — Речевые синтезаторы type — Сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей Синтаксис: <html> <head> <title>Стили</title> <style type="text/css"> a:link { color: #008000; text-decoration: none; font-size: 14px; } a:hover { text-decoration: none; color: #ff0000; font-size: 18px; } </style> </head> <body> <a href="page.html">открыть страницу</a> </body> </html>
<sub>	↑↓ Определяет текст в нижнем индексе (подстрочный текст). Атрибуты: title — Всплывающая подсказка Синтаксис: Нижний<sub title="Ваше описание">индекс</sub>
<summary>	Заголовок для элемента <details>.	HTML5
<sup>	↑↓ Определяет текст в верхнем индексе (надстрочный текст). Атрибуты: title — Всплывающая подсказка Синтаксис: Верхний<sup title="Ваше описание">индекс</sup>
<table>	↑↓ Создаёт таблицу. Атрибуты: align — Выравнивание таблицы по: left — по левому краю (по умолчанию) right — по правому краю center — по центру justify — по левому и правому краю bgcolor — Цвет фона таблицы border — Толщина бордюра в пикселях background — Задает фоновый рисунок в таблице bordercolor — Цвет бордюра cellspacing — Расстояние между ячейками таблицы cellpadding — Расстояние между содержимым ячейки и рамкой width — Ширина таблицы в процентах или пикселях height — Высота таблицы в процентах или пикселях cols — Определяет число колонок в таблице. Позволяет браузерам показывать содержимое таблицы ещё до окончания её полной загрузки frame — Определяет в каких местах таблицы следует показывать бордюр: void — Нет бордюра border — Бордюр вокруг всей таблицы (по умолчанию) above — Бордюр по верхнему краю таблицы below — Бордюр только снизу таблицы hsides — Только горизонтальные границы vsides — Только вертикальные границы rhs — Бордюр только справа lhs — Бордюр только слева rules — Определяет в каких местах ячеек таблицы следует показывать бордюр: all — Вокруг каждой ячейки(по умолчанию) groups — Между группами ячеек образованными тегами <thead>, <tbody>, <tfoot>, <colgroup>, <col> cols — Только между столбцами таблицы none — Отсутствуют rows — Только между строк таблицы Синтаксис: <table cols="2" border="5" frame="vsides" align="center" width="100%" height="300" cellpadding="5" cellspacing="2" bgcolor="#ffa0cf"> <tr> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> </tr> <tr> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> </tr> </table>
<tbody>	Тело таблицы, которому можно задавать свойства.
<td>	↑↓ Создаёт отдельную ячейку в таблице. Атрибуты: width — Ширина ячейки в процентах или пикселях height — Высота ячейки в процентах или пикселях align — Выравнивает текст в ячейке: left — по левому краю (по умолчанию) right — по правому краю center — по центру justify — по левому и правому краю valign — Выравнивает текст в ячейке по вертикали: top — по верхнему краю middle — по центру bottom — по нижнему краю baseline — по базовой линии colspan — количество столбцов занимаемое ячейкой rowspan — количество рядов занимаемое ячейкой bgcolor — Цвет фона ячейки background — Задает фоновый рисунок в ячейке bordercolor — Цвет бордюра title — Всплывающая подсказка nowrap — Запрещает перенос строк в ячейке Синтаксис: <table border="1" width="100%" height="300"> <tr> <td colspan="2" valign="top" align="center" bgcolor="#b2ff80">строка1 ячейка1</td> </tr> <tr> <td height="200" width="33%" bgcolor="#ffa0cf">строка2 ячейка1</td> <td title="Описание ячейки" align="center">строка2 ячейка2</td> </tr> </table>
<textarea>	Элемент формы, многострочное текстовое поле.
<tfoot>	Подвал таблицы.
<th>	↑↓ Создаёт ячейку в таблице которая определяется как заголовок. Обычно браузеры выравнивают содержимое ячейки/заголовка по центру и делают текст жирным. Атрибуты: width — Ширина ячейки в процентах или пикселях height — Высота ячейки в процентах или пикселях align — Выравнивает текст в ячейке: left — по левому краю right — по правому краю center — по центру justify — по левому и правому краю valign — Выравнивает текст в ячейке по вертикали: top — по верхнему краю middle — по центру bottom — по нижнему краю baseline — по базовой линии. colspan — количество столбцов занимаемое ячейкой rowspan — количество рядов занимаемое ячейкой bgcolor — Цвет фона ячейки background — Задает фоновый рисунок в ячейке bordercolor — Цвет бордюра title — Всплывающая подсказка nowrap — Запрещает перенос строк в ячейке Синтаксис: <table border="1" width="100%" height="300"> <tr> *<th colspan="2" title="Описание заголовка" bgcolor="#b2ff80" bordercolor="#ff0000">Заголовок таблицы</th>* </tr> <tr> <td height="200" width="33%" bgcolor="#ffa0cf">строка2 ячейка1</td> <td title="Описание ячейки" align="center">строка2 ячейка2</td> </tr> </table&gt
<thead>	Голова таблицы.
<time>	Определяет время/дату.	HTML5
<title>	↑↓ Заголовок и название страницы. Располагается в «голове» документа между тегами <head> и </head> может быть использован только один раз. Синтаксис: <title>Название страницы</title>
<tr>	↑↓ Создаёт строку в таблице. Атрибуты: align — Выравнивает текст в ячейках строки: left — по левому краю (по умолчанию) right — по правому краю center — по центру justify — по левому и правому краю. valign — Выравнивает текст в ячейках строки по вертикали: top — по верхнему краю middle — по центру bottom — по нижнему краю baseline — по базовой линии. bordercolor — Цвет бордюра. bgcolor — Цвет фона ячеек строки. Синтаксис: <table border="1" width="100%" height="300"> <tr valign="middle" align="center" bordercolor="#ff0000"> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> </tr> <tr valign="top" align="left" bgcolor="#ffa0cf"> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> </tr> </table>
<track>	Внедряет текстовую информацию (субтитры, характеристики медиафайлов и т.д.) в аудио/видео файлы, через теги audio и video.	HTML5
<tt>	↑↓ Делает текст моноширинным. Атрибуты: title — Всплывающая подсказка Синтаксис: <tt title="Ваше описание">этот текст будет моноширинным</tt>
<u>	↑↓ Делает текст подчёркнутым. Атрибуты: title — Всплывающая подсказка. Синтаксис: <u title="Ваше описание">этот текст будет подчёркнутым</u>	Устаревший тег
<ul>	↑↓ Определяет ненумерованный (маркированный символами) список. Атрибуты: type — Тип маркера disk — Закрашенный кружок (по умолчанию) circle — Незакрашенный кружок square — Квадрат title — Всплывающая подсказка Синтаксис: <ul type=circle title="список"> <li>Пункт 1 <li>Пункт 2 <li>Пункт 3 </ul>
<var>	↑↓ Выделяет в тексте переменные (для языков программирования). Обычно отображается курсивом. Атрибуты: title — Всплывающая подсказка Синтаксис: <var title="Ваше описание">переменная</var>
<video>	Воспроизводит видеофайлы, создаёт панель управления ими.	HTML5
<wbr>	↑↓ Разрешает перенос строки и указывает, где нужно перенести длинное слово, если оно не вмещается в окно браузера. Не требует закрывающего тега. Используется внутри тега <nobr> Синтаксис: <nobr> Длинная, длинная, очень длинная строка… которая не будет переносится на другую строчку так как мы принудительно запретили ей это делать. <wbr> Однако именно в этом месте мы все же разрешим перенести текст на следующую строчку </nobr>
<xmp>	↑↓ Отображает текст в том виде, в котором он и был набран — предварительно отформатированный текст. Пробелы и переносы строк не удаляются. Кроме того, спецсимволы выводятся как обычный текст. Синтаксис: <xmp> Пример: <html> <head> <title>Моя первая страничка </title> </head> <body> Привет мир!!! </body> </html> </xmp>	Устаревший тег

К списку справочников >>>

Поделитесь страницей в социальных сетях

Один отзыв на «Памятка по тегам HTML / XHTML»

Dmitry пишет:
11 Июл 2016 в 4:39 пп
Очень удобно с раскрывающимися пояснениями. Наиболее полный список тегов на одной странице, проще искать. Спасибо за работу!
Только некоторые теги без синтаксиса, надеюсь что дополните со временем.

Телефон для связи:

В HDSW можно заказать:

Услуги HDSW:

Памятка по тегам HTML / XHTML

Один отзыв на «Памятка по тегам HTML / XHTML»

Памятки разработчикам:

Работы нашего дизайнера: