Как пользоваться справочником

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

Браузеры

В таблице приведены популярные браузеры — Internet Explorer, Google Chrome, Opera, Safari и Firefox, также используются следующие обозначения:

Да — тег полностью поддерживается браузером со всеми допустимыми значениями;

Нет — тег браузером не воспринимается и игнорируется;

Ошибки — тег понимается браузером, но при его работе возможно появление различных ошибок.

Спецификация HTML

Для каждого тега и его параметра приводится таблица соответствия спецификации HTML и XHTML. Для обозначения используется аналогичная таблице браузеров расцветка. Также вы можете получить справку, наведя курсор мыши на номер версии языка разметки.

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

1.0 — тег или его параметр входит в спецификацию.

1.0 — тег или его параметр отсутствует или запрещен в указанной версии языка разметки.

1.0 — тег или его параметр разрешается использовать на странице, где <!DOCTYPE> указан как Transitional или Frameset.

1.0 — применение указанного тега или его параметра осуждается в указанной версии языка разметки.

Примеры

Все примеры проверены на соответствие спецификации HTML с помощью валидатора по адресу http://validator.w3.org. Возле каждого примера располагается таблица, где цветом выделяется, валиден пример или нет. Также приводятся некоторые популярные браузеры, в которых выполнялся пример и указано, работает в них пример или нет.

Обозначения

Для удобства теги, атрибуты и их значения в справочнике различаются по цветам.

<blockquote> — тег.

src — атрибут тега, ключевое слово или выделение.

#ffcc00 — значение атрибута тега.

Справочник по HTML. Версия 9.0 от 01.09.2013

© 2002–2013 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

htmlbook.ru


Элемент <!DOCTYPE>

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 7.0+ | 1.0+ | 7.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.

Табл. 1. Допустимые DTD
DOCTYPE | Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> | В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html> | Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Синтаксис

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Параметры

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

Закрывающий тег

Не требуется.

Пример 1. HTML 4.01

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>!DOCTYPE</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <p>Разум — это Будда, а прекращение умозрительного мышления — это путь.
  Перестав мыслить понятиями и размышлять о путях существования и небытия,
  о душе и плоти, о пассивном и активном и о других подобных вещах,
  начинаешь осознавать, что разум — это Будда,
  что Будда — это сущность разума,
  и что разум подобен бесконечности.</p>
 </body>
</html>

Пример 2. HTML 5

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
   <title>!DOCTYPE</title>
   <meta charset="utf-8">
 </head>
 <body>
  <p>Разум — это Будда, а прекращение умозрительного мышления — это путь.
  Перестав мыслить понятиями и размышлять о путях существования и небытия,
  о душе и плоти, о пассивном и активном и о других подобных вещах,
  начинаешь осознавать, что разум — это Будда,
  что Будда — это сущность разума,
  и что разум подобен бесконечности.</p>
 </body>
</html>

Браузеры

Internet Explorer 6 требует, чтобы <!DOCTYPE> стоял обязательно в первой строке кода. В противном случае браузер переходит в режим совместимости (quirk mode).

Хотя значение URL является не обязательным, браузеры при его отсутствии могут перейти в режим совместимости, поэтому всегда указывайте полный путь к DTD-файлу, как показано в табл. 1.


Тег <!-- -->

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 2.1+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег добавляет комментарий в код документа. Текст комментария не отображается на странице. Разрешается внутрь комментария добавлять другие теги, вложенные комментарии (когда один комментарий расположен внутри другого) недопустимы.

Синтаксис

<!-- текст -->

Атрибуты

Нет.

Пример 1. Использование комментариев

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>Комментарии</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

  <!-- Меню -->
  <div>Меню</div>

  <!-- Контент -->
  <div>Содержимое документа</div>

 </body>
</html>

Пример 2. Использование комментариев

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
   <title>Комментарии</title>
   <meta charset="utf-8">
 </head>
 <body>
   <!-- Раздел -->
   <section class="b-lastAdded">
    <h1 class="b-lastAdded__title">Последние добавленные фотографии</h1>
    <div class="b-lastAdded__item">...</div>
   </section>
 </body>
</html>

Примечание

Двойной дефис внутри комментария (--) воспринимается как часть комментария и соответственно его наличие приводит к ошибке при валидации документа.


Тег <a>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="URL">...</a>
<a name="идентификатор">...</a>

Атрибуты

accesskey
Активация ссылки с помощью комбинации клавиш.
charset
Указывает кодировку текста, на который ведет ссылка.
coords
Устанавливает координаты активной области.
href
Задает адрес документа, на который следует перейти.
hreflang
Идентифицирует язык текста по ссылке.
media
Указывает тип носителя документа, на который ведёт ссылка.
name
Устанавливает имя якоря внутри документа.
rel
Отношения между ссылаемым и текущим документами.
rev
Отношения между текущим и ссылаемым документами.
shape
Задает форму активной области ссылки для изображений.
tabindex
Определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
target
Имя окна или фрейма, куда браузер будет загружать документ.
title
Добавляет всплывающую подсказку к тексту ссылки.
type
Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег А</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p>
</body>
</html>


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут accesskey позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

<a accesskey="c">...</a>

Обязательный атрибут

Нет.

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут accesskey</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg" accesskey="x">
    Посмотрите на мою фотографию!
  </a></p>
</body>
</html>


Атрибут charset

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для указания кодировки текста, на который ведет ссылка.

Синтаксис

<a charset="кодировка">...</a>

Обязательный атрибут

Нет.

Значения

Наименование кодировки (utf-8, windows-1251).

Значение по умолчанию

Кодировка, заданная для текущего документа.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег А, атрибут charset</title>
 </head>
 <body>
  <p><a href="http://koi8.pp.ru/" charset="koi8-r">
    Сайт, посвященный кодировке KOI8</a></p>
 </body>
</html>


Атрибут coords

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 4.0+ |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут coords применяется к ссылкам, которые располагаются внутри контейнера <object>. Совместно с атрибутом shape создает «горячую область», которая служит ссылкой. По своему действию похож на тег <area>.

Синтаксис

HTML
<object usemap="#идентификатор">
 <map name="идентификатор">
  <a href="URL" coords="координаты">...</a>
 </map>
</object>
XHTML
<object usemap="#идентификатор">
 <map id="идентификатор" name="идентификатор">
  <p><a href="URL" coords="координаты">...</a></p>
 </map>
</object>

Обязательный атрибут

Нет.

Значения

Набор координат определяется формой «горячей области», которая задается атрибутом shape. Отсчет координат обычно ведется от левого верхнего угла объекта или изображения и указывается в пикселах.

Для прямоугольника (shape="rect") определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Координаты для прямоугольника

Рис. 1. Координаты для прямоугольника

Для окружности (shape="circle") определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Координаты для окружности

Рис. 2. Координаты для окружности

Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.

Координаты для полигона

Рис. 3. Координаты для полигона

Значение по умолчанию

Нет.


Атрибут href

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.

Синтаксис

<a href="URL">...</a>

Обязательный атрибут

Обязателен для ссылок.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут href</title>
 </head>
 <body>
  <p><a href="../../example/knob.html">Относительная ссылка</a></p>
  <p><a href="http://htmlbook.ru/example/knob.html">Абсолютная ссылка</a></p>
 </body>
</html>


Атрибут hreflang

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает язык документа, на который ведет ссылка.

Синтаксис

<a hreflang="язык">...</a>

Обязательный атрибут

Нет.

Значения

См. код языка

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут hreflang</title>
 </head>
 <body>
  <p><a href="http://baidu.cn" hreflang="zh">Китайский поисковик Байду</a></p>
 </body>
</html>


Атрибут media

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<a media="<медиа-запрос>">...</a>

Значения

Медиа-запросы.

Значение по умолчанию

all

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег a, атрибут media</title>
 </head>
 <body>
  <p><a href="xxx.html" media="handheld and (color)">
     Мобильная версия страницы</a></p>
 </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут name используется для определения якоря внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи атрибута name тега <a>. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.

Между тегами <a name=...> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.

Синтаксис

<a name="закладка">...</a>

Обязательный атрибут

Обязателен для якорей.

Значения

Любой текст с учетом регистра.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег А, атрибут name</title>
 </head>
 <body>

  <p><a name="top"></a></p>
  <p style="height:3000px;">Здесь много-много текста.
   Прокручивай его вниз. </p>

  <p><a href="#top">Наверх</a></p>

 </body>
</html>

Примечание

В XHTML и HTML5 вместо name для определения якоря требуется указывать атрибут id.


Атрибут rel

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 10.50+ |  | 4.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут rel определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Несмотря на то, что браузеры в большинстве своем не поддерживают атрибут rel, на сайтах часто можно встретить код rel="nofollow", предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.

Синтаксис

<a rel="строка">...</a>

Обязательный атрибут

Нет.

Значения

Некоторые возможные значения перечислены ниже.

answer
Ответ на вопрос.
chapter
Раздел или глава текущего документа.
co-worker
Ссылка на страницу коллеги по работе.
colleague
Ссылка на страницу коллеги (не по работе).
contact
Ссылка на страницу с контактной информацией.
details
Ссылка на страницу с подробностями.
edit
Редактируемая версия текущего документа.
friend
Ссылка на страницу друга.
question
Вопрос.

Весь список значений можно посмотреть по адресу http://wiki.whatwg.org/wiki/RelExtensions

В HTML5 поддерживается следующие значения.

archives
Ссылка на архив сайта.
author
Ссылка на страницу об авторе на том же домене.
bookmark
Постоянная ссылка на раздел или запись.
first
Ссылка на первую страницу.
help
Ссылка на документ со справкой.
index
Ссылка на содержание.
last
Ссылка на последнюю страницу.
license
Ссылка на страницу с лицензионным соглашением или авторскими правами.
me
Ссылка на страницу автора на другом домене.
next
Ссылка на следующую страницу или раздел.
nofollow
Не передавать по ссылке ТИЦ и PR.
noreferrer
Не передавать по ссылке HTTP-заголовки.
prefetch
Указывает, что надо заранее кэшировать указанный ресурс.
prev
Ссылка на предыдущую страницу или раздел.
search
Ссылка на поиск.
sidebar
Добавить ссылку в избранное браузера.
tag
Указывает, что метка (тег) имеет отношение к текущему документу.
up
Ссылка на родительскую страницу.

Значение по умолчанию

Нет.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег А, атрибут rel</title>
 </head>
 <body>
  <p><a href="http://ya.ru" rel="nofollow">Наш ответ Яндексу</a></p>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавить в избранное</title>
 </head>
 <body>
  <p><a href="http://htmlbook.ru" rel="sidebar">Добавить в избранное</a></p>
 </body>
</html>

Браузеры

Firefox поддерживает значение prefetch и sidebar. Opera поддерживает значение sidebar.


Атрибут rev

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут rev является обратным к rel и описывает, чем является текущий документ по отношению к странице, на которую ведет ссылка.

Синтаксис

<a rev="строка">...</a>

Обязательный атрибут

Нет.

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег А, атрибут rev</title>
 </head>
 <body>
  <p><a href="index.html" rel="Главная страница" rev="Дочерняя страница">
     Перейти на главную страницу</a></p>
 </body>
</html>


Атрибут shape

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 4.0+ |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет на изображении тип активной области, которая служит ссылкой. Применяется к тегу <a> когда он располагается внутри <object>.

Синтаксис

HTML
<object usemap="#идентификатор">
 <map name="идентификатор">
  <a href="URL"shape="circle | default | poly | rect">...</a>
 </map>
</object>
XHTML
<object usemap="#идентификатор">
 <map id="идентификатор" name="идентификатор">
  <p><a href="URL"shape="circle | default | poly | rect">...</a></p>
 </map>
</object>

Обязательный атрибут

Нет.

Значения

circle
Область в виде круга.
default
Область по умолчанию (прямоугольная).
poly
Полигональная область произвольной формы.
rect
Прямоугольная область.

Значение по умолчанию

default

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег А, атрибут shape</title>
 </head>
 <body>
  <div><object type="image/jpeg" data="images/177.jpg"
    width="650" height="434" usemap="#link">
   <map name="link">
    <p><a href="http://merjevich.ru" shape="rect"
     coords="299, 407, 650, 434">Ссылка на сайт</a></p>
   </map>
  </object></div>
</body>
</html>


Атрибут tabindex

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab.

Синтаксис

<a tabindex="число">...</a>

Обязательный атрибут

Нет.

Значения

Любое целое положительное число. Значения выстраиваются последовательно и переход между ссылками происходит от меньшего значения к большему. Значения меньше нуля игнорируются и переход к таким ссылкам не происходит.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут tabindex</title>
 </head>
 <body>
  <table>
   <tr>
    <td>
     <p><a href="1.html" tabindex="1">Ссылка 1</a></p>
     <p><a href="3.html" tabindex="3">Ссылка 3</a></p>
    </td>
    <td>
     <p><a href="2.html" tabindex="2">Ссылка 2</a></p>
     <p><a href="4.html" tabindex="4">Ссылка 4</a></p>
    </td>
   </tr>
  </table>
 </body>
</html>


Атрибут target

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. В XHTML применение этого атрибута запрещено.

Синтаксис

<a target="имя окна">...</a>

Обязательный атрибут

Нет.

Значения

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут target</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть в новом окне</a></p>
 </body>
</html>


Атрибут title

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке.

Синтаксис

<a title="текст">...</a>

Обязательный атрибут

Нет.

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут title</title>
 </head>
 <body>
  <p><a href="zoo.html" title="Рисунки различных животных и не только...">
    Рисунки
  </a></p>
 </body>
</html>


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает MIME-тип документа, на который указывает ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href.

Синтаксис

<a href="URL" type="MIME-тип">...</a>

Обязательный атрибут

Нет.

Значения

См. MIME-тип

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег a, атрибут type</title>
  <style>
   a[type="video/mp4"] {
    background: url(images/video.png) no-repeat 0 2px; /* Фоновый рисунок */
    padding-left: 20px; /* Отступ слева */
   }
  </style>
 </head>
 <body>
  <p><a href="1.html">Ссылка на страницу</a></p>
  <p><a href="video/snowman.mp4" type="video/mp4">Ссылка на видеоролик</a></p>
 </body>
</html>

Результат примера показан на рис. 1.

Вид ссылки со значением type

Рис. 1. Вид ссылки со значением type


Тег <abbr>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 2.0+ | 1.3+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <abbr> указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.

По умолчанию, текст заключенный в контейнере <abbr> подчеркивается пунктирной линией.

Синтаксис

<abbr>Текст</abbr>

Атрибуты

title
Добавляет всплывающую подсказку к тексту, в которой можно дать расшифровку аббревиатуры.

Также для этого тега доступны глобальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег ABBR</title>
  <meta charset="utf-8">
  <style type="text/css">
   abbr {
    border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста */
    color: #000080; /* Темно-синий цвет текста */
   }
  </style>
 </head>
 <body>
  <p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr>
  обозначается протокол, с помощью которого любые внешние программы взаимодействуют
  с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом
  языке программирования и результат их действия выводить в виде веб-страницы.</p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки при наведении курсора мыши на текст аббревиатуры

Браузеры

Браузер Internet Explorer до 6 версии включительно не поддерживает тег <abbr>, взамен рекомендуется использовать тег <acronym>.


Атрибут title

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Расширенное описание элемента. Оно отображается на веб-странице в виде всплывающей подсказки при наведении курсора мыши на аббревиатуру.

Синтаксис

<abbr title="текст">...</abbr>

Обязательный атрибут

Нет.

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег abbr, атрибут title</title>
 </head>
 <body>
  <p><abbr title="Опытно-конструкторское бюро">ОКБ</abbr>
  это организация, которая занимается разработкой новой техники
  и прикладных технологий.</p>
 </body>
</html>


Тег <acronym>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 2.1+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <acronym> указывает на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести следующие слова: СПИД, ликбез, замполит, США, DOS и др.

По умолчанию, текст заключенный в контейнере <acronym> подчеркивается пунктирной линией.

Синтаксис

<acronym>Текст</acronym>

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег ACRONYM</title>
   <style type="text/css">
    acronym {
     border-bottom: 1px dashed blue; /* Подчеркивание текста */
     color: maroon; /* Цвет текста */
    }
   </style>
  </head>
  <body>
  <p>Популярность языка JavaScript порождена его широкими возможностями
  по взаимодействию с элементами веб-страницы через <acronym title="Document
  Object Model, Объектная модель документа">DOM</acronym>.</p>
 </body>
</html>

Результат данного примера показан ниже.

Вид всплывающей подсказки в браузере

Рис. 1. Вид всплывающей подсказки в браузере


Тег <address>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <address> предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов.

По умолчанию текст внутри контейнера <address> отображается курсивным начертанием. Если эта особенность не требуется, используйте стили для изменения начертания шрифта.

Синтаксис

<address>Текст</address>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег ADDRESS</title>
  </head>
 <body>
  <address>
   Этот партал зделан сабствинаручно веб-дизайнером Ваней Шапочкиным в праграме
   Блакнот. Если вы хатите взять маи статьи к сибе на сайт то спрасите мое
   разришение.
  </address>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид текста в контейнере <address>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>Тег ADDRESS</title>
  </head>
 <body>
  <footer>
   <address>Волоколамское шоссе, д. 17, офис 392</address>
  </footer>
 </body>
</html>


Тег <applet>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <applet> предназначен для вставки на страницу апплетов — небольших программ, написанных на языке Java. Этот тег является устаревшим, взамен необходимо использовать более гибкий тег <object>. Между открывающим и закрывающим тегом можно добавить текст, который будет отображаться в браузере, если он не поддерживает апплеты. В противном случае текст не выводится.

Синтаксис

<applet code="URL">Текст</applet>

Закрывающий тег

Обязателен.

Атрибуты

align
Задает выравнивание апплета относительно близлежащих элементов и текста.
alt
Альтернативный текст.
archive
Указывает путь и имя файла с архивом.
code
Имя файла.
codebase
Путь к папке с апплетом, который задан атрибутом code.
height
Высота апплета.
hspace
Горизонтальный отступ от апплета до окружающего контента.
vspace
Вертикальный отступ от апплета до окружающего контента.
width
Ширина апплета.

Также для этого тега доступны универсальные атрибуты и события.

Валидация

Использование этого тега осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег APPLET</title>
 </head>
 <body>
  <p>Текущее время: <applet code="Clock.class" width="60" height="10">
    Ваш браузер не поддерживает Java-апплеты.
  </applet></p>
 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Апплет для вывода текущего времени в окне браузера


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание апплета относительно близлежащих элементов и текста.

Синтаксис

<applet align="bottom | left | middle | right |  top"></applet>

Значения

В табл. 1 перечислены возможные значение атрибута align и результат его использования.

Табл. 1. Значения align
Значение | Описание | Пример
bottom | Выравнивание нижней границы апплета по окружающему тексту.. | Lorem ipsum dolor sit amet, consectetuer [image] adipiscing elit...
left | Выравнивает апплет по левому краю. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle | Выравнивание середины апплета по базовой линии текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
right | Выравнивает апплет по правому краю. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top | Верхняя граница апплета выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...

Значение по умолчанию

left

Валидация

Использование этого атрибута осуждается спецификацией HTML, вместо него рекомендуется использовать стили.


Атрибут alt

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут alt устанавливает альтернативный текст для апплетов. Такой текст позволяет получить информацию о программе во время ее загрузки.

Синтаксис

<applet code="URL" alt="текст"></applet>

Значения

Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Браузеры

Ни один из браузеров альтернативный текст не отображает каким-либо образом.


Атрибут archive

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет указать архивный файл в формате ZIP или JAR (Java-архив), в котором располагается апплет.

Синтаксис

<applet code="URL" archive="URL файла с архивом"></applet>

Значения

В качестве значения принимается полный или относительный путь к архивному файлу.

Значение по умолчанию

Нет.


Атрибут code

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает имя файла с Java-классом (оно имеет расширение .class). Это имя может комбинироваться со значением атрибута codebase, который задает путь к папке, где располагается файл.

Синтаксис

<applet code="URL"></applet>

Значения

Имя файла с расширением .class. Если расширение не указано (например: code="clock"), то браузер добавит расширение автоматически.

Значение по умолчанию

Нет.

Обязательный атрибут

Да.


Атрибут codebase

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для установки базового адреса, относительно которого будет задаваться значение атрибута code. Если значение codebase не указано, то в качестве адреса принимается адрес текущего документа.

Синтаксис

<applet code="URL" codebase="URL"></applet>

Значения

Абсолютный или относительный путь к папке, где хранятся файлы с Java-классами.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег APPLET, атрибут codebase</title>
 </head>
 <body>
  <p>Текущее время:
     <applet code="Clock.class" codebase="/example/" width="60" height="10"></applet></p>
 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задаёт высоту апплета. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры апплета вычисляются относительно размера родительского элемента — контейнера, где находится тег <applet>.

Синтаксис

<applet code="URL" height="значение"></applet>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Браузеры по разному задают исходную высоту апплета: Internet Explorer — 150 пикселов, Firefox — 198 пикселов, Opera — 150 пикселов, Chrome — 50 пикселов.


Атрибут hspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает горизонтальный отступ вокруг апплета.

Синтаксис

<applet code="URL" hspace="отступ по горизонтали"></applet>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Валидация

Использование этого атрибута осуждается спецификацией HTML, взамен рекомендуется использовать стили.


Атрибут vspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает вертикальный отступ вокруг апплета.

Синтаксис

<applet code="URL" vspace="отступ по вертикали"></applet>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Валидация

Использование этого атрибута осуждается спецификацией HTML, взамен рекомендуется использовать стили.


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задаёт ширину апплета. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры апплета вычисляются относительно размера родительского элемента — контейнера, где находится тег <applet>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что апплет будет растянут на всю ширину веб-страницы.

Синтаксис

<applet code="URL" width="значение"></applet>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Браузеры по разному задают исходную ширину апплета: Internet Explorer — 150 пикселов, Firefox — 234 пиксела, Opera — 150 пикселов.


Тег <area>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Каждый элемент <area> определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег <area> задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <map>, который связывает координаты областей с изображением.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Синтаксис

HTML
<map>
  <area href="URL">
</map>
XHTML
<map>
  <area href="URL" />
</map>

Атрибуты

accesskey
Переход к области с помощью комбинации клавиш.
alt
Альтернативный текст для области изображения.
coords
Координаты активной области.
href
Задает адрес документа, на который следует перейти.
hreflang
Указывает язык документа, на который ведет ссылка.
nohref
Область без ссылки на другой документ.
shape
Форма области.
tabindex
Задает последовательность перехода между элементами с помощью клавиши Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
type
Устанавливает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body>
 <div id="title"><img src="images/ecctitle.png" width="640" height="158"
                alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" width="640" height="30"
                alt="Навигация по сайту" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
  </map></p>
 </body>
</html>


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут accesskey позволяет перейти к активной области изображения с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

HTML
<area accesskey="c">
XHTML
<area accesskey="c" />

Обязательный атрибут

Нет.

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.


Атрибут alt

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут alt устанавливает альтернативный текст для области изображения. Такой текст отображается в виде всплывающей подсказки при наведении курсора мыши на область.

Синтаксис

HTML
<area alt="текст">
XHTML
<area alt="текст" />

Обязательный атрибут

Да.

Значения

Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег AREA, атрибут alt</title>
</head>
<body>
 <p><img src="images/europe.png" alt="Европа" width="422"
   height="387" usemap="#Map">
 <map name="Map">
  <area shape="poly" coords="34,83,42,90,52,87,64,85,71,81,79,87,84,95,
  75,110,61,120,42,116,37,110,25,94,32,82" href="is.html" alt="Исландия">
  <area shape="poly" coords="168,262,173,254,180,254,207,272,201,290,206,309,
  197,318,182,316,182,323,165,320,152,317,154,292,138,276,168,263"
  href="fr.html" alt="Франция">
  <area shape="poly" coords="250,223,264,217,274,222,295,221,298,235,301,257,
  290,269,274,268,247,254,243,241,243,241" href="pl.html" alt="Польша">
 </map></p>
</body>
</html>


Атрибут coords

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.

Значения координат представляют собой набор чисел, разделенных запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.

Синтаксис

HTML
<area coords="координата 1, координата 2, координата 3, ...">
XHTML
<area coords="координата 1, координата 2, координата 3, ..." />

Обязательный атрибут

Нет.

Значения

Набор координат определяется формой «горячей области», которая задается атрибутом shape. Отсчет координат обычно ведется от левого верхнего угла изображения и указывается в пикселах.

Для прямоугольника (shape="rect") определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Рис. 1. Координаты для прямоугольника

Для окружности (shape="circle") определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Рис. 2. Координаты для окружности

Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.

Рис. 3. Координаты для полигона

Рис. 3. Координаты для полигона

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA, атрибут coords</title>
 </head>
 <body>
  <p><map name="worm">
   <area coords="321, 245, 100" shape="circle"
   href="../wormik/knob.html" alt="Координаты для червяка">
  </map></p>
  <p><img src="/images/bigworm.gif" usemap="#worm"
   width="623" height="511" alt="Червяк"></p>
 </body>
</html>


Атрибут href

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.

Синтаксис

HTML
<area href="URL">
XHTML
<area href="URL" />

Обязательный атрибут

Да.

Значения

В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA, атрибут href</title>
 </head>
 <body>
  <p><map name="worm">
  <area coords="321, 245, 100" shape="circle"
   href="../wormik/knob.html" alt="Координаты для червяка">
  </map></p>
  <p><img src="/images/bigworm.gif" usemap="#worm"
   width="623" height="511" alt="Червяк"></p>
 </body>
</html>


Атрибут hreflang

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает язык документа, на который ведёт ссылка активной области изображения.

Синтаксис

HTML
<map>
  <area href="URL" hreflang="язык">
</map>
XHTML
<map>
  <area href="URL" hreflang="язык" />
</map>

Обязательный атрибут

Нет.

Значения

См. код языка

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег area, атрибут hreflang</title>
 </head>
 <body>
  <p><img src="images/europe.png" alt="Европа" width="422"
   height="387" usemap="#Map">
  <map name="Map">
   <area shape="poly"
    coords="34,83,42,90,52,87,64,85,71,81,79,87,84,95,75,110,61,120,42,116,37,110,25,94,32,82"
    href="http://is.wikipedia.org/wiki/Island"
    alt="Исландия" hreflang="is">
   <area shape="poly"
    coords="168,262,173,254,180,254,207,272,201,290,206,309,197,318,182,316,182,323,165,320,152,317,154,292,138,276,168,263"
    href="http://fr.wikipedia.org/wiki/France" alt="Франция" hreflang="fr">
   <area shape="poly"
    coords="250,223,264,217,274,222,295,221,298,235,301,257,290,269,274,268,247,254,243,241,243,241"
    href="http://pl.wikipedia.org/wiki/Polska" alt="Польша" hreflang="pl">
  </map></p>
 </body>
</html>


Атрибут nohref

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Этот атрибут сообщает браузеру, что «горячая область» не является ссылкой. При этом атрибут href не должен включаться.

Синтаксис

HTML
<area nohref>
XHTML
<area nohref="nohref" />

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут nohref не установлен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег AREA, атрибут nohref</title>
 </head>
 <body>
  <p><map name="nortland">
   <area coords="21, 24, 121, 124" shape="rect" nohref alt="Вход на сайт">
  </map></p>
  <p><img src="/images/piter.gif" usemap="#nortland" width="200" height="200"
     alt="Питер Нортон"></p>
 </body>
</html>


Атрибут shape

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет форму «горячей области», координаты которой задаются с помощью атрибута coords.

Синтаксис

HTML
<area shape="circle | default | poly | rect">
XHTML
<area shape="circle | default | poly | rect" />

Значения

circle
Область в виде окружности.
default
Указывает всю область.
poly
Область в виде полигона (многоугольника).
rect
Прямоугольная область.

Значение по умолчанию

rect


Атрибут tabindex

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.

Синтаксис

HTML
<area tabindex="число">
XHTML
<area tabindex="число" />

Обязательный атрибут

Нет.

Значения

Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.

Значение по умолчанию

Нет.


Атрибут target

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <area>.

Синтаксис

<area target="имя окна">

Значения

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML 4.01 и XHTML 1.0, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA, атрибут target</title>
 </head>
 <body>
  <p><map name="nortland">
  <area coords="21, 24, 121, 124" shape="rect" href="/sch/images/new.html"
  target="_blank" alt="Откроется в новом окне">
  </map></p>
  <p><img src="/images/piter.gif" usemap="#nortland" width="200"
  height="200" alt="Питер Нортон"></p>
 </body>
</html>

Обратите внимание, что в данном примере используется переходный <!DOCTYPE>. При использовании строгого <!DOCTYPE> пример не пройдет валидацию.


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает MIME-тип документа, на который ведёт ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href.

Синтаксис

<area type="MIME-тип" href="URL">

Значения

См. MIME-тип

Значение по умолчанию

Нет.


Тег <article>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 6.0+ | 10.6+ | 4.0+ | 4.0+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <article> задает содержание сайта вроде новости, статьи, записи блога, форума или др.

Синтаксис

<article>
</article>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>article</title>
 </head>
 <body>
  <header>
    <h1>Следы невиданных зверей</h1>
  </header>
  <article>
    История о том, как возле столовой появились загадочные розовые
    следы с шестью пальцами, и почему это случилось.
  </article>
 </body>
</html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <article>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору article.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <aside>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 6.0+ | 10.6+ | 4.0+ | 4.0+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель».

Синтаксис

<aside>
</aside>

Атрибуты

Для этого тега доступны универсальные атрибуты.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>aside</title>
  <script>
   document.createElement('aside');
   document.createElement('article');
  </script>
  <style>
   aside {
    background: #f0f0f0;
    padding: 10px;
    width: 200px;
    float: right;
   }
   article {
    margin-right: 240px;
    display: block;
   }
  </style>
 </head>
 <body>
  <header><h1>Байки</h1></header>
  <aside>
   <p>Экономьте электричество</p>
   <p>Хороший язык</p>
   <p>Чья палка больше</p>
  </aside>
  <article>
   История о том, как приходилось экономить электричество,
   какие меры для этого принимались, и куда оно на самом деле уходило.
  </article>
 </body>
</html>

Результат данного примера показан на рис. 1.

Боковая панель на странице

Рис. 1. Боковая панель на странице

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <aside>, но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <audio>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.5+ | 3.1+ | 3.5+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.

Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры
Кодек | Internet Explorer 9+ | Chrome 6+ | Opera 10.60+ | Safari 4+ | Firefox 3.6+
ogg/vorbis |  |  |  |  |
wav |  |  |  |  |
mp3 |  |  |  |  |
AAC |  |  |  |  |

Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.

Синтаксис

<audio src="URL"></audio>
<audio>
 <source src="URL">
</audio>

Атрибуты

autoplay
Звук начинает играть сразу после загрузки страницы.
controls
Добавляет панель управления к аудиофайлу.
loop
Повторяет воспроизведение звука с начала после его завершения.
preload
Используется для загрузки файла вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому файлу.

Закрывающий тег

Обязателен.

Пример

HTML5IE 8IE 9+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>audio</title>
 </head>
 <body>
  <p>Александр Клименков - Четырнадцать</p>
  <audio controls>
    <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером.
    <a href="audio/music.mp3">Скачайте музыку</a>.
  </audio>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение аудиофайла

Браузеры

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.


Атрибут autoplay

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.5+ | 3.1+ | 3.5+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

При наличии этого атрибута аудио начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие preload.

Синтаксис

<audio autoplay="autoplay">
</audio>

Значения

В качестве значения указывается autoplay, также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>autoplay</title>
 </head>
 <body>
   <audio autoplay>
    <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>.
   </audio>
 </body>
</html>


Атрибут controls

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.5+ | 3.1+ | 3.5+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет панель управления к аудиотреку. Вид панели и ее содержимое зависит от браузера и может в себя включать: кнопку воспроизведения, паузы, перемотки, ползунок для изменения уровня громкости и др.

Синтаксис

<audio controls="controls">
</audio>

Значения

В качестве значения указывается controls, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>controls</title>
 </head>
 <body>
   <audio controls>
    <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>.
   </audio>
 </body>
</html>


Атрибут loop

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.5+ | 3.1+ | 11.0+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Зацикливает воспроизведение аудио, чтобы оно повторялось с начала после завершения.

Синтаксис

<audio loop="loop">
</audio>

Значения

В качестве значения указывается loop, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>loop</title>
 </head>
 <body>
   <audio autoplay loop>
    <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>.
   </audio>
 </body>
</html>


Атрибут preload

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.5+ | 3.1+ | 4.0+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для загрузки аудиофайла вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay.

Синтаксис

<audio preload="none | metadata | auto">
</audio>

Значения

none
Не загружать аудиофайл.
metadata
Загрузить только служебную информацию (продолжительность звучания и др.).
auto
Загрузить аудиофайл целиком при загрузке страницы.

Пустое значение атрибута воспринимается как auto.

Значение по умолчанию

none

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>preload</title>
 </head>
 <body>
   <audio autoplay preload="metadata">
    <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>.
   </audio>
 </body>
</html>

Браузеры

Opera вместо preload поддерживает атрибут autobuffer.


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.5+ | 3.1+ | 3.5+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает путь к воспроизводимому аудиофайлу. Для этой же цели также можно использовать тег <source>.

Синтаксис

<audio src="URL">
</audio>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>src</title>
 </head>
 <body>
   <audio src="audio/music.ogg" controls="controls">
    Ваш браузер не поддерживает воспроизведение этой музыки.
   </audio>
 </body>
</html>


Тег <b>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

Синтаксис

<b>Текст</b>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-weight

Пример. Использование тега <b>

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег B</title>
 </head>
 <body>
  <p><b>Lorem ipsum dolor sit amet</b></p>
  <p><b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit,
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
  volutpat. <b>Ut wisis</b> enim ad minim veniam, quis nostrud exerci
  tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид жирного начертания шрифта в тексте

Примечание

Хотя использование тега <b> не осуждается в HTML, применение стилей предоставляет больше возможностей по управлению жирностью текста. С другой стороны, поисковые системы «любят» слова, выделенные жирным начертанием, и повышают их рейтинг.


Тег <base>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <base> определен внутри контейнера <head> и инструктирует браузер относительно полного базового адреса текущего документа. Тег <base> предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи. Браузер ищет тег <base>, определяет полный адрес документа и корректно загружает его. Например, если адрес документа указан как <base href="http://www.megasite.ru/hzchd/">, то при добавлении рисунков достаточно использовать относительный адрес <img src="images/labuda.gif">. При этом полный путь к изображению будет http://www.megasite.ru/hzchd/images/labuda.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница. Также можно применять и иерархическую систему пути с двумя точками. Так, если изображение добавляется как <img src="../images/labuda.gif">, то полный путь к файлу будет http://www.megasite.ru/images/labuda.gif.

Второе применение тега <base> — задание целевого окна для всех ссылок на текущей странице.

Синтаксис

HTML
<head>
  <base ...>
</head>
XHTML
<head>
  <base ... />
</head>

Атрибуты

href
Адрес, который должен использоваться для указания полного пути к файлам.
target
Имя окна или фрейма, куда будет загружаться документ, открываемый по ссылке.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BASE</title>
  <base target="_blank">
 </head>
 <body>
  <p><a href="1.html">Ссылка</a></p>
 </body>
</html>


Атрибут href

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Адрес, который должен использоваться для указания полного пути к файлам. Обычно это типичный путь к текущему документу, но он может быть задан и другим, если это необходимо для организации файлов на сайте.

Синтаксис

HTML
<base href="URL">
XHTML
<base href="URL" />

Значения

Полный абсолютный путь к документу.

Значение по умолчанию

Путь к текущему файлу.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BASE, атрибут href</title>
  <base href="http://htmlbook.ru/example/images/">
 </head>
 <body>
  <p><img src="copyleft.png" alt="О_о"></p>
 </body>
</html>

В данном примере полный путь к изображению будет http://htmlbook.ru/example/images/copyleft.png.


Атрибут target

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<base target="имя окна">

Значения

В качестве значения используется имя окна или фрейма. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Если для тега <base> установлен target="_blank", можно сделать чтобы ссылка открывалась в текущем окне, если добавить к тегу <a> атрибут target="_self".

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег base, атрибут target</title>
  <base target="_blank">
 </head>
 <body>
  <p><a href="new.html">Ссылка откроется в новом окне</a></p>
  <p><a href="current.html" target="_self">Ссылка откроется в текущем окне</a></p>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег base, атрибут target</title>
  <base target="_blank">
 </head>
 <body>
  <p><a href="new.html">Ссылка откроется в новом окне</a></p>
  <p><a href="current.html" target="_self">Ссылка откроется в текущем окне</a></p>
 </body>
</html>


Тег <basefont>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <basefont> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <font>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.

Синтаксис

<basefont>

Закрывающий тег

Не требуется.

Атрибуты

color
Устанавливает цвет текста.
face
Определяет гарнитуру шрифта.
size
Задает размер шрифта в условных единицах.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BASEFONT</title>
 </head>
 <body>

  <basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon">
  <p>Добро пожаловать на мою страничку, которая оформлена с использованием
    тега BASEFONT</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста в браузере Internet Explorer 8


Атрибут color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет цвет текста на веб-странице.

Синтаксис

<basefont color="цвет">

Значения

См. цвет

Аналог CSS

color

Значение по умолчанию

Цвет, установленный в браузере по умолчанию. Обычно это черный.


Атрибут face

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

<basefont face="шрифт1, шрифт2, ...">

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Значение по умолчанию

Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.

Аналог CSS

font-family


Атрибут size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут size задает размер шрифта в условных единицах.

Синтаксис

<basefont size="1 | 2 | 3 | 4 | 5 | 6 | 7">
<basefont size="+1">
<basefont size="-1">

Значения

Значение может быть от 1 до 7. Размер шрифта можно указывать как абсолютной величиной (например, size="4"), так и относительной (например, size="+1", size="-1"). В последнем случае размер изменяется относительно базового.

Значение по умолчанию

Размер, установленный в браузере по умолчанию. Обычно он равен 3.

Аналог CSS

font-size


Тег <bdi>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 16.0+ |  |  | 10.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <bdi> указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста. Такое поведение важно для текстов, одновременно содержащих разные языки, читающихся слева направо и справа налево.

Синтаксис

<bdi>Текст</bdi>

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Атрибут dir по умолчанию имеет значение auto.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BDI</title>
 </head>
 <body>
  <p dir="rtl"><bdi>???</bdi> — суббота</p>
  <p>В ашкеназском произношении звучит как «ша?бос» (идиш «ша?бес»),
   а в сефардском — как «шаба?т».</p>
 </body>
</html>


Тег <bdo>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <bdo> устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево. Например, к ним относится арабский язык.

Синтаксис

<bdo>Текст</bdo>

Атрибуты

dir
Указывает направление текста — слева направо или справа налево.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BDO</title>
 </head>
 <body>

  <p><bdo dir="rtl">А роза упала на лапу Азора</bdo></p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста при использовании тега <bdo>


Атрибут dir

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет направление и отображение текста — слева направо или справа налево.

Синтаксис

<bdo dir="ltr | rtl">...</bdo>

Обязательный атрибут

Нет.

Значения

ltr
Текст отображается как обычно — слева направо.
rtl
Текст инвертируется и отображается справа налево. Иными словами, последнюю букву в предложении браузер покажет первой, и наоборот, первую букву в тексте — последней.

Значение по умолчанию

ltr


Тег <bgsound>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  | 4.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <bgsound> определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью атрибутов тега, а также могут управляться через скрипты. Этот тег должен размещаться только в контейнере <head>.

Тег <bgsound> не входит в спецификацию HTML и при его использовании код не пройдет валидацию. К тому же пользователи, как правило, отрицательно относятся к музыке, которая играет на сайте, поэтому используйте эту возможность с осторожностью и по необходимости.

Синтаксис

<head>
  <bgsound атрибуты>
</head>

Атрибуты

balance
Управляет балансом звука между правой и левой колонками.
loop
Устанавливает, сколько раз проигрывать музыкальный файл.
src
Путь к музыкальному файлу.
volume
Задает громкость звучания музыки.

Закрывающий тег

Не обязателен.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BGSOUND</title>
  <bgsound src="town.mid" loop="-1">
 </head>
 <body>
  ...
 </body>
</html>

Примечание

В браузере Internet Explorer можно отключить возможность воспроизведения звуков в свойствах обозревателя. Для этого во вкладке «Дополнительно» в блоке «Мультимедиа» уберите галочку у пункта «Воспроизводить звуки на веб-страницах» (рис. 1).

Отключение звуков в настройках браузера Internet Explorer

Рис. 1. Отключение звуков в настройках браузера Internet Explorer

В браузере Opera отключить звуки можно через меню Инструменты (рис. 2). Настройка применяется после обновления страницы.

Отключение звука в браузере Opera

Рис. 2. Отключение звука в браузере Opera


Атрибут balance

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  | 4.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Регулирует громкость звучания в левой и правой колонках. Этот атрибут не может быть изменен динамически с помощью скриптов.

Синтаксис

<bgsound balance="число">

Значения

Целое число от -10000 до 10000. Значение ноль служит для баланса громкости, отрицательные числа увеличивают громкость в левой колонке, а положительные — в правой.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Тег BGSOUND, атрибут balance</title>
  <bgsound src="town.mid" balance="3000">
 </head>
 <body>
  ...
 </body>
</html>


Атрибут loop

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  | 4.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает, сколько раз проигрывать музыкальный файл. Если значение отсутствует, то музыка проигрывается только один раз.

Синтаксис

<bgsound loop="число">

Значения

Значение 0 проигрывает файл один раз, -1 проигрывает музыку до тех пор, пока текущая веб-страница открыта. Любое целое положительное число заставляет браузер проигрывать музыкальный файл указанное число раз.

Значение по умолчанию

-1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Тег BGSOUND, атрибут loop</title>
  <bgsound src="town.mid" loop="3">
 </head>
 <body>
  ...
 </body>
</html>


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  | 4.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Путь к музыкальному файлу, который будет проигрываться на веб-странице. Список допустимых типов файлов зависит от браузера и его настроек, но популярные форматы, например, MIDI поддерживается браузером без установки дополнительных плагинов.

Синтаксис

<bgsound src="URL">

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Тег BGSOUND, атрибут src</title>
  <bgsound src="town.mid">
 </head>
 <body>
  ...
 </body>
</html>


Атрибут volume

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  | 4.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<bgsound volume="число">

Значения

Целое число от -10000 до 0. Ноль соответствует максимальной громкости звучания.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Тег BGSOUND, атрибут volume</title>
  <bgsound src="town.mid" volume="-1000">
 </head>
 <body>
  ...
 </body>
</html>


Тег <big>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу. Допускается применение вложенных тегов <big>, при этом размер шрифта будет больше с каждым уровнем.

На размер шрифта влияет не только заданный атрибут size тега <font>, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили.

Синтаксис

<big>Текст</big>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-size

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BIG</title>
 </head>
 <body>

  <p><big><big>Lorem ipsum dolor sit amet</big></big></p>

  <p><big>Lorem</big> ipsum dolor sit amet, consectetuer adipiscing elit,
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
  volutpat. <big>Ut</big> wisis enim ad minim veniam, quis nostrud
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста при использовании тега <big>


Тег <blink>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 2.0+ |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает мигание текста.

Синтаксис

<blink>Текст</blink>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Аналог CSS

text-decoration: blink

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BLINK</title>
 </head>
 <body>
  <p><blink>Внимание!</blink></p>
  <p>Не тыкайте в него палкой, он не мертвый, просто прикидывается.</p>
 </body>
</html>


Тег <blockquote>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <blockquote> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

Синтаксис

<blockquote>Текст</blockquote>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BLOCKQUOTE</title>
 </head>
 <body>

  <hr>
  <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
   sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
   suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </blockquote>
  <hr>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение тега <blockquote>


Тег <body>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.

Синтаксис

<body>
  ...
</body>

Атрибуты

alink
Устанавливает цвет активной ссылки.
background
Задает фоновый рисунок на веб-странице.
bgcolor
Цвет фона веб-страницы.
bgproperties
Определяет, прокручивать фон совместно с текстом или нет.
bottommargin
Отступ от нижнего края окна браузера до контента.
leftmargin
Отступ по горизонтали от левого края окна браузера до контента.
link
Цвет ссылок на веб-странице.
rightmargin
Отступ от правого края окна браузера до контента.
scroll
Устанавливает, отображать полосы прокрутки или нет.
text
Цвет текста в документе.
topmargin
Отступ от верхнего края окна браузера до контента.
vlink
Цвет посещенных ссылок.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Открывающий и закрывающий теги не обязательны.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег BODY</title>
  <meta charset="utf-8">
 </head>
 <body onload="alert('Документ загружен')">

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат текущего примера показан на рис. 1. При использовании события onload тега <body> выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.

Всплывающее окно в документе

Рис. 1. Всплывающее окно в документе


Атрибут alink

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры.

Синтаксис

<body alink="цвет">...</body>

Значения

См. цвет

Значение по умолчанию

Совпадает с цветом ссылки.

Аналог CSS

:active

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут alink</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body alink="red">
  <p>Обычный текст</p>
  <p><a href="zoo.html">Ссылка на документ</a></p>
 </body>
</html>


Атрибут background

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

<body background="URL">
...
</body>

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут background</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body background="images/snow.gif">
  ...
 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона веб-страницы. Можно использовать этот атрибут совместно с background, подобрав цвет фона близкий к фоновому рисунку

Синтаксис

<body bgcolor="цвет">
...
</body>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, но обычно используется белый цвет фона.

Аналог CSS

background

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут bgcolor</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body bgcolor="#A0BEC4">
  ...
 </body>
</html>


Атрибут bgproperties

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ |  | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

По умолчанию фоновый рисунок прокручивается совместно с содержанием веб-страницы. Используя атрибут bgproperties можно зафиксировать фон на одном месте и, таким образом, заставить прокручиваться только контент. Подобное качество веб-страницы редко применяется для сайтов, поэтому для пользователей может показаться странным и непривычным.

Синтаксис

<body bgproperties="fixed">
...
</body>

Значения

Существует только одно значение fixed, которое фиксирует фон. Если требуется, чтобы фон не фиксировался, удалите bgproperties у тега <body> или установите у него пустое значение — "".

Значение по умолчанию

Нет.

Аналог CSS

background-attachment

Валидация

Использование этого атрибута осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут bgproperties</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body background="images/snow.gif" bgproperties="fixed">

  <table height="2000"><tr><td></td></tr></table>

 </body>
</html>


Атрибут bottommargin

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ |  | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет отступ от нижнего края окна браузера до контента веб-страницы.

Синтаксис

<body bottommargin="число">...</body>

Значения

Целое положительное число, которое устанавливает отступ в пикселах.

Значение по умолчанию

10 пикселов

Аналог CSS

margin

Валидация

Использование этого атрибута осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Браузеры

Браузер Firefox не понимает bottommargin, для установки отступов в нем используются атрибуты marginwidth — отступы по горизонтали и marginheight — отступы по вертикали.


Атрибут leftmargin

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ |  | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет отступ от левого края окна браузера до контента веб-страницы.

Синтаксис

<body leftmargin="число">...</body>

Значения

Целое положительное число, которое устанавливает отступ в пикселах.

Значение по умолчанию

10 пикселов

Аналог CSS

margin

Валидация

Использование этого атрибута осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут leftmargin</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body leftmargin="0">
  <p>Текст плотно прижимается к левому краю окна браузера</p>
 </body>
</html>

Браузеры

Браузер Firefox не понимает атрибут leftmargin, для установки отступов в нем используются атрибуты marginwidth — отступы по горизонтали и marginheight — отступы по вертикали.


Атрибут link

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет непосещенных ссылок.

Синтаксис

<body link="цвет">
...
</body>

Значения

См. цвет

Значение по умолчанию

#0000FF

Аналог CSS

:link

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут link</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body link="#003366">

  <p>Обычный текст</p>
  <p><a href="zoo.html">Ссылка на документ</a></p>

 </body>
</html>


Атрибут rightmargin

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ |  | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет отступ от правого края окна браузера до контента веб-страницы.

Синтаксис

<body rightmargin="число">...</body>

Значения

Целое положительное число, которое устанавливает отступ в пикселах.

Значение по умолчанию

10 пикселов

Аналог CSS

margin

Валидация

Использование этого атрибута осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут leftmargin</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body leftmargin="0" rightmargin="0">
  <p>Текст плотно прижимается к краю окна браузера</p>
 </body>
</html>

Браузеры

Браузер Firefox не понимает rightmargin, для установки отступов в нем используются атрибуты marginwidth — отступы по горизонтали и marginheight — отступы по вертикали.


Атрибут scroll

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна.

Синтаксис

<body scroll="yes | no">
...
</body>

Значения

yes
Отображает полосы прокрутки.
no
Запрещает показ полос прокрутки в окне.

Значение по умолчанию

yes

Аналог CSS

Нет.

Валидация

Использование этого атрибута осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут scroll</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body scroll="no">

  <table height="2000"><tr><td></td></tr></table>

 </body>
</html>


Атрибут text

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<body text="цвет">
...
</body>

Значения

См. цвет

Значение по умолчанию

#000000

Аналог CSS

color

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут text</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body text="maroon">
  <p>Пример текста</p>
 </body>
</html>


Атрибут topmargin

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ |  | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет отступ от верхнего края окна браузера до контента веб-страницы.

Синтаксис

<body topmargin="число">...</body>

Значения

Целое положительное число, которое устанавливает отступ в пикселах.

Значение по умолчанию

10 пикселов

Аналог CSS

margin

Валидация

Использование этого атрибута осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Браузеры

Браузер Firefox не понимает атрибут topmargin, для установки отступов в нем используются marginwidth — отступы по горизонтали и marginheight — отступы по вертикали.


Атрибут vlink

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал».

Синтаксис

<body vlink="цвет">
...
</body>

Значения

См. цвет

Значение по умолчанию

#551a8b (Firefox); #800080 (Internet Explorer и Opera).

Аналог CSS

:visited

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут vlink</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body vlink="#660066">
  <p>Обычный текст</p>
  <p><a href="zoo.html">Ссылка на документ</a></p>
 </body>
</html>


Тег <br>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.

Синтаксис

HTML
Текст<br> текст
XHTML
Текст<br /> текст

Атрибуты

clear
Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BR</title>
 </head>
 <body>

  <p>Р.Л. Стивенсон</p>
  <p>Лето в стране настало,<br>
   Вереск опять цветет.<br>
   Но некому готовить<br>
   Вересковый мед.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста при использовании тега <br>


Атрибут clear

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен атрибут align или элемент, к которому применяется стилевое свойство float.

Результат использования clear зависит от края, по которому выравнивается элемент и значения clear. Так, если изображение выравнивается по левому краю, а значение атрибута clear тега <br> установлено как all или left, то текст после тега <br> будет отображаться ниже рисунка. Любые другие значения clear заставят текст располагаться справа от изображения и обтекать его.

Синтаксис

<br clear="all | left | right | none">

Значения

all
Отменяет обтекание элемента одновременно с правого и левого края.
left
Отменяет обтекание с левой стороны элемента, расположенного после тега <br>.
right
Отменяет обтекание с правой стороны элемента.
none
Отменяет действие атрибута.

Значение по умолчанию

Нет.

Аналог CSS

clear

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BR, атрибут clear</title>
 </head>
 <body>
  <div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <br clear="left">
  <p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
  feugat nulla facilisi.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Отмена обтекания блока текстом

Рис. 1. Отмена обтекания блока текстом


Тег <button>

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.

Синтаксис

<form>
  <button>...</button>
</form>

Атрибуты

accesskey
Доступ к элементам формы с помощью горячих клавиш.
autofocus
Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает между собой форму и кнопку.
formaction
Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
formenctype
Способ кодирования данных формы.
formmethod
Указывает метод пересылки данных формы.
formnovalidate
Отменяет проверку формы на корректность.
formtarget
Открывает результат отправки формы в новом окне или фрейме.
name
Определяет уникальное имя кнопки.
type
Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON</title>
 </head>
 <body>
  <p style="text-align: center"><button>Кнопка с текстом</button>
  <button><img src="images/umbrella.gif" alt="Зонтик"
          style="vertical-align: middle"> Кнопка с рисунком</button></p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид кнопок в браузере Safari

Рис. 1. Вид кнопок в браузере Safari

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает атрибут value.


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет горячую клавишу, с помощью которой происходит переход фокуса к элементу формы. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

<button accesskey="клавиша">...</button>

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON, атрибут accesskey</title>
 </head>
 <body>
  <p><button accesskey="a">Горячая клавиша a</button></p>
  <p><button accesskey="1">Горячая клавиша 1</button></p>
  <p><button accesskey="b">Горячая клавиша b</button></p>
  <p><button accesskey="q">Горячая клавиша q</button></p>
 </body>
</html>


Атрибут autofocus

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 8.0+ | 10.0+ | 4.0+ | 4.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.

Синтаксис

 <button autofocus>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON, атрибут autofocus</title>
 </head>
 <body>
  <form>
   <fieldset>
   <p>Нажимая кнопку Далее, вы соглашаетесь со всеми условиями
   Лицензионного соглашения, как явными, так и указанными
   в неявной форме.</p>
   <p><button autofocus value="next">Далее</button></p>
   </fieldset>
  </form>
 </body>
</html>

Результат данного примера в браузере Chrome показан на рис. 1.

Кнопка с автофокусом

Рис. 1. Кнопка с автофокусом


Атрибут disabled

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передается на сервер.

Синтаксис

HTML
<button disabled>...</button>
XHTML
<button disabled="disabled">...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON, атрибут disabled</title>
 </head>
 <body>
  <form action="button.html">
   <p><button>Активная кнопка</button>
   <button disabled>Неактивная кнопка</button></p>
  </form>
 </body>
</html>

Результат данного примера продемонстрирован на рис. 1.

Вид активной и неактивной кнопки

Рис. 1. Вид активной и неактивной кнопки


Атрибут form

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ | 5.0+ | 4.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри <form>, например, при создании её программно.

Синтаксис

 <button form="идентификатор">...</button>

Значения

Идентификатор формы (значение атрибута id тега <form>).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег button, атрибут form</title>
 </head>
 <body>
  <form id="data">
   <p><input placeholder="Ваше имя" name="user"></p>
  </form>
  <p><button type="submit" form="data">Отправить форму</button></p>
 </body>
</html>


Атрибут formaction

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 8.0+ | 10.0+ | 5.0+ | 4.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогично атрибуту action тега <form>. Если одновременно указать action и formaction, то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction.

Синтаксис

 <button formaction="URL">...</button>

Значения

Нет.

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег button, атрибут formaction</title>
 </head>
 <body>
  <form>
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><button formaction="handler.php">Отправить</button></p>
  </form>
 </body>
</html>


Атрибут formenctype

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 8.0+ | 10.0+ | 5.0+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype тега <form>.

Синтаксис

<button formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
...
</button>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию

application/x-www-form-urlencoded

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег button, атрибут formenctype</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="user"></p>
   <p>Файл для заявки: <input name="file" type="file"></p>
   <p><button formaction="handler.php" formmethod="post"
      formenctype="multipart/form-data">Отправить</button>
  </form>
 </body>
</html>


Атрибут formmethod

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 8.0+ | 10.0+ | 5.0+ | 4.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

 <button formmethod="get | post">...</button>

Значения

Различают два метода — GET и POST.

GET
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
POST
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег button, атрибут formmethod</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="user"></p>
   <p>Файл для заявки: <input name="file" type="file"></p>
   <p><button formaction="handler.php" formmethod="post"
   formenctype="multipart/form-data">Отправить</button>
  </form>
 </body>
</html>


Атрибут formnovalidate

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ | 5.0+ | 4.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Отменяет встроенную проверку данных введенных пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у тега <input>.

Синтаксис

 <button formnovalidate>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег button, атрибут formnovalidate</title>
 </head>
 <body>
 <form action="handler.php">
  <p><input required placeholder="Имя"></p>
  <p><input type="email" required placeholder="Ваш email"></p>
  <p><input type="url" required placeholder="Сайт"></p>
  <p><button formnovalidate>Отправить без проверки</button></p>
 </form>
 </body>
</html>


Атрибут formtarget

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 8.0+ | 10.0+ | 5.0+ | 4.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

Синтаксис

 <button formtarget="<имя окна> | _blank | _self | _parent | _top">...</button>

Значения

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен можно указывать следующие.

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег button, атрибут formtarget</title>
 </head>
 <body>
  <form>
   <p><iframe name="output" height="50" width="400"></iframe></p>
   <p>Ваше имя: <input name="user"></p>
   <p><button formaction="handler.php" formtarget="output">Отправить</button>
  </form>
 </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

Синтаксис

<button name="имя">...</button>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON, атрибут name</title>
 </head>
 <body>
  <form action="handler.php">
    <p><button name="send" type="submit" value="ОК">Нажать нежно</button></p>
  </form>
 </body>
</html>


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис

<button type="button | reset | submit">...</button>

Значения

button
Обычная кнопка.
reset
Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.
submit
Кнопка для отправки данных формы на сервер.

Значение по умолчанию

submit

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON, атрибут type</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="text" name="user"></p>
   <p><button type="reset">Очистить форму</button>
   <button type="submit">Отправить форму</button></p>
  </form>
 </body>
</html>


Атрибут value

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <button>, а значение — атрибутом value. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

Синтаксис

<button value="значение">...</button>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON, атрибут value</title>
 </head>
 <body>

  <form action="handler.php">
   <p><input type="text" name="user"></p>
   <p><button value="11111010101" name="hidden" type="submit">Отправить форму</button></p>
  </form>

 </body>
</html>

Браузеры

Internet Explorer до версии 7.0 включительно отправляет на сервер не значение value, а текст, расположенный внутри контейнера <button>.


Тег <canvas>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 6.0+ | 9.6+ | 3.1+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

Синтаксис

<canvas id="идентификатор">
</canvas>

Атрибуты

height
Задает высоту холста. По умолчанию 300 пикселов.
width
Задает ширину холста. По умолчанию 150 пикселов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <title>canvas</title>
  <meta charset="utf-8">
  <script>
   window.onload = function() {
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Рисуем окружность
     context.strokeStyle = "#000";
     context.fillStyle = "#fc0";
     context.beginPath();
     context.arc(100,100,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем левый глаз
     context.fillStyle = "#fff";
     context.beginPath();
     context.arc(84,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем правый глаз
     context.beginPath();
     context.arc(116,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем рот
     context.beginPath();
     context.moveTo(70,115);
     context.quadraticCurveTo(100,130,130,115);
     context.quadraticCurveTo(100,150,70,115);
     context.closePath();
     context.stroke();
     context.fill();
    }
   }
  </script>
 </head>
 <body>
  <canvas id="smile" width="200" height="200">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Вывод рисунка с помощью тега <canvas>

Рис. 1. Вывод рисунка с помощью тега <canvas>


Тег <caption>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Синтаксис

<table>
 <caption>Текст</caption>
 <tr>
  <td>...</td>
 </tr>
</table>

Атрибуты

align
Определяет выравнивание заголовка по горизонтали.
valign
Устанавливает расположение заголовка до или после таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег CAPTION</title>
 </head>
 <body>
  <table width="100%" border="1" cellspacing="0" cellpadding="4">
   <caption>Таблица 3.2. Демонстрация катаболических
     процессов организма</caption>
   <tr>
    <th>&nbsp;</th><th>Чебурашка</th>
    <th>Крокодил Гена</th><th>Шапокляк</th>
   </tr>
   <tr>
    <td>Съел, кг</td><td>5</td>
    <td>2</td><td>1</td>
   </tr>
   <tr>
    <td>Выпил, л</td><td>6</td>
    <td>8</td><td>2</td>
   </tr>
   <tr>
    <td>Смог, раз</td><td>5</td>
    <td>5</td><td>1</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовка таблицы


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут align определяет выравнивание заголовка относительно таблицы. Результат его действия зависит от используемого браузера и установленного значения.

Синтаксис

<caption align="left | right | top | bottom">...</caption>

Значения

left
В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы. Safari и Chrome игнорируют это значение.
right
В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Firefox заголовок располагается от таблицы справа. Safari и Chrome игнорируют это значение.
top
Заголовок размещается перед таблицей по ее центру.
bottom
Заголовок размещается внизу таблицы по ее центру.

Значение по умолчанию

top

Аналог CSS

text-align

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег CAPTION, атрибут align</title>
 </head>
 <body>
  <table width="100%" border="1" cellspacing="1" cellpadding="4">
   <caption align="bottom">Пример таблицы</caption>
   <tr>
    <th>#</th>
    <th>Чебурашка</th>
    <th>Крокодил Гена</th>
    <th>Шапокляк</th>
   </tr>
   <tr>
    <td>1</td><td>FXD</td>
    <td>URN</td><td>LWK</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Размещение заголовка под таблицей

Рис. 1. Размещение заголовка под таблицей


Атрибут valign

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут valign предназначен для размещения заголовка до таблицы или после нее. Этот атрибут работает только в браузере Internet Explorer, а для всех остальных применяется align. Тем не менее, атрибут align корректно действует и для IE, поэтому сочетание атрибутов align и valign необходимо только для этого браузера, когда требуется одновременное выравнивание заголовка по вертикали и горизонтали.

Синтаксис

<caption valign="bottom | top">...</caption>

Значения

bottom
Заголовок размещается под таблицей.
top
Заголовок размещается перед таблицей.

Значение по умолчанию

top

Аналог CSS

caption-side

Валидация

Использование этого атрибута осуждается спецификацией HTML, при его использовании код получается не валидный.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег CAPTION, атрибут valign</title>
 </head>
 <body>

  <table width="60%" border="1" cellspacing="1" cellpadding="4">
   <caption align="right" valign="bottom">
     Пример таблицы
   </caption>
   <tr><td>...</td></tr>
  </table>

 </body>
</html>


Тег <center>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <center> выравнивает содержимое контейнера по центру относительно родительского элемента.

Синтаксис

<center>Текст</center>

Атрибуты

Нет.

Аналог CSS

text-align

Закрывающий тег

Обязателен.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Тег CENTER</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <center>
  <p>Разум — это Будда, а прекращение умозрительного мышления — это путь.
  Перестав мыслить понятиями и размышлять о путях существования и небытия,
  о душе и плоти, о пассивном и активном и о других подобных вещах,
  начинаешь осознавать, что разум — это Будда,
  что Будда — это сущность разума,
  и что разум подобен бесконечности.</p>
  </center>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Текст, выровненный по центру веб-страницы


Тег <cite>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <cite> помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера <cite> курсивом.

Синтаксис

<cite>Текст</cite>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег CITE</title>
 </head>
 <body>

  <p><em>Айзек Азимов</em></p>
  <p><q>Нельзя сказать человеку: «Ты можешь творить.
   Так давай, твори». Гораздо вернее подождать, пока он
   сам не скажет: «Я могу творить, и я буду творить, хотите
   вы этого или нет».</q></p>

  <p><cite>http://www.asimovonline.com</cite></p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста внутри контейнера <cite>


Тег <code>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <code> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера <code> как моноширинный текст уменьшенного размера.

В отличие от тега <pre> дополнительные пробелы внутри контейнера <code> не учитываются, так же, как и переносы текста. Поэтому используйте тег <br> или <p> для создания переносов.

Синтаксис

<code>Текст</code>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег CODE</title>
 </head>
 <body>

  <p>Код программы</p>
  <p><code>
    function checkParent (src, dest) {<Br>
     while (src != null) {<Br>
       if (src.tagName == dest) return src<Br>
        src = src.parentElement<Br>
     }<Br>
     return null<Br>
    }</code></p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста в контейнере <code>


Тег <col>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <col> задает ширину и другие характеристики одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <col> можно использовать совместно с тегом <colgroup>, который задает группу колонок, обладающих общими характеристиками.

Синтаксис

HTML
<table>
  <col атрибуты>
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <col атрибуты />
  <tr>
   <td>...</td>
  </tr>
</table>

Атрибуты

align
Устанавливает выравнивание содержимого колонки по краю.
char
Выравнивает содержимое колонки по заданному символу.
charoff
Сдвигает содержимое ячейки относительно заданного символа.
span
Количество колонок, к которым следует применять параметры.
valign
Задает вертикальное выравнивание содержимого колонки.
width
Ширина колонок.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег COL</title>
 </head>
 <body>

  <table width="400" border="0" cellpadding="5" cellspacing="0">
   <col width="150" valign="top">
   <col width="250" valign="top">
   <tr>
    <td style="background: #B0B28E">Lorem ipsum dolor sit amet, consectetuer
     adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
     dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
     nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
     ea commodo consequat.
    </td>
    <td style="background: #CCCCCC">Lorem ipsum dolor sit amet, consectetuer
     adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
     dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
     nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
     ea commodo consequat.
    </td>
   </tr>
  </table>

 </body>
</html>

Результат данного примера показан на рис. 1. В браузерах Firefox, Safari и Chrome текст по верхнему краю ячейки выравниваться не будет (рис. 2).

Рис. 1. Вид колонок в браузере Opera

Рис. 2. Вид колонок в браузере Safari


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  | 7.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание содержимого колонок по горизонтали. Этот атрибут действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом <th>. Чтобы управлять выравниванием содержимого разных элементов воспользуйтесь стилями или устанавливайте атрибут align для отдельных ячеек таблицы.

Синтаксис

HTML
<col align="left | center | right | justify">
XHTML
<col align="left | center | right | justify" />

Значения

left
Выравнивание контента по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по левому и правому краю.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, атрибут align</title>
 </head>
 <body>
  <table border="1" width="400">
   <col align="left">
   <col span="3" width="50" align="center">
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Выравнивание текста в ячейках таблицы

Рис. 1. Выравнивание текста в ячейках таблицы


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char заставляет выравниваться содержимое колонки по заданному символу. Эта возможность может пригодиться для выравнивания колонки чисел по точке. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

HTML
<table>
  <col char="символ">
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <col char="символ">
  <tr>
   <td>...</td>
  </tr>
</table>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, атрибут char</title>
 </head>
 <body>
  <table width="450" cellpadding="2" cellspacing="0" border="1">
   <col align="left">
   <col span="3" align="char" char=",">
   <tr>
    <td>&nbsp;</td><td>Нефть</td><td>Золото</td><td>Дерево</td><td>Газ</td>
   </tr>
   <tr>
    <td>2010</td><td>100,56</td><td>72,08</td><td>11,82</td><td>8</td>
   </tr>
   <tr>
    <td>2011</td><td>430,74</td><td>94,83</td><td>83,24</td><td>6</td>
   </tr>
   <tr>
    <td>2012</td><td>964,67</td><td>131,42</td><td>95,33</td><td>4</td>
   </tr>
   <tr>
    <td>2013</td><td>1201,11</td><td>182,07</td><td>108,18</td><td>2</td>
   </tr>
  </table>
 </body>
</html>


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

HTML
<table>
  <col charoff="значение">
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <col charoff="значение" />
  <tr>
   <td>...</td>
  </tr>
</table>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, атрибут charoff</title>
 </head>
 <body>
  <table width="450" cellpadding="2" cellspacing="0" border="1">
   <col align="left">
   <col span="3" align="char" char="," charoff="-2">
   <tr>
    <td>&nbsp;</td><td>Нефть</td><td>Золото</td><td>Дерево</td><td>Газ</td>
   </tr>
   <tr>
    <td>2010</td><td>100,56</td><td>72,08</td><td>11,82</td><td>8</td>
   </tr>
   <tr>
    <td>2011</td><td>430,74</td><td>94,83</td><td>83,24</td><td>6</td>
   </tr>
   <tr>
    <td>2012</td><td>964,67</td><td>131,42</td><td>95,33</td><td>4</td>
   </tr>
   <tr>
    <td>2013</td><td>1201,11</td><td>182,07</td><td>108,18</td><td>2</td>
   </tr>
  </table>
 </body>
</html>


Атрибут span

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то тег <col> работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.

Синтаксис

HTML
<col span="число">
XHTML
<col span="число" />

Значения

Целое положительное значение.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, атрибут span</title>
 </head>
 <body>
  <table width="700" cellspacing="0" border="1">
   <col width="150">
   <col span="5" width="50" align="center">
   <col span="4" width="75" align="center">
   <tr>
    <td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
    <td>1998</td><td>1999</td><td>2000</td><td>2001</td>
    <td>2002</td><td>2003</td>
   </tr>
   <tr>
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>
 </body>
</html>


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  | 7.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.

Синтаксис

HTML
<col valign="baseline | bottom | middle | top">
XHTML
<col valign="baseline | bottom | middle | top" />

Значения

baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии. Браузеры не поддерживают это значение.
bottom
Выравнивание по нижнему краю.
middle
Выравнивание по середине.
top
Выравнивание по верхнему краю строки.

Значение по умолчанию

middle

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, атрибут valign</title>
 </head>
 <body>

  <table width="700" border="1">
   <col width="150">
   <col valign="top" span="3">
   <tr>
    <td>1<Br>1<Br>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
  </table>

 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, атрибут width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.

Синтаксис

HTML
<col width="значение">
XHTML
<col width="значение" />

Значения

Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 600 пикселов, а для колонок — 1*, 2*, то в пикселах это будет соответственно 200 и 400. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Аналог CSS

width

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  quot;http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, атрибут width</title>
 </head>
 <body>

  <table cellpadding="10" border="1" width="100%">
   <col width="20%">
   <col width="80%">
   <tr>
    <td> ... </td>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Тег <colgroup>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.

Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.

Разница между свойствами тегов <colgroup> и <col> не очень велика и состоит в следующем. <colgroup> позволяет объединять колонки в определенные группы, также при добавлении атрибута rules="groups" к тегу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.

Синтаксис

HTML
<table>
  <colgroup атрибуты>
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <colgroup атрибуты />
  <tr>
   <td>...</td>
  </tr>
</table>

Атрибуты

align
Устанавливает выравнивание содержимого колонки по краю.
char
Выравнивает содержимое колонки по заданному символу.
charoff
Сдвигает содержимое ячейки относительно заданного символа.
span
Количество колонок, к которым следует применять атрибуты.
valign
Задает вертикальное выравнивание содержимого колонки.
width
Ширина колонок.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег COLGROUP</title>
 </head>
<body>

 <table width="450" cellpadding="2" cellspacing="0" border="1" rules="groups">
  <colgroup width="150">
  <colgroup span="9" align="center" width="50">
   <col span="5">
   <col span="4">
  </colgroup>
  <tr>
   <td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
   <td>1998</td><td>1999</td><td>2000</td><td>2001</td>
   <td>2002</td><td>2003</td>
  </tr>
  <tr>
   <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
   <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
  </tr>
  <tr>
   <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
   <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
  </tr>
  <tr>
   <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
   <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
  </tr>
 </table>

 </body>
</html>

Результат данного примера показан на рис. 1. Браузеры Chrome и Safari не поддерживают атрибут align.

Рис. 1. Вид таблицы при использовании тега <colgroup>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  | 7.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание содержимого колонок по горизонтали. Этот атрибут действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом <th>. Чтобы управлять выравниванием содержимого разных элементов воспользуйтесь стилями или устанавливайте атрибут align для отдельных ячеек таблицы.

Синтаксис

HTML
<colgroup align="left | center | right | justify">
XHTML
<colgroup align="left | center | right | justify" />

Значения

left
Выравнивание контента по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по левому и правому краю.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COLGROUP, атрибут align</title>
 </head>
 <body>

  <table border="1">
   <colgroup align="left">
   <colgroup span="3" width="50" align="center">
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
 </table>

 </body>
</html>


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char заставляет выравниваться содержимое колонки по заданному символу. Эта возможность может пригодиться для выравнивания колонки чисел по точке. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

HTML
<table>
  <colgroup char="символ">
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <colgroup char="символ">
  <tr>
   <td>...</td>
  </tr>
</table>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COLGROUP, атрибут char</title>
 </head>
 <body>
  <table width="450" cellpadding="2" cellspacing="0" border="1">
   <colgroup align="left">
   <colgroup span="3" align="char" char=",">
   <tr>
    <td>&nbsp;</td><td>Нефть</td><td>Золото</td><td>Дерево</td><td>Газ</td>
   </tr>
   <tr>
    <td>2010</td><td>100,56</td><td>72,08</td><td>11,82</td><td>8</td>
   </tr>
   <tr>
    <td>2011</td><td>430,74</td><td>94,83</td><td>83,24</td><td>6</td>
   </tr>
   <tr>
    <td>2012</td><td>964,67</td><td>131,42</td><td>95,33</td><td>4</td>
   </tr>
   <tr>
    <td>2013</td><td>1201,11</td><td>182,07</td><td>108,18</td><td>2</td>
   </tr>
  </table>
 </body>
</html>


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

HTML
<table>
  <colgroup charoff="число">
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <colgroup charoff="число" />
  <tr>
   <td>...</td>
  </tr>
</table>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COLGROUP, атрибут charoff</title>
 </head>
 <body>
  <table width="450" cellpadding="2" cellspacing="0" border="1">
   <colgroup align="left">
   <colgroup span="3" align="char" char="," charoff="2">
   <tr>
    <td>&nbsp;</td><td>Нефть</td><td>Золото</td><td>Дерево</td><td>Газ</td>
   </tr>
   <tr>
    <td>2010</td><td>100,56</td><td>72,08</td><td>11,82</td><td>8</td>
   </tr>
   <tr>
    <td>2011</td><td>430,74</td><td>94,83</td><td>83,24</td><td>6</td>
   </tr>
   <tr>
    <td>2012</td><td>964,67</td><td>131,42</td><td>95,33</td><td>4</td>
   </tr>
   <tr>
    <td>2013</td><td>1201,11</td><td>182,07</td><td>108,18</td><td>2</td>
   </tr>
  </table>
 </body>
</html>


Атрибут span

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то тег <colgroup> работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.

Синтаксис

HTML
<colgroup span="число">
XHTML
<colgroup span="число" />

Значения

Целое положительное значение.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COLGROUP, атрибут span</title>
 </head>
 <body>

  <table width="700" cellspacing="0" border="1">
   <col width="150">
   <col span="5" width="50" align="center">
   <col span="4" width="75" align="center">
   <tr>
    <td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
    <td>1998</td><td>1999</td><td>2000</td><td>2001</td>
    <td>2002</td><td>2003</td>
   </tr>
   <tr>
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>

 </body>
</html>


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  | 7.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.

Синтаксис

HTML
<colgroup valign="baseline | bottom | middle | top">
XHTML
<colgroup valign="baseline | bottom | middle | top" />

Значения

baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии.
bottom
Выравнивание по нижнему краю.
middle
Выравнивание по середине.
top
Выравнивание по верхнему краю строки.

Значение по умолчанию

middle

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COLGROUP, атрибут top</title>
 </head>
 <body>

  <table width="450">
   <colgroup width="100" valign="top">
   <colgroup>
   <tr>
    <td><h3>Смоква</h3></td>
    <td>Спелые чистые ягоды клубники укладывают в кастрюлю,
     пересыпая их сахаром (пять стаканов ягоды, три стакана сахара),
     и оставляют до появления сока, затем ставят на слабый
     огонь. Помешивая, доваривают до состояния, когда масса легко
     отделяется от дна кастрюли. Ее выкладывают на плоское блюдо,
     смоченное холодной водой, разравнивают ножом и подсушивают на воздухе.
    </td>
   </tr>
  </table>

 </body>
</html>

Результат данного примера показан на рис. 1.

Выравнивание текста в левой колонке по верхнему краю таблицы

Рис. 1. Выравнивание текста в левой колонке по верхнему краю таблицы


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, атрибут width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.

Синтаксис

HTML
<colgroup width="значение">
XHTML
<colgroup width="значение" />

Значения

Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 804 пиксела, а для колонок — 1*, 2*, 3*, то в пикселах это будет соответственно 134, 268 и 402. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Аналог CSS

width

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COLGROUP, атрибут width</title>
 </head>
 <body>

 <table width="600" cellpadding="2" cellspacing="0" border="1" rules="groups">
  <colgroup width="2*">
  <colgroup span="2" align="center" width="1*">
  <tr>
   <td> ... </td>
   <td> ... </td>
  </tr>
 </table>

 </body>
</html>

Ширина первой колонки в данном примере будет в два раза больше остальных колонок таблицы.


Тег <command>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Создает команду в виде переключателя, флажка или обычной кнопки. Тег <command> должен располагаться внутри <menu>, в противном случае он не будет показан.

Синтаксис

<menu>
 <command параметры>
</menu>

Атрибуты

checked
Активирует команду. Доступно только если type установлен как radio или checkbox.
disabled
Задает, доступна команда или нет.
icon
Адрес картинки, которая показывается как команда.
label
Название команды.
radiogroup
Задает имя группы переключателей. Доступно только если type установлен как radio.
type
Определяет тип команды (checkbox, command, radio). По умолчанию command.

Закрывающий тег

Не нужен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег COMMAND</title>
 </head>
 <body>
  <menu>
   <command onclick="alert('Слава роботам!')" label="Выполнить директиву №1">
   <command onclick="alert('Сдавайтесь, людишки!')" label="Выполнить директиву №2">
   <command onclick="alert('Убить всех человеков!')" label="Выполнить директиву №3">
  </menu>
 </body>
</html>


Тег <comment>

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 9.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет комментарий в код документа. Тег <comment> допустимо использовать только в <body>.

Синтаксис

<comment> текст </comment>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Валидация

Этот тег является нестандартным, для добавления комментариев применяйте конструкцию <!-- -->.

Пример

HTML 4.01IE 8IE 9CrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COMMENT</title>
  <style type="text/css">
   div {
    background: green; /* Зеленый цвет фона */
    color: white; /* Белые буквы */
    padding: 4px; /* Поля вокруг текста */
   }
   div.ie {
    background: maroon; /* Красный цвет фона */
   }
  </style>
 </head>
 <body>
   <comment><div class="ie">Этот текст не виден в браузере Internet Explorer</div></comment>
   <div>Этот текст показывается во всех браузерах</div>
 </body>
</html>


Тег <datalist>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 20.0+ | 9.6+ |  | 4.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса.

Синтаксис

<input list="<идентификатор>">
<datalist id="<идентификатор>">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

Атрибуты

Список, создаваемый тегом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list тега <input>.

Закрывающий тег

Обязателен.

Пример

HTML 5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>datalist</title>
 </head>
 <body>
  <p>Выберите любимого персонажа:</p>
  <p><input list="character">
   <datalist id="character">
    <option value="Чебурашка"></option>
    <option value="Крокодил Гена"></option>
    <option value="Шапокляк"></option>
   </datalist></p>
 </body>
</html>

Результат примера в браузере Opera показа на рис. 1.

Использование тега <datalist>

Рис. 1. Использование тега <datalist>

Браузеры

Internet Explorer до версии 10.0 отображает список внутри <datalist> в виде текста, остальные браузеры, которые не поддерживают этот тег, скрывают список.


Тег <dd>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <dd> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Синтаксис

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

Закрывающий тег

Не обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
  <style>
   dd {
    font-style: italic; /* Курсивное начертание текста */
   }
   dt {
    margin-top: 1em; /* Отступ сверху */
   }
  </style>
 </head>
 <body>

 <dl>
  <dt>GIF</dt>
  <dd>Формат графических файлов, широко применяемый при создании сайтов.
   GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области,
   при этом сохраняя детали изображения.</dd>
  <dt>JPEG</dt>
  <dd>Популярный формат графических файлов, широко применямый при создании
  сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет
  яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями,
  поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить
  деталь в рисунке, особенно содержащий текст или изображение с четкими краями.
  Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате
  JPEG, прозрачные пиксели заполняются определенным цветом.</dd>
 </dl>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид списка определений


Тег <del>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.

Синтаксис

<del>Текст</del>

Закрывающий тег

Обязателен.

Атрибуты

cite
Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
datetime
Дата и время редактирования текста.

Для этого тега также доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DEL</title>
  <style>
   del {
    color: red; /* Цвет удаленного текста */
   }
  </style>
 </head>
 <body>

  <p>Заметим, что схожий результат с Netscape показывает и браузер
  Opera, но, как видно на рис. 1, в последующих версиях
  <del>этот недостаток был устранен</del> <ins>подход разработчиков
  этого браузера был изменен</ins>.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста при использовании стилей и тега <del>


Атрибут cite

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 7.0+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.

Синтаксис

<del cite="URL">Текст</del>

Обязательный атрибут

Нет.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DEL, атрибут cite</title>
 </head>
 <body>
   <p>До недавнего времени считалось, что расходящийся ряд
   стремительно привлекает линейно зависимый
   <del cite="http://ru.wikipedia.org/wiki/Ряд_Фурье"
     datetime="2011-11-05T23:31:05+07:00">ряд Тейлора</del>,
   что известно даже школьникам.</p>
 </body>
</html>

Браузеры

Браузеры никак не отображают значение атрибута cite, однако оно доступно для скриптов.


Атрибут datetime

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 7.0+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает дату и время редактирования текста.

Синтаксис

<del datetime="<дата и время>">Текст</del>

Обязательный атрибут

Нет.

Значения

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 1.

Табл. 1. Форматы даты и времени
Значение | Формат | Пример
Год | ГГГГ | 2012
Месяц и год | ГГГГ-ММ | 2012-12
Полная дата | ГГГГ-ММ-ДД | 2012-12-23
Дата и время с минутами | ГГГГ-ММ-ДДTчч:мм | 2004-07-24T18:18
Дата и время с секундами | ГГГГ-ММ-ДДTчч:мм:сс | 2004-07-24T18:18:18
Дата и время с часовым поясом | ГГГГ-ММ-ДДTчч:мм:сс±чч:мм | 2004-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DEL, атрибут datetime</title>
 </head>
 <body>
   <p>До недавнего времени считалось, что расходящийся ряд
   стремительно привлекает линейно зависимый
   <del cite="http://http://ru.wikipedia.org/wiki/Ряд_Фурье"
     datetime="2011-11-05T23:31:05+07:00">ряд Тейлора</del>
   <ins>Ряд Фурье</ins>, что известно даже школьникам.</p>
 </body>
</html>

Браузеры

Браузеры никак не отображают значение атрибута datetime, однако оно доступно для скриптов.


Тег <details>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 12.0+ |  | 6.0+ |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.

Синтаксис

<details open="open">Текст</details>

Атрибуты

open
Показывает информацию внутри тега.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>details</title>
 </head>
 <body>
  <details>Покажи, что у тебя есть!</details>
 </body>
</html>


Тег <dfn>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег <dfn> применяется для выделения таких терминов при их первом появлении в тексте.

Браузеры отображают содержимое контейнера <dfn> с помощью курсивного начертания.

Синтаксис

<dfn>Текст</dfn>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
 <head>
  <meta charset="utf-8">
  <title>Тег DFN</title>
 </head>
 <body>
  <p><dfn>Капителью</dfn> в типографике называется текст, набранный
  прописными буквами уменьшенного размера.</p>
 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <dfn>

Браузеры

Safari и Chrome не выделяют курсивом текст выделенный тегом <dfn>.


Тег <dir>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Тег <dir> вышел из употребления, вместо него рекомендуется использовать тег <ul>.

Синтаксис

<dir>
  <li>имя директории</li>
  <li>имя директории</li>
</dir>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег DIR</title>
 </head>
 <body>
  <dir>
   <li>cat</li>
   <li>dev</li>
   <li>ass</li>
  </dir>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид списка, созданного с помощью тега <dir>

Браузеры

Браузеры отображают список, созданный с помощью тега <dir>, как маркированный список.


Тег <div>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.

Синтаксис

<div>...</div>

Атрибуты

align
Задает выравнивание содержимого тега <div>.
title
Добавляет всплывающую подсказку к содержимому.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV</title>
  <style type="text/css">
   .block1 {
    width: 200px;
    background: #ccc;
    padding: 5px;
    padding-right: 20px;
    border: solid 1px black;
    float: left;
   }
   .block2 {
    width: 200px;
    background: #fc0;
    padding: 5px;
    border: solid 1px black;
    float: left;
    position: relative;
    top: 40px;
    left: -70px;
   }
  </style>
 </head>
 <body>

  <div class="block1">Lorem ipsum dolor sit amet, consectetuer
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
   dolore magna aliguam erat volutpat.</div>
  <div class="block2">Ut wisis enim ad minim veniam, quis nostrud
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
   ea commodo consequat.</div>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид блоков, оформленных с помощью стилей


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание содержимого контейнера <div> по краю.

Синтаксис

<div align="center | left | right | justify">...</div>

Значения

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег DIV, атрибут align</title>
  <style type="text/css">
   #layer1 {
       background: #fc0;
    padding: 5px;
   }
   #layer2 {
      background: #fff;
      width: 60%;
      padding: 10px;
   }
  </style>
 </head>
 <body>

  <div align="right" id="layer1">
  <div align="left" id="layer2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
   sed diem nonummy nibh euismod tincidunt ut lacreet dolore
   magna aliguam erat volutpat.
  </div>
  </div>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание элементов с помощью атрибута align


Атрибут title

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет поясняющий текст к контейнеру <div> в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом.

Синтаксис

<div title="текст">...</div>

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV, атрибут title</title>
 </head>
 <body>
  <div title="Каноническая рыба">Lorem
  ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna
  aliguam erat volutpat.</div>
 </body>
</html>


Тег <dl>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <dl> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.

Синтаксис

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
  <style>
   dd {
    font-style: italic; /* Курсивное начертание текста */
   }
   dt {
    margin-top: 1em; /* Отступ сверху */
   }
  </style>
 </head>
 <body>

 <dl>
  <dt>GIF</dt>
  <dd>Формат графических файлов, широко применяемый при создании сайтов.
   GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области,
   при этом сохраняя детали изображения.</dd>
  <dt>JPEG</dt>
  <dd>Популярный формат графических файлов, широко применямый при создании
  сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет
  яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями,
  поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить
  деталь в рисунке, особенно содержащий текст или изображение с четкими краями.
  Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате
  JPEG, прозрачные пиксели заполняются определенным цветом.</dd>
 </dl>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид списка определений


Тег <dt>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <dt> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dt> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Синтаксис

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

Закрывающий тег

Не обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
  <style>
   dd {
    font-style: italic; /* Курсивное начертание текста */
   }
   dt {
    margin-top: 1em; /* Отступ сверху */
   }
  </style>
 </head>
 <body>

 <dl>
  <dt>GIF</dt>
  <dd>Формат графических файлов, широко применяемый при создании сайтов.
   GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области,
   при этом сохраняя детали изображения.</dd>
  <dt>JPEG</dt>
  <dd>Популярный формат графических файлов, широко применямый при создании
  сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет
  яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями,
  поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить
  деталь в рисунке, особенно содержащий текст или изображение с четкими краями.
  Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате
  JPEG, прозрачные пиксели заполняются определенным цветом.</dd>
 </dl>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид списка определений


Тег <em>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

Синтаксис

<em>Текст</em>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-style

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег EM</title>
 </head>
 <body>

  <p><em>Lorem ipsum dolor sit amet</em></p>
  <p><b><em>Lorem</em></b> ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
  aliguam erat volutpat. <em>Ut</em> wisis enim ad minim veniam, quis
  nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного текста

Примечание

Следует отметить, что теги <i> и <em>, также как <b> и <strong>, несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег <i> — является тегом физической разметки и устанавливает курсивный текст, а тег <em> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <i> и <em>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.


Тег <embed>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <embed> используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

Спецификация HTML 4.0 рекомендует использовать тег <object> для загрузки внешних данных вместо тега <embed>. Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить <embed> внутрь контейнера <object>.

Вид внедренного объекта зависит от установленных в браузере плагинов, типа загружаемого файла, а также от атрибутов тега <embed>. На рис. 1 и рис. 2 показан вид воспроизведения в браузере различных типов файлов.

Воспроизведение видеофайла в браузере

Рис. 1. Воспроизведение видеофайла в браузере

Воспроизведение аудиофайла в браузере

Рис. 2. Воспроизведение аудиофайла в браузере

Синтаксис

<embed width="..." height="..."></embed>

Атрибуты

align
Определяет как объект будет выравниваться на странице и способ его обтекания текстом.
height
Высота объекта.
hidden
Указывает, скрыть объект на странице или нет.
hspace
Горизонтальный отступ от объекта до окружающего контента.
pluginspage
Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.
src
Путь к файлу.
type
MIME-тип объекта.
vspace
Вертикальный отступ от объекта до окружающего контента.
width
Ширина объекта.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тег EMBED</title>
  </head>
  <body>
    <embed src="images/mouse.swf" width="400" height="300"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer">
  </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет выравнивание объекта на странице и способ его отображения совместно с другими нижележащими элементами вроде текста

Синтаксис

<embed align="absmiddle | baseline | bottom | left | middle | right | texttop | top">...</embed>

Значения

absmiddle
Выравнивание середины объекта по середине текущей строки.
baseline
Выравнивание объекта по базовой линии текущей строки.
bottom
Выравнивание нижней границы объекта по окружающему тексту.
left
Выравнивает объект по левому краю окна, текст обтекает его справа.
middle
Выравнивание середины объекта по базовой линии текущей строки.
right
Выравнивает объект по правому краю окна, текст обтекает слева.
texttop
Верхняя граница объекта выравнивается по самому высокому текстовому элементу текущей строки.
top
Верхняя граница объекта выравнивается по самому высокому элементу текущей строки.

Значение по умолчанию

bottom

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег EMBED, атрибут align</title>
 </head>
  <body>

   <embed src="images/mouse.swf" width="400" height="300" align="left"></embed>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

  </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут height устанавливает высоту объекта. В заданные размеры входит не только само изображение, например в случае воспроизведения видеофайла, но и панель управления им, включая кнопки проигрывания, паузы, остановки и т.д. По этой причине на размер отображаемого объекта влияет тип файла и применяемый плагин.

Если используется процентная запись, то размеры объекта вычисляются относительно родительского элемента — контейнера, где находится тег <embed>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, height="100%" означает, что объект будет занимать всю доступную высоту веб-страницы.

Синтаксис

<embed height="высота">
 ...
</embed>

Обязательный атрибут

Да.

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Нет.


Атрибут hidden

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут hidden представляет собой выключатель, который определяет, отображать объект в окне браузера или нет. Это особенно удобно для скрытия панели управления при воспроизведении фоновой музыки. Если этот атрибут указан, значение атрибутов width и height игнорируется.

Синтаксис

<embed hidden="true | false">...</embed>

Значения

true
Скрывает объект.
false
Отображает объект на странице.

Значение по умолчанию

false

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег EMBED, атрибут hidden</title>
 </head>
 <body>
   <embed src="town.mid" hidden="true"></embed>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 </body>
</html>


Атрибут hspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого объекта можно задать невидимые отступы по горизонтали и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально при обтекании объекта текстом, в этом случае необходимо вокруг него добавить пустое пространство.

Синтаксис

<embed hspace="отступ по горизонтали">...</embed>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег EMBED, атрибут hspace</title>
 </head>
 <body>

   <embed src="images/mouse.swf" width="400" height="300"
   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
   hspace="10" vspace="10"></embed>

 </body>
</html>


Атрибут pluginspage

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если браузер не поддерживает указанный тип файлов заданный атрибутом src, то pluginspage используется для того, чтобы перейти по указанному адресу, откуда можно скачать и установить необходимый плагин. Браузер сообщает пользователю, что требуемого плагина для отображения файла нет, и запрашивает, загружать его или нет.

Синтаксис

<embed pluginspage="URL">...</embed>

Значения

Любой корректный URL (Universal Resource Locator, универсальный указатель ресурсов).

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег EMBED, атрибут pluginspage</title>
 </head>
 <body>
  <embed src="images/mouse.swf" width="400" height="300"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
 </body>
</html>


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут src указывает путь к файлу, который необходимо загрузить в окно браузера. Браузер анализирует расширение файла и решает по нему, какой плагин или внешняя программа требуется для отображения файла.

Синтаксис

<embed src="URL">...</embed>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<embed type="MIME-тип">...</embed>

Значения

Имя MIME-типа в любом регистре. Допускается устанавливать сразу несколько значений, разделяя их запятыми.

Значение по умолчанию

Нет.


Атрибут vspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого объекта можно задать невидимые отступы по горизонтали и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально при обтекании объекта текстом, в этом случае необходимо вокруг него добавить пустое пространство.

Синтаксис

<embed vspace="отступ по вертикали">...</embed>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег EMBED, vspace</title>
 </head>
 <body>

   <embed src="images/mouse.swf" width="400" height="300"
   type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer"
   hspace="10" vspace="10"></embed>

 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут width устанавливает ширину объекта. В заданные размеры входит не только само изображение, например в случае воспроизведения видеофайла, но и панель управления им, включая кнопки проигрывания, паузы, остановки и т.д. По этой причине на размер отображаемого объекта влияет тип файла и применяемый плагин.

Если используется процентная запись, то размеры объекта вычисляются относительно родительского элемента — контейнера, где находится тег <embed>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что объект будет занимать всю доступную ширину веб-страницы.

Синтаксис

<embed width="ширина">
 ...
</embed>

Обязательный атрибут

Да.

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Нет.


Тег <fieldset>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <fieldset> предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных. Например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.

Браузеры для повышения наглядности отображают результат использования тега <fieldset> в виде рамки. Ее вид зависит от операционной системы, а также используемого браузера (рис. 1, 2).

Результат использования тега <fieldset> в браузере Internet Explorer 8

Рис. 1. Результат использования тега <fieldset> в браузере Internet Explorer 8

Рис. 2. Применение тега <fieldset> в браузере Safari

Синтаксис

<form>
  <fieldset>...</fieldset>
</form>

Атрибуты

disabled
Блокирует поля формы в группе.
form
Связывает группу с формой.
title
Добавляет всплывающую подсказку к группе формы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FIELDSET</title>
 </head>
 <body>

 <form action="handler.php">
  <fieldset>
   <legend>Работа со временем</legend>
     <input type="checkbox"> создание пунктуальности (никогда не
      будете никуда опаздывать);<br>
     <input type="checkbox"> излечение от пунктуальности (никогда
      никуда не будете торопиться);<br>
     <input type="checkbox"> изменение восприятия времени и часов.
      <p><input type="submit"></p>
  </fieldset>
 </form>

 </body>
</html>


Атрибут disabled

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 18.0+ | 7.0+ |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Блокирует доступ к элементам формы, расположенным внутри тега <fieldset>. Поля формы при этом отображаются так, словно к каждому из них добавлен атрибут disabled.

Синтаксис

<fieldset disabled>...</fieldset>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег fieldset, атрибут disabled</title>
 </head>
 <body>
  <form action="handler.php">
   <fieldset disabled>
    <legend>Доступ закрыт</legend>
    <p>Эта группа в данный момент времени недоступна.
    Пожалуйста, свяжитесь с администратором этой группы.</p>
    <p><input placeholder="Причина обращения"></p>
    <p><input type="submit" value="Связаться"></p>
   </fieldset>
  </form>
 </body>
</html>

Браузеры

Internet Explorer хотя и делает поля формы неактивными, позволяет набирать текст внутри текстовых полей.


Атрибут form

Internet Explorer | Chrome | Opera |  | Safari | Firefox | Android | iOS
 |  | 11.0+ | 12.0+ |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Связывает группу <fieldset> с формой по её идентификатору. Такая связь необходима в случае, когда элемент не располагается внутри <form>, например, при создании её программно. Если установлено связывание <form> и <fieldset> между собой, то можно отправлять данные на сервер и работать с формой, как если бы элементы находились внутри формы.

Синтаксис

<fieldset form="идентификатор">
...
</fieldset>

Значения

Идентификатор формы (значение атрибута id тега <form>).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег fieldset, атрибут form</title>
 </head>
 <body>
  <form id="data">
  </form>
  <fieldset form="data">
   <p>В каком году произошла Отечественная война 1812 года?</p>
   <p><input type="radio" name="answer" value="1380"> 1380</p>
   <p><input type="radio" name="answer" value="1812" checked> 1812</p>
   <p><input type="radio" name="answer" value="1914"> 1914</p>
   <p><input type="radio" name="answer" value="1941"> 1941</p>
   <p><input type="submit" value="Отправить"></p>
  </fieldset>
 </body>
</html>

Браузеры

В Opera 11.0 при добавлении атрибута form к <fieldset> переключатели внутри этого тега воспринимаются как независимые друг от друга. Соответственно, нельзя выбрать только один пункт, щёлкая по разным переключателям.


Атрибут title

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет поясняющий текст в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на группе формы (рис. 1).

Рис. 2. Всплывающая подсказка

Рис. 1. Всплывающая подсказка

Синтаксис

<fieldset title="текст">...</fieldset>

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FIELDSET, атрибут title</title>
 </head>
 <body>

  <form action="handler.php">
   <fieldset title="Работа со временем">
    <legend>Работа со временем</legend>
     <input type="checkbox"> создание пунктуальности (никогда не
      будете никуда опаздывать);<br>
     <input type="checkbox"> излечение от пунктуальности (никогда
      никуда не будете торопиться);<br>
     <input type="checkbox"> изменение восприятия времени и часов.
      <p><input type="submit"></p>
   </fieldset>
  </form>
 </body>
</html>


Тег <figcaption>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.

Синтаксис

<figure>
 <figcaption>Описание</figcaption>
</figure>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IE9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FIGCAPTION</title>
  <script>
   document.createElement('figure');
   document.createElement('figcaption');
  </script>
  <style>
   figure {
    background: #d9dabb; /* Цвет фона */
    display: block; /* Блочный элемент */
    width: 150px; /* Ширина */
    height: 190px; /* Высота */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figure img {
    border: 2px solid #8b8e4b; /* Параметры рамки */
   }
   figure p {
    margin-bottom: 0; /* Отступ снизу */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="images/thumb3.jpg" alt=""></p>
    <figcaption>Купеческий клуб</figcaption>
   </figure>
   <figure>
    <p><img src="images/thumb4.jpg" alt=""></p>
    <figcaption>Памятник Св. Владимиру</figcaption>
   </figure>
 </article>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование тега <figcaption>

Рис. 1. Использование тега <figcaption>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <figcaption>, но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <figure>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<figure>
...
</figure>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег FIGURE</title>
  <script>
   document.createElement('figure');
   document.createElement('figcaption');
  </script>
  <style>
   figure {
    background: #5f6a72; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
    display: block; /* Блочный элемент */
    width: 150px; /* Ширина */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figcaption {
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="images/thumb1.jpg" alt="" /></p>
    <figcaption>Софийский собор</figcaption>
   </figure>
   <figure>
    <p><img src="images/thumb2.jpg" alt="" /></p>
    <figcaption>Польский костел</figcaption>
   </figure>
  </article>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование тега <figure>

Рис. 1. Использование тега <figure>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <figure>, но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Браузеры Firefox и Chrome автоматически добавляют к <figure> свойство margin со значением 1em 40px.


Тег <font>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис

<font>Текст</font>

Закрывающий тег

Обязателен.

Атрибуты

color
Устанавливает цвет текста.
face
Определяет гарнитуру шрифта.
size
Задает размер шрифта в условных единицах.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FONT</title>
 </head>
 <body>
  <p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения
    написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Изменение вида текста


Атрибут color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет текста внутри контейнера <font>.

Синтаксис

<font color="цвет">...</font>

Значения

См. цвет

Аналог CSS

color

Значение по умолчанию

Цвет, установленный в браузере по умолчанию.


Атрибут face

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<font face="шрифт1, шрифт2,...">...</font>

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

serif — шрифты с засечками (антиквенные), типа Times; sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Аналог CSS

font-family

Значение по умолчанию

Шрифт, установленный в браузере по умолчанию.


Атрибут size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4"), так и относительной (например, size="+1", size="-1"). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный атрибут size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

Синтаксис

<font size="число">...</font>

Значения

Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.

Аналог CSS

font-size

Значение по умолчанию

3


Тег <footer>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <footer> задаёт «подвал» сайта или раздела, в нём может располагается имя автора, дата документа, контактная и правовая информация.

Синтаксис

<footer>
</footer>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>footer</title>
 </head>
 <body>
  <header>
    <h1>Персональный сайт Кристины Ветровой</h1>
  </header>
  <article>
    <h2>Добро пожаловать!</h2>
    <p>Рада приветствовать вас на своем сайте.</p>
  </article>
  <footer>
    Copyright Кристина Ветрова
  </footer>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Подвал сайта

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <footer>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору FOOTER.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <form>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент <input>. Если таких элементов два и более, нажатие на <Enter> не вызовет никакого результата.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www.htmlbook.ru/cgi-bin/handler.cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Синтаксис

<form action="URL">
  ...
</form>

Атрибуты

accept-charset

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action
Адрес программы или документа, который обрабатывает данные формы.
autocomplete
Включает автозаполнение полей формы.
enctype
Способ кодирования данных формы.
method
Метод протокола HTTP.
name
Имя формы.
novalidate
Отменяет встроенную проверку данных формы на корректность ввода.
target
Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM</title>
 </head>
 <body>

 <form action="handler.php">
  <p><b>Как по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?</b></p>
  <p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
  <input type="radio" name="answer" value="a2">Операционная система<Br>
  <input type="radio" name="answer" value="a3">Большой полосатый мух</p>
  <p><input type="submit"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в окне браузера


Атрибут accept-charset

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы.

Синтаксис

<form action="URL" accept-charset="кодировка">...</form>

Значения

Название кодировки, например Windows-1251, UTF-8 и др.

Обязательный атрибут

Нет.

Значение по умолчанию

Кодировка, установленная для страницы.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут accept-charset</title>
 </head>
 <body>

 <form action="handler.php" accept-charset="windows-1251">
  <p>...</p>
 </form>

 </body>
</html>

Браузеры

Internet Explorer содержит ошибку при использовании кодировки ISO-8859-1, в этом случае браузер отправляет данные в кодировке Windows-1252.


Атрибут action

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис

<form action="URL">...</form>

Значения

В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Обязательный атрибут

В HTML4 и XHTML обязателен, в HTML5 не обязателен.

Значение по умолчанию

Нет.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут action</title>
 </head>
 <body>

 <form action="handler.php">
  <p>...</p>
 </form>

 </body>
</html>

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype="text/plain" в теге <form>.

Пример 2

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FORM, атрибут action</title>
 </head>
 <body>

 <form action="mailto:vlad@htmlbook.ru" enctype="text/plain">
  <p><input type="submit" value="Написать письмо"></p>
 </form>

 </body>
</html>


Атрибут autocomplete

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.6+ | 5.2+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Управляет автозаполнением полей форм. Значение может быть перекрыто атрибутом autocomplete у конкретных элементов формы.

Автозаполнение производит браузер, который запоминает написанные при первом вводе значения, а затем подставляет их при повторном наборе в поля формы. При этом автозаполнение может быть отключено в настройках браузера и не может быть в таком случае изменено при помощи атрибута autocomplete. К примеру, включение автозаполнения в браузере Chrome показано на рис. 1.

Рис. 1. Настройки автозаполнения

При вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать необходимое (рис. 2).

Список для подстановки

Рис. 2. Список для подстановки

Синтаксис

<form autocomplete="on | off">...</form>

Значения

on
Включает автозаполнение формы.
off
Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Обязательный атрибут

Нет.

Значение по умолчанию

on

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег form, атрибут autocomplete</title>
 </head>
 <body>
  <form autocomplete="on">
   <p>Имя: <input name="user"></p>
   <p>Пароль: <input name="pass" type="password"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут enctype

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (input type="file"), следует определить атрибут enctype как multipart/form-data.

Синтаксис

<form enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
...
</form>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Обязательный атрибут

Нет.

Значение по умолчанию

application/x-www-form-urlencoded

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут enctype</title>
 </head>
 <body>
  <form action="handler.php"
   enctype="multipart/form-data" method="post">
   <p>Загрузите файл с картинкой</p>
   <p><input type="file" name="pic"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Поле для отправки файла

Рис. 1. Поле для отправки файла


Атрибут method

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут method сообщает серверу о методе запроса.

Синтаксис

<form method="get | post">...</form>

Значения

Значение атрибута method не зависит от регистра. Различают два метода — get и post.

get
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.
post
Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.

Обязательный атрибут

Нет.

Значение по умолчанию

get

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут method</title>
 </head>
 <body>
 <form action="handler.php" method="post">
  <p><input type="text" name="str"></p>
  <p><input type="submit" value="Отправить"></p>
 </form>
 </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.

Синтаксис

<form name="имя">...</form>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в атрибуте name.

Обязательный атрибут

Нет.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FORM, атрибут name</title>
  <script type="text/javascript">
    function validForm() {
     alert("Имя " + document.forms['form1'].nick.value)
    }
  </script>
  </head>
 <body>

 <form action="handler.php" name="form1">
  <p>Имя: <input type="text" name="nick"></p>
  <p><input type="button" onClick="validForm()" value="OK"></p>
 </form>

 </body>
</html>


Атрибут novalidate

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ |  | 3.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Отменяет встроенную проверку данных введенных пользователем в форме на корректность. Такая проверка осуществляется браузером автоматически при отправке формы на сервер и происходит для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required.

Синтаксис

<form novalidate>...</form>

Значения

Нет.

Обязательный атрибут

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут novalidate</title>
 </head>
 <body>
 <form action="handler.php" novalidate>
  <p><input required placeholder="Имя"></p>
  <p><input type="email" required placeholder="Ваш email"></p>
  <p><input type="url" required placeholder="Сайт"></p>
  <p><input type="submit"></p>
 </form>
 </body>
</html>


Атрибут target

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<form target="имя окна">...</form>

Значения

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен можно указывать следующие.

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Обязательный атрибут

Нет.

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут target</title>
 </head>
 <body>
 <form action="handler.php" target="_blank">
   ...
 </form>
 </body>
</html>


Тег <frame>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <frame> определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере <frameset>, который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью атрибута src. Хотя обязательных атрибутов у тега <frame> и нет, рекомендуется задавать каждому фрейму его имя через атрибут name. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.

Синтаксис

<frameset>
  <frame>
</frameset>

Атрибуты

bordercolor
Цвет линии границы.
frameborder
Отображать рамку вокруг фрейма или нет.
name
Задает уникальное имя фрейма.
noresize
Определяет, можно изменять размер фрейма пользователю или нет.
scrolling
Способ отображения полосы прокрутки во фрейме.
src
Путь к файлу, предназначенному для загрузки во фрейме.

Закрывающий тег

Не требуется.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME</title>
 </head>

 <frameset rows="80,*" cols="*">
   <frame src="top.html" name="topFrame" scrolling="no" noresize>
   <frameset cols="80,*">
     <frame src="left.html" name="leftFrame" scrolling="no" noresize>
     <frame src="main.html" name="mainFrame">
   </frameset>
 </frameset>

</html>


Атрибут bordercolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если у тега <frameset> установлено отображение границ, то для индивидуальных фреймов их цвет можно изменить через атрибут bordercolor тега <frame>. Браузеры, как правило, по-разному отображают цветную границу, например, Opera вообще игнорирует данный атрибут. Если для тегов <frameset> и <frame> рамка устанавливается разного цвета, то обычно приоритет имеет последний.

Синтаксис

<frame bordercolor="цвет">

Значения

Значение цвета можно задавать двумя способами.

См. цвет

Значение по умолчанию

Нет.

Аналог CSS

border

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME, атрибут bordercolor</title>
 </head>

 <frameset rows="*" cols="80,*" bordercolor="black" border="5">
   <frame src="left.html" name="leftFrame">
   <frameset rows="80,*" bordercolor="blue" border="5">
     <frame src="top.html" name="topFrame" bordercolor="red">
     <frame src="main.html" name="mainFrame">
   </frameset>
 </frameset>

</html>


Атрибут frameborder

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет, отображать границу между фреймами или нет. Браузер Opera в любом случае показывает тонкую линию, если у тега <frameset> не задан атрибут framespacing="0". Этот атрибут отменяет действие frameborder у тега <frameset>.

Синтаксис

<frame frameborder="1 | 0">

Значения

Допускается использовать значения 1 для отображения границы или 0, чтобы ее скрыть.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME, атрибут frameborder</title>
 </head>

 <frameset cols="100,*,20%">
   <frame src="left.html" name="leftFrame" frameborder="0">
   <frame src="main.html" name="mainFrame" frameborder="0">
   <frame src="right.html" name="rightFrame" frameborder="0">
 </frameset>

</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут target тега <a>. В качестве значения указывается имя фрейма, в который будет загружаться документ, заданный атрибутом name.

Синтаксис

<frame name="имя">

Значения

В качестве имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME, атрибут name</title>
 </head>

 <frameset cols="100,*,20%">
   <frame src="left.html" name="leftFrame">
   <frame src="main.html" name="mainFrame">
   <frame src="right.html" name="rightFrame">
 </frameset>

</html>


Атрибут noresize

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Рис. 1. Вид курсора мыши при изменении размера фрейма

Рис. 1. Вид курсора мыши при изменении размера фрейма

Синтаксис

<frame noresize>

Значения

У этого атрибута нет значений, если он присутствует, то пользователь не может изменять размер фреймов.

Значение по умолчанию

По умолчанию размер фреймов можно изменять.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME, атрибут noresize</title>
 </head>

 <frameset cols="100,*">
   <frame src="left.html" name="leftFrame" noresize>
   <frame src="main.html" name="mainFrame">
 </frameset>

</html>


Атрибут scrolling

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<frame scrolling="auto | no | yes">

Значения

auto
Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
no
Запрещает отображение полос прокрутки.
yes
Всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию

auto

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME, атрибут scrolling</title>
 </head>

 <frameset cols="100,*">
   <frame src="left.html" name="leftFrame" noresize scrolling="no">
   <frame src="main.html" name="mainFrame">
 </frameset>

</html>


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает адрес файла (URL), который будет загружаться во фрейм. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис

<frame src="URL">

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME, атрибут src</title>
 </head>

 <frameset cols="100,*">
   <frame src="left.html" name="leftFrame">
   <frame src="main.html" name="mainFrame">
 </frameset>

</html>


Тег <frameset>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <frame>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Тег <frameset> заменяет собой элемент <body> на веб-странице. Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.

При использовании фреймов примите во внимание их следующие особенности.

  • Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, обычно нет ссылок на другие документы.
  • Фреймы скрывают адрес страницы на которой находится посетитель и устанавливаемый через тег <title>, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.
  • Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
  • Большое число фреймов требует для браузера выделения больше памяти, чем обычно.

Синтаксис

<frameset>
  <frame>
</frameset>

Атрибуты

border
Толщина границы между фреймами.
bordercolor
Цвет линии границы.
cols
Устанавливает ширину или пропорции фреймов в виде колонок.
frameborder
Определяет, отображать рамку вокруг фрейма или нет.
framespacing
Аналог атрибута border, задает ширину границы.
rows
Задает размер или пропорции фреймов в виде строк.

Закрывающий тег

Обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET</title>
 </head>

 <frameset rows="80,*" cols="*">
   <frame src="top.html" name="topFrame" scrolling="no" noresize>
   <frameset cols="80,*">
     <frame src="left.html" name="leftFrame" scrolling="no" noresize>
     <frame src="main.html" name="mainFrame">
   </frameset>
 </frameset>

</html>

Некоторые примеры организации фреймов приведены ниже.

Фрейм 1 | Фрейм 2
Фрейм 3 | Фрейм 4
Фрейм 5 | Фрейм 6
Фрейм 1 Фрейм 2
Фрейм 3
<frameset rows="33%,33%,*" cols="50%, 50%">
 <frame src="r1c1.html" name="Фрейм 1">
 <frame src="r1c2.html" name="Фрейм 2">
 <frame src="r2c1.html" name="Фрейм 3">
 <frame src="r2c2.html" name="Фрейм 4">
 <frame src="r3c1.html" name="Фрейм 5">
 <frame src="r3c2.html" name="Фрейм 6">
</frameset>

<frameset rows="*" cols="80,*">
 <frame src="frame1.html" name="Фрейм 1">
 <frameset rows="80,*">
   <frame src="frame2.html" name="Фрейм 2">
   <frame src="frame3.html" name="Фрейм 3">
 </frameset>
</frameset>


Атрибут border

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает толщину границы между фреймами. По умолчанию линия отображается трехмерной, используя атрибуты bordercolor и border можно настроить ее вид по своему усмотрению. Браузеры по-разному интерпретируют атрибуты тега <frameset> и показывают линию. Например, для линии черного цвета толщиной 5 пикселов, ее вид показан на рис. 1.

Граница в браузере Internet Explorer 6 | Граница в браузере Opera 7 | Граница в браузере Netscape 7
Internet Explorer | Opera | Firefox

Рис. 1. Вид границы в разных браузерах

Как видно из рисунка, Opera вообще не изменяет цвет линии, но исправно отображает требуемое значение. Браузер Internet Explorer за толщину принимает среднюю часть линии залитую черным цветом, а Firefox — полную ширину или высоту, включая небольшие линии по бокам, создающие эффект приподнятости.

Если у тега <frameset> установлен атрибут framespacing="0", то браузер Opera вообще не показывает границу, а Internet Exporer игнорирует значения атрибутов bordercolor и border.

Синтаксис

<frameset border="значение">...</frameset>

Значения

Целое положительное число. Значение 0 скрывает рамку.

Значение по умолчанию

Зависит от браузера и операционной системы.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET, атрибут border</title>
 </head>

 <frameset rows="*" cols="80,*" bordercolor="black" border="5">
   <frame src="left.html" name="leftFrame">
   <frameset rows="80,*">
     <frame src="top.html" name="topFrame">
     <frame src="main.html" name="mainFrame">
   </frameset>
 </frameset>

</html>


Атрибут bordercolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет цвет видимых границ между фреймами. Цвет родительского элемента FRAMESET может быть изменен с помощью дочернего тега FRAMESET или индивидуального элемента FRAME.

Синтаксис

<frameset bordercolor="цвет">...</frameset>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и настроек операционной системы.

Аналог CSS

border

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET, атрибут bordercolor</title>
 </head>

 <frameset rows="*" cols="80,*" bordercolor="black" border="5">
   <frame src="left.html" name="leftFrame">
   <frameset rows="80,*" bordercolor="red" border="5">
     <frame src="top.html" name="topFrame">
     <frame src="main.html" name="mainFrame">
   </frameset>
 </frameset>

</html>


Атрибут cols

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает размеры или пропорции колонок фреймов в структуре <frameset>. Если создаются несколько колонок, то для атрибута cols необходимо установить определенное значение. Для этого используется три варианта:

  1. размер в пикселах;
  2. размер в процентах от доступной ширины фрейма;
  3. символ звездочки (*), который обозначает всю свободную ширину, оставшуюся после указания размеров в пикселах или процентах.

Используйте значение в пикселах, когда требуется установить размер фрейма заданной ширины. Это особенно полезно для отображения содержания заданных размеров, например, изображения. Проценты удобно применять для пропорционального разделения фреймов, в этом случае, независимо от размера окна браузера пропорции будут сохраняться, главное, чтобы суммарная ширина колонок равнялась 100%. Если значения не составляют в сумме 100%, браузер отобразит фреймы, но ширина их будет установлена не точно. Наконец, если требуется отвести оставшееся место под фрейм, то используется символ звездочки. В этом случае браузер вычисляет ширину фрейма, когда размеры для остальных фреймов уже установлены. Допускается смешивать отдельные типы значения, перечисляя их через запятую. Тогда работа по расчету нужной ширины выпадает на долю браузера.

Синтаксис

<frameset cols="ширина 1, ширина 2, ...">...</frameset>

Значения

Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.

Значение по умолчанию

100%

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET, атрибут cols</title>
 </head>

 <frameset cols="100,*,20%">
   <frame src="left.html" name="leftFrame">
   <frame src="main.html" name="mainFrame">
   <frame src="right.html" name="rightFrame">
 </frameset>

</html>


Атрибут frameborder

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет, показывать границу между фреймами или нет. Браузер Opera в любом случае демонстрирует тонкую линию, если не используется framespacing="0".

Синтаксис

<frameset frameborder="yes | no">...</frameset>
<frameset frameborder="1 | 0">...</frameset>

Значения

Допускается использовать значения yes или 1 для отображения границы и no или 0, чтобы ее скрыть.

Значение по умолчанию

По умолчанию этот атрибут включен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET, атрибут frameborder</title>
 </head>

 <frameset cols="100,*,20%" frameborder="no">
   <frame src="left.html" name="leftFrame">
   <frame src="main.html" name="mainFrame">
   <frame src="right.html" name="rightFrame">
 </frameset>

</html>


Атрибут framespacing

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ |  | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут framespacing является аналогом border и предназначен для установки размеров границы между фреймами. Причина существования двух разных атрибутов с близкими свойствами в том, что framespacing это более старый атрибут и поддерживается браузерами для совместимости с их ранними версиями.

Синтаксис

<frameset framespacing="значение">...</frameset>

Значения

Целое положительное число. При framespacing="0" браузер Opera полностью скрывает границы между фреймами, а Internet Explorer устанавливает границы, заданные по умолчанию.

Значение по умолчанию

2

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET, атрибут framespacing</title>
 </head>

 <frameset cols="150,*" framespacing="0" frameborder="0">
  <frame src="left.html" name="leftFrame">
  <frame src="main.html" name="mainFrame">
 </frameset>

</html>


Атрибут rows

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает высоту или пропорции фреймов в структуре <frameset> в виде строк. Если создаются несколько строк, то для атрибута rows необходимо установить определенное значение. Для этого используется три варианта:

  1. размер в пикселах;
  2. размер в процентах от доступной ширины фрейма;
  3. символ звездочки (*), который обозначает всю свободную ширину, оставшуюся после указания размеров в пикселах или процентах.

Удобство использования атрибута rows совместно со значением * состоит в том, что фрейм можно определить в нижней части окна браузера. Когда требуется создать равномерную сетку фреймов, используйте в теге <frameset> одновременно атрибуты rows и cols. Для более сложной структуры необходимо вкладывать один тег <frameset> внутрь другого.

Синтаксис

<frameset rows="высота 1, высота 2, ...">...</frameset>

Значения

Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.

Значение по умолчанию

100%

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET, атрибут rows</title>
 </head>

 <frameset rows="*,100">
  <frame src="top.html" name="topFrame">
  <frame src="main.html" name="mainFrame">
 </frameset>

</html>


Тег <h1>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Синтаксис

<h1>Заголовок первого уровня</h1>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег H1 и H2</title>
 </head>
 <body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna
  aliguam erat volutpat.</p>

  <h2>Ut wisis enim ad minim veniam</h2>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution
  ullamcorper suscipit lobortis nisl ut aliquip ex ea
  commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовков первого и второго уровня в браузере

Примечание

Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h1>...<h6>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание заголовка текста по краю.

Синтаксис

<h1 align="left | center | right | justify">...</h1>

Обязательный атрибут

Нет.

Значения

left
Выравнивание заголовка по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег H1, атрибут align</title>
 </head>
 <body>

  <h1 align="right">Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
   sed diem nonummy nibh euismod tincidunt ut lacreet dolore
   magna aliguam erat volutpat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Заголовок, выровненный по правому краю

Рис. 1. Заголовок, выровненный по правому краю


Тег <h2>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Представляет собой заголовок второго уровня. Текст внутри тега отображается крупным шрифтом жирного начертания.

Синтаксис

<h2>Заголовок второго уровня</h2>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег H2</title>
 </head>
 <body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna
  aliguam erat volutpat.</p>

  <h2>Ut wisis enim ad minim veniam</h2>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution
  ullamcorper suscipit lobortis nisl ut aliquip ex ea
  commodo consequat.</p>

 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание заголовка текста по краю.

Синтаксис

<h2 align="left | center | right | justify">...</h2>

Обязательный атрибут

Нет.

Значения

left
Выравнивание заголовка по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Значение по умолчанию

left

Аналог CSS

text-align


Тег <h3>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает заголовок третьего уровня.

Синтаксис

<h3>Заголовок третьего уровня</h3>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание заголовка текста по краю.

Синтаксис

<h3 align="left | center | right | justify">...</h3>

Обязательный атрибут

Нет.

Значения

left
Выравнивание заголовка по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Значение по умолчанию

left

Аналог CSS

text-align


Тег <h4>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает заголовок четвертого уровня.

Синтаксис

<h4>Заголовок четвертого уровня</h4>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание заголовка текста по краю.

Синтаксис

<h4 align="left | center | right | justify">...</h4>

Обязательный атрибут

Нет.

Значения

left
Выравнивание заголовка по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Значение по умолчанию

left

Аналог CSS

text-align


Тег <h5>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает заголовок пятого уровня.

Синтаксис

<h5>Заголовок пятого уровня</h5>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание заголовка текста по краю.

Синтаксис

<h5 align="left | center | right | justify">...</h5>

Обязательный атрибут

Нет.

Значения

left
Выравнивание заголовка по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Значение по умолчанию

left

Аналог CSS

text-align


Тег <h6>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает заголовок шестого уровня.

Синтаксис

<h6>Заголовок шестого уровня</h6>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание заголовка текста по краю.

Синтаксис

<h6 align="left | center | right | justify">...</h6>

Обязательный атрибут

Нет.

Значения

left
Выравнивание заголовка по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Значение по умолчанию

left

Аналог CSS

text-align


Тег <head>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Синтаксис

<head>
  ...
</head>

Закрывающий тег

Не обязателен.

Атрибуты

profile
Указывает адрес профиля метаданных.

Также для этого тега доступны глобальные атрибуты.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
  </head>

  <body>
   <!-- А здесь надо размещать все, что хочется увидеть на странице. -->
  </body>
 </html>


Тег <header>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <header> задает «шапку» сайта или раздела, в которой обычно располагается заголовок.

Синтаксис

<header>
</header>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>header</title>
 </head>
 <body>
  <header>
    <h1>Персональный сайт Кристины Ветровой</h1>
  </header>
  <article>
    <h2>Добро пожаловать!</h2>
    <p>Рада приветствовать вас на своем сайте.</p>
  </article>
  <footer>
    Copyright Кристина Ветрова
  </footer>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Заголовок сайта

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <header>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору HEADER.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <hgroup>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>. Данный тег исключён из версии HTML от W3C, но остался в версии WHATWG, будущее элемента пока не определено.

Синтаксис

<hgroup>
</hgroup>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hgroup</title>
 </head>
 <body>
  <hgroup>
    <h1>Кристина Ветрова</h1>
    <h2>Персональный сайт</h2>
  </hgroup>
 </body>
</html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <hgroup>, но отображает его содержимое.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <hr>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег <hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Синтаксис

HTML
<hr>
XHTML
<hr />

Атрибуты

align
Определяет выравнивание линии.
color
Цвет линии.
noshade
Рисует линию без трехмерных эффектов.
size
Толщина линии.
width
Ширина линии.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег HR</title>
 </head>
 <body>

 <hr>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat.</p>
 <hr>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид горизонтальной линии в браузере


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание линии по краю родительского элемента. В качестве родителя обычно выступает окно браузера.

Синтаксис

<hr align="center | left | right">

Значения

center
Выравнивание по центру.
left
Выравнивание линии по левому краю.
right
Выравнивание по правому краю.

Значение по умолчанию

center

Аналог CSS

text-align

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, атрибут align</title>
 </head>
 <body>

 <hr align="right" width="300">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Выравнивание линии по правому краю


Атрибут color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 9.6+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает цвет линии, созданной с помощью тега <hr>. Одновременно, использование этого атрибута запрещает трехмерные эффекты, словно был добавлен атрибут noshade.

Синтаксис

<hr color="цвет">

Значения

Для задания цвета линии применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.

Значение по умолчанию

Нет.

Валидация

Использование этого атрибута осуждается спецификацией HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, атрибут color</title>
 </head>
 <body>

  <hr color="red" width="300">
  <hr color="green" width="300">
  <hr color="blue" width="300">

 </body>
</html>

Результат примера показан на рис. 1.

Линии разного цвета

Рис. 1. Линии разного цвета


Атрибут noshade

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Использование атрибута noshade отменяет трехмерные эффекты, которые используются при рисовании линии по умолчанию.

Синтаксис

<hr noshade>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут не используется.

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, атрибут noshade</title>
 </head>
 <body>

  <hr width="300">
  <hr noshade width="300">

 </body>
</html>

Результат данного примера показан на рис. 1.

Вид линий с трехмерным эффектом и без

Рис. 1. Вид линий с трехмерным эффектом и без


Атрибут size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает толщину линии в пикселах.

Синтаксис

<hr size="число">

Значения

Любое целое положительное число. Нулевое или отрицательное значение устанавливает толщину линии в один пиксел.

Значение по умолчанию

2

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, атрибут size</title>
 </head>
 <body>

  <hr noshade size="10">
  <hr noshade size="8">
  <hr noshade size="6">
  <hr noshade size="4">
  <hr noshade size="2">
  <hr noshade size="1">

 </body>
</html>

Результат данного примера показан на рис. 1.

Вид линий с разной толщиной

Рис. 1. Вид линий с разной толщиной


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает ширину линии в процентах или пикселах. При использовании процентов за 100% берется ширина родительского элемента. Как правило, в качестве родителя выступает окно браузера.

Синтаксис

<hr width="число">

Значения

Любое допустимое значение в пикселах или процентах.

Значение по умолчанию

100%

Аналог CSS

width

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, атрибут width</title>
 </head>
 <body>

  <hr noshade size="4" width="75%">
  <hr noshade size="2" width="60%">
  <hr noshade size="1" width="50%">
  <hr noshade size="1" width="38%">
  <hr noshade size="1" width="25%">
  <hr noshade size="1" width="10%">

 </body>
</html>

Результат данного примера показан на рис. 1.

Вид линий разной ширины

Рис. 1. Вид линий разной ширины


Тег <html>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент <!DOCTYPE>. Закрывающий тег <html> должен всегда стоять в документе последним.

Синтаксис

<html>
  ...
</html>

Атрибуты

title
Добавляет всплывающую подсказку на веб-страницу.
manifest
Указывает файл манифеста, необходимый для создания оффлайнового приложения.
xmlns
Указывает пространство имен для XHTML-документов.

Также для этого тега доступны универсальные атрибуты.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
 </head>

 <body>
   <!-- А здесь надо размещать все, что хочется увидеть на странице. -->
 </body>
</html>


Атрибут manifest

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 9.6+ | 4.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

В качестве значения атрибута manifest указывается относительный или абсолютный путь к текстовому файлу, он называется «файл манифеста» или просто «манифест». Имя и расположение файла может быть любым, но он должен отдаваться сервером с заголовком text/cache-manifest. Например, для веб-сервера Apache в файле .htaccess расположенным в корне сайта следует прописать такую строку.

AddType text/cache-manifest .cache

В этом случае файл манифеста имеет расширение cache. Сам манифест информирует браузер о том, какие ресурсы необходимо сохранить в локальном кэше. Этот список может содержать HTML и CSS-файлы, изображения, скрипты. Имена файлов перечисляются внутри секций описанных в табл. 1.

Табл. 1. Разделы манифеста
Раздел | Описание
CACHE MANIFEST | Этой обязательной строкой должен начинаться любой манифест.
CACHE: | Содержит перечень ресурсов, которые браузер должен кэшировать. Данный раздел используется по умолчанию, если его не указать и нет других разделов, то записи в манифесте причисляются к этому разделу.
NETWORK: | Список ресурсов, которые доступны только при подключении к сети. Обычно в этот раздел входят программы выполняемые на стороне сервера.
FALLBACK: | Список замещающих файлов, которые будут использоваться при отсутствии подключения к сети. Допустимо использовать символ * для обозначения всех файлов. Например, *.php /offline.html означает, что вместо любого файла с расширением php будет показана страница offline.html.

Синтаксис

<html manifest="URL">

Значения

В качестве значения указывается адрес файла манифеста.

Значение по умолчанию

Нет.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html manifest="22.cache">
 <head>
  <meta charset="utf-8">
  <title>22 хода</title>
  <link href="22.css" rel="stylesheet">
  <script src="22.js"></script>
 </head>
 <body>
  <div id="main">
   <h1>22 хода</h1>
   <canvas id="game" width="400" height="400">
     <img src="images/old.png" alt="">
   </canvas>
   <p>Ходов: <span id="move">0</span>
   <span id="msg"></span></p>
   <h3>Цель игры</h3>
   <p>Вам необходимо за 22 хода сгруппировать все серые фишки
   на кружках в верхнем квадрате, а чёрные фишки&nbsp;&#8212; в нижнем.
   Кружки с точкой должны оказаться незанятыми.</p>
   <p>Фишка может перемещаться только по линиям&nbsp;&#8212; по горизонтали
   или вертикали, а также перепрыгивать через фишку, если за ней есть свободное
   поле.</p>
  </div>
 </body>
</html>

Содержимое файла 22.cache показано в примере 2.

Пример 2. Файл 22.cache

CACHE MANIFEST
# Версия 1.0

CACHE:
22.css
22.js
images/old.png


Атрибут title

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 1.0+ | 6.0+ | 1.3+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет поясняющий текст на веб-страницу в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается в окне веб-страницы. На рис. 1 показана всплывающая подсказка в окне документа.

Отображение текста на странице

Рис. 1. Отображение текста на странице

Синтаксис

<html title="текст">
 ...
</html>

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html title="Персональная веб-страница Вани Шапочкина">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HTML, атрибут title</title>
 </head>
 <body>
  ...
 </body>
</html>


Атрибут xmlns

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 1.0+ | 6.0+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется в XHTML для объявления пространства имен — совокупности наименований тегов и атрибутов предназначенных для сохранения уникальности имен. Значением атрибута xmlns выступает адрес файла объявляющего требуемое пространство имен, для XHTML значение всегда равно http://www.w3.org/1999/xhtml. Этот атрибут также является частью синтаксиса XML, поэтому может использоваться для добавления префикса, чтобы объявить дополнительное пространство имен для документа. К примеру xmlns:my задает адрес файла для элементов с префиксом my.

Синтаксис

HTML
<html>
XHTML
<html xmlns="http://www.w3.org/1999/xhtml">

Значения

В качестве значения указывается полный адрес документа с описанием пространства имен. Локальный путь и пустая строка недопустима. Для XHTML значение всегда http://www.w3.org/1999/xhtml.

Значение по умолчанию

Нет.

Обязательный атрибут

В HTML нет, в XHTML обязателен.

Пример

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег HTML, атрибут xmlns</title>
 </head>
 <body>
  <p>Корректный XHTML-документ.</p>
 </body>
</html>


Тег <i>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

Синтаксис

<i>Текст</i>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-style

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег I</title>
 </head>
 <body>

  <p><b><i>Lorem ipsum dolor sit amet</i></b></p>
  <p><i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit,
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
  volutpat. <i>Ut</i> wisis enim ad minim veniam, quis nostrud exerci
  tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера продемонстрирован на рис. 1.

Рис. 1. Вид курсивного текста

Примечание

Хотя использование тега <i> не осуждается в HTML, применение стилей предоставляет больше возможностей по управлению начертанием текста.


Тег <iframe>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

Тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и </iframe>.

Синтаксис

<iframe>...</iframe>

Атрибуты

align
Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
allowtransparency

Устанавливает прозрачный фон фрейма, через который виден фон страницы.
frameborder
Устанавливает, отображать границу вокруг фрейма или нет.
height
Высота фрейма.
hspace
Горизонтальный отступ от фрейма до окружающего контента.
marginheight
Отступ сверху и снизу от содержания до границы фрейма.
marginwidth
Отступ слева и справа от содержания до границы фрейма.
name
Имя фрейма.
sandbox
Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling
Способ отображения полосы прокрутки во фрейме.
seamless
Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src
Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc
Хранит содержимое фрейма непосредственно в атрибуте.
vspace
Вертикальный отступ от фрейма до окружающего контента.
width
Ширина фрейма.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IFRAME</title>
 </head>
 <body>

 <iframe src="banner.html" width="468" height="60" align="left">
    Ваш браузер не поддерживает плавающие фреймы!
 </iframe>

 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания задается атрибутом align тега <iframe>.

Синтаксис

<iframe align="absmiddle | baseline | bottom | left | middle | right | texttop | top">...</iframe>

Значения

absmiddle
Выравнивание середины фрейма по середине текущей строки.
baseline
Выравнивание фрейма по базовой линии текущей строки.
bottom
Выравнивание нижней границы фрейма по окружающему тексту.
left
Выравнивает фрейм по левому краю окна.
middle
Выравнивание середины фрейма по базовой линии текущей строки.
right
Выравнивает фрейм по правому краю окна.
texttop
Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки.
top
Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

Значение по умолчанию

bottom

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут align</title>
 </head>
 <body>

  <iframe src="main.html" width="220" height="60"
   align="right"></iframe>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

 </body>
</html>


Атрибут allowTransparency

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 9.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

В Internet Explorer до версии 8.0 включительно фон фрейма на странице по умолчанию имеет белый цвет, если он не задан явно. Когда на странице применяется цвет фона отличный от белого или фоновая картинка, фрейм может не вписываться в дизайн страницы. Атрибут allowTransparency позволяет установить прозрачный фон фрейма, через который будет виден фон страницы.

Синтаксис

<iframe allowtransparency>...</iframe>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML 4.01IE 8IE 9CrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут allowTransparency</title>
  <style type="text/css">
   body { background: #fc0; }
  </style>
 </head>
 <body>
  <iframe src="banner.html" width="468" height="60"
          allowTransparency></iframe>
 </body>
</html>

Браузеры

В IE9 и других браузерах фон фрейма задаётся прозрачным по умолчанию.


Атрибут frameborder

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется атрибут frameborder.

Синтаксис

<iframe frameborder="yes | no">...</iframe>
<iframe frameborder="0 | 1"> ...</iframe>

Значения

yes (или 1)
Отображает рамку вокруг фрейма.
no (или 0)
Скрывает рамку вокруг фрейма.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут frameborder</title>
 </head>
 <body>

  <iframe src="tip.html" width="340" height="50"
  frameborder="0" style="border: 2px solid black"></iframe>

 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег <iframe>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселов.

Синтаксис

<iframe height="значение"></iframe>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

width — 300 пикселов, height — 150 пикселов.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут width</title>
 </head>
 <body>

  <iframe src="tip.html" width="150" height="150"></iframe>

 </body>
</html>


Атрибут hspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали с помощью, соответственно, атрибутов hspace и vspace. Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.

Синтаксис

<iframe hspace="поля по горизонтали">...</iframe>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут hspace</title>
 </head>
 <body>

  <iframe src="tip.html" width="150" height="150"  hspace="5" vspace="7"></iframe>

 </body>
</html>


Атрибут marginheight

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает высоту отступа в пикселах от содержания плавающего фрейма до его верхней и нижней границы. Это устаревший атрибут, взамен рекомендуется использовать стили.

Синтаксис

<iframe marginheight="значение">...</iframe>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

Определяется браузером.

Аналог CSS

margin

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут marginheight</title>
 </head>
 <body>

  <iframe src="help.html" width="300" height="150"
  marginheight="10" marginwidth="10"></iframe>

 </body>
</html>


Атрибут marginwidth

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает отступ между содержанием и правой (левой) границей плавающего фрейма. Вы не можете задавать разные значения для левого и правого отступа, они устанавливаются одновременно.

Синтаксис

<iframe marginwidth="значение">...</iframe>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

Определяется браузером.

Аналог CSS

margin

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут marginwidth</title>
 </head>
 <body>

  <iframe src="help.html" width="300" height="150"
  marginheight="10" marginwidth="10"></iframe>

 </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name. В этом случае при создании ссылки у тега <a> требуется указать атрибут target, в качестве значения которого выступает имя фрейма.

Синтаксис

<iframe name="имя">...</iframe>

Значения

Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут name</title>
 </head>
 <body>

  <iframe name="hero" src="0.html"
  width="600" height="100"  align="left">
  </iframe>

  <p><a href="1.html" target="hero">Чебурашка</a><br>
   <a href="2.html" target="hero">Крокодил Гена</a><br>
   <a href="3.html" target="hero">Шапокляк</a>

 </body>
</html>


Атрибут sandbox

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ |  | 5.0+ |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут sandbox позволяет установить ряд ограничений на контент загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.

Синтаксис

<iframe src="URL" sandbox="allow-same-origin || allow-top-navigation ||
allow-forms || allow-scripts"></iframe>

Значения

allow-same-origin
Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна.
allow-top-navigation
Позволяет открывать ссылки фрейма в родительском документе.
allow-forms
Позволяет содержимому фрейма отправлять формы.
allow-scripts
Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.

Допустимо писать несколько значений в любом порядке через пробел. Если указано пустое значение, то устанавливаются все возможные ограничения.

При одновременном использовании значений allow-scripts и allow-same-origin, когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег iframe, атрибут sandbox</title>
 </head>
 <body>
  <iframe src="hello.html" sandbox></iframe>
  </body>
</html>

В данном примере во фрейме открывается документ, который через скрипт выводит сообщение. Добавление атрибута sandbox блокирует действие скрипта.


Атрибут scrolling

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<iframe scrolling="auto | no | yes">...</iframe>

Значения

auto
Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
no
Запрещает отображение полос прокрутки.
yes
Всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию

auto

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут scrolling</title>
 </head>
 <body>

  <iframe src="tip.html" width="150" height="450" scrolling="no"></iframe>

 </body>
</html>


Атрибут seamless

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:

  • игнорируется атрибут sandbox, если содержимое фрейма и родительского документа взяты из одного источника;
  • ссылки во фрейме открываются не внутри фрейма, а в текущем документе;
  • стили родительского документа применяются и к содержимому фрейма;
  • фрейм считается блочным элементов, у которого ширина задана как auto;
  • высота формируется автоматически на основе содержимого.

Синтаксис

<iframe seamless></iframe>

Значения

У этого атрибута нет значений.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег iframe, атрибут seamless</title>
 </head>
 <body>
  <header>
   <iframe src="1.html" seamless></iframe>
  </header>
 </body>
</html>


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис

<iframe src="URL">...</iframe>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут src</title>
 </head>
 <body>

  <iframe src="/source/sample.html" width="450" height="450"></iframe>

 </body>
</html>


Атрибут srcdoc

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет установить содержимое фрейма непосредственно в атрибуте. Значение должно иметь корректный синтаксис HTML, по желанию содержать <!DOCTYPE> и <html>, а также любое количество пробелов, переносов строк, комментариев и других элементов. При одновременном использовании атрибутов src и srcdoc, атрибут src игнорируется.

Синтаксис

<iframe srcdoc="<html-код>">...</iframe>

Значения

HTML-код содержимого, включая необходимые теги.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут srcdoc</title>
 </head>
 <body>
  <iframe srcdoc="<html>
   <body>
   <p>Серпантинная волна выстраивает октавер,
   благодаря широким мелодическим скачкам.</p>" src="nosrcdoc.html"></iframe>
  </body>
</html>


Атрибут vspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали с помощью, соответственно, атрибутов hspace и vspace. Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.

Синтаксис

<iframe vspace="поля по вертикали">...</iframe>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут hspace</title>
 </head>
 <body>

  <iframe src="tip.html" width="150" height="150"  hspace="5" vspace="7"></iframe>

 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег <iframe>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселов.

Синтаксис

<iframe width="значение">...</iframe>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

width — 300 пикселов, height — 150 пикселов.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут width</title>
 </head>
 <body>

  <iframe src="tip.html" width="150" height="150"></iframe>

 </body>
</html>


Тег <img>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

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

Синтаксис

HTML
<img src="URL" alt="альтернативный текст">
XHTML
<img src="URL" alt="альтернативный текст" />

Атрибуты

align
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
Альтернативный текст для изображения.
border
Толщина рамки вокруг изображения.
height
Высота изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
src
Путь к графическому файлу.
vspace
Вертикальный отступ от изображения до окружающего контента.
width
Ширина изображения.
usemap
Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG</title>
 </head>
 <body>

  <p><a href="lorem.html"><img src="images/girl.png"
  width="189" height="255" alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>

 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается атрибутом align тега <img>.

Синтаксис

<img align="bottom | left | middle | right |  top">

Значения

В табл. 1 перечислены возможные значение атрибута align и результат его использования.

Табл. 1. Использование значений атрибута align
Значение | Описание | Пример
bottom | Выравнивание нижней границы изображения по окружающему тексту.. | Lorem ipsum dolor sit amet, consectetuer [image] adipiscing elit...
left | Выравнивает изображение по левому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle | Выравнивание середины изображения по базовой линии текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
right | Выравнивает изображение по правому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...

Наиболее популярные значения — left и right, создающие обтекание текста вокруг изображения.

Значение по умолчанию

bottom

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, атрибут align</title>
 </head>
 <body>

  <p><img src="images/square.gif" alt="Квадрат" width="20" height="20"
  align="right"> Этот текст обтекает рисунок по его левому краю.</p>

</body>
</html>

Примечание

Дополнительные значения absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.


Атрибут alt

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.

Синтаксис

HTML
<img alt="текст">
XHTML
<img alt="текст" />

Значения

Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Обязательный атрибут

Да.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG, атрибут alt</title>
 </head>
 <body>

  <p><a href="/index.php"><img src="images/home.png" alt="Вернуться
  на главную страницу"></a></p>

 </body>
</html>


Атрибут border

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит атрибут border тега <img>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или атрибута link тега <body>.

Чтобы убрать рамку, следует задать атрибут border="0".

Синтаксис

<img border="толщина рамки">

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, атрибут border</title>
 </head>
 <body text="#00ff00">

  <p><img src="images/sample.gif" width="50" height="50"
   border="2" alt=""></p>

 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис

HTML
<img height="высота">
XHTML
<img height="высота" />

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная высота изображения.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, атрибут width</title>
 </head>
 <body>

  <p><img src="/images/sample.gif" width="350" height="250"
    alt=""></p>

 </body>
</html>


Атрибут hspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

Синтаксис

<img hspace="отступ по горизонтали">

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, атрибут hspace</title>
 </head>
 <body>

  <p><img src="/images/sample.gif" width="150" height="150"
  hspace="5" vspace="7" alt="" align="left"></p>
  <p>Пример обтекания картинки текстом</p>

 </body>
</html>


Атрибут ismap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <img> в контейнер <a>, где в качестве значения атрибута href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.

Синтаксис

HTML
<img ismap>
XHTML
<img ismap="ismap" />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, атрибут ismap</title>
 </head>
 <body>

  <p><a href="http://www.htmlbook.ru/example/ismap.php"><img src="images/sample.gif"
  alt="" width="150" height="150" ismap></a></p>

 </body>
</html>

Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу ismap.php?100,50. Последние цифры передаются в PHP-программу по методу GET и интерпретируются на сервере.


Атрибут longdesc

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 10.0+ |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибуты alt и title не могут содержать большой текст для описания изображения, поэтому атрибут longdesc позволяет указать адрес документа, где содержится аннотация к картинке. Также одним из вариантов использования longdesc является ориентация на речевые браузеры.

Синтаксис

HTML
<img src="URL" alt="альтернативный текст" longdesc="URL">
XHTML
<img src="URL" alt="альтернативный текст" longdesc="URL" />

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег IMG, атрибут longdesc</title>
 </head>
 <body>
  <p><img src="images/dzen.png" alt="Дзен" longdesc="dzen.txt" /></p>
 </body>
</html>

Браузеры

Браузеры никак не поддерживают атрибут longdesc и не выводят текст, указанный по ссылке. Некоторым исключением является Firefox, который отображает адрес документа в свойствах изображения (рис. 1).

Длинное описание в браузере Firefox

Рис. 1. Длинное описание в браузере Firefox

Opera также выводит адрес файла с описанием в свойствах картинки (рис. 2).

Длинное описание в браузере Opera

Рис. 2. Длинное описание в браузере Opera


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис

HTML
<img src="URL">
XHTML
<img src="URL" />

Обязательный атрибут

Да.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG, атрибут src</title>
 </head>
 <body>

  <p><img src="http://htmlbook.ru/images/logo.gif" width="450" height="450" alt=""></p>

 </body>
</html>


Атрибут usemap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут usemap связывает между собой картинку и карту-изображение, задаваемую с помощью контейнера <map>. В качестве такой связи выступает имя идентификатора, которое указывается в значении атрибута usemap, и то же имя, заданное у атрибута name тега <map>. При этом в теге <img> идентификатор должен начинаться с символа решетки (#).

Синтаксис

HTML
<img usemap="#идентификатор">
XHTML
<img usemap="#идентификатор" />

Значения

Текстовая строка, начинающаяся с символа решетки.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег AREA, атрибут usemap</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body>
 <div id="title"><img src="images/ecctitle.png" width="640" height="158"
                 alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" width="640" height="30" alt="Навигация по сайту"
       usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
  </map></p>
 </body>
</html>


Атрибут vspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

Синтаксис

<img vspace="отступ по вертикали">

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, атрибут hspace</title>
 </head>
 <body>

  <p><img src="images/sample.gif" width="150" height="150"
  hspace="5" vspace="7" alt="" align="left"></p>
  <p>Пример обтекания картинки текстом</p>

 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис

HTML
<img width="значение">
XHTML
<img width="значение" />

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная ширина изображения.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG, атрибут width</title>
 </head>
 <body>

  <p><img src="images/sample.gif" width="350"
    height="250" alt=""></p>

 </body>
</html>


Тег <input>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

HTML
<input атрибуты>
XHTML
<input атрибуты />

Атрибуты

accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey
Переход к элементу с помощью комбинации клавиш.
align
Определяет выравнивание изображения.
alt
Альтернативный текст для кнопки с изображением.
autocomplete
Включает или отключает автозаполнение.
autofocus
Устанавливает фокус в поле формы.
border
Толщина рамки вокруг изображения.
checked
Предварительно активированный переключатель или флажок.
disabled
Блокирует доступ и изменение элемента.
form
Связывает поле с формой по её идентификатору.
formaction
Определяет адрес обработчика формы.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
Отменяет встроенную проверку данных на корректность.
formtarget
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
Указывает на список вариантов, которые можно выбирать при вводе текста.
max
Верхнее значение для ввода числа или даты.
maxlength
Максимальное количество символов разрешенных в тексте.
min
Нижнее значение для ввода числа или даты.
multiple
Позволяет загрузить несколько файлов одновременно.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
Устанавливает шаблон ввода.
placeholder
Выводит подсказывающий текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
size
Ширина текстового поля.
src
Адрес графического файла для поля с изображением.
step
Шаг приращения для числовых полей.
tabindex
Определяет порядок перехода между элементами с помощью клавиши Tab.
type
Сообщает браузеру, к какому типу относится элемент формы.
value
Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Вид элементов формы в браузере

Рис. 1. Вид элементов формы в браузере


Атрибут accept

Internet Explorer | Chrome | Opera | Safari | Firefox |  | Android | iOS
10.0+ | 8.0+ | 10.62+ | 6.0+ | 4.0+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.

Синтаксис

HTML
<input type="file" accept="MIME-тип">
XHTML
<input type="file" accept="MIME-тип" />

Применяется

К полю для отправки файла (<input type="file">).

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.

Значение по умолчанию

Нет.

Пример 1

HTML5IE 10CrOpSa 6Fx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут accept</title>
 </head>
 <body>
  <form action="handler.php">
   <p><strong>Укажите картинку в формате JPEG, PNG или GIF</strong></p>
   <p><input type="file" name="img" accept="image/jpeg,image/png,image/gif">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Пример 2

HTML5IE 10CrOpSa 6Fx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут accept</title>
 </head>
 <body>
  <form action="handler.php">
   <p><strong>Укажите картинку</strong></p>
   <p><input type="file" name="img" accept="image/*">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Браузеры

Opera не воспринимает значения, если они разделены между собой пробелом (accept="image/jpeg, image/png, image/gif").

Firefox до версии 16.0 поддерживает только значения audio/*, video/* и image/*.

В Firefox 22 по умолчанию стоит выбор всех файлов, а не заданный фильтр.


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут accesskey позволяет перейти к элементу с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

HTML
<input accesskey="c">
XHTML
<input accesskey="c" />

Обязательный атрибут

Нет.

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.

Синтаксис

<input type="image" align="bottom | left | middle | right | top">

Значения

В табл. 1 перечислены возможные значение атрибута align и результат его использования.

Табл. 1. Использование значений align
Код HTML | Описание | Пример
<input type="image" src="sample.gif" align="bottom"> | Выравнивание нижней границы изображения по окружающему тексту.. | Lorem ipsum dolor sit amet, consectetuer [image] adipiscing elit...
<input type="image" src="sample.gif" align="left"> | Выравнивает изображение по левому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="sample.gif" align="middle"> | Выравнивание середины изображения по базовой линии текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
<input type="image" src="sample.gif" align="right"> | Выравнивает изображение по правому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="sample.gif" align="top"> | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...

Значение по умолчанию

bottom

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут align</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
   <p><input src="images/imgbutton.gif" type="image" align="right"></p>
  </form>

 </body>
</html>

Примечание

Браузеры также поддерживают значения absbottom, absmiddle, baseline и texttop, которые не включены в спецификацию HTML 4.01.


Атрибут alt

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  | 4.0+ |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Синтаксис

HTML
<input type="image" alt="Текст">
XHTML
<input type="image" alt="Текст" />

Значения

Любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут alt</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>...</p>
   <p><input src="images/imgbutton.gif" type="image"
   alt="Отправить форму на сервер"></p>
  </form>

 </body>
</html>


Атрибут autocomplete

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 17.0+ | 9.6+ | 5.2+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках и не может в таком случае управляться атрибутом autocomplete. К примеру, включение автозаполнения в браузере Chrome показано на рис. 1.

Рис. 1. Настройки автозаполнения

При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое (рис. 2).

Список для подстановки

Рис. 2. Список для подстановки

Синтаксис

<input type="text" autocomplete="on | off">
<input type="password" autocomplete="on | off">
<input type="email" autocomplete="on | off">
<input type="search" autocomplete="on | off">
<input type="url" autocomplete="on | off">
<input type="tel" autocomplete="on | off">

Значения

on
Включает автозаполнение текста.
off
Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Обязательный атрибут

Нет.

Значение по умолчанию

Зависит от настроек браузера.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут autocomplete</title>
 </head>
 <body>
  <form>
   <p>Имя: <input name="user" autocomplete="on"></p>
   <p>Пароль: <input name="pass" type="password"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут autofocus

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ | 4.0+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.

Синтаксис

<input autofocus>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут autofocus не установлен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут autofocus</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Поиск по сайту</p>
   <p><input type="search" name="s" autofocus>
   <input type="submit" value="Искать"></p>
  </form>
 </body>
</html>


Атрибут border

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Браузеры обрабатывают изображения, добавленные через тег <input>, подобно рисункам, созданным с помощью тега <img>. В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.

Синтаксис

<input type="image" border="толщина рамки">

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Аналог CSS

border

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут border</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>...</p>
   <p><input src="images/imgbutton.gif" type="image" border="2"></p>
  </form>

 </body>
</html>


Атрибут checked

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.

Синтаксис

HTML
<input type="radio" checked>
<input type="checkbox" checked>
XHTML
<input type="radio" checked="checked" />
<input type="checkbox" checked="checked" />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут checked</title>
 </head>
 <body>

  <form method="post" action="input5.php">
   <p><b>С какими операционными системами вы знакомы?</b></p>
   <p><input type="checkbox" name="option1" value="a1" checked>Windows 95/98<Br>
   <input type="checkbox" name="option2" value="a2">Windows 2000<Br>
   <input type="checkbox" name="option3" value="a3">System X<Br>
   <input type="checkbox" name="option4" value="a4">Linux<Br>
   <input type="checkbox" name="option5" value="a5">X3-DOS</p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Помеченный флажок в форме

Рис. 1. Помеченный флажок в форме


Атрибут disabled

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передается на сервер.

Синтаксис

HTML
<input type="..." disabled>
XHTML
<input type="..." disabled="disabled" />

Применяется

Ко всем элементам формы.

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут disabled</title>
 </head>
 <body>

  <form  action="handler.php">
   <p><input type="text" size="30" onFocus="this.form.submit.disabled=0"></p>
   <p><input type="submit" name="submit" value="Отправить" disabled></p>
  </form>

 </body>
</html>


Атрибут form

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 9.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form>, например, при создании её программно или по соображениям дизайна.

Синтаксис

<input type="<тип>" form="<идентификатор>">
<form id="<идентификатор>">...</form>

Значения

Идентификатор формы (значение атрибута id тега <form>).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут form</title>
 </head>
 <body>
  <form id="data"></form>
  <p><input placeholder="Ваше имя" name="user" form="data"></p>
  <p><input type="submit" value="Отправить форму" form="data"></p>
 </body>
</html>


Атрибут formaction

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 9.0+ | 10.62+ | 5.2+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогично атрибуту action тега <form>.

Синтаксис

<input type="submit" formaction="URL">

Значения

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formaction</title>
 </head>
 <body>
  <form>
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><input type="submit" formaction="handler.php" value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут formenctype

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 9.0+ | 10.62+ | 5.2+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype тега <form>, при совместном использовании formenctype и enctype последний игнорируется.

Синтаксис

<input type="submit" formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию

application/x-www-form-urlencoded

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formenctype</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="user"></p>
   <p>Файл для заявки: <input name="file" type="file"></p>
   <p><input type="submit" formaction="handler.php" formmethod="post"
      formenctype="multipart/form-data" value="Отправить">
  </form>
 </body>
</html>


Атрибут formmethod

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 9.0+ | 10.62+ | 5.2+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

<input type="submit" formmethod="get | post">

Значения

Различают два метода — GET и POST, которые задаются ключевыми словами get и post.

get
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
post
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formmethod</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="user"></p>
   <p>Файл для заявки: <input name="file" type="file"></p>
   <p><input type="submit" formaction="handler.php" formmethod="post"
   formenctype="multipart/form-data" value="Отправить">
  </form>
 </body>
</html>


Атрибут formnovalidate

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 10.0+ | 10.62+ | 5.2+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Отменяет встроенную проверку данных введенных пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у тега <input>.

Синтаксис

<input type="submit" formnovalidate>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formnovalidate</title>
 </head>
 <body>
 <form action="handler.php">
  <p><input required placeholder="Имя"></p>
  <p><input type="email" required placeholder="Ваш email"></p>
  <p><input type="url" required placeholder="Сайт"></p>
  <p><input type="submit" formnovalidate value="Отправить без проверки"></p>
 </form>
 </body>
</html>


Атрибут formtarget

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 9.0+ | 10.62+ | 5.2+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

Синтаксис

<input type="submit" formtarget="<имя окна> | _blank | _self | _parent | _top">

Значения

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен можно указывать следующие.

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formtarget</title>
 </head>
 <body>
  <form>
   <p><iframe name="output" height="50" width="400"></iframe></p>
   <p>Ваше имя: <input name="user"></p>
   <p><input type="submit" formaction="handler.php" formtarget="output"
      value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут list

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 20.0+ | 9.6+ |  | 4.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает на список вариантов, созданный с помощью тега <datalist>, которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.

Синтаксис

<input list="<идентификатор>">
<datalist id="<идентификатор>">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

Значение

Имя идентификатора тега <datalist>.

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут list</title>
 </head>
 <body>
  <form>
   <p><input list="cocktail"></p>
   <datalist id="cocktail">
    <option>Аперитивы</option>
    <option>Горячие</option>
    <option>Десертные</option>
    <option>Диджестивы</option>
    <option>Молочные</option>
    <option>Слоистые</option>
   </datalist>
  </form>
 </body>
</html>

Вид текстового поля при наборе текста показан на рис. 1.

Выбор текста из списка

Рис. 1. Выбор текста из списка


Атрибут max

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 5.0+ | 10.62+ | 5.1+ |  | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает верхнее значение для ввода числа или даты в поле формы.

Синтаксис

<input type="number" max="максимальное число">
<input type="range" max="максимальное число">
<input type="date" max="верхняя дата">

Значения

Целое положительное или отрицательное число (для type="number", type="range").

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".

Значение по умолчанию

Нет.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Укажите вашу температуру в градусах Цельсия</p>
   <input type="number" min="35" max="41"
    value="36.6" step="0.1" /></p>
  </form>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Сегодня 1 января 2145 года.
   Укажите дату вылета на планету Земля на ближайшие
   семь дней.</p>
   <p><input type="date" min="2145-01-01" max="2145-01-08"
   value="2145-01-01" /></p>
  </form>
 </body>
</html>

Результат данного примера в браузере Opera 11 показан на рис. 1.

Ограничение ввода даты через атрибут max

Рис. 1. Ограничение ввода даты через атрибут max


Атрибут maxlength

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис

HTML
<input type="text" maxlength="число">
<input type="password" maxlength="число">
XHTML
<input type="text" maxlength="число" />
<input type="password" maxlength="число" />

Значения

Любое целое положительное число.

Значение по умолчанию

Ввод символов не ограничен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут maxlength</title>
 </head>
 <body>

  <form  action="handler.php">
   <p><input type="text" size="30" maxlength="10"></p>
   <p><input type="submit" name="submit" value="Отправить"></p>
  </form>

 </body>
</html>


Атрибут min

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 5.0+ | 10.62+ | 5.1+ |  | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает нижнее значение для ввода числа или даты в поле формы.

Синтаксис

<input type="number" min="минимальное число">
<input type="range" min="минимальное число">
<input type="date" min="нижняя дата">

Значения

Целое положительное или отрицательное число (для type="number", type="range").

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут min</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Укажите температуру в градусах Цельсия</p>
   <p><input type="number" min="-50" value="0" /></p>
  </form>
 </body>
</html>


Атрибут multiple

Internet Explorer | Chrome | Opera |  | Safari | Firefox |  | Android | iOS
10.0 | 5.0+ | 10.62+ | 11.01+ | 5.0+ | 3.6+ | 4.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.

Синтаксис

<input type="file" multiple>
<input type="email" multiple>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут multiple выключен.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут multiple</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="file" name="photo" required multiple
      placeholder="Загрузите одну или несколько фотографий"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут multiple</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Укажите почтовые адреса через запятую:</p>
   <p><input type="email" name="email" required multiple></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Браузеры

Opera 10.62, Firefox 3.6 и Safari поддерживают multiple только для type="file".


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.

Синтаксис

HTML
<input type="..." name="имя">
XHTML
<input type="..." name="имя" />

Применяется

Ко всем элементам формы.

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут name</title>
  <script>
    function dataField(f) {
      alert("Вы ввели: " + f.comment.value);
    }
  </script>
 </head>
 <body>

  <form action="handler.php">
    <p><b>Введите текст</b></p>
    <p><input type="text" name="comment">
     <input type="button" value="ОК" onClick="dataField(this.form)"></p>
  </form>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вывод окна JavaScript

В данном примере при нажатии на кнопку выводится окно JavaScript, в котором отображается фраза, введенная в текстовом поле.


Атрибут placeholder

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 10.0+ | 11.0+ | 5.0+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<input placeholder="строка">

Значения

Текстовая строка. Если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут placeholder</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input type=search placeholder="Введите текст для поиска">
   <input type="submit" value="Искать"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Текст внутри поля для поиска

Рис. 1. Текст внутри поля для поиска


Атрибут readonly

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Когда к тегу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис

HTML
<input type="text" readonly>
<input type="password" readonly>
XHTML
<input type="text" readonly="readonly" />
<input type="password" readonly="readonly" />

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут readonly</title>
 </head>
 <body>

 <form action="handler.php">
   <p><input type="text" name="comment" size="40"
   value="Введенный текст не может изменяться"
   readonly></p>
 </form>

 </body>
</html>

Результат примера показан на рис. 1.

Текстовое поле только для чтения

Рис. 1. Текстовое поле только для чтения

Примечание

Браузеры Firefox и Internet Explorer позволяют в поле для чтения установить курсор и выделять текст с помощью клавиатуры. Opera, Chrome и Safari допускают выделение только мышью.


Атрибут required

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 5.0+ | 9.6+ |  | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.

Chrome 11 | Opera 11 | Firefox 4
Chrome | Opera | Firefox

Рис. 1. Вид сообщения об обязательном поле

Синтаксис

<input required>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут required</title>
 </head>
 <body>
  <form action="">
   <p><input name="user" required placeholder="Ваше имя"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Браузеры

Opera не проверяет введенное значение, если у <input> не указан атрибут name.


Атрибут size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис

HTML
<input type="text" size="ширина">
<input type="password" size="ширина">
XHTML
<input type="text" size="ширина" />
<input type="password" size="ширина" />

Значения

Любое целое положительное число.

Значение по умолчанию

20


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис

HTML
<input type="image" src="URL">
XHTML
<input type="image" src="URL" />

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.


Атрибут step

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 6.0+ | 10.62+ | 5.0+ |  | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает шаг изменения числа для ползунков и полей ввода чисел.

Синтаксис

<input type="number" step="число">
<input type="range" step="число">

Значения

Любое целое или дробное число.

Значение по умолчанию

1

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут step</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="range" min="0" max="10" step="2">
  </form>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут step</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Введите произвольное значение от 0 до 1:</p>
   <p><input type="number" value="0" min="0" max="1" step="0.1">
  </form>
 </body>
</html>

Браузеры

Safari не поддерживает значение number для атрибута type, поэтому игнорирует и атрибут step для поля с числом.


Атрибут tabindex

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.

Синтаксис

HTML
<input tabindex="число">
XHTML
<input tabindex="число" />

Обязательный атрибут

Нет.

Значения

Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.

Значение по умолчанию

Нет.


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис

HTML
<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">
XHTML
<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text" />

Обязательный атрибут

Да

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

Табл. 1. Значения type
Тип | Описание | Вид
button | Кнопка. |
checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | Пиво Чай Кофе
file | Поле для ввода имени файла, который пересылается на сервер. |
hidden | Скрытое поле. Оно никак не отображается на веб-странице. |
image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. |
password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. |
radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | Пиво Чай Кофе
reset | Кнопка для возвращения данных формы в первоначальное значение. |
submit | Кнопка для отправки данных формы на сервер. |
text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |

В HTML5 добавлены новые значения, представленные в табл. 2.

Табл. 2. Значения type в HTML5
Тип | Описание
color | Виджет для выбора цвета.
date | Поле для выбора календарной даты.
datetime | Указание даты и времени.
datetime-local | Указание местной даты и времени.
email | Для адресов электронной почты.
number | Ввод чисел.
range | Ползунок для выбора чисел в указанном диапазоне.
search | Поле для поиска.
tel | Для телефонных номеров.
time | Для времени.
url | Для веб-адресов.
month | Выбор месяца.
week | Выбор недели.

Поддержка этих значений браузерами показана в табл. 3.

Табл. 3. Поддержка браузерами значений HTML5
Значение | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
color |  | 21.0+ | 11.01+ |  |  |  |
date |  | 5.0+ | 10.62+ | 5.0+ |  |  | 5.0+
datetime |  | 5.0+ | 10.62+ | 5.0+ |  |  | 5.0+
datetime-local |  | 5.0+ | 10.62+ | 5.0+ |  |  | 5.0+
email | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+
month |  | 5.0+ | 10.62+ | 5.0+ |  |  | 5.0+
number | 10.0 | 6.0+ | 10.62+ | 5.0+ |  | 2.3+ | 4.0+
range | 10.0 | 5.0+ | 10.62+ | 5.0+ | 23.0+ |  | 5.0+
search | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ |  | 4.0+
tel | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ |  | 3.1+
time |  | 5.0+ | 10.62+ | 5.0+ |  |  | 5.0+
url | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+
week |  | 5.0+ | 10.62+ | 5.0+ |  |  | 5.0+

Значение по умолчанию

text

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>

  <form action="input10.php">
   <p><input type="radio" name="drink" value="rad1"> Пиво<Br>
   <input type="radio" name="drink" value="rad2"> Чай<Br>
   <input type="radio" name="drink" value="rad3"> Кофе</p>
   <p><input type="image" src="images/imgbutton.gif"></p>
  </form>

 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>
  <form>
  <p>Введите число от 1 до 10</p>
  <p><input type="range" min="1" max="10"></p>
  </form>
 </body>
</html>


Атрибут value

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <input>, а значение — атрибутом value.

В зависимости от типа элемента атрибут value выступает в следующей роли:

  • для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
  • для текстовых полей (input type="password | text") указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в атрибуте value;
  • для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
  • для файлового поля (input type="file") не оказывает влияние.

Синтаксис

HTML
<input type="..." value="значение">
XHTML
<input type="..." value="значение" />

Применяется

Ко всем элементам формы.

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут value</title>
 </head>
 <body>

  <form action="input12.php">
    <p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
    <p><input type="radio" name="answer" value="a1">Офицерский
    состав<Br>
    <input type="radio" name="answer" value="a2">Операционная
    система<Br>
    <input type="radio" name="answer" value="a3">Большой
    полосатый мух</p>
    <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>


Тег <ins>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 7.0+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <ins> предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

Браузеры обычно помечают текст в контейнере <ins> как подчеркнутый.

Синтаксис

<ins>Текст</ins>

Закрывающий тег

Обязателен.

Атрибуты

cite
Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
datetime
Дата и время редактирования текста.

Для этого тега также доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INS</title>
 </head>
 <body>

 <p>Заметим, что схожий результат с Firefox показывает и браузер
  Opera, но, как видно на рис. 1, в последующих версиях <del>этот
  недостаток был устранен</del> <ins>подход разработчиков этого
  браузера был изменен</ins>.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <ins>


Атрибут cite

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 7.0+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.

Синтаксис

<ins cite="URL">Текст</ins>

Обязательный атрибут

Нет.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INS, атрибут cite</title>
 </head>
 <body>
   <p>До недавнего времени считалось, что расходящийся ряд
   стремительно привлекает линейно зависимый
   <del>ряд Тейлора</del><ins cite="http://http://ru.wikipedia.org/wiki/Ряд_Фурье"
     datetime="2011-11-05T23:31:05+07:00">Ряд Фурье</ins>,
   что известно даже школьникам.</p>
 </body>
</html>

Браузеры

Браузеры никак не отображают значение атрибута cite, однако оно доступно для скриптов.


Атрибут datetime

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 7.0+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает дату и время редактирования текста.

Синтаксис

<ins datetime="<дата и время>">Текст</ins>

Обязательный атрибут

Нет.

Значения

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 1.

Табл. 1. Форматы даты и времени
Значение | Формат | Пример
Год | ГГГГ | 2012
Месяц и год | ГГГГ-ММ | 2012-12
Полная дата | ГГГГ-ММ-ДД | 2012-12-23
Дата и время с минутами | ГГГГ-ММ-ДДTчч:мм | 2004-07-24T18:18
Дата и время с секундами | ГГГГ-ММ-ДДTчч:мм:сс | 2004-07-24T18:18:18
Дата и время с часовым поясом | ГГГГ-ММ-ДДTчч:мм:сс±чч:мм | 2004-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +04:00.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INS, атрибут datetime</title>
 </head>
 <body>
   <p>До недавнего времени считалось, что расходящийся ряд
   стремительно привлекает линейно зависимый
   <del>ряд Тейлора</del><ins cite="http://http://ru.wikipedia.org/wiki/Ряд_Фурье"
     datetime="2011-11-05T23:31:05+07:00">Ряд Фурье</ins>,
   что известно даже школьникам.</p>
 </body>
</html>

Браузеры

Браузеры никак не отображают значение атрибута datetime, однако оно доступно для скриптов.


Тег <isindex>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ |  | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <isindex> предназначен для поискового индекса в текущем документе. Этот тег является устаревшим, к тому же браузеры не поддерживают его должным образом.

Согласно спецификации, <isindex> следует размещать внутри контейнера <head>, но браузеры корректно выводят <isindex> и когда он располагается в другом месте кода. Сам тег отображается как текстовая строка, сверху и снизу которой добавляются линии, добавляемые через <hr>.

Синтаксис

<head>
 <isindex атрибуты>
</head>

Закрывающий тег

Не требуется

Атрибуты

action
URL программы, осуществляющей поиск.
prompt
Текстовая строка, которая выводится перед текстовым полем. Если этот атрибут не указан, браузер самостоятельно добавит собственный текст.

Аналог CSS

Нет.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <isindex prompt="Искать текст: ">
  <title>Тег ISINDEX</title>
 </head>
 <body>
  <p>Подъемы на бицепс штанги применяют только после создания начальных объемов сгибателей плеча;
  причем эти объемы должны иметь правильную, естественно-округлую форму с выраженной пиковостью и
  достаточной экскурсией сокращения.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид тега <isindex> в браузере Chrome

Браузеры

Браузеры плохо поддерживают атрибуты тега <isindex>, в итоге, поиск должным образом не работает. Взамен этого элемента используйте теги <form> и <input>.


Тег <kbd>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <kbd> используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере <kbd> моноширинным шрифтом.

Синтаксис

<kbd>Текст</kbd>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег KBD</title>
  <style>
   kbd {
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>

  <p>Для быстрого закрашивания выделенной области цветом переднего плана
    используйте комбинацию клавиш <kbd>&lt;Alt&gt;+&lt;Backspace&gt;</kbd>
    или <kbd>&lt;Alt&gt;+&lt;Delete&gt;</kbd>.
    Для закрашивания выделенной области фоновым цветом
    воспользуйтесь комбинацией
    <kbd>&lt;Ctrl&gt;+&lt;Backspace&gt;</kbd> или
    <kbd>&lt;Ctrl&gt;+&lt;Delete&gt;</kbd>.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <kbd>


Тег <keygen>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ | 3.0+ | 1.2+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи.

Синтаксис

<form>
 <keygen></keygen>
</form>

Атрибуты

autofocus
Передает фокус элементу при загрузке страницы.
challenge
Определяет, должно ли значение изменяться при отправке формы.
disabled
Отключает этот элемент.
form
Идентификатор формы к которой применяется шифрование.
keytype
Задает алгоритм шифрования ключа. К примеру, значение rsa использует криптографический алгоритм RSA.
name
Имя элемента.

Закрывающий тег

Не обязателен.


Тег <label>

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 7.0+ | 1.0+ | 4.0+ | 1.2+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

Синтаксис

<input id="идентификатор"><label for="идентификатор">Текст</label>
<label><input type="..."> Текст</label>

Атрибуты

accesskey
Доступ к элементам формы с помощью горячих клавиш.
for
Идентификатор элемента, с которым следует установить связь.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LABEL</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Lorem ipsum dolor sit amet...</b></p>
   <p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>
   <input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>
   <input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>
   <input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
  </form>
 </body>
</html>

Браузеры

IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега <label>.

IE до версии 8.0 включительно корректно работает с <label> только при наличии в нём текста. Если добавить изображение (<label><img src="pic.jpg" alt=""></label> ), то активировать поле формы щелчком по картинке нельзя.


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 1.0+ | 4.0+ | 1.2+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет горячую клавишу, с помощью которой происходит переход фокуса к элементу формы. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

<label accesskey="клавиша">...</label>

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LABEL, атрибут accesskey</title>
 </head>
 <body>

  <form action="handler.php">
   <p><input type=checkbox id="t1"><label for="t1"
    accesskey="g">Нажмите &lt;Alt&gt;+&lt;g&gt;, чтобы перейти к
     разделу <b>Игры</b>.</label></p>
  </form>

 </body>
</html>


Атрибут for

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 7.0+ | 1.0+ | 4.0+ | 1.2+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает уникальный идентификатор, определяемый с помощью атрибута id элемента <input>, с которым следует установить связь. Атрибут for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <input> размещается внутри контейнера <label>, то применять атрибут for не требуется.

Синтаксис

<label for="идентификатор">...</label>

Значения

Имя идентификатора. Такое имя чувствительно к регистру, поэтому его следует писать так же, как оно описано внутри элемента <input>.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LABEL, атрибут for</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="radio" name="l" id="radio1">
    <label for="radio1">Lorem ipsum</label></p>
    <p><input type="radio" name="l" id="radio2">
    <label for="radio2">Dolor sit amet</label></p>
  </form>
 </body>
</html>

Браузеры

IE5-6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега <label>.


Тег <legend>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <legend> применяется для создания заголовка группы элементов формы, которая определяется с помощью тега <fieldset>. Группа элементов обозначается в браузере с помощью рамки, а текст, который располагается внутри контейнера <legend>, встраивается в эту рамку.

Синтаксис

<fieldset>
  <legend>Текст</legend>
</fieldset>

Атрибуты

accesskey
Переход к группе элементов формы с помощью комбинации клавиш.
align
Определяет выравнивание текста.
title
Добавляет всплывающую подсказку к тексту заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LEGEND</title>
 </head>
 <body>

  <fieldset>
   <legend>Работа со временем</legend>
   <p><input type="checkbox"> создание пунктуальности (никогда не
    будете никуда опаздывать);<Br>
    <input type="checkbox"> излечение от пунктуальности (никогда
    никуда не будете торопиться);<Br>
    <input type="checkbox"> изменение восприятия времени и часов.</p>
   </fieldset>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовка группы, полученного с помощью тега <legend>

Вид рамки и текста заголовка может различаться в разных браузерах. Например, в браузере Safari (рис. 1) рамка прямоугольная, а в Internet Explorer (рис. 2) рамка имеет скругленные углы.

Рис. 2. Вид заголовка группы в браузере Internet Explorer


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут accesskey позволяет перейти к группе элементов формы с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

<legend accesskey="c">Текст</legend>

Обязательный атрибут

Нет.

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LEGEND, атрибут accesskey</title>
 </head>
 <body>
  <p>Для перехода к блоку используется клавиша T.</p>
  <fieldset>
    <legend accesskey="t">Работа со временем</legend>
    <p><input type="checkbox"> создание пунктуальности (никогда не
    будете никуда опаздывать);<Br>
    <input type="checkbox"> излечение от пунктуальности (никогда
    никуда не будете торопиться);<Br>
    <input type="checkbox"> изменение восприятия времени и часов.</p>
  </fieldset>
 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание текста заголовка по краю.

Синтаксис

<legend align="left | center | right">...</legend>

Значения

left
Выравнивание текста по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.

Значение по умолчанию

left

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег LEGEND, атрибут align</title>
 </head>
 <body>
  <fieldset>
   <legend align="right">Lorem ipsum dolor sit amet</legend>
   <p>... </p>
  </fieldset>
 </body>
</html>


Атрибут title

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет поясняющий текст в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на заголовке.

Синтаксис

<legend title="текст">...</legend>

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LEGEND, атрибут title</title>
 </head>
 <body>

  <fieldset>
   <legend title="Lorem ipsum...">Lorem
   ipsum dolor sit amet</legend>
   <p>... </p>
  </fieldset>

 </body>
</html>


Тег <li>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

Синтаксис

<ul>
  <li>элемент маркированного списка</li>
</ul>

<ol>
  <li>элемент нумерованного списка</li>
</ol>

Атрибуты

type
Устанавливает вид маркера нумерованного или маркированного списка.
value
Число, с которого будет начинаться нумерованный список.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LI</title>
 </head>
 <body>

  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ul>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид маркированного списка в браузере


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вид маркера. Тип маркера и его значение зависит от внешнего контейнера <ul> или <ol>.

Синтаксис

<li type="disc | circle | square">...</li>
<li type="A | a | I | i | 1">...</li>

Значения

Для маркированного списка (тег <ul>) маркеры могут принимать один из трех видов: круг, окружность и квадрат. Значения атрибута type и получаемый вид показан в табл. 1.

Табл 1. Параметры маркированного списка
Код Пример
<li type="disc">
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type="circle">
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type="square">
  • Чебурашка
  • Крокодил Гена
  • Шапокляк

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры;
  • арабские цифры.

В табл. 2 приведены различные значения атрибута type тега <li> и результат их применения.

Табл 2. Параметры нумерованного списка
Код Пример
<ol> <li type="A"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="a"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="I"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="i"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="1"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Значение по умолчанию

disc и 1

Аналог CSS

list-style-type

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег LI, атрибут type</title>
 </head>
 <body>

  <ul>
   <li type="square">Чебурашка</li>
   <li>Крокодил Гена</li>
   <li type="circle">Шапокляк</li>
  </ul>

 </body>
</html>

Результат данного примера показан на рис. 1.

Разные маркеры в списке

Рис. 1. Разные маркеры в списке


Атрибут value

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут value устанавливает номер, с которого будет начинаться список. value применяется только для нумерованных списков, когда тег <li> находится внутри контейнера <ol>. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут value одинаково работает и с римскими и с арабскими числами.

Синтаксис

<li value="число">...</li>

Значения

Любое целое положительное число.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег LI, атрибут value</title>
 </head>
 <body>

  <ol>
    <li type="I" value="48">Чебурашка</li>
    <li type="I">Крокодил Гена</li>
    <li type="I">Шапокляк</li>
  </ol>

 </body>
</html>

Результат данного примера показан на рис. 1.

Вид нумерованного списка в браузере

Рис. 1. Вид нумерованного списка в браузере


Тег <link>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

Синтаксис

HTML
<head>
  <link атрибуты>
</head>
XHTML
<head>
  <link атрибуты />
</head>

Атрибуты

charset
Кодировка связываемого документа.
href
Путь к связываемому файлу.
media
Определяет устройство, для которого следует применять стилевое оформление.
rel
Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes
Указывает размер иконок для визуального отображения.
type
MIME-тип данных подключаемого файла.

Также для этого тега доступны универсальные атрибуты.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>Тег LINK</title>
   <link rel="stylesheet" href="ie.css">
   <link rel="alternate" type="application/rss+xml"
     title="Статьи с сайта htmlbook.ru" href="http://htmlbook.ru/rss.xml">
   <link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico">
  </head>
  <body>
    <p>...</p>
  </body>
</html>

В данном примере подключается внешний файл со стилями с помощью атрибута rel="stylesheet" тега <link>, указывается RSS-документ текущего сайта (link rel="alternate" type="application/rss+xml") и устанавливается иконка сайта в адресной строке браузера (link rel="shortcut icon").


Атрибут charset

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает кодировку документа на который ссылается тег <link>.

Синтаксис

HTML
<link charset="кодировка">
XHTML
<link charset="кодировка" />

Значения

Название кодировки, например UTF-8.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег LINK, атрибут charset</title>
  <link href="okinawa.html" rel="parent" charset="euc-jp">
 </head>
 <body>
  <p>...</p>
 </body>
</html>


Атрибут href

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Путь к файлу, на который делается ссылка (URL).

Синтаксис

HTML
<link href="URL">
XHTML
<link href="URL" />

Обязательный атрибут

Нет.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>Тег LINK, атрибут href</title>
   <link href="http://www.htmlbook.ru/ie/rus/x3.css">
  </head>
  <body>
  <p>...</p>
 </body>
</html>


Атрибут media

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько значений через запятую.

Синтаксис

HTML
<link media="all|braille|handheld|print|screen|speech|projection|tty|tv">
XHTML
<link media="all|braille|handheld|print|screen|speech|projection|tty|tv" />

Значения

all
Все устройства.
braille
Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld
Наладонники, смартфоны, устройства с малой шириной экрана.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection
Проектор.
tty
Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.
tv
Телевизор.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

all


Атрибут rel

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.

Синтаксис

HTML
<link rel="тип">
XHTML
<link rel="тип" />

Значения

stylesheet
Определяет, что подключаемый файл хранит таблицу стилей (CSS).
alternate
Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>Тег LINK, атрибут rel</title>
   <link rel="stylesheet" href="hb.css">
  </head>
  <body>
   <p>...</p>
  </body>
</html>


Атрибут sizes

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).

Синтаксис

<link rel="icon" sizes="<ширина>X<высота>">
<link rel="icon" sizes="<ширина1>X<высота1> <ширина2>X<высота2>* | any">

Значения

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег link, атрибут sizes</title>
  <link rel="icon" href="images/android.ico" sizes="48x48" type="image/x-icon">
  <link rel="icon" href="images/android.png" sizes="16x16" type="image/png">
</head>
 <body>
  <p>...</p>
 </body>
</html>


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Синтаксис

HTML
<link type="MIME-тип">
XHTML
<link type="MIME-тип" />

Значения

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег LINK, атрибут type</title>
  <link rel="stylesheet" type="text/css" href="/styles/htmlbook.css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>


Тег <listing>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Предназначен для вывода листинга программ или кода. Отображает содержимое моноширинным шрифтом уменьшенного размера.

Синтаксис

<listing>Текст</listing>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Валидация

Использование этого тега осуждается спецификацией HTML.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег LISTING</title>
 </head>
 <body>
  <p>Пример программы</p>
  <listing>
   while (<>) {
     $org=$_;
     s/\\["']//g;
     s/\/\/[^:].*//;
     s/\/\*.*\*\///g;
     if ($comment == 1) {
       if (s/.*\*\///) {
         $comment = 0;
       }
       else {
         next;
       }
     }
     if (s/\/\*.*//) {
       $comment = 1;
     }
     if (/^\s*#/) {
       next;
     }
   }</listing>
 </body>
</html>


Тег <main>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 26.0+ |  |  | 21.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <main> является структурным и предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.

Синтаксис

<main>
</main>

Атрибуты

Для этого тега доступны только универсальные атрибуты.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>main</title>
 </head>
 <body>
  <h1>Следы невиданных зверей</h1>
  <main>
    История о том, как возле столовой появились загадочные розовые
    следы с шестью пальцами, и почему это случилось.
  </main>
 </body>
</html>


Тег <map>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <map> служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега <map> — в связывании тега <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге <img>, задаваемого атрибутом usemap, так и в теге <map>, устанавливаемого атрибутом name.

Синтаксис

HTML
<map name="имя">
  <area атрибуты>
</map>
XHTML
<map name="имя" id="имя">
  <area атрибуты />
</map>

Атрибуты

name
Имя карты-изображения.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body>
  <div id="title"><img src="images/ecctitle.png" width="640" height="158"
    alt="Детский образовательный центр"><br>
   <img src="images/navigate.png" width="640" height="30" alt="Навигация по сайту"
    usemap="#Navigation"></div>
   <p><map id="Navigation" name="Navigation">
    <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">
    <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
    <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
    <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
    <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
    <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
    <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
   </map></p>
 </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Имя идентификатора, которое однозначно определяет карту-изображение. Значение атрибута name тега <map> должно соответствовать имени в usemap. При этом значение атрибута usemap тега <img> начинается с символа решетки.

Синтаксис

<map name="идентификатор">...</map>

Обязательный атрибут

Да.

Значения

Любое подходящее уникальное имя, оно чувствительно к регистру.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег AREA, атрибут alt</title>
</head>
<body>

 <p><img src="images/europe.png" alt="Европа" width="422"
   height="387" usemap="#Map">
 <map name="Map">
  <area shape="poly" coords="34,83,42,90,52,87,64,85,71,81,79,87,84,95,
  75,110,61,120,42,116,37,110,25,94,32,82" href="is.html" alt="Исландия">
  <area shape="poly" coords="168,262,173,254,180,254,207,272,201,290,206,309,
  197,318,182,316,182,323,165,320,152,317,154,292,138,276,168,263" href="fr.html" alt="Франция">
  <area shape="poly" coords="250,223,264,217,274,222,295,221,298,235,301,257,
  290,269,274,268,247,254,243,241,243,241" href="pl.html" alt="Польша">
 </map></p>

</body>
</html>


Тег <mark>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 6.0+ | 10.6+ | 4.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Синтаксис

<mark>текст</mark>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>mark</title>
  <style>
   mark {
    background: #ffec82;
    padding: 0 3px;
    border: 1px dashed #333;
   }
  </style>
 </head>
 <body>
  <header>
    <h1>Следы невиданных зверей</h1>
  </header>
  <article>
    История о том, как возле столовой появились загадочные розовые
    следы с <mark>шестью пальцами</mark>, и почему это случилось.
  </article>
 </body>
</html>

Результат примера показан на рис. 1.

Использование тега <mark>

Рис. 1. Использование тега <mark>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <mark>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору MARK.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <marquee>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Первоначально тег <marquee> был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают этот тег.

Синтаксис

<marquee>...</marquee>

Атрибуты

behavior
Задает тип движения содержимого контейнера <marquee>.
bgcolor
Цвет фона.
direction
Указывает направление движения содержимого контейнера <marquee>.
height
Высота области прокрутки.
hspace
Горизонтальные поля вокруг контента.
loop
Задает, сколько раз будет прокручиваться содержимое.
scrollamount
Скорость движения контента.
scrolldelay
Величина задержки в миллисекундах между движениями.
truespeed
Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
vspace
Вертикальные поля вокруг содержимого.
width
Ширина области прокрутки.

Закрывающий тег

Обязателен.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE</title>
 </head>
 <body>

  <marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
    Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут behavior

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает способ движения содержимого внутри элемента <marquee>.

Синтаксис

<marquee behavior="alternate | scroll | slide">...</marquee>

Значения

alternate
Контент перемещается между правым и левым краем элемента.
scroll
Контент перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала.
slide
Контент перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается.

Значение по умолчанию

scroll

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут behavior</title>
 </head>
 <body>

  <marquee bgcolor="#c0c0c0" behavior="alternate">Lorem
   ipsum dolor sit amet...</marquee>
  <marquee bgcolor="#c0c0c0" behavior="scroll">Lorem
   ipsum dolor sit amet...</marquee>
  <marquee bgcolor="#c0c0c0" behavior="slide">Lorem
   ipsum dolor sit amet...</marquee>

 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона под содержимым элемента <marquee>.

Синтаксис

<marquee bgcolor="цвет">...</marquee>

Значения

См. цвет

Значение по умолчанию

Совпадает с цветом фона веб-страницы, обычно это белый цвет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут bgcolor</title>
 </head>
 <body bgcolor="#c0c0c0">

  <marquee bgcolor="white">Lorem ipsum
  dolor sit amet...</marquee>

 </body>
</html>


Атрибут direction

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Содержимое контейнера <marquee> может перемещаться в четырех направлениях, не только влево и вправо, но также вверх и вниз.

Синтаксис

<marquee direction="down | left | right | up">...</marquee>

Значения

down
Движение сверху вниз.
left
Движение справа налево.
right
Движение в правую сторону.
up
Движение вверх.

Значение по умолчанию

left

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут direction</title>
 </head>
 <body>

  <marquee direction="down" bgcolor="#ffcc00">Lorem
  ipsum dolor sit amet...</marquee>

 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <marquee> отображается как прямоугольник, ширина и высота которого устанавливаются, соответственно, с помощью атрибутов width и height. Прокрутка содержимого будет происходить в пределах заданных размеров. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры <marquee> вычисляются относительно родительского элемента, обычно это тег <body>. Иными словами, width="100%" означает, что элемент будет занимать всю доступную ширину веб-страницы.

Синтаксис

<marquee height="высота">...</marquee>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Ширина — 100%, высота — 12 пикселов.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут width</title>
 </head>
 <body>

  <marquee width="600" height="150"
   direction="up" bgcolor="olive" style="text-align: center;
  color: white">
   Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут hspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибуты hspace и vspace предназначены для добавления пустого пространства вокруг содержимого <marquee>. hspace устанавливает поля слева и справа от элемента (по горизонтали), а vspace — сверху и снизу (по вертикали). Поля не увеличивают фоновую область под содержимым и служат для изменения расстояния между тегом <marquee> и другими элементами веб-страницы.

Синтаксис

<marquee hspace="поле по горизонтали">...</marquee>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

-1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут hspace</title>
 </head>
 <body>

  <marquee width="550" height="150" hspace="5" vspace="7">
   Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут loop

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает, сколько раз скролировать содержимое тега <marquee>. После того, как заданное число раз отсчитано, содержимое остается в конечной точке.

Синтаксис

<marquee loop="число повторений">...</marquee>

Значения

Любое целое положительное число или -1 для бесконечного воспроизведения движения.

Значение по умолчанию

-1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут loop</title>
 </head>
 <body>

  <marquee loop="5" behavior="alternate">
   Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут scrollamount

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Анимация содержимого элемента <marquee> происходит за счет периодического стирания информации и отображения ее на новом месте. Аатрибут scrollamount устанавливает расстояние в пикселах между старым и новым положениями, которые влияют на скорость движения и плавность хода. Чем выше значение, тем быстрее перемещается содержимое контейнера. Если значение равно нулю, то движения не происходит.

Синтаксис

<marquee scrollamount="значение">...</marquee>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

6

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут scrollamount</title>
 </head>
 <body>

  <marquee scrollamount="10" behavior="alternate">
   Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут scrolldelay

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

На скорость скролирования, как и изменение позиции, влияет частота обновления содержания. Атрибут scrolldelay задает время задержки между движениями в миллисекундах, чем ниже значение, тем выше скорость движения, и наоборот.

Синтаксис

<marquee scrolldelay="число">...</marquee>

Значения

Любое целое положительное число миллисекунд.

Значение по умолчанию

85

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут scrolldelay</title>
 </head>
 <body>

  <marquee scrolldelay="100">
    Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут truespeed

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если содержимое тега <marquee> перемещается слишком быстро, то срабатывает встроенный ограничитель скорости, который насильно замедляет скролирование. Это сделано для того, чтобы сохранить читабельность текста. Если вы намерены обойти это ограничение, добавьте атрибут truespeed, он заставляет прокручиваться содержимое с заданной скоростью. Для атрибута scrolldelay ограничение скорости начинается со значения 60 миллисекунд и ниже.

Синтаксис

<marquee truespeed>...</marquee>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут truespeed</title>
 </head>
 <body>

  <marquee scrolldelay="30" truespeed>
    Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут vspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибуты hspace и vspace предназначены для добавления пустого пространства вокруг содержимого <marquee>. hspace устанавливает поля слева и справа от элемента (по горизонтали), а vspace — сверху и снизу (по вертикали). Поля не увеличивают фоновую область под содержимым и служат для изменения расстояния между тегом <marquee> и другими элементами веб-страницы.

Синтаксис

<marquee vspace="поле по вертикали">...</marquee>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

-1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут hspace</title>
 </head>
 <body>

  <marquee width="550" height="150" hspace="5" vspace="7">
   Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <marquee> отображается как прямоугольник, ширина и высота которого устанавливаются, соответственно, с помощью атрибутов width и height. Прокрутка содержимого будет происходить в пределах заданных размеров. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры <marquee> вычисляются относительно родительского элемента, обычно это тег <body>. Иными словами, width="100%" означает, что элемент будет занимать всю доступную ширину веб-страницы.

Синтаксис

<marquee width="значение">...</marquee>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

100%

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE, атрибут width</title>
 </head>
 <body>

  <marquee width="600" height="150"
   direction="up" bgcolor="olive" style="text-align: center;
  color: white">
   Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>


Тег <menu>

 | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
HTML4 | 3.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.1+ | 1.0+
HTML5 |  |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.

В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

Синтаксис

HTML
<menu>
  <li>пункт меню</li>
  <li>пункт меню</li>
</menu>
HTML5
<menu>
  ...
</menu>

Атрибуты

label
Устанавливает видимую метку для меню.
type
Задает тип меню.

Закрывающий тег

Обязателен.

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 применение тега <menu> корректно.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <p><strong>В этом выпуске:</strong></p>
  <menu>
   <li>Русская кухня. Уха бурлацкая</li>
   <li>Украинская кухня. Вареники</li>
   <li>Молдавская кухня. Паприкаш</li>
   <li>Кавказская кухня. Суп-харчо</li>
   <li>Прибалтийская кухня. Вертиняй</li>
  </menu>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид списка, созданного с помощью тега <menu>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <menu type="toolbar">
   <li>
    <menu label="Файл">
      <button type="button">Новый...</button>
      <button type="button">Открыть...</button>
      <button type="button">Сохранить</button>
    </menu>
   </li>
   <li>
     <menu label="Правка">
      <button type="button">Копировать</button>
      <button type="button">Вырезать</button>
      <button type="button">Вставить</button>
     </menu>
    </li>
  </menu>
 </body>
</html>


Атрибут label

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает видимую метку для меню, которая отображается в виде названия при использовании вложенных меню.

Синтаксис

<menu label="текст">
...
</menu>

Значения

В качестве значения указывается текст.

Значение по умолчанию

Нет.

Обязательный атрибут

Нет.


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает видимую метку для меню, которая отображается в виде названия при использовании вложенных меню.

Синтаксис

<menu type="context | toolbar | list">
...
</menu>

Значения

context
Создает контекстное меню.
toolbar
Меню в виде панели инструментов.
list
Меню в виде списка.

Значение по умолчанию

list

Обязательный атрибут

Нет.


Тег <meta>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Синтаксис

HTML
<head>
  <meta content="...">
</head>
XHTML
<head>
  <meta content="..." />
</head>

Атрибуты

charset
Задает кодировку документа.
content
Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv
Предназначен для конвертирования метатега в заголовок HTTP.
name
Имя метатега, также косвенно устанавливает его предназначение.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег META</title>
  <meta charset="utf-8">
  <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
  <meta name="ProgId" content="FrontPage.Editor.Document">
 </head>
 <body>
  <p>...</p>
 </body>
</html>


Атрибут charset

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 10.5+ | 4.0+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает кодировку документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега <meta>, которая задавала кодировку в предыдущих версиях HTML и XHTML.

Синтаксис

HTML
<meta charset="кодировка">
XHTML
<meta charset="кодировка" />

Значения

Название кодировки, например UTF-8.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег META, атрибут charset</title>
 </head>
 <body>
  <p>Типовой документ.</p>
 </body>
</html>


Атрибут content

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

content устанавливает значение атрибута, заданного с помощью name или http-equiv. Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.

Синтаксис

HTML
<meta content="...">
XHTML
<meta content="..." />

Обязательный атрибут

Да.

Значения

Строка символов, которую надо взять в одинарные или двойные кавычки.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <title>Тег META, атрибут content</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
   <p>...</p>
  </body>
</html>


Атрибут http-equiv

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Браузеры преобразовывают значение атрибута http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Синтаксис

HTML
<meta http-equiv="...">
XHTML
<meta http-equiv="..." />

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv.

Content-Type
Тип кодировки документа.
expires
Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.
pragma
Способ кэширования документа.
refresh
Загрузить другой документ в текущее окно браузера.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег META, атрибут http-equiv</title>
   <meta http-equiv="expires" content="Sun, 01 Jan 2013 07:01:00 GMT">
  </head>
  <body>
    <p>...</p>
  </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает идентификатор метатега для пары «имя=значение». Одновременно использовать атрибуты name и http-equiv не допускается.

Синтаксис

HTML
<meta name="...">
XHTML
<meta name="..." />

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута name.

author
Имя автора документа.
description
Описание текущего документа.
keywords
Список ключевых слов, встречающихся на странице.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Тег META, атрибут name</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords"
      content="HTML, META, метатег, тег, поисковая система">
  </head>
  <body>
    <p>...</p>
  </body>
</html>


Тег <meter>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 6.0+ | 11.0+ | 5.2+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.

Синтаксис

<meter value="значение">текст</meter>

Атрибуты

value
Устанавливает значение. Обязательный атрибут.
min
Задает минимально возможное значение.
max
Задает максимально возможное значение.
low
Определяет предел, при достижении которого значение считается низким.
high
Определяет предел, при достижении которого значение считается высоким.
optimum
Определяет наилучшее или оптимальное значение.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSa 5.2Fx 16

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>meter</title>
 </head>
 <body>
  <p>Температура воды</p>
  <meter value="0" max="100" low="10" high="60">Низкая</meter>
  <meter value="30" max="100" low="10" high="60">Нормальная</meter>
  <meter value="80" max="100" low="10" high="60">Горячая</meter>
  <meter value="100" max="100">Кипяток</meter>
 </body>
</html>

Результат примера в браузере Chrome показан на рис. 1.

Отображение значений тега <meter>

Рис. 1. Отображение значений тега <meter>

Браузеры

Браузеры, которые поддерживают тег <meter>, отображают значение в виде рисунка, на котором цветом помечается текущее значение в указанном диапазоне. Остальные браузеры выводят текст, написанный внутри тега <meter>.


Атрибут high

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 6.0+ | 11.0+ | 5.2+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет предел, при достижении которого значение считается высоким.

Синтаксис

<meter value="значение" high="высокое значение"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие min ? high ? max, а также low ? high.

Значение по умолчанию

Нет.

Обязательный атрибут

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>high</title>
 </head>
 <body>
  <p><meter value="-20" min="-60" max="40" low="0" high="28"></meter></p>
 </body>
</html>


Атрибут low

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 6.0+ | 11.0+ | 5.2+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет предел, при достижении которого значение считается низким.

Синтаксис

<meter value="значение" low="низкое значение"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие min ? low ? max, а также low ? high.

Значение по умолчанию

Нет.

Обязательный атрибут

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>low</title>
 </head>
 <body>
  <p><meter value="-20" min="-60" max="40" low="0" high="28"></meter></p>
 </body>
</html>


Атрибут max

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 6.0+ | 11.0+ | 5.2+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает максимальный порог, который может достигать значение.

Синтаксис

<meter value="значение" max="максимальное значение"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие min ? value ? max.

Значение по умолчанию

1

Обязательный атрибут

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>max</title>
 </head>
 <body>
  <p><meter value="36.6" min="35" max="42">36,6 градусов</meter></p>
 </body>
</html>


Атрибут min

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 6.0+ | 11.0+ | 5.2+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает минимальный порог, который может достигать значение.

Синтаксис

<meter value="значение" min="минимальное значение"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие min ? value ? max.

Значение по умолчанию

0

Обязательный атрибут

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>min</title>
 </head>
 <body>
  <p><meter value="36.6" min="35" max="42">36,6 градусов</meter></p>
 </body>
</html>


Атрибут optimum

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 6.0+ | 11.0+ | 5.2+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет наилучшее или оптимальное значение.

Синтаксис

<meter value="значение" optimum="оптимальное значение"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие min ? optimum ? max.

Значение по умолчанию

Нет.

Обязательный атрибут

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>optimum</title>
 </head>
 <body>
  <p><meter value="39" optimum="36.6" min="35" max="42"></meter></p>
 </body>
</html>


Атрибут value

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 6.0+ | 11.0+ | 5.2+ | 16.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает значение единицы измерения. Значение должно быть в диапазоне, задаваемым атрибутами min и max.

Синтаксис

<meter value="значение"></meter>

Значения

В качестве значения указывается целое или дробное число. Допускается использование отрицательных значений.

Значение по умолчанию

Нет.

Обязательный атрибут

Да.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>value</title>
 </head>
 <body>
  <p><meter value="36.6" min="35" max="42">36,6 градусов</meter></p>
 </body>
</html>


Тег <multicol>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает количество колонок, ширину и расстояние между колонками в многоколоночном тексте.

Синтаксис

<multicol cols="<число>">Текст</multicol>

Закрывающий тег

Обязателен.

Аналог CSS

columns

Атрибуты

cols
Количество колонок. Обязательный атрибут.
gutter
Расстоянием между колонками в пикселах.
width
Определяет общую ширину колонок включая пространство между ними. Это значение может быть задано в пикселах или процентах.


Тег <nav>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 6.0+ | 10.6+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Синтаксис

<nav>ссылки</nav>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nav</title>
 </head>
 <body>
  <header>
    <h1>Чебурашка и крокодил Гена</h1>
  </header>
  <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
       <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
  <article>
    <h2>Добро пожаловать!</h2>
  </article>
 </body>
</html>

Результат данного примера показан на рис. 1.

Навигация по сайту

Рис. 1. Навигация по сайту

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <nobr>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <nobr> уведомляет браузер отображать текст без переносов. Если этого тега в коде документа нет, а также имеются переводы строки, они игнорируются и текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование тега <nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью, чего обычно делать никто не любит.

Синтаксис

<nobr>Текст</nobr>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Аналог CSS

white-space

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Тег NOBR</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

  <h1><nobr>Lorem ipsum dolor sit amet,
     consectetuer adipiscing elit</nobr></h1>

  <p><nobr>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diem nonummy nibh euismod tincidunt ut lacreet dolore
    magna aliguam erat volutpat.</nobr> Ut wisis enim ad minim veniam,
    quis nostrud exerci tution ullamcorper suscipit lobortis nisl
    ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Текст без переносов


Тег <noembed>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <noembed> предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами. Во всех остальных случаях содержимое контейнера <noembed> будет проигнорировано.

Плагином называется подключаемый к браузеру программный модуль, расширяющий возможности браузера. Например, к плагинам можно отнести поддержку Flash, QuickTime VR, VRML и т.д.

Синтаксис

<noembed>Текст</noembed>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег NOEMBED</title>
 </head>
 <body>

   <embed src="mouse.swf" width="400" height="300"
   type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

   <noembed>Браузер не поддерживает работу с плагинами</noembed>

 </body>
</html>


Тег <noframes>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Содержимое тега <noframes> отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое тега <noframes>. Как правило, внутри этого тега располагается текст, информирующий пользователя о том, что его браузер фреймы не поддерживает или с предложением перейти на страницу без фреймов.

Синтаксис

<frameset>
 <noframes>Текст</noframes>
</frameset>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE> или <!DOCTYPE> для фреймов.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Тег NOFRAMES</title>
  </head>

  <frameset cols="100,*">
    <frame src="menu.html" name="leftFrame">
    <frame src="content.html" name="mainFrame">

    <noframes>Ваш браузер не поддерживает фреймы.</noframes>
  </frameset>

</html>


Тег <noscript>

Internet Explorer |  | Chrome | Opera |  | Safari | Firefox | Android | iOS
4.0+ | 8.0 | 1.0+ | 4.0+ | 11.0 | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<noscript>Текст</noscript>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Тег NOSCRIPT</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
      alert("Hello, world!");
    </script>
  </head>
<body>
   <noscript><p>Ваш браузер не поддерживает скрипты!</p></noscript>
</body>
</html>

Браузеры

Internet Explorer 8 скрывает содержимое тега <noscript>, при этом отображает результат использования стилей. Например, если к элементу добавить границу, фон с полями, то граница и фон будут видны на странице.

Opera 11 не поддерживает тег <noscript>, эта ошибка исправлена в версии 11.10.


Тег <object>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <object> сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

Спецификация HTML 4 разрешает вкладывать несколько тегов <object> с разным содержанием друг в друга. Это позволяет отображать тот контент, который понимает браузер, при отсутствии нужного плагина. Например, внешний тег <object> загружает видеофайл, а для случая, когда соответствующий кодек (программа для сжатия и восстановления видеоданных) не установлен, внутренний тег <object> показывает графическое изображение. Дополнительно внутрь контейнера <object> можно поместить тег <param>, который передает дополнительные параметры для отображения объекта.

Синтаксис

<object width="ширина" height="высота"></object>

Атрибуты

align
Определяет, как объект будет выравниваться на странице и способ его обтекания текстом.
archive
Устанавливает путь к файлам, необходимым для работы объекта.
classid
Адрес программы (приложения или плагина), которая работает с данным объектом, и будет запускать его.
code
Имя объекта для его выполнения.
codebase
Путь к папке с объектом, который указан атрибутом code или classid.
codetype
Указывает на тип объекта, который задан атрибутом classid.
data
Адрес файла для его отображения в окне браузера.
height
Высота объекта.
hspace
Горизонтальный отступ от объекта до окружающего контента.
tabindex
Определяет порядок перехода между элементами с помощью клавиши Tab.
type
MIME-тип объекта.
vspace
Вертикальный отступ от объекта до окружающего контента.
width
Ширина объекта.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Тег OBJECT</title>
  </head>
  <body>
   <p><object type="application/x-shockwave-flash"
      data="images/mouse.swf" width="400" height="300">
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
   </object></p>
  </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет выравнивание объекта на странице и способ его отображения совместно с другими нижележащими элементами вроде текста

Синтаксис

<object align="absmiddle | baseline | bottom | left | middle | right | texttop | top">...</object>

Значения

absmiddle
Выравнивание середины объекта по середине текущей строки.
baseline
Выравнивание объекта по базовой линии текущей строки.
bottom
Выравнивание нижней границы объекта по окружающему тексту.
left
Выравнивает объект по левому краю окна, текст обтекает его справа.
middle
Выравнивание середины объекта по базовой линии текущей строки.
right
Выравнивает объект по правому краю окна, текст обтекает слева.
texttop
Верхняя граница объекта выравнивается по самому высокому текстовому элементу текущей строки.
top
Верхняя граница объекта выравнивается по самому высокому элементу текущей строки.

Значение по умолчанию

bottom

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег OBJECT, атрибут align</title>
 </head>
 <body>

  <p><object data="demo.mpg" width="400" height="300"
  align="left"></object></p>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

 </body>
</html>


Атрибут archive

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут archive позволяет задать произвольное число файлов необходимых для корректной работы объекта или для его отображения. Файлы перечисляются через пробел вместе с полным или локальным адресом.

Синтаксис

<object archive="URL">...</object>

Обязательный атрибут

Нет.

Значения

В качестве значения принимается полный или относительный путь к файлу. Если файлов несколько, они разделяются между собой пробелом.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег OBJECT, атрибут archive</title>
 </head>
 <body>
  <p><object classid="java:Clock.class" codetype="application/java"
   width="100" height="20" archive="clock.jar"></object></p>
 </body>
</html>

Браузеры

Атрибут archive работает только с теми объектами, которые поддерживает браузер, например, в виде установленных расширений или плагинов.


Атрибут classid

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Адрес программы, которая работает с данным объектом, и будет запускать его. Атрибут classid указывает браузеру, какую программу, плагин или апплет нужно загрузить. Можно также использовать идентификатор зарегистрированного ActiveX приложения, предваряя его ключевым словом clsid.

Синтаксис

<object classid="URL">...</object>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег OBJECT, атрибут classid</title>
 </head>
 <body>

  <p><object codetype="application/java-vm" codebase="http://htmlbook.ru/applet.class"
   classid="java:program.start" height="100" width="100">
   <param name="options" value="que">
  </object></p>

 </body>
</html>


Атрибут code

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут code используется для замены тега <applet>, который загружает и выполняет Java-aпплет. В качестве значения code используется имя класса Java-апплета (файл с расширением class). Если файл располагается не в той же папке что и текущий документ, то следует указать путь к нему через атрибут codebase. Работает только в браузере Internet Explorer.

Синтаксис

<object code="имя класса">...</object>

Значения

Имя класса Java-апплета.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег META, атрибут code</title>
 </head>
 <body>

  <p><object code="clock.class"></object></p>

 </body>
</html>


Атрибут codebase

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Путь к папке, где хранится файл с классом указанный в значении атрибута code или classid. Атрибут codebase должен содержать только имя папки, а не файла.

Синтаксис

<object codebase="URL">...</object>

Значения

Путь к файлу с классом относительно текущего документа

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег META, атрибут codebase</title>
 </head>
 <body>

   <p><object classid="clock.class" codebase="java_applets"></object></p>

 </body>
</html>


Атрибут codetype

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру о типе объекта, который указан в атрибуте classid. Браузер может использовать эту информацию, чтобы подготовить необходимые ресурсы для воспроизведения файла. Если атрибут codetype отсутствует, то рассматривается значение type, хотя он обычно и связывается с атрибутом data. В случае, когда не указаны оба атрибута codetype и type, браузер получает данные о типе загружаемого файла самостоятельно.

Синтаксис

<object codetype="MIME-тип">...</object>

Значения

Имя MIME-типа в любом регистре.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег META, атрибут codetype</title>
 </head>
 <body>

  <p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codetype="video/quicktime"></object></p>

 </body>
</html>


Атрибут data

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет файл, который следует отобразить в окне браузера. Для популярных форматов данных достаточно указать путь к файлу и его тип (атрибут type) для загрузки и демонстрации результата. Для специфичных плагинов желательно еще включить атрибут classid.

Путь к файлу определяется относительно папки, заданной атрибутом codebase. Если codebase не указан, тогда путь следует задавать относительно текущего документа.

Синтаксис

<object data="URL">...</object>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OBJECT, атрибут data</title>
 </head>
 <body>

  <p><object data="video/duel.mp4" type="application/mpeg"
  width="300" height="200"></object></p>

 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут height устанавливает высоту объекта, а width — его ширину. В заданные размеры входит не только само изображение, например в случае воспроизведения видеофайла, но и панель управления им, включая кнопки проигрывания, паузы, остановки и т.д. По этой причине на размер отображаемого объекта влияет тип файла и применяемый плагин.

Если используется процентная запись, то размеры объекта вычисляются относительно родительского элемента — контейнера, где находится тег <object>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что объект будет занимать всю доступную ширину веб-страницы.

Синтаксис

<object height="высота">...</object>

Обязательный атрибут

Да.

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Нет.


Атрибут hspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого объекта можно задать невидимые отступы по горизонтали и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально при обтекании объекта текстом, в этом случае необходимо вокруг него добавить пустое пространство.

Синтаксис

<object hspace="отступ по горизонтали" vspace="отступ по вертикали">...</object>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0


Атрибут tabindex

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 4.0+ |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.

Синтаксис

<object tabindex="число"></object>

Обязательный атрибут

Нет.

Значения

Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.

Значение по умолчанию

Нет.


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру о типе объекта, который указан в атрибуте data. Браузер может использовать эту информацию, чтобы подготовить необходимые ресурсы для воспроизведения файла.

Браузер вначале анализирует значение codetype, а в случае его отсутствия смотрит значение type. Если не указаны оба атрибута codetype и type, браузер получает данные о типе загружаемого файла самостоятельно.

Синтаксис

<object type="MIME-тип">...</object>

Значения

Имя MIME-типа в любом регистре.

Значение по умолчанию

Нет.


Атрибут vspace

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Для любого объекта можно задать невидимые отступы по горизонтали и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально при обтекании объекта текстом, в этом случае необходимо вокруг него добавить пустое пространство.

Синтаксис

<object vspace="отступ по вертикали">...</object>

Значения

Любое целое положительное число в пикселах.

Значение по умолчанию

0


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут height устанавливает высоту объекта, а width — его ширину. В заданные размеры входит не только само изображение, например в случае воспроизведения видеофайла, но и панель управления им, включая кнопки проигрывания, паузы, остановки и т.д. По этой причине на размер отображаемого объекта влияет тип файла и применяемый плагин.

Если используется процентная запись, то размеры объекта вычисляются относительно родительского элемента — контейнера, где находится тег <object>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что объект будет занимать всю доступную ширину веб-страницы.

Синтаксис

<object width="ширина">...</object>

Обязательный атрибут

Да.

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Нет.


Тег <ol>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Синтаксис

<ol>
  <li>элемент нумерованного списка</li>
  <li>элемент нумерованного списка</li>
</ol>

Атрибуты

type
Устанавливает вид маркера списка.
reversed
Нумерация в списке становится по убыванию (3,2,1).
start
Задаёт число, с которого будет начинаться нумерованный список.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OL</title>
 </head>
 <body>

  <ol>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ol>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид маркированного списка в браузере


Атрибут reversed

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 18.0+ |  | 5.2+ |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Меняет нумерацию в списке на обратный порядок, вместо 1,2,3 будет выводиться 3,2,1.

Синтаксис

<ol reversed>
 ...
</ol>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег ol, атрибут reversed</title>
 </head>
 <body>
  <ol reversed>
   <li>Декабрь</li>
   <li>Ноябрь</li>
   <li>Октябрь</li>
   <li>Сентябрь</li>
   <li>Август</li>
   <li>Июль</li>
   <li>Июнь</li>
   <li>Май</li>
   <li>Апрель</li>
   <li>Март</li>
   <li>Февраль</li>
   <li>Январь</li>
  </ol>
 </body>
</html>


Атрибут start

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут start устанавливает номер, с которого будет начинаться список. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами.

Синтаксис

<ol start="число">
 <li>Элемент списка</li>
</ol>

Значения

Любое целое число.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OL, атрибут start</title>
 </head>
 <body>

  <ol type="I" start="4">
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ol>

 </body>
</html>


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вид маркера.

Синтаксис

<ol type="A | a | I | i | 1">...</ol>

Значения

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры;
  • арабские цифры.

В табл. 1 приведены различные значения атрибута type тега <ol> и результат их применения.

Табл 1. Параметры нумерованного списка
Код Пример
<ol type="A"> ... </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type="a"> ... </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type="I"> ... </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type="i"> ... </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type="1"> ... </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Значение по умолчанию

1

Аналог CSS

list-style-type

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег OL, атрибут type</title>
 </head>
 <body>

  <ol type="a">
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ol>

 </body>
</html>


Тег <optgroup>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <optgroup> представляет собой контейнер, внутри которого располагаются теги <option> объединенные в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения.

Синтаксис

<select>
 <optgroup label="...">
  <option>...</option>
 </optgroup>
</select>

Атрибуты

disabled
Блокирует доступ к группе списка.
label
Текст, который будет входить в список в виде заголовка группы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTGROUP</title>
 </head>
 <body>

  <form action="handler.php">
   <p><select>
   <optgroup label="Цвет">
    <option value="c1">Апельсиновый</option>
    <option value="c2">Лимонный</option>
    <option value="c3">Персиковый</option>
   </optgroup>
   <optgroup label="Тон">
    <option value="s1">Светлый</option>
    <option value="s2">Нормальный</option>
    <option value="s3">Темный</option>
   </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>


Атрибут disabled

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Блокирует доступ к группе списка, при этом группа отображается другим цветом (обычно серым) и недоступна для выбора.

Синтаксис

HTML
<optgroup disabled>...</optgroup>
XHTML
<optgroup disabled="disabled">...</optgroup>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег optgroup, атрибут disabled</title>
 </head>
 <body>
  <form>
   <p><select>
    <optgroup label="Цвет">
     <option value="c1">Апельсиновый</option>
     <option value="c2">Лимонный</option>
     <option value="c3">Персиковый</option>
    </optgroup>
    <optgroup label="Тон" disabled>
     <option value="s1">Светлый</option>
     <option value="s2">Нормальный</option>
     <option value="s3">Темный</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Вид заблокированной группы в списке

Рис. 1. Вид заблокированной группы в списке


Атрибут label

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Текст, который будет входить в список в виде заголовка группы. Это обычная текстовая строка без всяких кодов HTML.

Синтаксис

<optgroup label="текст">...</optgroup>

Обязательный атрибут

Да.

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.


Тег <option>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <option> определяет отдельные пункты списка, создаваемого с помощью контейнера <select>. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определенный пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION</title>
 </head>
 <body>

  <form action="option1.php">
   <p><select size="3" name="hero">
    <option disabled>Выберите героя</option>
    <option value="t1" selected>Чебурашка</option>
    <option value="t2">Крокодил Гена</option>
    <option value="t3">Шапокляк</option>
    <option value="t4">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>


Атрибут disabled

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Блокирует элемент списка для его выбора.

Синтаксис

HTML
<option disabled>...</option>
XHTML
<option disabled="disabled">...</option>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.


Атрибут label

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 4.0+ | 2.0+ |  | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label.

Синтаксис

<option label="текст">...</option>

Значения

Любая текстовая строка заключенная в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег option, атрибут label</title>
  </head>
 <body>
  <form>
   <p>Кто написал полонез Огинского?</p>
   <select name="question">
    <option label="Бах" value="1">Иоганн Себастьян Бах</option>
    <option label="Бетховен" value="2">Людвиг ван Бетховен</option>
    <option label="Шопен" value="3">Фредерик Шопен</option>
    <option label="Огинский" value="4">Михаил Клеофас Огинский</option>
   </select>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Вывод текста в списке

Рис. 1. Вывод текста в списке


Атрибут selected

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.

Синтаксис

HTML
<option selected>...</option>
XHTML
<option selected="selected">...</option>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION, атрибут selected</title>
 </head>
 <body>

  <form action="option1.php">
   <p><select name="hero">
   <option>Выберите героя</option>
   <option value="t1">Чебурашка</option>
   <option value="t2">Крокодил Гена</option>
   <option value="t3">Шапокляк</option>
   <option selected value="t4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>


Атрибут value

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. Также атрибут value применяется для получения значений данных через скрипты.

Синтаксис

<option value="значение">...</option>

Значения

Любая текстовая строка заключенная в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION, атрибут value</title>
  <script>
    function dataSelect(f) {
     n = f.hero.selectedIndex
     if(n) alert("Выбран герой: " + f.hero.options[n].value)
    }
  </script>
 </head>
 <body>

  <form action="option1.php">
   <p><select name="hero">
   <option>Выберите героя</option>
   <option value="Чебурашка">Чебурашка</option>
   <option value="Крокодил Гена">Крокодил Гена</option>
   <option value="Шапокляк">Шапокляк</option>
   <option value="Крыса Лариса">Крыса Лариса</option>
   </select>
   <input type="button" value="OK" onClick="dataSelect(this.form)"></p>
  </form>

 </body>
</html>


Тег <output>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 10.0+ | 9.6+ | 5.1+ | 4.0+ | 4.0+ | 2.1+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет область в которую выводится информация, преимущественно с помощью скриптов.

Синтаксис

<output>
</output>

Атрибуты

for
Определяет идентификатор одного и более элементов для связывания с тегом <output>.
form
Задает имя формы, которой принадлежит область для вывода.
name
Задает уникальное имя элемента.

Закрывающий тег

Обязателен.

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>output</title>
 </head>
 <body>
  <form oninput="result.value=(cm.value/2.54).toFixed(2)">
    <p>Введите длину в сантиметрах:
    <input type="number" name="cm" autofocus></p>
    <p>Длина в дюймах: <output name="result">0</output></p>
  </form>
 </body>
</html>

Результат примера в браузере Opera показа на рис. 1.

Использование тега <output>

Рис. 1. Использование тега <output>

Браузеры

Хотя IE 10 поддерживает данный тег, но не понимает переменную name.value. Для обращения к значению полей формы можно использовать document.getElementById('id').value


Тег <p>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Синтаксис

<p>Текст</p>

Атрибуты

align
Определяет выравнивание текста.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег P</title>
 </head>
 <body>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выравнивание блока текста по краю.

Синтаксис

<p align="left | center | right | justify">...</p>

Значения

left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег P, атрибут align</title>
 </head>
 <body>

  <p align="justify">Duis te feugifacilisi. Duis autem dolor in
  hendrerit in vulputate
  velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
  praesent luptatum zzril delenit au gue duis dolore te feugat nulla
  facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
  ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.
  Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en
  commodo consequat.</p>

 </body>
</html>


Тег <param>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <param> предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов <applet> или <object>. Такой подход позволяет прямо в коде HTML-документа изменять характеристики апплета без его дополнительной компиляции. Количество одновременно используемых тегов <param> может быть больше одного и для каждого из них задается пара «имя/значение» через атрибуты name и value.

Апплетом называется программа, которая выполняется в составе браузера или под управлением специальной программы для ее просмотра. Апплет, как правило, пишется на языке Java, поэтому часто можно встретить сочетание «Java-апплет».

Синтаксис

HTML
<param name="имя" value="значение">
XHTML
<param name="имя" value="значение" />

Атрибуты

name
Имя параметра.
type
MIME-тип объекта.
value
Значение параметра.
valuetype
Тип значения параметра.

Закрывающий тег

Не требуется.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Тег PARAM</title>
  </head>
  <body>

   <p><object classid="animation.class" width="500" height="200">
    <param name="bgcolor" value="#000000">
    <param name="delay" value="1000">
    <param name="loop" value="5">
   </object></p>

  </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет уникальное имя параметра. Это имя должно быть программно заложено в код апплета или объекта.

Синтаксис

HTML
<param name="имя">
XHTML
<param name="имя" />

Обязательный атрибут

Да.

Значения

В качестве имени используется набор символов, включая числа и буквы.

Значение по умолчанию

Нет.


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут type позволяет установить MIME-тип содержимого тегов <object> или <applet>. В большинстве случаев этот атрибут не требуется, так как браузер сам определяет тип на основе расширения файла или заголовка отправляемого сервером.

Синтаксис

HTML
<param type="MIME-тип">
XHTML
<param type="MIME-тип" />

Значения

Имя MIME-типа в любом регистре.

Значение по умолчанию

Нет.


Атрибут value

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает значение. Этот атрибут не является обязательным, поскольку для апплета или объекта вполне может быть достаточно одного имени, задаваемым атрибутом name.

Синтаксис

HTML
<param name="..." value="значение">
XHTML
<param name="..." value="значение" />

Значения

В качестве значения может использоваться строка или число.

Значение по умолчанию

Нет.


Атрибут valuetype

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут valuetype обеспечивает механизм определения типа данных передаваемых родительскому объекту через атрибут value.

Синтаксис

HTML
<param valuetype="data | object | ref">
XHTML
<param valuetype="data | object | ref" />

Значения

data
Значение атрибута является строкой.
object
Идентификатор объекта на странице, который задается через атрибут id.
ref
Значением атрибута выступает URL.

Значение по умолчанию

data

Пример

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег PARAM, атрибут valuetype</title>
 </head>
 <body>
  <p><object width="400" height="320">
   <param name="src" value="video/snowman.mp4" valuetype="ref" type="video/mp4" />
  </object></p>
 </body>
</html>


Тег <plaintext>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <plaintext> отображает содержимое контейнера «как есть». Пока тег <plaintext> не закрыт, все теги внутри него отображаются как обычный текст. Несмотря на то, что все браузеры поддерживают этот тег, он не входит в спецификацию HTML и его использование осуждается.

Синтаксис

<plaintext>Текст</plaintext>

Закрывающий тег

Не обязателен.

Атрибуты

Нет.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег PLAINTEXT</title>
 </head>
 <body>
  <p>Пример программы</p>
  <plaintext>
   <h1>Демонстрация метода Подборского</h1>
   while (<>) {
     $org=$_;
     s/\\["']//g;
     s/\/\/[^:].*//;
     s/\/\*.*\*\///g;
     if ($comment == 1) {
       if (s/.*\*\///) {
         $comment = 0;
       }
       else {
         next;
       }
     }
     if (s/\/\*.*//) {
       $comment = 1;
     }
     if (/^\s*#/) {
       next;
     }
   }</plaintext>
 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <plaintext>

Все браузеры игнорируют закрывающий тег и отображают его в виде текста. Это можно заметить на рис. 1, где показан результат выполнения кода в браузере. Тег <plaintext> действует до конца кода веб-страницы, включая закрывающие теги </body> и </html>.


Тег <pre>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <plaintext>, использование которого осуждается в HTML 4, внутри контейнера <pre> допустимо применять любые теги кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.

Синтаксис

<pre>Текст</pre>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег PRE</title>
 </head>
 <body>
  <pre>
     -                -----
     -----           |-----
    ||----|          ----||
    ||-----         -----||
    ||-----|       |-----||
    || -----       ------||
    ||- ----|     |------||
    ||---||--     -------||
    ||--|| --|   |-------||
    || -|| |--   --- - --||
    || -||  --|-|--| - ---|
    |---||  |-----| |-----|
    |---||   |----  |-----|
    |----|    ---   |-----|
    |-----          ------|
 </pre>
</body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <pre>


Тег <progress>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 6.0+ | 11.0+ | 5.2+ | 6.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.

Синтаксис

<progress value="<число>" max="<число>">
Текст
</progress>

Атрибуты

value
Текущее значение прогресса.
max
Максимальное значение прогресса.

Закрывающий тег

Обязателен.

Пример

HTML 5IE 10CrOpSa 5.2Fx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>progress</title>
 </head>
 <body>
  <p>Пожалуйста, подождите, фотографии загружаются.</p>
  <progress max="100" value="25">
    Загружено на <span id="value">25</span>%
  </progress>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Использование тега progress

Использование тега <progress>


Тег <q>

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 7.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<q>Текст</q>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег Q</title>
  <style>
   q {
    font-family: Times, serif; /* Шрифт с засечками */
    font-style: italic; /* Курсивное начертание текста */
    color: #008; /* Цвет текста */
   }
  </style>
 </head>
 <body>

  <p>Станислав Лец утверждал: <q>Чаще всего выход там, где был
    вход</q>.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <q>

В каждом языке существуют свои традиции для обозначения кавычек, в русской типографике, например, применяются кавычки вида «...» или „...“. Для изменения типа кавычек используется стилевое свойство quotes.

Браузеры

Браузер Internet Explorer до версии 7 включительно, хотя и понимает тег <q>, но кавычки не ставит. Остальные браузеры кавычки добавляют корректно.


Тег <rp>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 5.0+ |  | 5.0+ |  |  | 2.1+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>. В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти до или после тега <rt>.

Синтаксис

<ruby>
 текст
 <rp>текст</rp><rt>аннотация</rt><rp>текст</rp>
</ruby>

Атрибуты

Нет.

Закрывающий тег

Не обязателен, если идет последним.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>rp</title>
 </head>
 <body>
  <p>
   <ruby>
    ? <rp>(</rp><rt>zi</rt><rp>)</rp>
   </ruby>
  </p>
 </body>
</html>


Тег <rt>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 5.0+ |  | 5.0+ |  |  | 2.1+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <rt> добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом.

Такая форма записи преимущественно используется для азиатских языков вроде китайского или японского, но также может применяться для других языков, если требуется написать один текст над другим.

Синтаксис

<ruby>
 текст
 <rt>аннотация</rt>
</ruby>

Атрибуты

Нет.

Закрывающий тег

Не обязателен, если идет последним.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>rt</title>
  <style>
   .date { font-size: 1.5em; }
   .date ruby { background: #0078c9; color: #fff; }
   .date rt { background: #a0dae8; color: #000; padding: 2px; }
  </style>
 </head>
 <body>
  <p class="date">
   <ruby>
    23<rt>ноябрь</rt></ruby>
  </p>
 </body>
</html>

Результат примера показан на рис. 1.

Положение текста, заданное с помощью тега <rt>

Рис. 1. Положение текста, заданное с помощью тега <rt>


Тег <ruby>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 5.0+ |  | 5.0+ |  |  | 2.1+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <ruby> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.

Сам тег <ruby> выступает контейнером для тега <rt>, он и формирует аннотацию к тексту, после которого идет; а также <rp>, этот тег предназначен для браузеров, которые не поддерживают <ruby>.

Название тега происходит от слова «рубин», которым в типографии обозначается небольшой шрифт.

Синтаксис

<ruby>
 текст
 <rt>аннотация</rt>
</ruby>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ruby</title>
  <style>
   p:lang(zh-CN) {
    font-size: 2em;
   }
  </style>
 </head>
 <body>
  <p lang="zh-CN">
   <ruby>
    ?<rt>han</rt>
    ?<rt>zi</rt>
   </ruby>
  </p>
 </body>
</html>

Результат примера показан на рис. 1.

Иероглифы, оформленные с помощью тега <ruby>

Рис. 1. Иероглифы, оформленные с помощью тега <ruby>

Браузеры

Браузеры, которые не поддерживают этот тег, отобразят текст рядом по горизонтали и без изменения его размеров (рис. 2).

Вид текста в браузерах, не поддерживающих тег <ruby>

Рис. 2. Вид текста в браузерах, не поддерживающих тег <ruby>


Тег <s>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <s> отображает текст как перечеркнутый. Этот тег аналогичен тегу <strike>, но в отличие от него имеет сокращенную форму записи подобно тегам <b>, <i> и <u>. Взамен этого тега рекомендуется использовать стили.

Синтаксис

<s>Текст</s>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Аналог CSS

text-decoration

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <title>Тег S</title>
  <meta charset="utf-8">
 </head>
 <body>

  <p><b>Список должников</b></p>
  <p><s>Чебурашка</s></p>
  <p><s>Крокодил Гена</s></p>
  <p>Шапокляк</p>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью тега <s>


Тег <samp>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <samp> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.

Синтаксис

<samp>Текст</samp>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SAMP</title>
  <style>
   code {
    color: green; /* Цвет текста */
   }
   samp {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>

  <p>Проверка, поддерживает браузер JavaScript 1.3 или нет.</p>
  <p><code>
   &lt;script language=&quot;JavaScript1.3&quot;&gt; JS13 = 1;
    &lt;/script&gt;<Br>
   &lt;script language=&quot;JavaScript&quot;&gt;<Br>
   if (window.JS13) document.write(&quot;Ваш браузер поддерживает JavaScript
   1.3&quot;);<Br>
   &lt;/script&gt;
  </code></p>
  <p>В результате выполнения скрипта вы увидите текст <samp>Ваш
    браузер поддерживает JavaScript 1.3</samp>, в том случае, если браузер
    работает с версией 1.3.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тегов <code> и <samp>


Тег <script>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Синтаксис

<script type="тип">
  ...
</script>
<script type="тип" src="URL"></script>

Атрибуты

defer
Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
language
Устанавливает язык программирования на котором написан скрипт.
src
Адрес скрипта из внешнего файла для импорта в текущий документ.
type
Определяет тип содержимого тега <script>.

Закрывающий тег

Обязателен.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег SCRIPT</title>
 </head>
 <body>
  <script type="text/javascript">
    document.write ('<table width="100%" border="1">');
    for (i=1; i<6; i++) {
      document.writeln("<tr>");
      for (j=1; j<6; j++) document.write("<td>" + i + j + "<\/td>");
      document.writeln("<\/tr>");
    }
    document.write ("<\/table> ");
  </script>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат работы скрипта

Рис. 1. Результат работы скрипта

В данном примере с помощью скрипта выводится таблица, состоящая из пяти строк и столбцов, которая заполняется числами.

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SCRIPT</title>
  <script>
  function popup() {
   document.getElementById('welcome').innerHTML = 'Добро пожаловать!';
  }
  </script>
 </head>
 <body onload="popup()">
  <div id="welcome"></div>
 </body>
</html>

Примечание

В HTML5 атрибут type можно опустить, он является необязательным и принимает значение text/javascript, если не указан явно. В предыдущих версиях HTML атрибут type необходим.


Атрибут defer

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.

Синтаксис

HTML
<script defer>...</script>
XHTML
<script defer="defer">...</script>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SCRIPT, атрибут defer</title>
  <script defer>
    document.forms[0].textField.value = 17;
  </script>
 </head>
 <body>

  <form action="handler.php">
   <p>Введите ваш возраст</p>
   <p><input type="text" name="textField"></p>
  </form>

 </body>
</html>

В скрипте данного примера значение текстового поля с именем textField приравнивается 17. Однако при запуске скрипта форма еще не инициализирована, поэтому требуется использовать атрибут defer. Без него будет выведена ошибка.

Браузеры

В Firefox 3.6 и старше атрибут defer игнорируется, если у тега <script> не указан атрибут src. В Firefox 3.5 поведение другое и defer работает даже для встроенных скриптов.


Атрибут language

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут language указывает язык написания скрипта. Данный атрибут осуждается, а вместо него следует применять type, который указывает MIME-тип для определенного языка.

Синтаксис

<script language="JavaScript | JScript | VBS | VBScript">...</script>

Значения

Атрибут language не чувствителен к регистру и может принимать одно из четырех значений.

JavaScript
язык программирования JavaScript. К этому значению часто еще присоединяют номер версии, например — JavaScript1.3.
JScript
Разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.
VBS
VBScript
Язык программирования VBScript основанный на Visual Basic. Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer.

Значение по умолчанию

JavaScript

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег SCRIPT, атрибут language</title>
  <script type="text/vbscript" language="VBScript"> VB = 1 </script>
  <script type="text/javascript" language="JavaScript"> JS = 1; </script>
  <script type="text/javascript" language="JavaScript1.1"> JS11 = 1; </script>
  <script type="text/javascript" language="JavaScript1.2"> JS12 = 1; </script>
  <script type="text/javascript" language="JavaScript1.3"> JS13 = 1; </script>
  <script type="text/javascript" language="JavaScript1.4"> JS14 = 1; </script>
  <script type="text/javascript" language="JavaScript1.5"> JS15 = 1; </script>
  <script type="text/javascript" language="JavaScript">
    document.write("<b>Поддерживаемые языки:<\/b><br>");
    if(window.JS) document.write("JavaScript<br>");
    if(window.JS11) document.write("JavaScript 1.1<br>");
    if(window.JS12) document.write("JavaScript 1.2<br>");
    if(window.JS13) document.write("JavaScript 1.3<br>");
    if(window.JS14) document.write("JavaScript 1.4<br>");
    if(window.JS15) document.write("JavaScript 1.5<br>");
    if(window.VB) document.write("Visual Basic<br>");
  </script>
 </head>
 <body>

 </body>
</html>


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Импортирует файл со скриптами из внешнего файла. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ. Файлы со скриптами JavaScript обычно имеют расширение js и могут размещаться в любом доступном месте.

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

Синтаксис

<script src="URL">...</script>

Значения

В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=*quot;utf-8">
  <title>Тег SCRIPT, атрибут src</title>
  <script src="/scripts/browser.js"></script>
 </head>
 <body>
  <p>...</p>
 </body>
</html>


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает тип MIME для определенного языка.

Синтаксис

<script type="MIME-тип">...</script>

Обязательный атрибут

В HTML4.01 обязателен, в HTML5 нет.

Значения

Атрибут type не чувствителен к регистру и принимает следующие значения:

text/javascript
Для языка программирования JavaScript.
text/vbscript
Для языка VBScript.

Значение по умолчанию

text/javascript


Тег <section>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 6.0+ | 10.6+ | 5.0+ | 4.0+ | 2.2+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Допускается вкладывать один тег <section> внутрь другого.

Синтаксис

<section>
</section>

Атрибуты

Для этого тега доступны глобальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>section</title>
 </head>
 <body>
  <section>
   <h1>Съёмки фильма Полипропилен</h1>
   <p>История о том, как снимали фильм, где герои отдыхали на пляже,
   потом пришёл антагонист, избил протагонистов, сбросил их в бассейн,
   и что из этого получилось.</p>
  </section>
  <section>
   <h1>Хороший язык</h1>
   <p>История о том, как проходила студия изучения языка эсперанто,
   в то время, как над ней, на веранде велась студия приколистов,
   где травились анекдоты, и что из этого получилось.</p>
  </section>
 </body>
</html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <section>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору SECTION.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.


Тег <select>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Список множественного выбора Раскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey
Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.
tabindex
Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>

  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут accesskey позволяет перейти к списку с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

<select accesskey="c">
...
</select>

Обязательный атрибут

Нет.

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.


Атрибут autofocus

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ | 4.0+ | 4.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут autofocus устанавливает, что список получает фокус после загрузки страницы, при этом список становится доступным для выбора пунктов, например, с помощью клавиатуры.

Синтаксис

<select autofocus>
...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример

HTML5IECrOpSaFx 6

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег select, атрибут autofocus</title>
 </head>
 <body>
  <form>
   <select name="num" autofocus>
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
    <option value="4">cinco</option>
   </select>
  </form>
 </body>
</html>


Атрибут disabled

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Блокирует доступ и изменение элементов списка. Блокированный список не может получить фокус через курсор или клавиатуру, быть изменен, значение такого списка не передается на сервер.

Синтаксис

HTML
<select disabled>...</select>
XHTML
<select disabled="disabled">...</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT, атрибут disabled</title>
 </head>
 <body>

  <form action="handler.php">
   <p><select disabled name="hero">
   <option selected>Выберите героя</option>
   <option value="t1">Чебурашка</option>
   <option value="t2">Крокодил Гена</option>
   <option value="t3">Шапокляк</option>
   <option value="t4">Крыса Лариса</option>
   </select></p>
  </form>

 </body>
</html>


Атрибут form

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ |  | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами <form>.

Синтаксис

 <select form="идентификатор">...</select>

Значения

Идентификатор формы (значение атрибута id тега <form>).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег select, атрибут form</title>
 </head>
 <body>
  <form id="data" action="handler.php">
  </form>
  <p><select name="num" form="data">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
    <option value="4">cinco</option>
  </select></p>
  <p><input type="submit" form="data" value="Отправить"></p>
 </body>
</html>


Атрибут multiple

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера. При size="1" Firefox устанавливает высоту списка равной одному пункту, Safari и Chrome игнорируют size, Opera превращает список в «крутилку».

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

Атрибут size отсутствует Атрибут size равен 1

Синтаксис

HTML
<select multiple>...</select>
XHTML
<select multiple="multiple">...</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT, атрибут multiple</title>
 </head>
 <body>

  <form action="handler.php">
    <p><select multiple size="1">
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
    </select></p>
  </form>

 </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения списка на сервере.

Синтаксис

<select name="имя">...</select>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <select> по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT, атрибут name</title>
  <script>
    function dataSelect(f) {
      n = f.hero.selectedIndex
      if(n) alert("Выбран герой: " + f.hero.options[n].value)
    }
  </script>
 </head>
 <body>

  <form action="handler.php">
   <p><select name="hero">
    <option>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select>
   <input type="button" value="OK" onClick="dataSelect(this.form)"></p>
  </form>

 </body>
</html>


Атрибут required

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ |  | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает список обязательным для выбора перед отправкой формы на сервер. Если пункт списка не выбран, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

<select required>
...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег select, атрибут required</title>
 </head>
 <body>
  <form>
   <p>Какое растение в списке вечнозелёное?</p>
   <p><select name="pregunta" required>
    <option></option>
    <option value="1">Ольха</option>
    <option value="2">Берёза</option>
    <option value="3">Бузина</option>
    <option value="4">Тис</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает высоту списка. Если значение атрибута size равно единице, то список превращается в раскрывающийся. При добавлении атрибута multiple к тегу <select> при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

<select size="число">...</select>

Значения

Любое положительное целое число.

Значение по умолчанию

Зависит от атрибута multiple. Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT, атрибут multiple</title>
 </head>
 <body>

  <form action="handler.php">
   <p><select size="1">
    <option selected>Выберите героя</option>
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
   </select></p>
  </form>

 </body>
</html>


Атрибут tabindex

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.

Синтаксис

<select tabindex="число">
...
</select>

Обязательный атрибут

Нет.

Значения

Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.

Значение по умолчанию

Нет.


Тег <small>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Допускается применение вложенных тегов <small>, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1.

На размер шрифта влияет не только заданный атрибут size тега <font>, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили.

Синтаксис

<small>Текст</small>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-size

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег SMALL</title>
 </head>
 <body>
  <p><big><big>Большая кошка</big></big></p>
  <p>Из семейства кошачьих самая большая кошка это совсем не
  <small>лев</small>, как можно было бы подумать исходя из
  титула «царя зверей». А уссурийский тигр, вес которого
  достигает 300 килограмм. Тигр уступает по <small>размерам</small>
  и <small>весу</small> только другому наземному
  хищнику, белому медведю.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью тега <small>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SMALL</title>
 </head>
 <body>
  <footer>
  Звоните нам по телефону <small>(416)</small> 555-666-667
  </footer>
 </body>
</html>


Атрибут media

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 10.50+ | 3.1+ | 4.0+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет устройство, для которого будет воспроизводиться аудио или видеофайл.

Синтаксис

<audio>
 <source src="URL" media="all|braille|handheld|print|screen|speech|projection|tty|tv">
</audio>
<video>
 <source src="URL" media="all|braille|handheld|print|screen|speech|projection|tty|tv">
</video>

Значения

all
Все устройства.
braille
Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld
Наладонники, смартфоны, устройства с малой шириной экрана.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection
Проектор.
tty
Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана.
tv
Телевизор.

Значение по умолчанию

all

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>media</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls">
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="handheld">
  </video>
 </body>
</html>


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 10.50+ | 3.1+ | 4.0+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Адрес аудио или видеофайла, который будет воспроизводиться на веб-странице.

Синтаксис

<audio>
 <source src="URL">
</audio>
<video>
 <source src="URL">
</video>

Обязательный атрибут

Да.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 10.50+ | 3.1+ | 4.0+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает MIME-тип источника, а также аудио и видеокодек — так называется алгоритм хранения воспроизводимых данных.

Синтаксис

<audio>
 <source src="URL" type='MIME-тип; codecs="кодек"'>
</audio>
<video>
 <source src="URL" type='MIME-тип; codecs="кодек"'>
</video>

Значения

Вначале указывается MIME-тип, затем после точки с запятой пишется ключевое слово codecs и ему присваивается через запятую значение видео и аудиокодека. Если предполагается использовать только звук, видеокодек не пишется.

Значения для некоторых типов приведены в табл. 1.

Табл. 1. Значение атрибута type в зависимости от кодеков
Видеокодек | Аудиокодек | Контейнер | Атрибут type
 | Vorbis | Ogg | type='audio/ogg; codecs=vorbis'
 | Speex | Ogg | type='audio/ogg; codecs=speex'
 | FLAC | Ogg | type='audio/ogg; codecs=flac'
 | MP3 |  | type="audio/mpeg"
H.264 | AAC | MP4 | type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
Theora | Vorbis | Ogg | type='video/ogg; codecs="theora, vorbis"'
Theora | Speex | Ogg | type='video/ogg; codecs="theora, speex"'
Theora | Vorbis | Matroska | type='video/x-matroska; codecs="theora, vorbis"'
VP8 | Vorbis | WebM | type='video/webm; codecs="vp8, vorbis"'

Значение по умолчанию

Нет.


Тег <spacer>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 3.0 |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Создает пустое пространство по вертикали или горизонтали.

Синтаксис

<spacer height="<число>" width="<число>"></spacer>

Закрывающий тег

Не обязателен.

Атрибуты

align
Определяет выравнивание элемента относительно содержимого.
height
Устанавливает высоту пустого пространства в пикселах.
size
Число пикселов пустого пространства вставляемых горизонтально или вертикально, в зависимости от значения атрибута type — horizontal или vertical.
type
Указывает тип элемента. Возможные значения block | horizontal | vertical.
width
Устанавливает ширину пустого пространства в пикселах.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег SPACER</title>
 </head>
 <body>
  <p>Огонь<spacer width="50" type="block">
   Вода<spacer width="50" type="block">
   Медные трубы</p></body>
</html>


Тег <span>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Синтаксис

<span>...</span>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SPAN</title>
  <style>
    body {
     font-family: Arial, sans-serif; /* Рубленый шрифт */
    }
    .letter {
     color: red; /* Красный цвет символов */
     font-size: 200%; /* Размер шрифта в процентах */
     font-family: serif; /* Шрифт с засечками */
     position: relative; /* Относительное позиционирование */
     top: 5px; /* Сдвиг сверху */
    }
  </style>
 </head>
 <body>

  <p><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру.
  Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется
  действиями неразумных людей.</p>
  <p>Бернард Шоу</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <span> и стилей


Тег <strike>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <strike> отображает текст как перечеркнутый. Этот тег аналогичен тегу <s>, который имеет сокращенную форму записи подобно тегам <b>, <i> и <u>. В любом случае, теги <strike> и <s> осуждаются спецификацией HTML, взамен них рекомендуется использовать стили.

Синтаксис

<strike>Текст</strike>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Аналог CSS

text-decoration

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 использование <strike> запрещено.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег STRIKE</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

  <p><b>Список должников</b></p>
  <p><strike>Чебурашка</strike><br>
   <strike>Крокодил Гена</strike><br>
     Шапокляк</p>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью тега <strike>


Тег <strong>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Синтаксис

<strong>Текст</strong>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-weight

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег STRONG</title>
 </head>
 <body>

  <p><strong>Lorem ipsum dolor sit amet</strong></p>
  <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit,
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
  volutpat. <strong>Ut wisis</strong> enim ad minim veniam, quis nostrud exerci
  tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид акцентированного текста в тексте

Примечание

Следует отметить, что теги <b> и <strong>, также как <i> и <em>, несмотря на сходный результат, не совсем эквивалентны и заменяемы. Первый тег <b> — относится к тегам физической разметки и устанавливает жирный текст, а тег <strong> — является тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.


Тег <style>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.

Синтаксис

<head>
  <style type="text/css">
   ...
  </style>
</head>

Атрибуты

media
Определяет устройство вывода, для работы с которым предназначена таблица стилей.
type
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег STYLE</title>
  <style type="text/css">
   h1 {
    font-size: 120%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333366;
   }
  </style>
 </head>
 <body>

   <H1>Hello, world!</H1>

 </body>
</html>

Результат примера показан на рис. 1. Обратие внимание, что цвет текста и начертание шрифта в теге <H1> изменились.

Рис. 1. Вид заголовка после применения стилей


Атрибут media

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства — от карманного компьютера до принтера можно определить свой собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы.

Синтаксис

<style media="all|braille|handheld|print|screen|speech|projection|tty|tv">
 ...
</style>

Значения

all
Все устройства.
braille
Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld
Наладонники, смартфоны, устройства с малой шириной экрана.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection
Проектор.
tty
Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.
tv
Телевизор.

Можно устанавливать сразу несколько значений, перечисляя их через запятую.

Значение по умолчанию

screen

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег STYLE, атрибут media</title>
  <style media="screen">
    .window {
     background: #333;
     border: 1px solid red;
     font-size: 90%;
     color: #fc0;
     padding: 10px;
    }
  </style>
  <style media="print">
    .window {
     border: 1px solid black;
     font-family: Arial;
     font-size: 90%;
     font-weight: bold;
     color: black;
     padding: 10px
    }
  </style>
 </head>
 <body>

   <div class="window">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>

 </body>
</html>

Результат данного примера продемонстрирован на рис. 1, где применяется стиль с атрибутом media="screen". На рис. 2 показана та же страница, но при этом уже действует стиль для печати, заданный атрибутом media="print". Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать.

Рис. 1. Страница со стилем для просмотра на мониторе

Рис. 2. Страница со стилем для вывода на печать


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого атрибута, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера <style>.

Синтаксис

<style type="text/css">...</style>

Значения

В качестве значения используется MIME-тип — text/css.

Значение по умолчанию

text/css

Обязательный атрибут

Обязателен в HTML4 и XHTML, не нужен в HTML5.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег STYLE, атрибут type</title>
  <style type="text/css">
    a:link { color: #003366; }
    a:visited { color: #660066; }
    a:hover { color: #800000; }
    a:active { color: #FF0000; }
  </style>
 </head>
 <body>

   <p><a href="lorem.html">Lorem ipsum dolor sit amet</a></p>

 </body>
</html>


Тег <sub>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Синтаксис

<sub>Текст</sub>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

vertical-align

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SUB</title>
 </head>
 <body>

  <p>Под действием гидроксиламина альдегиды превращаются в оксимы:
   СН<sub>3</sub>СНО + NH<sub>2</sub>OH =
   CH<sub>3</sub>C(=NOH)H + H<sub>2</sub>O</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <sub>


Тег <summary>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 12.0+ |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации. Тег <summary> должен идти первым внутри <details>.

Синтаксис

<details>
 <summary>Текст</summary>
</details>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>summary</title>
 </head>
 <body>
  <details>
   <summary>Информация об авторе</summary>
   <p>Бендер Родригез</p>
  </details>
 </body>
</html>


Тег <sup>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

Синтаксис

<sup>Текст</sup>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

vertical-align

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SUP</title>
 </head>
 <body>

  <p><b>Великая теорема Ферма</b></p>
  <p><i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup>
   = Z <sup><small>n</small></sup></i></p>
  <p>где n - целое число > 2</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <sup>


Тег <table>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Атрибуты

align
Определяет выравнивание таблицы.
background
Задает фоновый рисунок в таблице.
bgcolor
Цвет фона таблицы.
border
Толщина рамки в пикселах.
bordercolor
Цвет рамки.
cellpadding
Отступ от рамки до содержимого ячейки.
cellspacing
Расстояние между ячейками.
cols
Число колонок в таблице.
frame
Сообщает браузеру, как отображать границы вокруг таблицы.
height
Высота таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками.
summary
Краткое описание таблицы.
width
Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE</title>
 </head>
 <body>

  <table width="100%" border="0" cellspacing="0" cellpadding="4">
   <tr align="center" bgcolor="#999999">
    <td colspan="3" style="font-size: 160%; font-family: sans-serif">Lorem
     ipsum dolor sit amet...</td>
   </tr>
   <tr>
    <td><img src="images/title.png" alt="" width="150" height="70"
      border="0" style="background: #CC9"></td>
    <td align="right"><img src="images/logo.png" alt="" width="70"
      height="70" style="background: #CF9"></td>
    <td>
      <a href="lorem.html">Lorem</a><Br>
      <a href="lorem.html">Ipsum</a><Br>
      <a href="lorem.html">Dolar</a>
    </td>
   </tr>
   <tr>
    <td colspan="3">
     <table  width="100%" border="0" cellpadding="0"
       cellspacing="0" bgcolor="#333333">
       <tr><td>&nbsp;</td></tr>
     </table>
    </td>
   </tr>
  </table>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование таблиц для создания макета страницы


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание таблицы по краю окна браузера.

Синтаксис

<table align="left | center | right">...</table>

Значения

left
Выравнивание таблицы по левому краю.
center
Выравнивание таблицы по центру.
right
Выравнивание по правому краю.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут align</title>
 </head>
 <body>
  <table align="center" width="600" bgcolor="#ffcc00">
   <tr>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут background

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

<table background="URL">...</table>

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background-image

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут background</title>
 </head>
 <body>

   <table background="images/snow.gif" width="600">
    <tr>
     <td> ... </td>
    </tr>
   </table>

 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона таблицы. Можно использовать этот атрибут совместно с background, подобрав цвет фона близкий к фоновому рисунку

Синтаксис

<table bgcolor="цвет">...</table>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS

background-color

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут bgcolor</title>
 </head>
 <body>

  <table bgcolor="#ffcc00" width="600">
   <tr>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут border

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется атрибут bordercolor тега <table>, то вид рамки меняется в зависимости от браузера. Когда в теге <table> используется атрибут border без значений (<table border>), то браузер отображает рамку толщиной один пиксел.

Синтаксис

<table border="толщина">...</table>

Значения

Любое положительное целое число.

Значение по умолчанию

0

Аналог CSS

border

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут border</title>
 </head>
 <body>

  <table cellspacing="2" border="1" cellpadding="5" width="600">
   <tr>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут bordercolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление атрибутов bordercolor и border к тегу <table> создают однотонную линию.

Синтаксис

<table bordercolor="цвет">...</table>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и операционной системы.

Аналог CSS

border-color

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут bordercolor</title>
 </head>
 <body>

  <table bordercolor="red" border="2" width="100%">
   <tr>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут cellpadding

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

Синтаксис

<table cellpadding="значение">...</table>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

0

Аналог CSS

padding

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут cellpadding</title>
 </head>
 <body>

  <table cellpadding="7" border="2" width="100%">
   <tr>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут cellspacing

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет.

Синтаксис

<table cellspacing="значение">...</table>

Значения

Любое целое положительное число.

Значение по умолчанию

0 (когда нет атрибута border);

2 (когда атрибут border установлен).

Аналог CSS

border-spacing

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут cellspacing</title>
 </head>
 <body>

  <table cellspacing="5" cellpadding="10" border="1" width="100%">
   <tr>
    <td> ... </td>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут cols

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.

Синтаксис

<table cols="число">...</table>

Значения

Любое целое положительное число.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут cols</title>
 </head>
 <body>

  <table width="700" cellspacing="0" border="1" cols="10">
   <tr>
    <td>&nbsp;</td>
    <td>1995</td><td>1996</td><td>1997</td><td>1998</td>
    <td>1999</td><td>2000</td><td>2001</td><td>2002</td>
    <td>2003</td>
   </tr>
   <tr>
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>

 </body>
</html>


Атрибут frame

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру, как отображать границы вокруг таблицы. Толщина границы указывается с помощью атрибута border.

Синтаксис

<table frame="значение">...</table>

Значения

void
Не отрисовывать границы.
border
Граница вокруг таблицы.
above
Граница по верхнему краю таблицы.
below
Граница снизу таблицы.
hsides
Добавить только горизонтальные границы (сверху и снизу таблицы).
vsides
Рисовать только вертикальные границы (слева и справа от таблицы).
rhs
Граница только на правой стороне таблицы.
lhs
Граница только на левой стороне таблицы.

Значение по умолчанию

border

Аналог CSS

border


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает высоту таблицы. В спецификации HTML 4 этого атрибута нет, однако браузеры в большинстве случаев понимают его, если не установлен <!DOCTYPE>. В том случае, когда в документе задан <!DOCTYPE>, браузеры высоту таблицы, заданную через атрибут height, игнорируют.

Синтаксис

<table height="значение">...</table>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Высота вычисляется на основе содержимого таблицы.

Аналог CSS

height

Пример

HTML 4.01IECrOpSaFx

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут height</title>
 </head>
 <body>

   <table cellpadding="10" bgcolor="#ffcc00" align="center"
    width="50%" height="50%">
    <tr>
     <td> ... </td>
    </tr>
   </table>

 </body>
</html>


Атрибут rules

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру, где отображать границы между ячейками. Цвет границы указывается с помощью атрибута bordercolor, толщина внешней рамки таблицы — через атрибут border. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку; толщина таких линий составляет 1px.

Синтаксис

<table rules="значение">...</table>

Значения

all
Линия рисуется вокруг каждой ячейки таблицы.
groups
Линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>.
cols
Линия отображается между колонками.
none
Все границы скрываются.
rows
Граница рисуется между строками таблицы, созданых через тег <tr>.

Значение по умолчанию

none (если border="0");

all (если значение атрибута border отлично от нуля).

Аналог CSS

border

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут rules</title>
 </head>
 <body>

  <table cellspacing="0" cellpadding="10" rules="rows"
    border="1" width="80%">
   <tr>
    <td> ... </td>
    <td> ... </td>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут summary

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут summary предназначен для краткого описания таблицы или указания ее предназначения. В отличие от тега <caption> содержимое summary никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами.

Синтаксис

<table summary="текст">...</table>

Значения

Любой текст.

Значение по умолчанию

Нет.

Обязательный атрибут

Нет.

Пример

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег TABLE, атрибут summary</title>
 </head>
 <body>
  <table border="1" width="400" summary="Таблица умножения">
   <tr>
    <th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th>
    <th>7</th><th>8</th><th>9</th><th>10</th>
   </tr>
   <tr>
    <th>1</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
    <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
   <tr>
    <th>2</th><td>2</td><td>4</td><td>6</td><td>8</td><td>10</td>
    <td>12</td><td>14</td><td>16</td><td>18</td><td>20</td>
   </tr>
   <tr>
    <th>3</th><td>3</td><td>6</td><td>9</td><td>12</td><td>15</td>
    <td>18</td><td>21</td><td>24</td><td>27</td><td>30</td>
   </tr>
   <tr>
    <th>4</th><td>4</td><td>8</td><td>12</td><td>16</td><td>20</td>
    <td>24</td><td>28</td><td>32</td><td>36</td><td>40</td>
   </tr>
   <tr>
    <th>5</th><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td>
    <td>30</td><td>35</td><td>40</td><td>45</td><td>50</td>
   </tr>
   <tr>
    <th>6</th><td>6</td><td>12</td><td>18</td><td>24</td><td>30</td>
    <td>36</td><td>42</td><td>48</td><td>54</td><td>60</td>
   </tr>
   <tr>
    <th>7</th><td>7</td><td>14</td><td>21</td><td>28</td><td>35</td>
    <td>42</td><td>49</td><td>56</td><td>63</td><td>70</td>
   </tr>
   <tr>
    <th>8</th><td>8</td><td>16</td><td>24</td><td>32</td><td>40</td>
    <td>48</td><td>56</td><td>64</td><td>72</td><td>80</td>
   </tr>
   <tr>
    <th>9</th><td>9</td><td>18</td><td>27</td><td>36</td><td>45</td>
    <td>54</td><td>63</td><td>72</td><td>81</td><td>90</td>
   </tr>
   <tr>
    <th>10</th><td>10</td><td>20</td><td>30</td><td>40</td><td>50</td>
    <td>60</td><td>70</td><td>80</td><td>90</td><td>100</td>
   </tr>
 </table>
</body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

Синтаксис

<table width="значение">...</table>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Ширина вычисляется на основе содержимого таблицы.

Аналог CSS

width

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут width</title>
 </head>
 <body>

   <table cellpadding="10" border="1" width="80%">
    <tr>
     <td> ... </td>
    </tr>
   </table>

 </body>
</html>


Тег <tbody>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <tbody> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.

Допускается применять несколько тегов <tbody> внутри контейнера <table>. Доступны и другие виды группировок строк — <tfoot> и <thead>, ни один из них не должен перекрываться с элементом <tbody>.

Синтаксис

<table>
 <thead> .... </thead>
 <tfoot> ... </tfoot>
 <tbody>
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

Атрибуты

align
Определяет выравнивание текста в строке.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера <tbody>.
valign
Выравнивание содержимого ячеек по вертикали.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TBODY</title>
 </head>
 <body>

  <table width="600" border="1">
   <tbody align="right">
    <tr>
     <td>Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
   </tbody>
  </table>

 </body>
 </html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание по горизонтали содержимого строк ячеек, которые расположены внутри элемента <tbody>. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте атрибут align для тега <td> или <th>.

Синтаксис

<tbody align="left | center | right | justify">...</tbody>

Значения

left
Выравнивание по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TBODY, атрибут align</title>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0">
   <thead align="center" style="background:#fc0">
    <tr>
     <td>Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
   </thead>

   <tbody align="right">
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона ячеек, расположенных в контейнере <tbody>.

Синтаксис

<tbody bgcolor="цвет">...</tbody>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS

background-color

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TBODY, атрибут bgcolor</title>
 </head>
 <body>

   <table width="600" border="1" cellspacing="0"
    bordercolor="#333333">
    <thead align="center" bgcolor="#ffcc00">
     <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
     </tr>
    </thead>

    <tbody align="right" bgcolor="silver">
     <tr>
      <td>Ячейка 3</td>
      <td>Ячейка 4</td>
     </tr>
    </tbody>
   </table>

 </body>
</html>


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char заставляет выравниваться содержимое ячеек внутри <tbody> по заданному символу. Эта возможность может пригодиться для выравнивания колонки чисел по точке или запятой. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

<table>
 <thead> .... </thead>
 <tfoot> ... </tfoot>
 <tbody char="c" align="char">
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.

Пример

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег TBODY, атрибут char</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="5" width="300">
   <thead>
    <tr>
     <td>Год</td><td>Население, млн</td>
    </tr>
   </thead>
   <tbody align="char" char=",">
    <tr><td>1897</td><td>67,5 млн</td></tr>
    <tr><td>1914</td><td>89,9 млн</td></tr>
    <tr><td>1917</td><td>91,0 млн</td></tr>
    <tr><td>1926</td><td>92,7 млн</td></tr>
    <tr><td>1939</td><td>108,4 млн</td></tr>
    <tr><td>1959</td><td>117,2 млн</td></tr>
    <tr><td>1970</td><td>129,9 млн</td></tr>
    <tr><td>1979</td><td>137,4 млн</td></tr>
    <tr><td>1989</td><td>147,0 млн</td></tr>
    <tr><td>1996</td><td>148,3 млн</td></tr>
    <tr><td>2002</td><td>145,6 млн</td></tr>
    <tr><td>2006</td><td>142,8 млн</td></tr>
    <tr><td>2007</td><td>142,2 млн</td></tr>
    <tr><td>2008</td><td>142,0 млн</td></tr>
    <tr><td>2009</td><td>141,9 млн</td></tr>
    <tr><td>2010</td><td>141,93 млн</td></tr>
   </tbody>
  </table>
 </body>
</html>


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

<table>
 <thead> .... </thead>
 <tfoot> ... </tfoot>
 <tbody char="c" align="char" charoff="число">
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого ячеек в контейнере <tbody>. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

<tbody valign="top | middle | bottom | baseline">...</tbody>

Значения

top
Выравнивание содержимого ячеек по верхнему краю строки.
middle
Выравнивание по середине.
bottom
Выравнивание по нижнему краю.
baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек строки к одной линии.

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TBODY, атрибут valign</title>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0">
   <tbody align="right" valign="top">
    <tr>
     <td height="100">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td height="100">Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Тег <td>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Атрибуты

abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задает фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки с заголовком.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD</title>
 </head>
 <body>

  <table border="1" cellpadding="7" cellspacing="0">
   <tr>
     <td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>
   </tr>
   <tr>
     <td valign="top" align="center">Ячейка 2</td>
     <td width="98%" valign="top">Ячейка 3</td>
   </tr>
  </table>

 </body>
</html>


Атрибут abbr

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут abbr предназначен для краткого описания содержимого ячеек. Текст внутри abbr браузерами не отображается и предназначен в первую очередь для доступа людей к содержанию с помощью вспомогательных технологий вроде речевых браузеров. Значение представляет сокращенную версию текста внутри тега <td>. Хотя abbr никак не выводится, браузеры распознают этот атрибут и могут получить к нему доступ через скрипты.

Синтаксис

<td abbr="текст">...</td>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут abbr</title>
 </head>
 <body>
  <table border="1" cellpadding="4">
   <tr>
    <td abbr="Компания">Название производителя</td>
    <td abbr="Модель">Наименование модели</td>
    <td abbr="Год">Год выпуска</td>
   </tr>
   <tr>
    <td>Volkswagen</td>
    <td>Golf 2.8 GTi</td>
    <td>2007</td>
   </tr>
  </table>
 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание содержимого ячейки по горизонтали.

Синтаксис

<td align="left | center | right | justify | char">...</td>

Значения

left
Выравнивание содержимого ячейки по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).
char
Выравнивает по указанному символу.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут align</title>
 </head>
 <body>

  <table width="600" border="1">
   <tr>
    <td align="center">Ячейка 1</td>
    <td align="center">Ячейка 2</td>
   </tr>
  </table>

 </body>
</html>


Атрибут axis

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет группировать колонки или строки связанные между собой близкой информацией. В настоящее время браузеры не поддерживают атрибут axis, поэтому вопрос о том, как в действительности атрибут влияет на вид таблицы остается открытым.

Синтаксис

<table>
  <tr>
    <td axis="текст">...</td>
  </tr>
</table>

Значения

Любой текст, представляющий собой произвольное имя ячейки. Для связывания ячеек между собой значения атрибута axis должны совпадать.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут axis</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td axis="name">Имя</td>
    <td axis="name">Фамилия</td>
    <td axis="contact">Телефон</td>
    <td axis="contact">Адрес</td>
    <td>Номер комнаты</td>
   </tr>
   <tr>
    <td>Иван</td>
    <td>Пырьев</td>
    <td>555-94-32-95</td>
    <td>Улица Ассинизаторов, 69</td>
    <td>908Б</td>
   </tr>
  </table>
 </body>
</html>


Атрибут background

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

<td background="URL">...</td>

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background-image

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут background</title>
 </head>
 <body>

  <table width="600">
   <tr>
    <td background="images/snow.gif">Ячейка с фоновым рисунком</td>
   </tr>
  </table>

 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона ячейки.

Синтаксис

<td bgcolor="цвет">...</td>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS

background-color

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут bgcolor</title>
 </head>
 <body text="white">

   <table bgcolor="black" width="600">
    <tr>
     <td bgcolor="#ffcc00">Ячейка 1</td>
    </tr>
    <tr>
     <td>Ячейка 2</td>
    </tr>
   </table>

 </body>
</html>


Атрибут bordercolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен атрибут border с ненулевым значением у тега <table>.

Синтаксис

<td bordercolor="цвет">...</td>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и операционной системы.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут bordercolor</title>
 </head>
 <body>

  <table border="1" width="100%">
   <tr>
    <td bordercolor="red">Ячейка 1</td>
    <td>Ячейка 2</td>
   </tr>
  </table>

 </body>
</html>


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char позволяет выравнить содержимое ячейки по заданному символу. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

<table>
  <tr>
    <td align="char" char="c">...</td>
  </tr>
</table>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут char</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1" width="100%">
   <tr>
    <td>Срок размещения</td>
    <td>Ставка</td>
   </tr>
   <tr>
    <td>6 месяцев</td>
    <td char="%" align="char">9,00%</td>
   </tr>
   <tr>
    <td>1 год</td>
    <td char="%" align="char">5,00%</td>
   </tr>
   <tr>
    <td>2 года</td>
    <td char="%" align="char">4,50%</td>
   </tr>
  </table>
 </body>
</html>


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

<table>
  <tr>
    <td charoff="число">...</td>
  </tr>
</table>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0


Атрибут colspan

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью атрибута colspan.

Синтаксис

<td colspan="число">...</td>

Значения

Любое целое положительное число. Значение 0 распространяет ячейку на всю родительскую группу колонок, объединенную тегом <colgroup>. Значения выше 1000 считаются неправильными и устанавливаются в 1.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут colspan</title>
 </head>
 <body>

 <table width="200" border="1" align="center"
   cellpadding="4" cellspacing="0">
  <tr>
   <td colspan="2" bgcolor="#FBF0DB">Ячейка 1</td>
  </tr>
  <tr>
   <td>Ячейка 2</td>
   <td>Ячейка 3</td>
  </tr>
</table>

 </body>
</html>


Атрибут headers

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers не заметен.

Для связывания ячеек между собой одной ячейке в теге <td> или <th> задается атрибут id, а второй ячейке — атрибут headers со значением, совпадающим со значением id.

Синтаксис

<td id="идентификатор">...</td>
<td headers="идентификатор">...</td>

Значения

Один или несколько идентификаторов, разделенных между собой пробелом.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут headers</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td id="name">Имя</td>
    <td id="surname">Фамилия</td>
    <td id="tel">Телефон</td>
    <td id="address">Адрес</td>
    <td id="num">Номер комнаты</td>
   </tr>
   <tr>
    <td headers="name">Иван</td>
    <td headers="surname">Пырьев</td>
    <td headers="tel">555-94-32-95</td>
    <td headers="address">Улица Ассинизаторов, 69</td>
    <td headers="num">908Б</td>
   </tr>
  </table>
 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

Синтаксис

<td height="значение">...</td>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Высота вычисляется на основе содержимого ячейки.

Аналог CSS

height

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут height</title>
 </head>
 <body>

  <table cellpadding="10" bgcolor="#ffcc00" align="center" width="100%">
   <tr>
    <td height="50">Ячейка 1</td>
   </tr>
  </table>

 </body>
</html>


Атрибут nowrap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавление атрибута nowrap к тегу <td> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение атрибута nowrap осуждается.

Синтаксис

<td nowrap>...</td>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут nowrap не установлен.

Аналог CSS

white-space

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут nowrap</title>
 </head>
 <body>

  <table width="400">
   <tr>
    <td nowrap>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate
     velit esse molestie consequat, vel illum dolore eu feugiat nulla
     facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
     praesent luptatum zzril delenit au gue duis dolore te feugat nulla
     facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
     ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.
     Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en
     commodo consequat.</td>
   </tr>
  </table>

 </body>
</html>


Атрибут rowspan

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек

В приведенной на рис. 1 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью атрибута rowspan.

Синтаксис

<td rowspan="число">...</td>

Значения

Любое целое положительное число. Если значение установлено в 0, то ячейки объединяются до конца раздела таблицы (<thead>, <tbody> или <tfoot>) или самой таблицы. Максимально допустимое значение равно 65534.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут rowspan</title>
 </head>
 <body>

   <table width="200" border="1" align="center"
     cellpadding="4" cellspacing="0">
    <tr>
     <td rowspan="2" bgcolor="#FBF0DB">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
    </tr>
   </table>

 </body>
</html>


Атрибут scope

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут scope связывает между собой ячейки с заголовком и обычные ячейки. По своему действию напоминает атрибут headers, но используется для простых таблиц. Атрибут предназначен для экранных ридеров вроде речевых браузеров, в обычных браузерах результат добавления scope никак не заметен.

Синтаксис

<td scope="col | colgroup | row | rowgroup">...</td>

Значения

col
Ячейка заголовка установлена для колонки.
colgroup
Ячейка заголовка установлена для группы колонок.
row
Ячейка заголовка задана для строки.
rowgroup
Ячейка заголовка установлена для группы строк.

Значение colgroup применяется в таблице, в которой используется тег <colgroup> или при объединении ячеек с помощью атрибута colspan. Значение rowgroup требуется при объединении ячеек через атрибут rowspan.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут scope</title>
 </head>
 <body>
  <table border="1" width="300">
   <tr>
    <th></th>
    <th scope="col">Месяц</th>
    <th scope="col">Заработано</th>
   </tr>
   <tr>
    <td scope="row">1</td>
    <td>Январь</td>
    <td>152</td>
   </tr>
   <tr>
    <td scope="row">2</td>
    <td>Февраль</td>
    <td>176</td>
   </tr>
   <tr>
    <td scope="row">3</td>
    <td>Март</td>
    <td>244</td>
   </tr>
  </table>
 </body>
</html>


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

<td valign="top | middle | bottom | baseline">...</td>

Значения

top
Выравнивание содержимого ячейки по верхнему краю строки.
middle
Выравнивание по середине.
bottom
Выравнивание по нижнему краю.
baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут valign</title>
 </head>
 <body>

   <table width="60%" border="1">
    <tr>
     <td valign="top" height="200">Выравнивание по верхнему краю</td>
     <td valign="bottom">Выравнивание по нижнему краю</td>
    </tr>
   </table>

 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, атрибут width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

Синтаксис

<td width="значение">...</td>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Аналог CSS

width

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут width</title>
 </head>
 <body>

   <table cellpadding="10" border="1">
    <tr>
     <td width="20%">Ячейка 1</td>
     <td width="80%">Ячейка 2</td>
    </tr>
   </table>

 </body>
</html>


Тег <textarea>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

Синтаксис

<textarea атрибуты>
  текст
</textarea>

Атрибуты

accesskey
Переход к полю с помощью сочетания клавиш.
autofocus
Автоматическое получение фокуса.
cols
Ширина поля в символах.
disabled
Блокирует доступ и изменение элемента.
form
Связывает текстовое поле с формой по её идентификатору.
maxlength
Максимальное число введенных символов.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
placeholder
Указывает замещающийся текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
rows
Высота поля в строках текста.
tabindex
Порядок перехода между элементами при нажатии на клавишу Tab.
wrap
Параметры переноса строк.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег TEXTAREA</title>
 </head>
 <body>

  <form action="textarea1.php" method="post">
    <p><b>Введите ваш отзыв:</b></p>
    <p><textarea rows="10" cols="45" name="text"></textarea></p>
    <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут accesskey позволяет перейти к текстовому полю с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Синтаксис

<textarea cols="..." rows="..." accesskey="c"></textarea>

Обязательный атрибут

Нет.

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег TEXTAREA, атрибут accesskey</title>
 </head>
 <body>
  <p>Для перехода к текстовому полю используется горячая клавиша X.</p>
  <p><textarea accesskey="x" cols="50" rows="5"></textarea></p>
</body>
</html>


Атрибут autofocus

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ | 4.0+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Автоматически устанавливает фокус в текстовое поле. В таком поле можно сразу набирать текст без переключения курсора в текстовое поле.

Синтаксис

<textarea autofocus>
</textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут autofocus не установлен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут autofocus</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Напишите комментарий</p>
   <p><textarea rows="10" cols="20" autofocus></textarea></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут cols

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис

<textarea cols="число">
</textarea>

Обязательный атрибут

Обязателен в HTML4, не обязателен в HTML5.

Значения

Любое целое положительное число.

Значение по умолчанию

В HTML4 зависит от настроек браузера и операционной системы.

В HTML5 — 20.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TEXTAREA, атрибут cols</title>
 </head>
 <body>

  <form action="handler.php">
    <p><textarea rows="10" cols="20"></textarea></p>
  </form>

 </body>
</html>


Атрибут disabled

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Заблокированный в поле текст не передается на сервер.

Синтаксис

HTML
<textarea disabled></textarea>
XHTML
<textarea disabled="disabled"></textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег TEXTAREA, атрибут disabled</title>
 </head>
 <body>

  <form action="handler.php">
   <p><textarea rows="10" cols="20">Активное поле</textarea>
    <textarea rows="10" cols="20" disabled>Неактивное поле</textarea></p>
  </form>

 </body>
</html>


Атрибут form

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ |  | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Связывает текстовое поле с формой по её идентификатору. Такая связь необходима в случае, когда поле по каким-либо причинам располагается за пределами <form>.

Синтаксис

<textarea form="идентификатор">
</textarea>

Значения

Идентификатор формы (значение атрибута id тега <form>).

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут form</title>
 </head>
 <body>
  <form id="text"></form>
  <div>
   <p><textarea name="comment" placeholder="Комментарий"
      required form="text"></textarea></p>
   <p><input type="submit" value="Отправить" form="text"></p>
  </div>
 </body>
</html>


Атрибут maxlength

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ |  | 5.0+ | 4.0+ | 2.3+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис

<textarea maxlength="число">
</textarea>

Значения

Любое целое положительное число.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут maxlength</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Сообщение в твиттер</p>
   <p><textarea autofocus maxlength="140"></textarea></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут name

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет уникальное имя элемента <textarea>. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис

<textarea name="имя">
</textarea>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <textarea> по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег TEXTAREA, атрибут name</title>
  <script>
    function dataField(f) {
     alert("Вы ввели: " + f.comment.value);
    }
  </script>
 </head>
 <body>

   <form action="handler.php">
    <p><b>Введите комментарий</b></p>
    <p><textarea rows="10" cols="20" name="comment"></textarea></p>
    <p><input type="button" value="ОК" onClick="dataField(this.form)"></p>
   </form>

 </body>
</html>


Атрибут placeholder

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0+ | 8.0+ | 11.50+ | 5.0+ | 4.0+ | 3.0+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Выводит текст внутри текстового поля, который исчезает при получении фокуса.

Синтаксис

<textarea placeholder="строка">
</textarea>

Значения

Текстовая строка. Если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут placeholder</title>
 </head>
 <body>
   <form action="handler.php">
     <p><textarea placeholder="Ваше сообщение"></textarea></p>
     <p><input type="submit" value="Отправить"></p>
   </form>
 </body>
</html>

Результат данного примера в браузере Chrome показан на рис. 1.

Вид текста, созданного с помощью атрибута placeholder

Рис. 1. Вид текста, созданного с помощью атрибута placeholder

Firefox 4 допускает изменять стиль текста, выводимого через атрибут placeholder, с помощью псевдокласса :-moz-placeholder.

textarea:-moz-placeholder { color: red; }

В Safari и Chrome стиль текста меняется следующим образом:

textarea::-webkit-input-placeholder { color: red; }


Атрибут readonly

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Когда к тегу <textarea> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис

HTML
<textarea readonly></textarea>
XHTML
<textarea readonly="readonly"></textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег TEXTAREA, атрибут readonly</title>
 </head>
 <body>

  <form action="handler.php">
   <p><textarea rows="10" cols="20" readonly>Поле
    недоступно для изменения</textarea></p>
  </form>

 </body>
</html>


Атрибут required

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.0+ |  | 4.0+ | 3.0+ | 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.

Chrome | Opera | Firefox

Рис. 1. Вид сообщения об обязательном поле

Синтаксис

<textarea required>
</textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут required</title>
 </head>
 <body>
  <form action="">
   <p><input name="user" required placeholder="Ваше имя"></p>
   <p><textarea name="comment" placeholder="Комментарий" required></textarea></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Атрибут rows

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<textarea rows="число"></textarea>

Обязательный атрибут

Обязателен в HTML4, не обязателен в HTML5.

Значения

Любое положительное число.

Значение по умолчанию

В HTML4 зависит от настроек браузера и операционной системы.

В HTML5 — 2.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег TEXTAREA, атрибут rows</title>
 </head>
 <body>

  <form action="handler.php">
    <p><textarea rows="10" cols="20"></textarea></p>
  </form>

 </body>
</html>


Атрибут tabindex

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на кнопку Tab.

Синтаксис

<textarea tabindex="число"></textarea>

Обязательный атрибут

Нет.

Значения

Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.

Значение по умолчанию

Нет.


Атрибут wrap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле <textarea> и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис

<textarea wrap="soft | hard">
</textarea>

Значения

soft
Длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие клавиши Enter устанавливает перенос текста, который сохраняется при отправке формы.
hard
Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер места автоматического переноса сохраняются. При этом значении обязательно должен присутствовать атрибут cols.
off
Нестандартное значение. Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Значение по умолчанию

soft

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут wrap</title>
 </head>
 <body>
  <form action="handler.php" method="post">
   <p><textarea rows="10" cols="20" wrap="hard"></textarea></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Примечание

Некоторые старые браузеры также поддерживают нестандартные значения virtual вместо soft и physical вместо hard.


Тег <tfoot>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <tfoot> предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег <tfoot> в исходном коде должен быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы.

В пределах таблицы разрешается использовать только один элемент <tfoot>.

Синтаксис

<table>
 <thead> ... </thead>
 <tfoot>
  <tr>
   <td> ... </td>
  </tr>
 </tfoot>
 <tbody> ... </tbody>
</table>

Атрибуты

align
Определяет выравнивание текста в строке.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера <tfoot>.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
valign
Выравнивание содержимого ячеек по вертикали.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TFOOT</title>
 </head>
 <body>

  <table width="600">
   <tfoot align="center" style="background: #ffc">
    <tr>
     <td>Ячейка 1, расположенная в TFOOT</td>
     <td>Ячейка 2, расположенная в TFOOT</td>
    </tr>
   </tfoot>

   <tbody align="right" style="background: silver">
    <tr>
     <td>Ячейка 3, расположенная в TBODY</td>
     <td>Ячейка 4, расположенная в TBODY</td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание по горизонтали для всех ячеек в пределах <tfoot>. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте атрибут align для тега <td> или <th>.

Синтаксис

<tfoot align="left | center | right | justify">...</tfoot>

Значения

left
Выравнивание по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TFOOT, атрибут align</title>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0">
    <tfoot align="center" style="background: #fc0">
     <tr>
      <td colspan="2">Объединенная ячейка в TFOOT</td>
     </tr>
    </tfoot>

    <tbody align="right">
     <tr>
      <td>Ячейка 1, расположенная в TBODY</td>
      <td>Ячейка 2, расположенная в TBODY</td>
     </tr>
    </tbody>
  </table>

 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона ячеек, расположенных в контейнере <tfoot>.

Синтаксис

<tfoot bgcolor="цвет">...</tfoot>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS

background-color

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TFOOT, атрибут bgcolor</title>
  <style type="text/css">
   TFOOT {
     color: white; /* Цвет текста */
   }
  </style>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0" bgcolor="#f0f0f0">
   <tfoot align="center" bgcolor="#333333">
    <tr>
     <td colspan="2">Объединенная ячейка в TFOOT</td>
    </tr>
   </tfoot>

   <tbody>
    <tr>
     <td>Ячейка 1, расположенная в TBODY</td>
     <td>Ячейка 2, расположенная в TBODY</td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char заставляет выравниваться содержимое ячеек внутри <tfoot> по заданному символу. Эта возможность может пригодиться для выравнивания колонки чисел по точке или запятой. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

<table>
 <thead> .... </thead>
 <tfoot char="c" align="char"> ... </tfoot>
 <tbody>
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячеек влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

<table>
 <thead> .... </thead>
 <tfoot char="c" align="char" charoff="число"> ... </tfoot>
 <tbody>
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого ячеек в контейнере <tfoot>. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

<tfoot valign="top | middle | bottom | baseline">...</tfoot>

Значения

top
Выравнивание содержимого ячеек по верхнему краю строки.
middle
Выравнивание по середине.
bottom
Выравнивание по нижнему краю.
baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек строки к одной линии.

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TFOOT, атрибут valign</title>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0">
   <tfoot align="center" valign="bottom">
    <tr>
     <td colspan="2" height="50">Объединенная ячейка в TFOOT, выровнена по нижнему краю</td>
    </tr>
   </tfoot>

   <tbody align="right" valign="top">
    <tr>
     <td>Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Тег <th>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

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

Синтаксис

<table>
  <tr>
    <th>...</th>
  </tr>
</table>

Атрибуты

abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задает фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML 4.01IECrOpSaFx 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH</title>
  <style type="text/css">
    table {
     border-collapse: collapse; /* Отображать двойные линии как одинарные */
    }
    th {
     background: #ccc; /* Цвет фона */
     text-align: left; /* Выравнивание по левому краю */
    }
    td, th {
     border: 1px solid #800; /* Параметры границы */
     padding: 4px; /* Поля в ячейках */
    }
  </style>
 </head>
 <body>

  <table width="100%" cellspacing="0" border="1">
   <tr>
    <th>Браузер</th>
    <th colspan="3">Internet Explorer</th>
    <th colspan="3">Opera</th>
    <th colspan="2">Firefox</th>
   </tr>
   <tr>
    <th>Версия</th>
    <td>5.5</td>
    <td>6.0</td>
    <td>7.0</td>
    <td>7.0</td>
    <td>8.0</td>
    <td>9.0</td>
    <td>1.0</td>
    <td>2.0</td>
   </tr>
   <tr>
    <th>Поддерживается</th>
    <td>Да</td>
    <td>Да</td>
    <td>Да</td>
    <td>Да</td>
    <td>Да</td>
    <td>Да</td>
    <td>Да</td>
    <td>Да</td>
   </tr>
  </table>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид ячеек, оформленных с помощью стилей


Атрибут abbr

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут abbr предназначен для краткого описания содержимого ячеек. Текст внутри abbr браузерами не отображается и предназначен в первую очередь для доступа людей к содержанию с помощью вспомогательных технологий вроде речевых браузеров. Значение представляет сокращенную версию текста внутри тега <th>. Хотя abbr никак не выводится, браузеры распознают этот атрибут и могут получить к нему доступ через скрипты.

Синтаксис

<th abbr="текст">...</th>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут abbr</title>
 </head>
 <body>
  <table border="1" cellpadding="4">
   <tr>
    <th abbr="Компания">Название производителя</th>
    <th abbr="Модель">Наименование модели</th>
    <th abbr="Год">Год выпуска</th>
   </tr>
   <tr>
    <td>Volkswagen</td>
    <td>Golf 2.8 GTi</td>
    <td>2007</td>
   </tr>
  </table>
 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание содержимого ячейки по горизонтали.

Синтаксис

<th align="left | center | right | justify | char">...</th>

Значения

left
Выравнивание содержимого ячейки по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).
char
Выравнивает по указанному символу.

Значение по умолчанию

center

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут align</title>
 </head>
 <body>

  <table width="600" border="1">
   <tr>
    <th align="right"> ... </th>
    <td align="center"> ... </td>
   </tr>
 </table>

 </body>
</html>


Атрибут axis

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет группировать колонки или строки связанные между собой близкой информацией. В настоящее время браузеры не поддерживают атрибут axis, поэтому вопрос о том, как в действительности атрибут влияет на вид таблицы остается открытым.

Синтаксис

<table>
  <tr>
    <th axis="текст">...</th>
  </tr>
</table>

Значения

Любой текст, представляющий собой произвольное имя ячейки. Для связывания ячеек между собой значения атрибута axis должны совпадать.

Значение по умолчанию

0

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут axis</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <th axis="name">Имя</th>
    <th axis="name">Фамилия</th>
    <th axis="contact">Телефон</th>
    <th axis="contact">Адрес</th>
    <th>Номер комнаты</th>
   </tr>
   <tr>
    <td>Иван</td>
    <td>Пырьев</td>
    <td>555-94-32-95</td>
    <td>Улица Ассинизаторов, 69</td>
    <td>908Б</td>
   </tr>
  </table>
 </body>
</html>


Атрибут background

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

<th background="URL">...</th>

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background-image

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут background</title>
 </head>
 <body>

  <table width="600">
   <tr>
    <th background="/images/snow.gif"> ... </th>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона ячейки.

Синтаксис

<th bgcolor="цвет">...</th>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS

background-color

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут bgcolor</title>
 </head>
 <body text="white">

  <table bgcolor="black" width="600">
   <tr>
    <th bgcolor="#ffcc00">Заголовок таблицы</th>
   </tr>
   <tr>
    <td>Ячейка</td>
   </tr>
  </table>

 </body>
</html>


Атрибут bordercolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен атрибут border с ненулевым значением у тега <table>.

Синтаксис

<th bordercolor="цвет">...</th>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и операционной системы.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут bordercolor</title>
 </head>
 <body>

  <table bordercolor="red" border="1" width="100%">
   <tr>
    <th bordercolor="red"> ... </th>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char позволяет выравнить содержимое ячейки по заданному символу. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

<table>
  <tr>
    <th align="char" char="c">...</th>
  </tr>
</table>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут char</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1" width="100%">
   <tr>
    <th>Срок размещения</td>
    <th align="char" char="%">Ставка, %</td>
   </tr>
   <tr>
    <td>6 месяцев</td>
    <td char="%" align="char">9,00%</td>
   </tr>
   <tr>
    <td>1 год</td>
    <td char="%" align="char">5,00%</td>
   </tr>
   <tr>
    <td>2 года</td>
    <td char="%" align="char">4,50%</td>
   </tr>
  </table>
 </body>
</html>


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

<table>
  <tr>
    <th charoff="число">...</th>
  </tr>
</table>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0


Атрибут colspan

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной на рис.1 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью атрибута colspan.

Синтаксис

<th colspan="число">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут colspan</title>
 </head>
 <body>

  <table width="200" border="1" align="center"
  cellpadding="4" cellspacing="0">
   <tr bgcolor="#FBF0DB">
    <th colspan="2">ячейка 1</th>
   </tr>
   <tr>
    <td>ячейка 2</td>
    <td>ячейка 3</td>
   </tr>
  </table>

 </body>
</html>


Атрибут headers

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 1.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers не заметен.

Для связывания ячеек между собой, ячейке в теге <th> задается атрибут id, а в другой ячейке — атрибут headers со значением, совпадающим со значением id.

Синтаксис

<th id="идентификатор">...</th>
<th headers="идентификатор">...</th>

Значения

Один или несколько идентификаторов, разделенных между собой пробелом.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут headers</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td id="name">Имя</td>
    <td id="surname">Фамилия</td>
    <td id="tel">Телефон</td>
    <td id="address">Адрес</td>
    <td id="num">Номер комнаты</td>
   </tr>
   <tr>
    <th headers="name">Иван</th>
    <th headers="name surname">Пырьев</th>
    <th headers="tel">555-94-32-95</th>
    <th headers="address">Улица Ассинизаторов, 69</th>
    <th headers="num">908Б</th>
   </tr>
  </table>
 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

Синтаксис

<th height="значение">...</th>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Высота вычисляется на основе содержимого ячейки.

Аналог CSS

height

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут height</title>
 </head>
 <body>

  <table cellpadding="10" border="1" bgcolor="#ffcc00" align="center"
  width="100%">
   <tr>
    <th height="50">Заголовок</th>
   </tr>
   <tr>
    <td>Ячейка</td>
   </tr>
  </table>

 </body>
</html>


Атрибут nowrap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавление атрибута nowrap к тегу <th> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение nowrap осуждается.

Синтаксис

<th nowrap>...</th>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут nowrap не установлен.

Аналог CSS

white-space

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут nowrap</title>
 </head>
 <body>

  <table width="400">
   <tr>
    <th nowrap>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
     nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
     volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
     ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
     Duis te feugifacilisi.</th>
   </tr>
   <tr>
    <td>Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en
     commodo consequat.</td>
   </tr>
  </table>

 </body>
</html>


Атрибут rowspan

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек

В приведенной на рис. 1 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью атрибута rowspan.

Синтаксис

<th rowspan="число">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

1

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут rowspan</title>
 </head>
 <body>

   <table width="200" border="1" align="center"
    cellpadding="4" cellspacing="0">
    <tr>
     <th rowspan="2" bgcolor="#FBF0DB">ячейка 1</th>
     <td>ячейка 2</td>
    </tr>
    <tr>
     <td>ячейка 3</td>
    </tr>
   </table>

 </body>
</html>


Атрибут scope

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.0+ | 1.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут scope связывает между собой ячейки с заголовком и обычные ячейки. По своему действию напоминает атрибут headers, но используется для простых таблиц. Атрибут предназначен для экранных ридеров вроде речевых браузеров, в обычных браузерах результат добавления scope никак не заметен.

Синтаксис

<th scope="col | colgroup | row | rowgroup">...</th>

Значения

col
Ячейка заголовка установлена для колонки.
colgroup
Ячейка заголовка установлена для группы колонок.
row
Ячейка заголовка задана для строки.
rowgroup
Ячейка заголовка установлена для группы строк.

Значение colgroup применяется в таблице, в которой используется тег <colgroup> или при объединении ячеек с помощью атрибута colspan. Значение rowgroup требуется при объединении ячеек через атрибут rowspan.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут scope</title>
 </head>
 <body>
  <table border="1" width="300">
   <tr>
    <th></th>
    <th scope="col">Месяц</th>
    <th scope="col">Заработано</th>
   </tr>
   <tr>
    <td scope="row">1</td>
    <td>Январь</td>
    <td>152</td>
   </tr>
   <tr>
    <td scope="row">2</td>
    <td>Февраль</td>
    <td>176</td>
   </tr>
   <tr>
    <td scope="row">3</td>
    <td>Март</td>
    <td>244</td>
   </tr>
  </table>
 </body>
</html>


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

<th valign="top | middle | bottom | baseline">...</th>

Значения

top
Выравнивание содержимого ячейки по верхнему краю строки.
middle
Выравнивание по середине.
bottom
Выравнивание по нижнему краю.
baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут valign</title>
 </head>
 <body>

  <table width="60%" border="1">
   <tr bgcolor="#ffcc00">
    <th valign="top" height="100">Выравнивание по верхнему краю</th>
   </tr>
   <tr>
    <td>Выравнивание по середине</td>
   </tr>
  </table>

 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, атрибут width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

Синтаксис

<th width="значение">...</th>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Аналог CSS

width

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут width</title>
 </head>
 <body>

  <table cellpadding="10" border="1">
   <tr>
    <th width="20%">Колонка 1</th>
    <th width="80%">Колонка 2</th>
   </tr>
   <tr>
    <td colspan="2">Объединенная ячейка</td>
   </tr>
  </table>

 </body>
</html>


Тег <thead>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Элемент <thead> предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде сразу после тега <table>.

Синтаксис

<table>
 <thead>
  <tr>
   <td> ... </td>
  </tr>
 </thead>
 <tfoot> ... </tfoot>
 <tbody> ... </tbody>
</table>

Атрибуты

align
Определяет выравнивание текста в строке.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера <thead>.
valign
Выравнивание содержимого ячеек по вертикали.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег THEAD</title>
 </head>
 <body>

  <table style="width: 600px;">
   <thead style="background: #fc0">
    <tr>
     <td> ... </td>
     <td> ... </td>
    </tr>
   </thead>
   <tbody style="background: #ccc">
    <tr>
     <td> ... </td>
     <td> ... </td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание по горизонтали для всех ячеек в пределах <thead>. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте атрибут align для тега <td> или <th>.

Синтаксис

<thead align="left | center | right | justify | char">...</thead>

Значения

left
Выравнивание по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).
char
Выравнивание по заданному символу.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег THEAD, атрибут align</title>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0">
   <thead align="center" style="background: #fc0">
    <tr>
     <td colspan="2"> ... </td>
    </tr>
   </thead>
   <tbody align="right">
    <tr>
     <td> ... </td>
     <td> ... </td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char позволяет выравнить содержимое ячеек внутри <thead> по заданному символу. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

<table>
 <thead align="char" char="c">
  <tr>
   <td> ... </td>
  </tr>
 </thead>
 <tfoot> ... </tfoot>
 <tbody> ... </tbody>
</table>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.

Пример

XHTML 1.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег THEAD, атрибут char</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="5" width="300">
   <thead align="char" char="м">
    <tr>
     <td>Год</td><td>Население, млн</td>
    </tr>
   </thead>
   <tbody align="char" char="м">
    <tr><td>1897</td><td>67,5 млн</td></tr>
    <tr><td>1914</td><td>89,9 млн</td></tr>
    <tr><td>1917</td><td>91,0 млн</td></tr>
    <tr><td>1926</td><td>92,7 млн</td></tr>
    <tr><td>1939</td><td>108,4 млн</td></tr>
    <tr><td>1959</td><td>117,2 млн</td></tr>
    <tr><td>1970</td><td>129,9 млн</td></tr>
    <tr><td>1979</td><td>137,4 млн</td></tr>
    <tr><td>1989</td><td>147,0 млн</td></tr>
    <tr><td>1996</td><td>148,3 млн</td></tr>
    <tr><td>2002</td><td>145,6 млн</td></tr>
    <tr><td>2006</td><td>142,8 млн</td></tr>
    <tr><td>2007</td><td>142,2 млн</td></tr>
    <tr><td>2008</td><td>142,0 млн</td></tr>
    <tr><td>2009</td><td>141,9 млн</td></tr>
    <tr><td>2010</td><td>141,93 млн</td></tr>
   </tbody>
  </table>
 </body>
</html>


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячеек внутри <thead> влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

<table>
 <thead charoff="число">
  <tr>
   <td> ... </td>
  </tr>
 </thead>
 <tfoot> ... </tfoot>
 <tbody> ... </tbody>
</table>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0

Пример

XHTML 1.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег THEAD, атрибут charoff</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="5" width="300">
   <thead align="char" char="м" charoff="-2">
    <tr>
     <td>Год</td><td>Население, млн</td>
    </tr>
   </thead>
   <tbody align="char" char=",">
    <tr>
     <td>1897</td><td>67,5 млн</td>
    </tr>
    <tr>
     <td>1914</td><td>89,9 млн</td>
    </tr>
    <tr>
     <td>1917</td><td>91,0 млн</td>
    </tr>
    <tr>
     <td>1926</td><td>92,7 млн</td>
    </tr>
    <tr>
     <td>1939</td><td>108,4 млн</td>
    </tr>
    <tr>
     <td>1959</td><td>117,2 млн</td>
    </tr>
    <tr>
     <td>1970</td><td>129,9 млн</td>
    </tr>
    <tr>
     <td>1979</td><td>137,4 млн</td>
    </tr>
    <tr>
     <td>1989</td><td>147,0 млн</td>
    </tr>
    <tr>
     <td>1996</td><td>148,3 млн</td>
    </tr>
    <tr>
     <td>2002</td><td>145,6 млн</td>
    </tr>
    <tr>
     <td>2006</td><td>142,8 млн</td>
    </tr>
    <tr>
     <td>2007</td><td>142,2 млн</td>
    </tr>
    <tr>
     <td>2008</td><td>142,0 млн</td>
    </tr>
    <tr>
     <td>2009</td><td>141,9 млн</td>
    </tr>
    <tr>
     <td>2010</td><td>141,93 млн</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ |  | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона ячеек, расположенных в контейнере <thead>.

Синтаксис

<thead bgcolor="цвет">...</thead>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS

background-color

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег THEAD, атрибут bgcolor</title>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0">
   <thead align="center" bgcolor="#cccccc">
    <tr>
     <td> ... </td>
     <td> ... </td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td> ... </td>
     <td> ... </td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого ячеек в контейнере <tbody>. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

<thead valign="top | middle | bottom | baseline">...</thead>

Значения

top
Выравнивание содержимого ячеек по верхнему краю строки.
middle
Выравнивание по середине.
bottom
Выравнивание по нижнему краю.
baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек строки к одной линии.

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег THEAD, атрибут valign</title>
 </head>
 <body>

  <table width="600" border="1" cellspacing="0">
   <thead align="center" valign="bottom">
    <tr>
     <td colspan="2" height="50"> ... </td>
    </tr>
   </thead>
   <tbody align="right" valign="top">
    <tr>
     <td> ... </td>
     <td> ... </td>
    </tr>
    <tr>
     <td> ... </td>
     <td> ... </td>
    </tr>
   </tbody>
  </table>

 </body>
</html>


Тег <time>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.

Синтаксис

<time>дата и время</time>
<time datetime="<дата и время>">текст</time>

Атрибуты

datetime
Задает дату, время или оба значения для текста.
pubdate
Указывает дату публикации документа.

Закрывающий тег

Обязателен.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>time</title>
  <style>
   time { background: #f0f0f0; }
  </style>
 </head>
 <body>
  <article>
   <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
   <p><time>1960-08-19</time> первый полет собак в космос.</p>
   <p><time>1961-04-12</time> первый полет человека в космос.</p>
   <p><time>1963-06-16</time> первый полет женщины-космонавта.</p>
   <p><time>1969-07-21</time> высадка человека на Луну.</p>
  </article>
 </body>
</html>

Браузеры

Браузеры, которые не поддерживают тег <time> отображает его содержимое. Браузеры с поддержкой тега могут устанавливать для элемента стилевое оформление.


Атрибут datetime

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает дату, время или оба значения для текста. Содержимое атрибута напрямую в браузере не отображается.

Синтаксис

<time datetime="<дата и время>">текст</time>

Значения

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 1.

Табл. 1. Форматы даты и времени
Значение | Формат | Пример
Год | ГГГГ | 2012
Месяц и год | ГГГГ-ММ | 2012-12
Полная дата | ГГГГ-ММ-ДД | 2012-12-23
Дата и время с минутами | ГГГГ-ММ-ДДTчч:мм | 2004-07-24T18:18
Дата и время с секундами | ГГГГ-ММ-ДДTчч:мм:сс | 2004-07-24T18:18:18
Дата и время с часовым поясом | ГГГГ-ММ-ДДTчч:мм:сс±чч:мм | 2004-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +04:00.

Значение по умолчанию

Нет.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>datetime</title>
 </head>
 <body>
  <article>
   <p>Опубликовано: <time datetime="2012-12-23T08:23:11+07:00">сегодня</time></p>
   <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
   <p><time>1960-08-19</time> первый полет собак в космос.</p>
   <p><time>1961-04-12</time> первый полет человека в космос.</p>
   <p><time>1963-06-16</time> первый полет женщины-космонавта.</p>
   <p><time>1969-07-21</time> высадка человека на Луну.</p></article>
 </body>
</html>


Атрибут pubdate

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Это пустой атрибут, наличие которого указывает дату и время публикации документа. Если атрибут pubdate добавляется внутрь элемента <article>, то он обозначает дату и время публикации содержимого <article>.

Синтаксис

<time pubdate>дата и время</time>
<time pubdate datetime="<дата и время>">текст</time>

Значения

Нет.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>pubdate</title>
 </head>
 <body>
  <article>
   <header><h1>Три способа управления женщиной</h1></header>
   <p>Дата публикации: <time pubdate datetime="2012-12-23">23 декабря</time></p>
   <p>Притча про Будду, который после медитации осознал, что существует
      три способа управления женщиной, изложив их подошедшей к
      нему красавице.</p>
  </article>
  <article>
   <header><h1>Хуа Тоу</h1></header>
   <p>Дата публикации: <time pubdate datetime="2012-12-18">18 декабря</time></p>
   <p>История о том, как ученик спросил у своего учителя, что есть Будда, на
      что тот ответил: «окно с тетрадкой», подразумевая работу над решением
      вопроса Дзен.</p>
  </article>
</body>
</html>


Тег <title>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.

Рис. 1. Вид заголовка в браузере Internet Explorer

Рис. 1. Вид заголовка в браузере Firefox

Синтаксис

<head>
  <title>Заголовок</title>
</head>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>htmlbook.ru - Как правильно писать заголовок страницы</title>
 </head>
 <body>

  <p>...</p>

 </body>
</html>

Примечание

Тег <title> выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы.

  • По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди.
  • Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? " < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами.
  • При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило.
  • В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.


Тег <tr>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<table>
  <tr>
   <td>...</td>
  </tr>
</table>

Атрибуты

align
Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor
Цвет фона ячеек.
bordercolor
Цвет рамки.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
valign
Выравнивание содержимого ячеек по вертикали.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TR</title>
 </head>
 <body>

  <table width="100%" border="0" cellpadding="4">
   <tr align="right" valign="top">
    <td><img src="images/book.png" width="199" height="133" alt="Книга"></td>
    <td>Lorem ipsum dolor sit amet...</td>
   </tr>
  </table>

 </body>
</html>


Атрибут align

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте атрибут align для тега <td> или <th>.

Синтаксис

<tr align="left | center | right | justify | char">...</tr>

Значения

left
Выравнивание содержимого ячеек по левому краю.
center
Выравнивание по центру.
right
Выравнивание по правому краю.
justify
Выравнивание по ширине (одновременно по правому и левому краю).
char
Выравнивание по указанному символу.

Значение по умолчанию

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TR, атрибут align</title>
 </head>
 <body>

  <table width="600" border="1">
   <tr align="center">
    <td> ... </td>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут bgcolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет фона строки таблицы.

Синтаксис

<tr bgcolor="цвет">...</tr>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS

background-color

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TR, атрибут bgcolor</title>
 </head>
 <body text="white">

  <table bgcolor="black" width="100%">
   <tr bgcolor="#ffcc00">
    <td> ... </td>
   </tr>
   <tr>
    <td> ... </td>
   </tr>
  </table>

 </body>
</html>


Атрибут bordercolor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ |  |  |  |  |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает цвет рамки вокруг строки. Рамка показывается, когда установлен атрибут border с ненулевым значением у тега <table>.

Синтаксис

<tr bordercolor="цвет">...</tr>

Значения

См. цвет

Значение по умолчанию

Зависит от браузера и операционной системы.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TR, атрибут bordercolor</title>
 </head>
 <body>

   <table bordercolor="black" border="1" width="100%">
    <tr bordercolor="red">
      <td> ... </td>
    </tr>
    <tr>
      <td> ... </td>
    </tr>
   </table>

 </body>
</html>

Результат данного примера показан на рис. 1.

Вид рамки, созданной с помощью bordercolor, в браузере Internet Explorer

Рис. 1. Вид рамки, созданной с помощью bordercolor, в браузере Internet Explorer


Атрибут char

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут char заставляет выравниваться содержимое ячеек внутри <tr> по заданному символу. Эта возможность может пригодиться для выравнивания чисел в ячейках по точке или запятой. Работает только в том случае, если значение атрибута align установлено как char.

Синтаксис

<tr char="c" align="char">...</tr>

Значения

В качестве значения указывается один символ, по которому будет происходить выравнивание.

Значение по умолчанию

Нет.


Атрибут charoff

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячеек внутри <tr> влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.

Синтаксис

<tr charoff="число">...</tr>

Значения

Любое целое положительное или отрицательное число.

Значение по умолчанию

0


Атрибут valign

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

<tr valign="top | middle | bottom | baseline">...</tr>

Значения

top
Выравнивание содержимого ячеек по верхнему краю строки.
middle
Выравнивание по середине.
bottom
Выравнивание по нижнему краю.
baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии.

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TR, атрибут valign</title>
  <style type="text/css">
    p {margin-top: 0;}
    .pot {
     background: #800000;
     color: white;
    }
    .title {
     font-size: 200%;
    }
  </style>
 </head>
 <body>

   <table width="100%" cellpadding="5">
     <tr valign="top" class="pot">
      <td class="title">Борщ</td>
      <td><p>Мясо отварить до готовности. Промыть свеклу, очистить,
       нарезать соломкой и тушить с помидорами до полуготовности.</p>
       <p>Бульон процедить, мясо нарезать кусочками. В бульон добавить
       нарезанный дольками картофель, довести до кипения, опустить нарезанную
       соломкой свежую капусту и варить 10-15 минут, добавить пассерованные
       овощи, болгарский перец, нашинкованный тонкой соломкой,
       специи и довести до готовности.</p>
       <p>Готовому борщу дать настояться в течение 20-25 минут.
       При подаче к столу добавить сметану, мясо, зелень.</p></td>
     </tr>
   </table>

 </body>
</html>

Результат данного примера показан на рис. 1.

Выравнивание содержимого ячеек по верхнему краю

Рис. 1. Выравнивание содержимого ячеек по верхнему краю


Тег <track>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Позволяет авторам указать текстовую дорожку для медийных элементов <audio> и <video>. Такая дорожка обычно содержит субтитры на разных языках, комментарии, заголовки и др.

Синтаксис

<audio>
  <track kind | src | srclang | label | default>
</audio>

<video>
  <track kind | src | srclang | label | default>
</video>

Атрибуты

kind
Указывает тип дорожки, возможные варианты перечислены в табл. 1.
src
Путь к файлу с дорожкой.
srclang
Язык дорожки. См. коды языков.
label
Отображаемое название дорожки. Если этот атрибут не указан, браузер станет использовать значение, которое применяется у него по умолчанию, например «untitled1».
default
Наличие этого атрибута указывает, что данная дорожка предпочтительна и должна быть выбрана по умолчанию. Только одна дорожка может иметь атрибут default.
Табл. 1. Значения атрибута kind
Значение | Предназначение | Описание
subtitles | Субтитры | Предназначены для дублирования звуковой дорожки фильма в виде текста на языке оригинала для глухих людей. Также могут содержать перевод на другие языки для тех, кто не знаком с языком оригинала. Текст субтитров выводится поверх видео.
captions | Заголовки | Дублирование диалогов, звуковых эффектов, музыкального сопровождения в виде текста для тех случаев, когда звук недоступен или для глухих пользователей. Выводится поверх видео, при этом помечается, что подходит для плохо слышащих людей.
descriptions | Описание | Звуковое описание происходящего в видео для тех случаев, когда изображение недоступно или для слепых людей.
chapters | Главы | Названия глав используемые для быстрой навигации по видео или аудио. Отображаются в виде списка.
metadata | Метаданные | Предназначены для использования скриптами и не отображаются в браузере.

Закрывающий тег

Не нужен.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>track</title>
 </head>
 <body>
  <video width="500" height="400" controls>
    <track kind="subtitles" src="video/jane.en.srt" srclang="en" label="English">
    <track kind="subtitles" src="video/jane.ua.srt" srclang="ua" label="Український">
    <track kind="subtitles" src="video/jane.ru.srt" srclang="ru" label="Русский">
    <source src="video/jane.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video/jane.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/jane.webm" type='video/webm; codecs="vp8, vorbis"'>
     Тег video не поддерживается вашим браузером.
  </video>
 </body>
</html>

Содержимое файла jane.en.srt в популярном формате субтитров SRT приведено в примере 2.

Пример 2. Файл jane.en.srt

1
00:00:00,360 --> 00:00:01,240
  Soldier Jane.
2
00:00:01,240 --> 00:00:02,240
  Rescue from radiation.
3
00:00:02,240 --> 00:00:04,000
  Watermelon is a better defense.


Тег <tt>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Контейнер <tt> отображает текст моноширинным текстом. Этот тег относится к группе тегов физического форматирования.

Синтаксис

<tt>Текст</tt>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TT</title>
 </head>
 <body>

    <p><tt>Lorem ipsum dolor sit amet</tt></p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    Ut wisis enim ad minim veniam, quis nostrud exerci tution.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <tt>


Тег <u>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет подчеркивание к тексту. Этот тег осуждается спецификацией HTML, взамен рекомендуется использовать стили.

Синтаксис

<u>Текст</u>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Аналог CSS

text-decoration

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег U</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

  <p><u>Меню</u></p>
  <p>Пахлава</p>
  <p>Курабье</p>
  <p>Шакер-бура</p>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью тега <u>


Тег <ul>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Синтаксис

<ul>
  <li>элемент маркированного списка</li>
</ul>

Атрибуты

type
Устанавливает вид маркера списка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег UL</title>
 </head>
 <body>

  <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид маркированного списка в браузере


Атрибут type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вид маркера.

Синтаксис

<ul type="disc | circle | square">...</ul>

Значения

Для маркированного списка маркеры могут принимать один из трех видов: кружок (disc), окружность (circle) и квадрат (square). Значения атрибута type и получаемый вид показан в табл. 1.

Табл 1. Значения атрибута type
Код Пример
<ul type="disc"> ... </ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<ul type="circle"> ... </ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<ul type="square"> ... </ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк

Значение по умолчанию

disc

Аналог CSS

list-style-type

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег UL, атрибут type</title>
 </head>
 <body>
  <ul type="circle">
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 1.

Маркеры в виде окружности

Рис. 1. Маркеры в виде окружности


Тег <var>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <var> используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере <var> курсивным начертанием.

Синтаксис

<var>Текст</var>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег VAR</title>
 </head>
 <body>

 <p>В данном примере делается запрос к базе данных для получения поля <var>content_title</var>
  из таблицы <var>content</var>, причем должно удовлетворяться условие
  <code>section_id = 1</code>.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <var>


Тег <video>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры
Браузер | Internet Explorer | Chrome | Opera | Safari | Firefox
Аудио кодеки
ogg/vorbis |  |  |  |  |
wav |  |  |  |  |
mp3 |  |  |  |  |
AAC |  |  |  |  |
Видео кодеки
ogg/theora |  |  |  |  |
H.264 |  |  |  |  |
WebM |  |  |  |  |

Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).

Синтаксис

<video>
 <source src="URL">
</video>

Атрибуты

autoplay
Видео начинает воспроизводиться автоматически после загрузки страницы.
controls
Добавляет панель управления к видеоролику.
height
Задает высоту области для воспроизведения видеоролика.
loop
Повторяет воспроизведение видео с начала после его завершения.
poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому видеоролику.
width
Задает ширину области для воспроизведения видеоролика.

Закрывающий тег

Обязателен.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls" poster="video/duel.jpg">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером.
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение видеофайла

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4.0.


Атрибут autoplay

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

При наличии этого атрибута видео начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие preload.

Синтаксис

<video autoplay="autoplay">
</video>

Значения

В качестве значения указывается autoplay, также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IE 9+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>autoplay</title>
 </head>
 <body>
  <video width="400" height="320" controls="controls" autoplay>
   <source src="video/snowman.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/snowman.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/snowman.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером.
  </video>
 </body>
</html>


Атрибут controls

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет панель управления к видеоролику. Вид панели и ее содержимое зависит от браузера и может в себя включать: кнопка воспроизвести, пауза, перемотка, переход в полноэкранный режим; ползунок для изменения уровня громкости и др.

Синтаксис

<video controls="controls">
</video>

Значения

В качестве значения указывается controls, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IE 9+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>controls</title>
 </head>
 <body>
  <video width="512" height="384" controls>
   <source src="video/women.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/women.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/women.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером.
  </video>
 </body>
</html>


Атрибут height

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут height задает высоту области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в заданные рамки, но его пропорции при этом остаются прежними.

Синтаксис

<video height="высота">
</video>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная высота берется из параметров видео, если это значение не доступно, тогда height принимается равной высоте картинке, заданной атрибутом poster. В противном случае высота устанавливается 150 пикселов.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>height</title>
 </head>
 <body>
  <video width="500" height="400" controls>
   <source src="video/jane.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/jane.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/jane.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером.
  </video>
 </body>
</html>


Атрибут loop

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 11.0+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Зацикливает воспроизведение видео, оно повторяется каждый раз с начала после завершения.

Синтаксис

<video loop="loop">
</video>

Значения

В качестве значения указывается loop, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>loop</title>
 </head>
 <body>
  <video width="500" height="400" autoplay loop>
    <source src="video/jane.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video/jane.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/jane.webm" type='video/webm; codecs="vp8, vorbis"'>
    Тег video не поддерживается вашим браузером.
  </video>
 </body>
</html>


Атрибут poster

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.6+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Само изображение может быть в любом доступном формате: GIF, PNG, JPEG. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео.

Синтаксис

<video poster="URL">
</video>

Значения

В качестве значения принимается полный или относительный путь к графическому файлу.

Значение по умолчанию

Нет.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>poster</title>
 </head>
 <body>
   <video width="400" height="300" controls poster="video/duel.jpg">
    <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
    Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>


Атрибут preload

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 4.0+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для загрузки видео вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay.

Синтаксис

<video preload="none | metadata | auto">
</video>

Значения

none
Не загружать видео.
metadata
Загрузить только служебную информацию (размеры видео, первый кадр, продолжительность и др.).
auto
Загрузить видео целиком при загрузке страницы.

Значение по умолчанию

none

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>preload</title>
 </head>
 <body>
   <video controls preload="metadata">
    <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
    Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>


Атрибут src

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает путь к воспроизводимому видеоролику. Для этой же цели можно использовать тег <source>.

Синтаксис

<video src="URL">
</video>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>src</title>
 </head>
 <body>
   <video width="400" height="300" src="video/duel.mp4" controls="controls">
    Ваш браузер не поддерживает это видео.
   </video>
 </body>
</html>


Атрибут width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут width задает ширину области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в указанную ширину, но его пропорции при этом не искажаются.

Синтаксис

<video width="ширина">
</video>

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная ширина берется из параметров видео, если это значение не доступно, тогда width принимается равной ширине картинке, заданной атрибутом poster. Если этот атрибут не установлен, ширина задается как 300 пикселов.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>width</title>
 </head>
 <body>
  <video width="500" height="400" controls>
   <source src="video/jane.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/jane.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/jane.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером.
  </video>
 </body>
</html>


Тег <wbr>

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
8.0 | 5.0+ | 1.0+ | 11.7+ | 4.0+ | 3.0+ | 1.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Синтаксис

Текст<wbr>текст

Закрывающий тег

Не требуется.

Атрибуты

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег WBR</title>
  <style>
   .word { font-size: 2em; }
   wbr { display: inline-block; }
  </style>
 </head>
 <body>
  <p>Самое длинное слово из химии</p>
  <p class="word">метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
 </body>
</html>

Результат примера показа на рисунке ниже. При изменении ширины окна текст будет переноситься в тех местах, где указан тег <wbr>.

Перенос текста в браузере Safari

Рис. 1. Перенос текста в браузере Safari

Браузеры

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса &shy;.

Internet Explorer 8 и Opera до версии 11.7 не делают переносы длинной строки, пока в стилях для wbr не указано свойство display со значением inline-block, как показано в примере.


Тег <xmp>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <xmp> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <xmp> не закрыт, все теги внутри него отображаются как обычный текст.

Синтаксис

<xmp>Текст</xmp>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег XMP</title>
 </head>
 <body>
  <p>Пример программы</p>
  <xmp>
   while (<>) {
     $org=$_;
     s/\\["']//g;
     s/\/\/[^:].*//;
     s/\/\*.*\*\///g;
     if ($comment == 1) {
       if (s/.*\*\///) {
         $comment = 0;
       }
       else {
         next;
       }
     }
     if (s/\/\*.*//) {
       $comment = 1;
     }
     if (/^\s*#/) {
       next;
     }
   }</xmp>
 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <xmp>


Тег <source>

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 8.0+ | 10.50+ | 3.1+ | 4.0+ | 2.0+ | 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Вставляет звуковой или видеофайл для тегов <audio> и <video>. Обобщенно такие файлы называются медийными.

Синтаксис

<audio>
 <source src="URL">
</audio>
<video>
 <source src="URL">
</video>

Атрибуты

media
Определяет устройство, для которого будет воспроизводиться файл.
src
Адрес файла.
type
MIME-тип медийного источника.

Закрывающий тег

Не обязателен.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>source</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Результат примера в браузере Chrome показан на рис. 1.

Рис. 1. Воспроизведение видеофайла


Атрибут accesskey

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Описание

Атрибут accesskey позволяет получить доступ к элементу с помощью сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S
Обычно элемент при использовании комбинации клавиш получает фокус, но конкретное действие зависит от применяемого тега. К примеру, для <a> произойдет переход по ссылке, для текстовых полей можно вводить текст, для флажков (<input type="checkbox">) будет поставлена галочка и т.д.

Синтаксис

<a accesskey="c">...</a>

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>

Пример. Использование атрибута accesskey

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут accesskey</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg" accesskey="x">Горячая клавиша X
    для открытия ссылки</a></p>
  <p><a href="images/robot.jpg" accesskey="r">Горячая клавиша R
    для открытия ссылки</a></p>
 </body>
</html>


Атрибут class

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.

Синтаксис

class="имя"

Значения

Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут class</title>
  <style>
    p { /* Обычный абзац */
    text-align: justify; /* Выравнивание текста по ширине */
    }
    p.cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
    }
  </style>
 </head>
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы.
    Они отличаются высокой световой отдачей, продолжительным сроком службы,
    малой яркостью светящейся поверхности, близким к естественному спектральным
    составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p class="cite">Для исключения засветки экрана дисплея световыми потоками
    оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>


Атрибут contenteditable

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 4.0+ | 9.2+ | 4.0+ | 4.0+ | 3.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает, что элемент доступен для редактирования пользователем — можно удалять текст и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.

Синтаксис

contenteditable="true | false"

Значения

true
Включает режим редактирования.
false
Запрещает редактирование элемента.

Вместо true допустимо указывать пустое значение (contenteditable="") или вообще его не писать (contenteditable).

Значение по умолчанию

По умолчанию наследует значение родителя.

Применяется к тегам

<a>, <abbr>, <address>, <area>, <b>, <basefont>, <bdo>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>contenteditable</title>
 </head>
 <body>
  <h1 contenteditable="true">Тортуга</h1>
  <p contenteditable="true">А вслед за этим на Тортуге наступили
  дни кипучей деятельности: суда оснащались в дальний поход,
  заготавливалось мясо и другие продукты, грузились различные
  запасы, необходимые для военных действий.</p>
 </body>
</html>


Атрибут contextmenu

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 8.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает контекстное меню для элемента.

Синтаксис

contextmenu="идентификатор"

Значения

В качестве значения указывается идентификатор меню, созданного с помощью тега <menu>.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <address>, <area>, <b>, <bdo>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <map>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>contextmenu</title>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="" contextmenu="edit"></p>
  <menu type="context" id="edit">
   <li>Вырезать</li>
   <li>Копировать</li>
   <li>Вставить</li>
   <li>Редактировать</li>
   <li>Выравнивание</li>
  </menu>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>contextmenu</title>
  <style>
   .rotateleft {
    transform: rotate(-90deg);
   }
   .rotateright {
    transform: rotate(90deg);
   }
  </style>
  <script>
   function rotateLeft() {
    document.querySelector("img").classList.toggle("rotateleft");
   }
   function rotateRight() {
    document.querySelector("img").classList.toggle("rotateright");
   }
  </script>
 </head>
 <body>
  <img src="images/figure.jpg" alt="" contextmenu="edit">
  <menu type="context" id="edit">
    <menuitem icon="images/object-rotate-right.png"
     onclick="rotateRight()">Повернуть на 90? ПЧС</menuitem>
   <menuitem icon="images/object-rotate-left.png"
     onclick="rotateLeft()">Повернуть на 90? ПрЧС</menuitem>
  </menu>
 </body>
</html>

Браузеры

Firefox для создания меню поддерживает нестандартный тег <menuitem>.


Атрибут dir

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Задает направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.

Синтаксис

dir={ltr | rtl}

Значения

ltr
Текст отображается как обычно — слева направо.
rtl
Текст инвертируется и отображается справа налево.

Значение по умолчанию

ltr

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут dir</title>
 </head>
 <body>
  <p dir="rtl">??? — суббота</p>
  <p>В ашкеназском произношении звучит как «ша?бос» (идиш «ша?бес»),
   а в сефардском — как «шаба?т».</p>
 </body>
</html>

Результат данного примера показан на рис. 1. В первом предложении изменился порядок слов.

Рис. 1. Направление текста


Атрибут hidden

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 5.0+ | 11.5+ |  | 4.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты (см. пример).

Синтаксис

<E hidden>

Значения

В качестве значения можно указать hidden (hidden="hidden") или оставить атрибут пустым (hidden="" или hidden).

Значение по умолчанию

По умолчанию атрибут выключен.

Применяется к тегам

<a>, <abbr>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <map>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>

Пример

HTML5IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hidden</title>
  <style>
   #link {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
   }
  </style>
  <script>
   function showForm() {
    document.getElementById("auth").hidden = false;
    document.getElementById("link").hidden = true;
   }
  </script>
 </head>
 <body>
  <p id="link" onclick="showForm()">Авторизация на сайте</p>
  <form id="auth" hidden>
   <p><label>Логин: <input name="user" required></label></p>
   <p><label>Пароль: <input name="pass" type="password" required></label></p>
   <p><input type="submit" value="Войти"></p>
  </form>
 </body>
</html>


Атрибут id

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Синтаксис

id="имя"

Значения

Идентификатор должен обязательно начинаться с латинского символа и может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут id</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    right: 0; /* Положение элемента от правого края */
    top: 20px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div id="help">
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body>
</html>


Атрибут lang

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang. Браузер использует его значение для правильного отображения некоторых символов.

Синтаксис

lang="код языка"

Значения

См. коды языков

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут lang</title>
  <style>
   p {
    font-size: 130%; /* Размер текста */
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
   }
   q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
    quotes: "\00AB" "\00BB";
   }
  </style>
 </head>
 <body>
  <p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
  <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
  <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
 </body>
</html>

Результат данного примера показан на рис. 1. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.

Вид кавычек для разных языков

Рис. 1. Вид кавычек для разных языков


Атрибут spellcheck

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ | 11.0+ | 4.0+ | 3.0+ |  |

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм (<input>, <textarea>), а также редактируемых элементов (у них установлен атрибут contenteditable).

Браузер может не поддерживать проверку орфографии или она может быть отключена. Например, для Chrome проверка настраивается следующим образом.

  1. Откройте меню Chrome Меню Chrome на панели инструментов браузера.
  2. Выберите пункт «Настройки».
  3. Нажмите «Показать дополнительные настройки».
  4. В разделе «Языки» выберите «Настройка языков и способов ввода».
  5. В открывшемся диалоговом окне «Языки» установите или снимите флажок «Включить проверку правописания».

Синтаксис

spellcheck="true | false"

Значения

true
Включает режим проверки правописания.
false
Отключает проверку.

Вместо true допустимо указывать пустое значение (spellcheck="") или вообще его не писать (spellcheck).

Значение по умолчанию

Зависит от настроек браузера.

Применяется к тегам

<input>, <textarea>, а также тегам, у которых установлен атрибут contenteditable.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>spellcheck</title>
 </head>
 <body>
  <p contenteditable="true" spellcheck="false">
   Не л?по ли ны бяшетъ, братіе, начяти
   старыми словесы трудныхъ пов?стій
   о пълку Игорев?, Игоря Святъславлича?
  </p>
 </body>
</html>

Браузеры

Браузер Firefox не выключает проверку орфографии для редактируемых полей (у которых установлен атрибут contenteditable).


Атрибут style

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Атрибут style применяется для определения стиля элемента с помощью правил CSS.

Синтаксис

style="правила описания стилей"

Значения

В качестве значений указываются стилевые правила: вначале следует имя стилевого свойства, затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут style</title>
 </head>
<body>

  <p><span style="color: red; font-size: 2em">L</span>orem ipsum dolor
  sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt
  ut lacreet dolore magna aliguam erat volutpat.</p>
  <p><span style="color: red; font-size: 2em">U</span>t wisis enim ad
  minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Стилевое оформление текста с помощью атрибута style

Рис. 1. Стилевое оформление текста с помощью атрибута style


Атрибут tabindex

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

Описание

Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде. Заблокированные элементы (у которых установлен атрибут disabled) не участвуют в переходе и фокус не получают.

Переход к элементам, у которых не задан атрибут tabindex или его значение равно 0, происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.

Синтаксис

tabindex="число"

Значения

Любое целое положительное число.

Значение по умолчанию

0

Применяется к тегам

<a>, <area>, <button>, <input>, <object>, <select>, <textarea>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут tabindex</title>
 </head>
 <body>
  <p>Нажмите кнопку Tab для перехода между элементами</p>
  <p><button>Шестой</button></p>
  <p><button>Седьмой</button></p>
  <p><button tabindex="5">Пятый</button></p>
  <p><button tabindex="1">Первый</button></p>
  <p><button tabindex="3">Третий</button></p>
  <p><button tabindex="2">Второй</button></p>
  <p><button tabindex="4">Четвертый</button></p>
 </body>
</html>


Атрибут title

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |  |

Описание

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

Синтаксис

title="текст"

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут title</title>
 </head>
 <body>
  <p title="А вот и я!">Пример всплывающей подсказки</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид всплывающей подсказки

Рис. 1. Вид всплывающей подсказки


Атрибут xml:lang

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Этот атрибут по своему действию похож на lang, но применяется только в XHTML-документах и указывает язык всего текста или его фрагмента. При добавлении к тегу <html> указанный язык определяется для всего документа, при включении xml:lang в отдельные теги язык будет указан только для текста этого элемента.

Синтаксис

xml:lang="код языка"

Значения

См. коды языков

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>??</title>
</head>
<body>
<p>??????????????</p>
</body>
</html>


Событие onblur

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onblur возникает при потере элемента фокуса. Это обычно происходит, если щелкнуть на другой элемент текущего документа. Событие onblur противоположно по своему действию событию onfocus.

Синтаксис

onblur="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onblur</title>
 </head>
 <body>
  <form action="">
   <p><input type="text" value="Имя" onblur="alert(this.value)"></p>
   <p><input type="text" value="Фамилия" onblur="alert(this.value)"></p>
   <p><input type="text" value="Адрес" onblur="alert(this.value)"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1. При потере фокуса с помощью функции alert на экран выводится значение текущего поля.

Рис. 1. Вызов скрипта при потере фокуса


Событие onchange

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие возникает при изменении значения элемента формы, вроде текстового поля или списка. Например, событие onchange добавленное к тегу <textarea> срабатывает каждый раз, когда введен новый текст и поле потеряло фокус.

Синтаксис

onchange="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<input>, <select>, <textarea>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onchange</title>
 </head>
 <body>
  <form action="">
   <fieldset>
    <legend>Быстрый переход по сайту</legend>
    <select onchange="document.location=this.options[this.selectedIndex].value">
      <option value="#">Выберите раздел сайта</option>
      <option value="depart.html">Отделения</option>
      <option value="techinfo.html">Техническая информация</option>
      <option value="study.html">Обучение</option>
    </select>
   </fieldset>
  </form>
 </body>
</html>

В данном примере при выборе пункта списка происходит переход на страницу, заданную значением атрибута value тега <option>.


Событие onclick

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onclick возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick.

Синтаксис

onclick="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onclick</title>
  <script>
   function isEmail() {
    var str = document.getElementById("email").value;
    var status = document.getElementById("status");
    var re = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
    if (re.test(str)) status.innerHTML = "Адрес правильный";
      else status.innerHTML = "Адрес неверный";
    if(isEmpty(str)) status.innerHTML = "Поле пустое";
   }
   function isEmpty(str){
    return (str == null) || (str.length == 0);
   }
  </script>
 </head>
 <body>
  <form action="">
   <p>Введите адрес электронной почты и нажмите кнопку &laquo;Проверить&raquo;</p>
   <p><input type="text" id="email"> <span id="status"></span></p>
   <p><input type="button" value="Проверить" onclick="isEmail()"></p>
  </form>
 </body>
</html>

В данном примере при щелчке по кнопке формы срабатывает событие onclick и идет вызов функции с именем isEmail(), которая проверяет, корректно ли введен адрес электронной почты. При этом справа от поля выводится сообщение об ошибке или наоборот, правильности ввода данных.


Событие ondblclick

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие ondblclick возникает при двойном щелчке левой кнопкой мыши на элементе.

Синтаксис

ondblclick="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие ondblclick</title>
  <style>
   div {
    height: 200px; /* Высота слоя */
    background: #f0f0f0; /* */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
  </style>
  <script>
   var color = 0;
   function colorDiv() {
    if (color) {
      document.getElementById("layer").style.background = "#f0f0f0";
      color = 0;
    }
    else {
      document.getElementById("layer").style.background = "#fc0";
      color = 1;
    }
   }
  </script>
 </head>
 <body>
  <p>Дважды щелкните в этом поле для изменения цвета фона.</p>
  <div id="layer" ondblclick="colorDiv()">
  </div>
 </body>
</html>

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


Событие onfocus

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onfocus возникает при получении элементом фокуса. Например, для текстового поля фокусом называется возможность вводить текст. Событие onfocus по своему действию противоположно onblur.

Синтаксис

onfocus="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<button>, <input>, <label>, <select>, <textarea>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onfocus</title>
  <style>
   input {
    border: 1px solid #ccc; /* Параметры рамки */
    padding: 3px; /* Поля вокруг текста */
    color: #666; /* Цвет текста */
    width: 90%; /* Ширина поля */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="text" class="text" value="Введите текст"
    onfocus="this.value=''" onblur="this.value='Введите текст'"></p>
   </form>
 </body>
</html>

В данном примере при получении фокуса в текстовом поле скрывается текст, а при потере фокуса (событие onblur), наоборот, в поле добавляется текстовая строка.


Событие onkeydown

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onkeydown cрабатывает в момент нажатия клавиши, но когда она еще не отпущена.

Синтаксис

onkeydown="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>


Событие onkeypress

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onkeypress срабатывает, когда клавиша на клавиатуре нажата и отпущена, что эквивалентно совместному действию onkeydown и onkeyup.

Синтаксис

onkeypress="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>


Событие onkeyup

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onkeyup возникает в момент отпускания нажатой клавиши.

Синтаксис

onkeyup="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onkeyup</title>
  <style>
   #msg {
    color: red; /* Цвет текста */
    display: none; /* Прячем сообщение */
   }
  </style>
  <script>
   function validForm(f) {
    // Если введено число, то скрываем предупреждение
    if (isDigit(f.value)) document.getElementById("msg").style.display = "none";
    // В противном случае отображаем предупреждение
    else document.getElementById("msg").style.display = "inline";
   }
   // Функция по проверке, число введено или нет
   function isDigit(data) {
    var numStr="0123456789";
    var k = 0;
    for (i=0;i<data.length;i++) {
      thisChar = data.substring(i, i+1);
      if (numStr.indexOf(thisChar) != -1) k++;
    }
    if (k == data.length) return 1;
    else return 0;
   }
  </script>
 </head>
 <body>
  <form action="">
   <p>Введите любое число.</p>
   <p><input type="text" name="num" onkeyup="validForm(this)">
      <span id="msg">Вы ошиблись. Пожалуйста, введите число.</span></p>
  </form>
 </body>
</html>

В данном примере по мере набора символов в текстовом поле происходит проверка на ввод цифр. Если введена буква, пробел или другой символ отличный от цифры, то показывается предупреждение об ошибке (рис. 1).

Рис. 1. Использование события onkeyup для проверки данных формы


Событие onload

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onload используется как указатель, что веб-страница полностью загружена, включая содержание, изображения, стилевые файлы и внешние скрипты.

Синтаксис

onload="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<body>, <frameset>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onload</title>
  <script>
   function loadPage() {
    window.status = "Страница загружена";
   }
  </script>
 </head>
 <body onload="loadPage()">
  <p>...</p>
 </body>
</html>

В данном примере после загрузки страницы в строке состояния будет написан текст «Страница загружена».


Событие onmousedown

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onmousedown по своему действию похоже на onclick и отличается от него тем, что срабатывает в момент нажатия на кнопку мыши. onclick же в каком-то смысле является комбинацией событий onmousedown и onmouseup.

Синтаксис

onmousedown="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onmousedown</title>
  <script>
   var i = 0;
   function counter(){
    i++;
    document.getElementById("layer2").innerHTML += i + " ";
   }
  </script>
  <style type="text/css">
   #layer1 {
    background: #fc0; /* Цвет фона */
    padding: 30px 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body onmouseup="if(window.interval) clearInterval(interval)">
   <div id="layer1" onmousedown="interval=setInterval('counter()',50)">
    Щелкните внутри
   </div>
   <div id="layer2"></div>
 </body>
</html>

В данном примере при наведении курсора на оранжевый слой и нажатии на кнопку мыши выводятся числа (рис. 1)), до тех пор, пока кнопка не будет отпущена.

Рис. 1. Использование события onmousedown


Событие onmousemove

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onmousemove используется для определения перемещения курсора мыши в любом направлении экрана. Это событие применяется для создания различных эффектов, связанных с курсором мыши: всплывающие подсказки, перетаскивание объектов и др.

Синтаксис

onmousemove="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx 6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onmousemove</title>
  <script>
   function mouseCoords(e) {
    // Для браузера IE
    if (document.all)  {
      x = event.x + document.body.scrollLeft;
      y = event.y + document.body.scrollTop;
    // Для остальных браузеров
    } else {
      x = e.pageX; // Координата X курсора
      y = e.pageY; // Координата Y курсора
    }
    document.getElementById("coords").innerHTML = "X : " + x + ", Y : " + y;
   }
  </script>
  <style type="text/css">
   html, body {
    height: 100%; /* Высота документа */
    margin: 0; /* Убираем оступы на странице */
   }
   #coords {
    background: #333; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
   }
</style>
</head>
<body onmousemove="mouseCoords(event)">
<div id="coords">&nbsp;</div>
</body>
</html>

В данном примере на странице выводятся текущие координаты курсора мыши (рис. 1).

Рис. 1. Использование события onmousemove


Событие onmouseout

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 7.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onmouseout срабатывает, когда курсор мыши выходит за пределы элемента, к которому добавляется параметр onmouseout. Это событие обычно работает в связке с параметром onmouseover.

Синтаксис

onmouseout="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onmouseout</title>
  <script type="text/javascript">
   function resize(img, x, y) {
    img.width = x;
    img.height = y;
   }
  </script>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt=""
    onmouseout="resize(this, 100, 111)" onmouseover="resize(this, 200, 222)"></p>
 </body>
</html>

В данном примере при наведении курсора на изображение оно увеличивается в размерах (рис. 1), а при уведении курсора за пределы картинки, меняет размеры на исходные.

Рис. 1. Использование события onmouseout

Браузеры

Internet Explorer до версии 6.0 включительно содержит ошибку при работе с изображениями, события onmouseover и onmouseout для тега <img> не обрабатываются.


Событие onmouseover

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 7.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onmouseover срабатывает, когда курсор мыши наводится на элемент, к которому добавлен атрибут onmouseover. Это один из самых популярных атрибутов, применяемый для создания различных эффектов с изображениями и другими объектами веб-страницы. Обычно работает в связке с событием onmouseout.

Синтаксис

onmouseover="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onmouseover</title>
 </head>
 <body>
  <p><img src="images/graph1.png" alt=""
   onmouseout="this.src='images/graph1.png'"
   onmouseover="this.src='images/graph2.png'">&nbsp;
  <img src="images/graph1.png" alt=""
   onmouseout="this.src='images/graph1.png'"
   onmouseover="this.src='images/graph2.png'"></p>
 </body>
</html>

В данном примере при наведении курсора на изображение оно заменяется на другое, что создает эффект превращения черно-белой картинки в цветную (рис. 1).

Рис. 1. Использование события onmouseover

Браузеры

Internet Explorer до версии 7.0 содержит ошибку при работе с изображениями, события onmouseover и onmouseout для тега <img> не обрабатываются.


Событие onmouseup

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onmouseup по своему действию противоположно событию onmousedown и происходит при отпускании кнопки мыши, пока курсор находится в пределах элемента, к которому добавлен атрибут onmouseup.

Синтаксис

onmouseup="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Параметр onmouseup</title>
  <script>
   function hi(){
    document.getElementById("layer2").innerHTML += "хи ";
   }
  </script>
  <style type="text/css">
   #layer1 {
    background: #fc0; /* Цвет фона */
    padding: 30px 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body onmouseup="if(window.interval) clearInterval(interval)">
   <div id="layer1" onmousedown="interval=setInterval('hi()',10)">
     Щелкните внутри
   </div>
   <div id="layer2"></div>
 </body>
</html>

В данном примере при наведении курсора на оранжевый слой и нажатии на кнопку мыши выводится текст «хи» (рис. 1)), до тех пор, пока кнопка не будет отпущена.

Рис. 1. Использование события onmouseup


Событие onreset

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onreset возникает при очистке формы, происходящей при нажатии на кнопку Reset. Такая кнопка не обязательна и может отсутствовать в форме, а при ее использовании данные формы возвращаются в свое исходное значение.

Синтаксис

onreset="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<form>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onreset</title>
 </head>
 <body>
  <form action="handler.php" onreset="return confirm('Очистить форму?')">
   <p>Введите ваше имя</p>
   <p><input type="text" name="user"></p>
   <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
  </form>
 </body>
</html>

В данном примере при нажатии на кнопку «Очистить» будет выведено диалоговое окно с предупреждением (рис. 1). При нажатии на кнопку ОК форма будет очищена.

Рис. 1. Использование события onreset


Событие onselect

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onselect применяется в текстовых полях формы и включается при выделении текста с помощью мыши или клавиатуры.

Синтаксис

onselect="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<input>, <textarea>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onselect</title>
 </head>
 <body>
  <form action="">
   <p><textarea cols="40" rows="10" onselect="alert('Выделен текст')">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </textarea></p>
  </form>
 </body>
</html>

В данном примере при выделении текста будет отображаться окно с сообщением.


Событие onsubmit

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

Событие onsubmit возникает при отправке формы, это обычно происходит, когда пользователь нажимает специальную кнопку Submit.

Синтаксис

onsubmit="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<form>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onsubmit</title>
  <script>
   function deleteName(f) {
    if (confirm("Вы уверены, что хотите удалить выделенный пункт?\nЭта операция не восстановима."))
       f.submit();
   }
  </script>
 </head>
 <body>
  <form action="form.php" onsubmit="deleteName(this);return false;">
   <p>Выберите пункт для удаления</p>
   <p><input type="radio" name="p" value="1"> Чебурашка</p>
   <p><input type="radio" name="p" value="2"> Крокодил Гена</p>
   <p><input type="radio" name="p" value="3"> Шапокляк</p>
   <p><input type="submit" value="Удалить"></p>
  </form>
 </body>
</html>

В данном примере при отправке формы будет выведено диалоговое окно (рис. 1). При нажатии на кнопку ОК форма будет отправлена на адрес, заданный атрибутом action, а при нажатии на кнопку Отмена данные формы передаваться не будут.

Рис. 1. Использование события onsubmit


Событие onunload

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ |  |  | 1.0+ | 1.0+ | 1.0+

Описание

Событие onunload срабатывает в том случае, когда страница не загрузилась по каким-либо причинам, либо при закрытии окна (вкладки) браузера.

Синтаксис

onunload="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<body>, <frameset>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onunload</title>

 </head>
 <body onunload="alert('Уже уходишь?')">
  <p>...</p>
 </body>
</html>

В данном примере при закрытии окна будет выведено сообщение.


Цвет

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

Шестнадцатеричные цвета

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
Шестнадцатеричные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 2. Десятичные и шестнадцатеричные числа больше 16
Десятичные | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28
Шестнадцатеричные | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc.

Типичный цвет, используемый в HTML, выглядит следующим образом.

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

fa + 8e + 47 = fa8e47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

  • Если значения компонент цвета одинаковы (например: #d6d6d6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #ffffff (белый).
  • Ярко-красный цвет образуется, если красный компонент сделать максимальным (ff), а остальные компоненты обнулить. Цвет со значением #ff0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00ff00) и синим (#0000ff).
  • Желтый цвет (#ffff00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 1), где представлены основные цвета (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00ffff) получается за счет объединения синего и зеленого цвета.

Рис. 1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33ff66.

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

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 3 приведены имена популярных названий цветов.

Табл. 3. Названия некоторых цветов
Имя цвета | Цвет | Описание | Шестнадцатеричное значение
aqua |  | Голубой | #00ffff
black |  | Черный | #000000
blue |  | Синий | #0000ff
fuchsia |  | Фуксия | #ff00ff
gray |  | Серый | #808080
green |  | Зеленый | #008000
lime |  | Светло-зеленый | #00ff00
maroon |  | Темно-красный | #800000
navy |  | Темно-синий | #000080
olive |  | Оливковый | #808000
purple |  | Фиолетовый | #800080
red |  | Красный | #ff0000
silver |  | Светло-серый | #c0c0c0
teal |  | Сине-зеленый | #008080
white |  | Белый | #ffffff
yellow |  | Желтый | #ffff00


Названия цветов

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

Табл. 1. Названия цветов и их значения
Название | Цвет | Значение | Валидный
aliceblue |  | #f0f8ff |
antiquewhite |  | #faebd7 |
aqua |  | #00ffff |
aquamarine |  | #7fffd4 |
azure |  | #f0ffff |
beige |  | #f5f5dc |
bisque |  | #ffe4c4 |
black |  | #000000 |
blanchedalmond |  | #ffebcd |
blue |  | #0000ff |
blueviolet |  | #8a2be2 |
brown |  | #a52a2a |
burlywood |  | #de8887 |
cadetblue |  | #5f9ea0 |
chocolate |  | #d2691e |
coral |  | #ff7f50 |
cornflowerblue |  | #6495ed |
cornsilk |  | #fff8dc |
crimson |  | #dc143c |
cyan |  | #00ffff |
darkblue |  | #00008b |
darkcyan |  | #008b8b |
darkgoldenrod |  | #b8860b |
darkgray |  | #a9a9a9 |
darkgreen |  | #006400 |
darkkhaki |  | #bdb76d |
darkmagenta |  | #8b008b |
darkolivegreen |  | #556b2f |
darkorange |  | #ff8c00 |
darkorchid |  | #9932cc |
darkred |  | #8b0000 |
darksalmon |  | #e9967a |
darkseagreen |  | #8fbc8f |
darkslateblue |  | #483d8b |
darkslategray |  | #2f4f4f |
darkturquoise |  | #00ced1 |
darkviolet |  | #9400d3 |
deeppink |  | #ff1493 |
deepskyblue |  | #00bfff |
dimgray |  | #696969 |
dodgerblue |  | #1e90ff |
firebrick |  | #b22222 |
floralwhite |  | #fffaf0 |
forestgreen |  | #228b22 |
fuchsia |  | #ff00ff |
gainsboro |  | #dcdcdc |
ghostwhite |  | #f8f8ff |
gold |  | #ffd700 |
goldenrod |  | #daa520 |
gray |  | #808080 |
grey |  | #808080 |
green |  | #008000 |
greenyellow |  | #adff2f |
honeydew |  | #f0fff0 |
hotpink |  | #ff69b4 |
indianred |  | #cd5c5c |
indigo |  | #4b0082 |
ivory |  | #fffff0 |
khaki |  | #f0e68c |
lavender |  | #e6e6fa |
lavenderblush |  | fff0f5 |
lemonchiffon |  | #fffacd |
lightblue |  | #add8e6 |
lightcoral |  | #f08080 |
lightcyan |  | #e0ffff |
lightgoldenrodyellow |  | #fafad2 |
lightgreen |  | #90ee90 |
lightpink |  | #ffb6c1 |
lightsalmon |  | #ffa07a |
lightseagreen |  | #20b2aa |
lightskyblue |  | #87cefa |
lightslategray |  | #778899 |
lightsteelblue |  | #b0c4de |
lightyellow |  | #ffffe0 |
lime |  | #00ff00 |
limegreen |  | #32cd32 |
linen |  | #faf0f6 |
magenta |  | #ff00ff |
maroon |  | #800000 |
mediumaquamarine |  | #66cdaa |
mediumblue |  | #0000cd |
mediumorchid |  | #ba55d3 |
mediumpurple |  | #9370db |
mediumseagreen |  | #3cb371 |
mediumslateblue |  | #7b68ee |
mediumspringgreen |  | #00fa9a |
mediumturquoise |  | #48d1cc |
mediumvioletred |  | #c71585 |
midnightblue |  | #191970 |
mintcream |  | #f5fffa |
mistyrose |  | #ffe4e1 |
moccasin |  | #ffe4b5 |
navajowhite |  | #ffdead |
navy |  | #000080 |
oldlace |  | #fdf5e6 |
olive |  | #808000 |
olivedrab |  | #6b8e23 |
orange |  | #ffa500 |
orangered |  | #ff4500 |
orchid |  | #da70d6 |
palegoldenrod |  | #eee8aa |
palegreen |  | #98fb98 |
paleturquoise |  | #afeeee |
palevioletred |  | #db7093 |
papayawhip |  | #ffefd5 |
peachpuff |  | #ffdab9 |
peru |  | #cd853f |
pink |  | #ffc0cb |
plum |  | #dda0dd |
powderblue |  | #b0e0e6 |
purple |  | #800080 |
red |  | #ff0000 |
rosybrown |  | #bc8f8f |
royalblue |  | #4169e1 |
salmon |  | #fa8072 |
sandybrown |  | #f4a460 |
seagreen |  | #2e2b57 |
seashell |  | #ffe5ee |
sienna |  | #a0522d |
silver |  | #c0c0c0 |
skyblue |  | #87ceeb |
slateblue |  | #6a5acd |
slategray |  | #708090 |
snow |  | #fffafa |
springgreen |  | #00ff7f |
steelblue |  | #4682b4 |
tan |  | #d2b48c |
teal |  | #008080 |
thistle |  | #d8bfd8 |
tomato |  | #ff6347 |
turquoise |  | #40e0d0 |
violet |  | #ee82ee |
wheat |  | #f5deb3 |
white |  | #ffffff |
whitesmoke |  | #f5f5f5 |
yellow |  | #ffff00 |
yellowgreen |  | #9acd32 |


MIME-типы

MIME (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета) — спецификация для передачи по сети файлов различного типа: изображений, музыки, текстов, видео, архивов и др. Указание MIME-типа используется в HTML обычно при передаче данных форм и вставки на страницу различных объектов.

Некоторые популярные MIME-типы и расширения файлов с ними связанных приведены в табл. 1.

Табл. 1. MIME-типы
Расширение файла | Тип данных
ai | application/postscript
aif | audio/aiff
aif | audio/x-aiff
aiff | audio/aiff
aiff | audio/x-aiff
ani | application/x-navi-animation
aos | application/x-nokia-9000-communicator-add-on-software
aps | application/mime
arc | application/octet-stream
arj | application/arj
arj | application/octet-stream
art | image/x-jg
asf | video/x-ms-asf
asm | text/x-asm
asp | text/asp
asx | application/x-mplayer2
asx | video/x-ms-asf
asx | video/x-ms-asf-plugin
au | audio/basic
au | audio/x-au
avi | application/x-troff-msvideo
avi | video/avi
avi | video/msvideo
avi | video/x-msvideo
bin | application/mac-binary
bin | application/macbinary
bin | application/octet-stream
bin | application/x-binary
bin | application/x-macbinary
bm | image/bmp
bmp | image/bmp
bmp | image/x-windows-bmp
boo | application/book
book | application/book
c | text/x-c
c++ | text/plain
ccad | application/clariscad
class | application/java
class | application/java-byte-code
class | application/x-java-class
com | application/octet-stream
com | text/plain
conf | text/plain
cpp | text/x-c
cpt | application/mac-compactpro
cpt | application/x-compactpro
cpt | application/x-cpt
css | application/x-pointplus
css | text/css
dcr | application/x-director
def | text/plain
dif | video/x-dv
dir | application/x-director
dl | video/dl
dl | video/x-dl
doc | application/msword
dot | application/msword
drw | application/drafting
dvi | application/x-dvi
dwg | application/acad
dwg | image/vnd.dwg
dwg | image/x-dwg
dxf | application/dxf
dxf | image/vnd.dwg
dxf | image/x-dwg
dxr | application/x-director
exe | application/octet-stream
gif | image/gif
gz | application/x-compressed
gz | application/x-gzip
gzip | application/x-gzip
gzip | multipart/x-gzip
h | text/plain
h | text/x-h
hlp | application/hlp
hlp | application/x-helpfile
hlp | application/x-winhelp
htc | text/x-component
htm | text/html
html | text/html
htmls | text/html
htt | text/webviewhtml
ice | x-conference/x-cooltalk
ico | image/x-icon
inf | application/inf
jam | audio/x-jam
jav | text/plain
jav | text/x-java-source
java | text/plain
java | text/x-java-source
jcm | application/x-java-commerce
jfif | image/jpeg
jfif | image/pjpeg
jfif-tbnl | image/jpeg
jpe | image/jpeg
jpe | image/pjpeg
jpeg | image/jpeg
jpeg | image/pjpeg
jpg | image/jpeg
jpg | image/pjpeg
jps | image/x-jps
js | application/x-javascript
js | application/javascript
js | application/ecmascript
js | text/javascript
js | text/ecmascript
latex | application/x-latex
lha | application/lha
lha | application/octet-stream
lha | application/x-lha
lhx | application/octet-stream
list | text/plain
lsp | application/x-lisp
lsp | text/x-script.lisp
lst | text/plain
lzh | application/octet-stream
lzh | application/x-lzh
lzx | application/lzx
lzx | application/octet-stream
lzx | application/x-lzx
m3u | audio/x-mpequrl
man | application/x-troff-man
mid | application/x-midi
mid | audio/midi
mid | audio/x-mid
mid | audio/x-midi
mid | music/crescendo
mid | x-music/x-midi
midi | application/x-midi
midi | audio/midi
midi | audio/x-mid
midi | audio/x-midi
midi | music/crescendo
midi | x-music/x-midi
mod | audio/mod
mod | audio/x-mod
mov | video/quicktime
movie | video/x-sgi-movie
mp2 | audio/mpeg
mp2 | audio/x-mpeg
mp2 | video/mpeg
mp2 | video/x-mpeg
mp2 | video/x-mpeq2a
mp3 | audio/mpeg3
mp3 | audio/x-mpeg-3
mp3 | video/mpeg
mp3 | video/x-mpeg
mpa | audio/mpeg
mpa | video/mpeg
mpeg | video/mpeg
mpg | audio/mpeg
mpg | video/mpeg
mpga | audio/mpeg
pas | text/pascal
pcl | application/vnd.hp-pcl
pcl | application/x-pcl
pct | image/x-pict
pcx | image/x-pcx
pdf | application/pdf
pic | image/pict
pict | image/pict
pl | text/plain
pl | text/x-script.perl
pm | image/x-xpixmap
pm | text/x-script.perl-module
pm4 | application/x-pagemaker
pm5 | application/x-pagemaker
png | image/png
pot | application/mspowerpoint
pot | application/vnd.ms-powerpoint
ppa | application/vnd.ms-powerpoint
pps | application/mspowerpoint
pps | application/vnd.ms-powerpoint
ppt | application/mspowerpoint
ppt | application/powerpoint
ppt | application/vnd.ms-powerpoint
ppt | application/x-mspowerpoint
ppz | application/mspowerpoint
ps | application/postscript
psd | application/octet-stream
pwz | application/vnd.ms-powerpoint
py | text/x-script.phyton
pyc | applicaiton/x-bytecode.python
qt | video/quicktime
qtif | image/x-quicktime
ra | audio/x-pn-realaudio
ra | audio/x-pn-realaudio-plugin
ra | audio/x-realaudio
ram | audio/x-pn-realaudio
rm | application/vnd.rn-realmedia
rm | audio/x-pn-realaudio
rpm | audio/x-pn-realaudio-plugin
rtf | application/rtf
rtf | application/x-rtf
rtf | text/richtext
rtx | application/rtf
rtx | text/richtext
rv | video/vnd.rn-realvideo
sgml | text/sgml
sgml | text/x-sgml
sh | application/x-bsh
sh | application/x-sh
sh | application/x-shar
sh | text/x-script.sh
shtml | text/html
shtml | text/x-server-parsed-html
ssi | text/x-server-parsed-html
tar | application/x-tar
tcl | application/x-tcl
tcl | text/x-script.tcl
text | application/plain
text | text/plain
tgz | application/gnutar
tgz | application/x-compressed
tif | image/tiff
tif | image/x-tiff
tiff | image/tiff
tiff | image/x-tiff
txt | text/plain
uri | text/uri-list
vcd | application/x-cdlink
vmd | application/vocaltec-media-desc
vrml | application/x-vrml
vrml | model/vrml
vrml | x-world/x-vrml
vsd | application/x-visio
vst | application/x-visio
vsw | application/x-visio
wav | audio/wav
wav | audio/x-wav
wmf | windows/metafile
xla | application/excel
xla | application/x-excel
xla | application/x-msexcel
xlb | application/excel
xlb | application/vnd.ms-excel
xlb | application/x-excel
xlc | application/excel
xlc | application/vnd.ms-excel
xlc | application/x-excel
xld | application/excel
xld | application/x-excel
xlk | application/excel
xlk | application/x-excel
xll | application/excel
xll | application/vnd.ms-excel
xll | application/x-excel
xlm | application/excel
xlm | application/vnd.ms-excel
xlm | application/x-excel
xls | application/excel
xls | application/vnd.ms-excel
xls | application/x-excel
xls | application/x-msexcel
xlt | application/excel
xlt | application/x-excel
xlv | application/excel
xlv | application/x-excel
xlw | application/excel
xlw | application/vnd.ms-excel
xlw | application/x-excel
xlw | application/x-msexcel
xm | audio/xm
xml | application/xml
xml | text/xml
z | application/x-compress
z | application/x-compressed
zip | application/x-compressed
zip | application/x-zip-compressed
zip | application/zip
zip | multipart/x-zip


Коды языков

Код языка применяется для атрибутов, задающих язык, на котором написан весь документ или отдельные его блоки. В HTML язык обычно задается через атрибут lang.

В табл. 1 приведены некоторые распространенные языки и их коды, которые используются в качестве значений.

Табл. 1. Коды языков
Язык | Код
Абхазский | ab
Азербайджанский | az
Аймарский | ay
Албанский | sq
Английский | en
Американский английский | en-us
Арабский | ar
Армянский | hy
Ассамский | as
Африкаанс | af
Башкирский | ba
Белорусский | be
Бенгальский | bn
Болгарский | bg
Бретонский | br
Валлийский | cy
Венгерский | hu
Вьетнамский | vi
Галисийский | gl
Голландский | nl
Греческий | el
Грузинский | ka
Гуарани | gn
Датский | da
Зулу | zu
Иврит | iw
Идиш | ji
Индонезийский | in
Интерлингва (искусственный язык) | ia
Ирландский | ga
Исландский | is
Испанский | es
Итальянский | it
Казахский | kk
Камбоджийский | km
Каталанский | ca
Кашмирский | ks
Кечуа | qu
Киргизский | ky
Китайский | zh
Корейский | ko
Корсиканский | co
Курдский | ku
Лаосский | lo
Латвийский, латышский | lv
Латынь | la
Литовский | lt
Малагасийский | mg
Малайский | ms
Мальтийский | mt
Маори | mi
Македонский | mk
Молдавский | mo
Монгольский | mn
Науру | na
Немецкий | de
Непальский | ne
Норвежский | no
Пенджаби | pa
Персидский | fa
Польский | pl
Португальский | pt
Пуштунский | ps
Ретороманский | rm
Румынский | ro
Русский | ru
Самоанский | sm
Санскрит | sa
Сербский | sr
Словацкий | sk
Словенский | sl
Сомали | so
Суахили | sw
Суданский | su
Тагальский | tl
Таджикский | tg
Тайский | th
Тамильский | ta
Татарский | tt
Тибетский | bo
Тонга | to
Турецкий | tr
Туркменский | tk
Узбекский | uz
Украинский | uk
Урду | ur
Фиджи | fj
Финский | fi
Французский | fr
Фризский | fy
Хауса | ha
Хинди | hi
Хорватский | hr
Чешский | cs
Шведский | sv
Эсперанто (искусственный язык) | eo
Эстонский | et
Яванский | jw
Японский | ja


Скрипт

Скриптом называется программа (обычно на языке JavaScript) выполняемая в браузере. Скрипт в качестве значения применяется к событиям и вызывается при наступлении указанного события. Если скрипт небольшой, его код можно указать прямо в значении, для объемных скриптов пишется функция и вызывается в значении события.

Синтаксис

событие="язык: скрипт"

В качестве событий выступают следующие атрибуты: onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload.

Язык определяет язык программирования, на котором написан скрипт, может принимать следующие значения:

  • javascript — JavaScript;
  • jscript — JScript, разновидность языка JavaScript разработанная компанией Microsoft;
  • vbscript — язык программирования VBScript основанный на Visual Basic.

По умолчанию значением выступает javascript.

Также допускается указывать скрипт в качестве значения атрибута href тега <a>, но предваряя скрипт ключевым словом javascript:, в противном случае браузер будет воспринимать значение как ссылку. Вместо javascript пишется нужный язык программирования скрипта.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Скрипты</title>
  <style>
   #msg {
    display: none;
    position: absolute;
    width: 280px;
    top: 200px;
    left: 50%;
    margin-left: -150px;
    background: #fc0;
    padding: 10px;
   }
  </style>
  <script>
   function textMsg(msg) {
    document.getElementById('text').innerHTML = msg;
    document.getElementById('msg').style.display = 'block';
   }
   function closeMsg() {
    document.getElementById('msg').style.display = 'none';
   }
  </script>
 </head>
 <body>
  <div id="msg">
   <div id="text"></div>
   <div id="close"><a href="javascript:closeMsg()">[Закрыть]</a></div>
  </div>
  <p>Нажмите на <a href="#" onclick="textMsg('Спасибо, что нажали на ссылку!')">
    ссылку для открытия сообщения</a>.</p>
 </body>
</html>


Атрибут required

Справочник по HTML

Специальные символы

Имя | Код | Вид | Описание
&nbsp; | &#160; |  | Неразрывный пробел
&iexcl; | &#161; | ¡ | Перевернутый восклицательный знак
&cent; | &#162; | ¢ | Цент
&pound; | &#163; | £ | Фунт стерлингов
&curren; | &#164; | ¤ | Денежная единица
&euro; | &#8364; | € | Евро
&yen; | &#165; | ¥ | Иена или юань
&brvbar; | &#166; | ¦ | Разорванная вертикальная черта
&sect; | &#167; | § | Параграф
&uml; | &#168; | ¨ | Трема (знак над гласной для произнесения ее отдельно от предшествующей гласной; напр., nauve)
&copy; | &#169; | © | Знак copyright
&ordf; | &#170; | ª | Женский порядковый числитель
&laquo; | &#171; | « | Левая двойная угловая скобка
&not; | &#172; | ¬ | Знак отрицания
&shy; | &#173; |  | Место возможного переноса
&reg; | &#174; | ® | Знак зарегистрированной торговой марки
&macr; | &#175; | ¯ | Знак долготы над гласным
&deg; | &#176; | ° | Градус
&plusmn; | &#177; | ± | Плюс-минус
&sup2; | &#178; | ² | Верхний индекс «два» — «в квадрате»
&sup3; | &#179; | ³ | Верхний индекс «три» — «в кубе»
&acute; | &#180; | ´ | Знак ударения
&micro; | &#181; | µ | Микро
&para; | &#182; | ¶ | Символ параграфа
&middot; | &#183; | · | Точка
&cedil; | &#184; | ¸ | Седиль (орфографический знак)
&sup1; | &#185; | ¹ | Верхний индекс «один»
&ordm; | &#186; | º | Мужской порядковый числитель
&raquo; | &#187; | » | Правая двойная угловая скобка
&frac14; | &#188; | ¼ | Дробь — одна четверть
&frac12; | &#189; | ½ | Дробь — одна вторая
&frac34; | &#190; | ¾ | Дробь — три четверти
&iquest; | &#191; | ¿ | Перевернутый вопросительный знак
&spades; | &#9824; | ♠ | Знак масти «пики»
&clubs; | &#9827; | ♣ | Знак масти «трефы»
&hearts; | &#9829; | ♥ | Знак масти «червы»
&diams; | &#9830; | ♦ | Знак масти «бубны»
&quot; | &#34; | " | Двойная кавычка
&amp; | &#38; | & | Амперсанд
&lt; | &#60; | < | Знак «меньше»
&gt; | &#62; | > | Знак «больше»
&circ; | &#710; | ˆ | Символ циркумфлекса (диакритический знак над гласной)
&tilde; | &#732; | ˜ | Тильда
&trade; | &#8482; | ™ | Знак торговой марки
&times; | &#215; | × | Знак умножения
&divide; | &#247; | ÷ | Знак деления
&fnof; | &#402; | ƒ | Знак функции

Латинские буквы

Имя | Код | Вид | Описание
&Agrave; | &#192; | À | Латинская заглавная буква А с тупым ударением
&Aacute; | &#193; | Á | Латинская заглавная буква А с острым ударением
&Acirc; | &#194; | Â | Латинская заглавная буква А с циркумфлексом (диакритический знак над гласной)
&Atilde; | &#195; | Ã | Латинская заглавная буква А с тильдой
&Auml; | &#196; | Ä | Латинская заглавная буква А с тремой (знак над гласной для произнесения ее отдельно от предшествующей гласной)
&Aring; | &#197; | Å | Латинская заглавная буква А с верхним кружком
&AElig; | &#198; | Æ | Латинские заглавные символы AE
&Ccedil; | &#199; | Ç | Латинская заглавная буква C с седилем
&Egrave; | &#200; | È | Латинская заглавная буква E с тупым ударением
&Eacute; | &#201; | É | Латинская заглавная буква E с острым ударением
&Ecirc; | &#202; | Ê | Латинская заглавная буква E с циркумфлексом (диакритический знак над гласной)
&Euml; | &#203; | Ë | Латинская заглавная буква E с тремой
&Igrave; | &#204; | Ì | Латинская заглавная буква I с тупым ударением
&Iacute; | &#205; | Í | Латинская заглавная буква I с острым ударением
&Icirc; | &#206; | Î | Латинская заглавная буква I с циркумфлексом
&Iuml; | &#207; | Ï | Латинская заглавная буква I с тремой
&ETH; | &#208; | Ð | Латинские заглавные символы ETH
&Ntilde; | &#209; | Ñ | Латинская заглавная буква N с тильдой
&Ograve; | &#210; | Ò | Латинская заглавная буква O с тупым ударением
&Oacute; | &#211; | Ó | Латинская заглавная буква O с острым ударением
&Ocirc; | &#212; | Ô | Латинская заглавная буква O с циркумфлексом
&Otilde; | &#213; | Õ | Латинская заглавная буква O с тильдой
&Ouml; | &#214; | Ö | Латинская заглавная буква O с тремой
&Oslash; | &#216; | Ø | Латинская заглавная буква O со штрихом
&Ugrave; | &#217; | Ù | Латинская заглавная буква U с тупым ударением
&Uacute; | &#218; | Ú | Латинская заглавная буква U с острым ударением
&Ucirc; | &#219; | Û | Латинская заглавная буква U с циркумфлексом
&Uuml; | &#220; | Ü | Латинская заглавная буква U с тремой
&Yacute; | &#221; | Ý | Латинская заглавная буква Y с острым ударением
&THORN; | &#222; | Þ | Латинская заглавная буква thorn (в настоящее время используется в исландском алфавите)
&agrave; | &#224; | à | Латинская строчная буква А с тупым ударением
&aacute; | &##225; | á | Латинская строчная буква А с острым ударением
&acirc; | &##226; | â | Латинская строчная буква А с циркумфлексом
&atilde; | &#227; | ã | Латинская строчная буква А с тильдой
&auml; | &#228; | ä | Латинская строчная буква А с тремой
&aring; | &#229; | å | Латинская строчная буква А с верхним кружком
&aelig; | &#230; | æ | Латинская строчные буквы АE
&ccedil; | &#231; | ç | Латинская строчная буква А с седилем
&egrave; | &#232; | è | Латинская строчная буква E с тупым ударением
&eacute; | &#233; | é | Латинская строчная буква E с острым ударением
&ecirc; | &#234; | ê | Латинская строчная буква E с циркумфлексом
&euml; | &#235; | ë | Латинская строчная буква E с тремой
&igrave; | &#236; | ì | Латинская строчная буква I с тупым ударением
&iacute; | &#237; | í | Латинская строчная буква I с острым ударением
&icirc; | &#238; | î | Латинская строчная буква I с циркумфлексом
&iuml; | &#239; | ï | Латинская строчная буква I с тремой
&eth; | &#240; | ð | Латинская строчные символы eth
&ntilde; | &#241; | ñ | Латинская строчная буква N с тильдой
&ograve; | &#242; | ò | Латинская строчная буква O с тупым ударением
&oacute; | &#243; | ó | Латинская строчная буква O с острым ударением
&ocirc; | &#244; | ô | Латинская строчная буква O с циркумфлексом
&otilde; | &#245; | õ | Латинская строчная буква I с тильдой
&ouml; | &#246; | ö | Латинская строчная буква I с тремой
&oslash; | &#248; | ø | Латинская строчная буква O со штрихом
&ugrave; | &#249; | ù | Латинская строчная буква U с тупым ударением
&uacute; | &#250; | ú | Латинская строчная буква U с острым ударением
&ucirc; | &#251; | û | Латинская строчная буква U с циркумфлексом
&uuml; | &#252; | ü | Латинская строчная буква U с тремой
&yacute; | &#253; | ý | Латинская строчная буква Y с острым ударением
&thorn; | &#254; | þ | Латинская строчная буква thorn (в настоящее время используется в исландском алфавите)
&yuml; | &#255; | ÿ | Латинская строчная буква Y с тремой

Греческие буквы

Имя | Код | Вид | Описание
&Alpha; | &#913; | Α | Греческая заглавная буква альфа
&Beta; | &#914; | Β | Греческая заглавная буква бета
&Gamma; | &#915; | Γ | Греческая заглавная буква гамма
&Delta; | &#916; | Δ | Греческая заглавная буква дельта
&Epsilon; | &#917; | Ε | Греческая заглавная буква эпсилон
&Zeta; | &#918; | Ζ | Греческая заглавная буква дзета
&Eta; | &#919; | Η | Греческая заглавная буква эта
&Theta; | &#920; | Θ | Греческая заглавная буква тета
&Iota; | &#921; | Ι | Греческая заглавная буква иота
&Kappa; | &#922; | Κ | Греческая заглавная буква каппа
&Lambda; | &#923; | Λ | Греческая заглавная буква лямбда
&Mu; | &#924; | Μ | Греческая заглавная буква мю
&Nu; | &#925; | Ν | Греческая заглавная буква ню
&Xi; | &#926; | Ξ | Греческая заглавная буква кси
&Omicron; | &#927; | Ο | Греческая заглавная буква омикрон
&Pi; | &#928; | Π | Греческая заглавная буква пи
&Rho; | &#929; | Ρ | Греческая заглавная буква ро
&Sigma; | &#931; | Σ | Греческая заглавная буква сигма
&Tau; | &#932; | Τ | Греческая заглавная буква тау
&Upsilon; | &#933; | Υ | Греческая заглавная буква ипсилон
&Phi; | &#934; | Φ | Греческая заглавная буква фи
&Chi; | &#935; | Χ | Греческая заглавная буква хи
&Psi; | &#936; | Ψ | Греческая заглавная буква пси
&Omega; | &#937; | Ω | Греческая заглавная буква омега
&alpha; | &#945; | α | Греческая строчная буква альфа
&beta; | &#946; | β | Греческая строчная буква бета
&gamma; | &#947; | γ | Греческая строчная буква гамма
&delta; | &#948; | δ | Греческая строчная буква дельта
&epsilon; | &#949; | ε | Греческая строчная буква эпсилон
&zeta; | &#950; | ζ | Греческая строчная буква дзета
&eta; | &#951; | η | Греческая строчная буква эта
&theta; | &#952; | θ | Греческая строчная буква тета
&iota; | &#953; | ι | Греческая строчная буква иота
&kappa; | &#954; | κ | Греческая строчная буква каппа
&lambda; | &#955; | λ | Греческая строчная буква лямбда
&mu; | &#956; | μ | Греческая строчная буква мю
&nu; | &#957; | ν | Греческая строчная буква ню
&xi; | &#958; | ξ | Греческая строчная буква кси
&omicron; | &#959; | ο | Греческая строчная буква омикрон
&pi; | &#960; | π | Греческая строчная буква пи
&rho; | &#961; | ρ | Греческая строчная буква ро
&sigmaf; | &#962; | ς | Греческая строчная буква сигма
&sigma; | &#963; | σ | Греческая строчная буква сигма
&tau; | &#964; | τ | Греческая строчная буква тау
&upsilon; | &#965; | υ | Греческая строчная буква ипсилон
φ | &#966; | φ | Греческая строчная буква фи
&chi; | &#967; | χ | Греческая строчная буква хи
&psi; | &#968; | ψ | Греческая строчная буква пси
&omega; | &#969; | ω | Греческая строчная буква омега

Стрелки

Имя | Код | Вид | Описание
&larr; | &#8592; | ← | Стрелка влево
&uarr; | &#8593; | ↑ | Стрелка вверх
&rarr; | &#8594; | → | Стрелка вправо
&darr; | &#8595; | ↓ | Стрелка вниз
&harr; | &#8596; | ↔ | Стрелка влево-вправо

Пунктуация

Имя | Код | Вид | Описание
&bull; | &#8226; | • | Маркер
&hellip; | &#8230; | … | Многоточие
&prime; | &#8242; | ′ | Одиночный штрих — минуты и футы
&Prime; | &#8243; | ″ | Двойной штрих — секунды и дюймы
&oline; | &#8254; | ‾ | Надчеркивание
&frasl; | &#8260; | ⁄ | Косая дробная черта
&ndash; | &#8211; | – | Тире
&mdash; | &#8212; | — | Длинное тире
&lsquo; | &#8216; | ‘ | Левая одиночная кавычка
&rsquo; | &#8217; | ’ | Правая одиночная кавычка
&sbquo; | &#8218; | ‚ | Нижняя одиночная кавычка
&ldquo; | &#8220; | “ | Левая двойная кавычка
&rdquo; | &#8221; | ” | Правая двойная кавычка
&bdquo; | &#8222; | „ | Нижняя двойная кавычка


Универсальные атрибуты

Справочник по HTML

Универсальные

Универсальные атрибуты применяются практически ко всем тегам, поэтому выделены в отдельную группу, чтобы не повторять их для всех тегов.

accesskey

Позволяет получить доступ к элементу с помощью заданного сочетания клавиш.

contenteditable

Сообщает, что элемент доступен для редактирования пользователем.

contextmenu

Устанавливает контекстное меню для элемента.

class

Определяет имя класса, которое позволяет связать тег со стилевым оформлением.

dir

Задает направление и отображение текста — слева направо или справа налево.

id

Указывает имя стилевого идентификатора.

hidden

Скрывает содержимое элемента от просмотра.

lang

Браузер использует значение параметра для правильного отображения некоторых национальных символов.

spellcheck

Указывает браузеру проверять или нет правописание и грамматику в тексте.

style

Применяется для определения стиля элемента с помощью правил CSS.

tabindex

Устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.

title

Описывает содержимое элемента в виде всплывающей подсказки.


Атрибут profile

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 7.0+ | 2.0+ | 3.0+ | 1.0+ | 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут profile указывает адрес профиля метаданных. Обычно браузер распознаёт значение этого атрибута и выполняет некоторые соглашения, связанные с указанным профилем. Загрузки самого документа по указанному адресу в реальности не происходит, более того, его может вообще не быть.

В частности, profile используется для микроформата XFN (XHTML Friends Network) — это способ представления отношений между людьми с помощью ссылок и атрибутов rel с разными значениями. WordPress также активно применяет profile в своих шаблонах.

Синтаксис

<head profile="URL">
  ...
</head>

Значения

Адрес профиля.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head profile="http://gmpg.org/xfn/11">
  <title>XFN</title>
 </head>
 <body>
  <p><a href="http://jeff.org" rel="friend met">
   My friend Jeff
  </a></p>
 </body>
 </html>