Новые структурные теги HTML5
Которые позволяют четко описывать блоки контента
Джереми Вишузен
Опубликовано 01.02.2012
Что такое HTML5?
HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.
- Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
- Тег Canvas для рисования контента непосредственно в браузере
- «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
Совершенствование квалификационных навыков по данной тематике
Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. Основы HTML5.
Новый набор структурных элементов (тегов) в HTML5 видоизменяет способы структурирования HTML-документов. Новые структурные теги ориентированы на разделение HTML-документа на логические части. Название каждого структурного тега описывает тип контента, для хранения которого предназначен этот тег. Данная статья посвящена подробному описанию этих новых тегов.
История вопроса
В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).
HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.
HTML — это язык сценариев, который говорит Web-браузеру, каким образом следует представлять контент. Внутри контента могут присутствовать ссылки на другие документы, что обеспечивает удобный для пользователя метод навигации между документами в Интернете.
Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.
Первоначально назначение Интернета состояло в обслуживании простых текстовых документов. Первые браузеры были ориентированы исключительно на текст (другими словами, они не имели никаких затейливых окон — на экране присутствовал только текст). Даже добавление изображений стало весьма значительным достижением — в момент их первого появления. Сегодня люди выполняют в Интернете множество дел — от отправки посланий по электронной почте до просмотра телевизионных программ. Интернет уже превратился в нечто гораздо большее, чем механизм для транспортировки простых текстовых документов. Новые функции и новые способы использования породили новые трудности и новые задачи, для решения которых язык HTML никогда не предназначался.
Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.
Поддерживаемые браузеры
На момент написания данной статьи стандарт HTML5 еще не был выпущен официально. Большая часть контента в Web по-прежнему создается в соответствии со спецификацией HTML 4. Тем не менее, некоторые браузеры поддерживают спецификацию HTML5. Ситуация может оказаться непростой, поскольку каждый из этих браузеров способен поддерживать лишь некоторое подмножество функций HTML5. Перед созданием Web-сайта на базе HTML5 проверьте каждый из целевых браузеров на предмет поддержки функций, которые вы собираетесь использовать на своем сайте.
Обновленная декларация doctype
Вне зависимости от возможностей ваших целевых браузеров вы должны сообщать каждому браузеру, что хотите отображать своей контент с использованием спецификации HTML5. Это можно сделать с помощью декларации doctype.
Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.
Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.
Таблица 1. Doctype-декларации и их возможности
| Doctype-декларация | Возможности | Пример |
|---|---|---|
| HTML 4.01 strict | Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> |
| HTML 4.01 transitional | Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> |
| HTML 4.01 frameset | Аналогична декларации HTML transitional, но разрешает использование элементов frameset. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> |
| XHTML 1.0 strict | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> | |
| XHTML 1.0 transitional | Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> |
| XHTML 1.0 frameset | Аналогична декларации XHTML transitional, однако разрешает элементы frameset. | <DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> |
| XHTML 1.1 | Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> |
К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в листинге 1.
Листинг 1. HTML5-декларация doctype
<!DOCTYPE html>
Декларация должна находиться в самом начале HTML-документа, перед тегом <html>.
Новые структурные теги
Предпосылка создания новых структурных тегов — желание разделять Web-страницы на логические части с помощью элементов, описательные названия которых соответствуют контенту, который они содержат. С концептуальной точки зрения Web-страницу можно рассматривать как документ. Документы содержат заголовки, нижние колонтитулы, главы и различные другие условные обозначения, разделяющие документы на логические части.
В данном разделе на примере рассматриваются нынешние методы разделения HTML-документа. В последующих разделах статьи мы будем модифицировать первоначальный код с помощью структурных тегов HTML5 и в пошаговом режиме рассмотрим создание логической структуры документа.
Подход HTML 4
Даже если до этого вы создавали лишь простейшие HTML-документы, вы все равно знакомы с тегом div. В эпоху, предшествовавшую появлению HTML5, тег div являлся основным механизмом для создания блоков контента в HTML-документе. В качестве примера, в листинге 2 демонстрируется использование тегов div для создания простой страницы с заголовком, областью контента и нижним колонтитулом.
Листинг 2. Простая HTML-страница, использующая теги div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
A Simple HTML Page Using Divs
</title>
</head>
<body>
<div>Header</div>
<div>Content</div>
<div>Footer</div>
</body>
</html>Этот подход работает прекрасно; тег div— это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div. Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id, которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.
Подход HTML5
HTML5 решает эту проблему посредством предоставления набора теглв, которые точнее определяют основные блоки контента, образующего HTML-документ. Вне зависимости от итогового контента, отображаемого Web-страницей, большинство Web-страниц состоит из различных сочетаний типовых разделов и элементов страниц.
Код в листинге 2 создает простую страницу, которая имеет заголовок, область контента и нижний колонтитул. Эти, а также другие разделы и элементы страниц весьма распространены, поэтому спецификация HTML5 содержит теги, которые разбивают документы на типовые разделы и обозначают контент, содержащийся в каждом таком разделе. К числу новых тегов относятся следующие.
Остальная часть статьи посвящена описанию каждого из вышеперечисленных тегов. Кроме того, мы рассмотрим целевое использование этих тегов, для чего будем постепенно видоизменять первоначальный пример кода, созданного на базе тега div (см. листинг 2) с целью поэтапного задействования новых структурных тегов HTML5.
Тег header предназначен для того, чтобы пометить раздел HTML-страницы как заголовок. В листинге 3 приведен пример кода из листинга 2, но уже с использованием тега header.
Листинг 3. Добавление тега header
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<div>Content</div>
<div>Footer</div>
</body>
</html> Элемент doctype в листинге 3 также был изменен — чтобы показать браузеру, что при отображении страницы он должен использовать HTML5. Во всех последующих примерах предполагается, что мы тоже используем корректный элемент doctype.
Тег section
Тег section предназначен для разбиения контента на существенные блоки. В определенном смысле его применение аналогично разбиению книги на главы. После добавления тега section к примеру кода мы получаем код, показанный в листинге 4.
Листинг 4. Добавление тега section
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<p>
This is an important section of the page.
</p>
</section>
<div>Footer</div>
</body>
</html>Тег article
Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в листинге 5.
Листинг 5. Добавление тегов article
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<div>Footer</div>
</body>
</html>Тег aside
Тег aside указывает, что контент, который содержится внутри этого элемента, связан с основным контентом данной страницы, но не является его частью. В определенном смысле его применение аналогично внедрению комментария в тело текста (подобно данному комментарию). Контент в круглых скобках предоставляет дополнительную информацию об элементе, содержащем этот контент. После добавления тега aside к примеру кода мы получаем код, показанный в листинге 6.
Листинг 6. Добавление тега aside
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<div>Footer</div>
</body>
</html> Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в листинге 7.
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.
Контент, содержащийся в теге nav, предназначен для навигационных целей. После добавления тега nav к примеру кода мы получаем код, показанный в листинге 8.
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Some Nav Link</a>
<a href='#'>Some Other Nav Link</a>
<a href='#'>A Third Nav Link</a>
</nav>
</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html> Итоговый вариант примера
В листинге 9 показан результат замены исходных тегов div новыми структурными тегами HTML5.
Листинг 9. Итоговый вариант примера
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Some Nav Link</a>
<a href='#'>Some Other Nav Link</a>
<a href='#'>A Third Nav Link</a>
</nav>
</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов div (листинг 2) с результирующим вариантом (листинг 9) наглядно демонстрирует назначение новых структурных тегов.
Заключение
Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами div.
Ресурсы для скачивания
Похожие темы
- Оригинал статьи: New HTML5 structural tags
- Новые элементы в HTML5(developerWorks, август 2007 г.). Дополнительные сведения по структурным элементам HTML5.
- WHATWG: Организация WHATWG — это сообщество, отвечающее за спецификацию HTML5.
- W3C: Организация W3C создала первую спецификацию HTML, а в настоящее время вместе с WHATWG работает над спецификацией HTML5.
- HTML5 (Wikipedia): Дополнительные сведения о HTML5.
- Различия между HTML5 и HTML4 (W3C). Рабочий проект, позволяющий глубже понять различия между HTML 4 и HTML5.
- Первое знакомство с HTML5 (lynda.com): Чем является HTML5 (и чем не является).
Подпишите меня на уведомления к комментариям
| Тег | Описание |
|---|---|
| <!–…–> | Используется для добавления комментариев. |
| <!DOCTYPE> | Описывает создаваемый документ и предоставляет основную информацию для браузера. |
| <a> | Используется для создания ссылок. |
| <abbr> | Определяет текст как аббревиатуру с помощью атрибута title. |
| <address> | Задает контактные данные автора/владельца документа или статьи. |
| <area> | Определяет область внутри изображения-карты (изображения с активной областью). Всегда вложен внутрь тега <map>. |
| <article> | Тег для задания независимого логически завершенного блока контента. Потенциальные источники: сообщение форума, блога, новости, комментарии. |
| <aside> | Определяет вторичный или связанный контент в стороне от основного контента страницы. |
| <audio> | Загружает звуковой контент на веб-страницу. |
| <b> | Задает полужирное начертание шрифта. |
| <base> | Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде. |
| <bdi> | Изолирует части текста, которые могут быть отформатированы в направлении, отличном от другого текста за их пределами. |
| <bdo> | Задает направление вывода текста преимущественно для языков, в которых чтение текста происходит справа налево. |
| <blockquote> | Определяет выделенный текст как цитату, применяется для описания больших цитат. |
| <body> | Внутри этого тега располагается документ. Текст, находящийся внутри этих тегов, будет отображаться браузером. |
| <br> | Перенос текста на новую строку. |
| <button> | Создает интерактивную кнопку. Внутрь тега можно поместить содержимое – текст или изображение. |
| <canvas> | Используется для отрисовки графики, “на лету”, с помощью скриптов (обычно это JavaScript). Представляет собой контейнер для графики, для рисования необходим скрипт. |
| <caption> | Определяет заголовок (подпись) таблицы. Добавляется непосредственно после тега <table>. |
| <cite> | Отмечает небольшую цитату или сноску, взятую из другого источника. |
| <code> | Указывает на программный код. |
| <col> | Предназначен для форматирования групп столбцов, не содержащих информацию одного типа. |
| <colgroup> | Создает структурную группу столбцов, выделяющую множество логически однородных ячеек. |
| <datalist> | Задает выпадающий список для элемента <input>. |
| <dd> | Используется для описания термина из тега <dt>. |
| <del> | Помечает текст как удаленный. |
| <details> | Задает дополнительные сведения, которые пользователь по желанию может просмотреть или скрыть. Позволяет размещать любой контент внутри тега. |
| <dfn> | Выделяет текст как определение. |
| <dialog> | Служит для создания диалоговых окон на странице. |
| <div> | Выделяет большие блоки текста для форматирования с помощью CSS-стилей. |
| <dl> | Тег-контейнер, внутри которого находятся определение и описание термина. |
| <dt> | Используется для задания определения. |
| <em> | Выделяет важные фрагменты текста. |
| <embed> | Определяет внешний интерактивный контент или плагин. |
| <fieldset> | Группирует связанные элементы в форме, рисуя рамку вокруг них. |
| <figcaption> | Задает заголовок для элемента <figure>. |
| <figure> | Используется для группирования медиа-контента, например, изображения и подписи к нему. |
| <footer> | Определяет завершающую область документа или раздела. |
| <form> | Добавляет на страницу форму, позволяющую организовать сбор информации от посетителей сайта. Не имеет смысла без атрибута action. |
| <h2-h6> | Создает заголовки шести уровней. |
| <head> | Используется для служебных целей, содержит множество данных, указывающих браузеру, как следует обрабатывать веб-страницы. Введенная в нем информация не отображается в окне браузера. Внутри тегов <head> используются следующие теги: <title>, <meta>, <script>, <link>, <style>. |
| <header> | Определяет заголовок страницы или раздела. |
| <hr> | Создает горизонтальную линию на веб-странице. |
| <html> | Определяет html-документ, все содержимое страницы записывается внутри его контейнера. |
| <i> | Отображает выделенный текст курсивом. |
| <iframe> | Создает встроенный фрейм, загружая в текущий html-документ другой документ. |
| <img> | Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения. |
| <input> | Создает поля для формы. |
| <ins> | Отмечает текст как вставку, применяется для выделения изменений, вносимых в документ. |
| <kbd> | Помечает текст, вводимый пользователем с клавиатуры. |
| <keygen> | Генерирует пару ключей – закрытый и открытый. При отправке формы, закрытый ключ хранится локально, и открытый ключ отправляется на сервер. Работает внутри тега <form>. |
| <label> | Добавляет текстовую метку для элемента <input>, связывая саму надпись и поле ввода при помощи идентификатора id. |
| <legend> | Формирует заголовок группы элементов формы, заданных при помощи элемента <fieldset>. |
| <li> | Задает элемент маркированного и нумерованного списка. |
| <link> | Определяет отношения между текущей страницей и другими документами, а также подключает файл с таблицами стилей к документу. Закрывающий тег не требуется. |
| <main> | Задает основное содержимое документа. Содержимое внутри элемента должно быть уникальным. Оно не должно содержать контент, который повторяется во всех частях документах, таких как боковые панели, навигационные ссылки, информацию об авторских правах, логотипы сайта, и поисковые формы. |
| <map> | Используется для определения изображения-карты, изображения с активной областью. Является контейнером для элементов <area>. |
| <mark> | Используется для выделения текста. |
| <menu> | Определяет список меню/команд. Используется для контекстных меню, панели инструментов и для включения элементов управления формы и команд. |
| <menuitem> | Определяет команду/пункт меню, которые пользователь может вызвать из всплывающего меню. |
| <meta> | Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы – для ее индексации. В блоке <head> может быть несколько тегов <meta>, потому что в зависимости от используемых атрибутов они несут разную информацию. |
| <meter> | Определяет измерения в заранее заданном диапазоне. |
| <nav> | Задает навигационные ссылки по сайту. |
| <noscript> | Определяет секцию, не поддерживающую сценарий (скрипт). |
| <object> | Определяет контейнер, в который встраивается элемент мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно другую веб-страницу в HTML-документ. Дополнительно внутрь контейнера <object> можно поместить тег <param> для передачи дополнительных параметров плагинов. |
| <ol> | Создает упорядоченный нумерованный список. |
| <optgroup> | Является контейнером для группы тегов <option>, представляя варианты для выбора в раскрывающемся списке. |
| <option> | Определяет вариант в раскрывающемся списке. |
| <output> | Представляет собой результат вычисления (обычно рассчитанный с помощью скрипта). |
| <p> | Организует абзацы, разделяя текст на логические части. |
| <param> | Определяет параметр для объекта. |
| <pre> | Позволяет вводить текст без форматирования, с сохранением пробелов и переносов текста. |
| <progress> | Определяет ход выполнения задачи любого рода. |
| <q> | Определяет краткую цитату. |
| <rp> | Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>. |
| <rt> | Добавляет краткую характеристику сверху или снизу от символов (для типографики Восточной Азии), заключенных в элементе <ruby>, выводится уменьшенным шрифтом. |
| <ruby> | Используются для аннотаций в типографике Восточной Азии, и показывают объяснение Восточно-Азиатских символов. |
| <s> | Отображает текст перечеркнутым. |
| <samp> | Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, отображается моноширинным шрифтом. |
| <script> | Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src. |
| <section> | Определяет логическую область (раздел) страницы. |
| <select> | Используется для создания списков для формы. |
| <small> | Отображает выделенный текст шрифтом меньшего размера. |
| <source> | Используется для указания медиа-ресурсов для мультимедийных элементов, таких как <video> и <audio>. |
| <span> | Выделяет часть текста и позволяет форматировать отрывки текста внутри другого элемента. |
| <strong> | Расставляет акцент на тексте, выделяя его полужирным. |
| <style> | Внутри этого тега задаются стили, используемые на странице. Этих тегов на странице может быть несколько. |
| <sub> | Задает подстрочное написание символов. |
| <summary> | Определяет видимый заголовок для тега <details>. Отображается в виде закрашенного треугольника, кликнув по которому можно просмотреть подробности заголовка. |
| <sup> | Задает надстрочное написание символов. |
| <table> | Тег для создания таблицы. |
| <tbody> | Определяет тело таблицы. |
| <td> | Создает ячейку таблицы. |
| <textarea> | Создает большие поля для ввода текста. |
| <tfoot> | Определяет нижний колонтитул таблицы. |
| <th> | Создает заголовок ячейки таблицы. |
| <thead> | Определяет заголовок таблицы. |
| <time> | Определяет дату/время. |
| <title> | Задает название страницы, которое будет отображаться в строке с названием приложения окна браузера. Текст, содержащийся внутри, отображается в качестве заголовка страницы. |
| <tr> | Создает строку таблицы. |
| <track> | Используется для указания субтитров для медиа-элементов (<audio> и <video>) |
| <u> | Создает подчеркнутый текст. |
| <ul> | Создает маркированный список. |
| <var> | Выделяет переменные из программ. |
| <video> | Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg. |
| <wbr> | Указывает браузеру возможное место разрыва длинной строки. |
| Объекты | Теги | Специфические атрибуты тегов |
|---|---|---|
| Документ HTML | <html>…</html> | manifest |
| Голова документа | <head>…</head> | |
| Метаданные документа | <meta>…</meta> | charset, content, http-equiv, name |
| Заголовок документа | <title>…</title> | |
| Присоединение внешнего файла (стилей, скриптов, иконок) | <link>…</link> | href, hrefland, media, rel, sizes, type |
| Базовый адрес для относительных ссылок | <base> | href, target |
| Скрипт, выполняющийся на стороне клиента | <script>…</script> | async, defer, type, charset, src |
| Альтернативное содержимое для браузеров, у которых не работают скрипты | <noscript>…</noscript> | |
| Тело документа | <body>…</body> | |
| Подвал документа | <footer>…</footer> | |
| Заголовочный блок | <header>…</header> | |
| Панель навигации | <nav>…</nav> | |
| Раздел (объединяет объекты одной тематики) | <section>…</section> | |
| Боковая панель (неосновная информация) | <aside>…</aside> | |
| Статья (самодостаточный объект) | <article>…</article> | |
| Обёртка для стилизации блочных элементов | <div>…</div> | |
| Группа заголовков разного уровня | <hgroup>…</hgroup> | |
| Заголовок 1-го уровня | <h2>…</h2> | |
| … | … | |
| Заголовок 6-го уровня | <h6>…</h6> | |
| Абзац | <p>…</p> | |
| Обёртка для стилизации строковых элементов | <span>…</span> | |
| Гиперссылка | <a>…</a> | href, hreflang, media, rel, target, type |
| Комментарий | <!— … —> | |
| Перевод строки | </br> | |
| Перевод строки при необходимости | <wbr> | |
| Аудио | <audio>…</audio> | autoplay, controls, loop, preload, src |
| Видео | <video>…</video> | autoplay, controls, height, loop, muted, poster, preload, src, width |
| Альтернативные источники медиа-файлов для Аудио и Видео | <source>…</source> | media, src, type |
| Текстовая дорожка для Аудио и Видео | <track> | default, kind, label, src, srclang |
| Автономный объект (иллюстрация, видео), который можно без ущерба переместить в другое место | <figure>…</figure> | |
| Подпись к объекту figure | <figcaption>…</figcaption> | |
| Картинка | <img> | alt, height, src, ismap, usemap, width |
| Карта | <map>…</map> | name |
| Область карты с гиперссылкой (область-ссылка) | <area>…</area> | alt, coords, href, hreflang, media, rel, shape, target, type |
| Список нумерованный | <ol>…</ol> | reversed, start, type |
| Список ненумерованный | <ul>…</ul> | type |
| Элемент списка | <li>…</li> | value |
| Список терминов | <dl>…</dl> | |
| Термин | <dt>…</dt> | |
| Значение термина | <dd>…</dd> | |
| Форма | <form>…</form> | accept-charset, action, autocomplete, enctype, method, name, novalidate, target |
| Поле ввода формы | <input> | accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width |
| Список данных для поля ввода | <datalist>…</datalist> | |
| Многострочное поле ввода | <textarea>…</textarea> | autofocus, cols, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap |
| Поле вывода формы | <output>…</output> | for, form, name |
| Выпадающий список | <select>…</select> | autofocus, disabled, form, multiple, name, size |
| Элемент выпадающего списка | <option>…</option> | disabled, label, selected, value |
| Группировка элементов в выпадающем списке | <optgroup>…</optgroup> | disabled, label |
| Группа элементов формы | <fieldset>…</fieldset> | disabled, form, name |
| Заголовок группы элементов формы | <legend>…</legend> | |
| Ход выполнения задачи | <progress>…</progress> | max, value |
| Шкала | <meter>…</meter> | form, high, low, min, max, optimum, value |
| Кнопка | <button>…</button> | autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value |
| Метка элементов формы | <label>…</label> | for, form |
| Генератор ключей шифрования | <keygen> | autofocus, challenge, disabled, form, keytype, name |
| Заголовок таблицы | <caption>…</caption> | |
| Таблица | <table>…</table> | border |
| Строка таблицы | <tr>…</tr> | |
| Заголовочная ячейка таблицы | <th>…</th> | |
| Ячейка таблицы | <td>…</td> | colspan, rowspan |
| Группировка заголовочных элементов таблицы | <thead>…</thead> | |
| Группировка элементов тела таблицы | <tbody>…</tbody> | |
| Группировка элементов подвала таблицы | <tfoot>…</tfoot> | |
| Дата публикации | <time>…</time> | datetime, pubdate |
| Данные | <data>…</data> | value |
| Подсветка текста | <mark>…</mark> | Пример |
| Выделение важного текста | <strong>…</strong> | Пример |
| Акцентирование текста | <em>…</em> | Пример |
| Выделение цитат, иностранных слов, технических терминов | <i>…</i> | Пример |
| Большой шрифт | <big>…</big> | Пример |
| Юридическая информация | <small>…</small> | Пример |
| Выделение источника цитирования | <cite>…</cite> | Пример |
| Контактная информация | <address>…</address> | Пример |
| Компьютерный код | <code>…</code> | Пример |
| Надстрочный текст | <sup>…</sup> | ПримерПример |
| Подстрочный текст | <sub>…</sub> | ПримерПример |
| Подчёркнутый текст | <u>…</u> | Пример |
| Зачёркнутый текст | <s>…</s> | |
| Длинная цитата | <blockquote>…</blockquote> | Цитата |
| Аббревиатура | <abbr>…</abbr> | Пример |
| Скрытый текстовый блок | <details>…</details> | open |
| Заголовок скрытого текстового блока | <summary>…</summary> | |
| Определение направления текста | <bdo> | dir |
| Область экрана для анимации с помощью сценариев (JavaScript) | <сanvas>…</сanvas> | height, width |
| Смена темы (горизонтальная черта) | <hr> | |
| Плавающий фрейм (рекламный блок) | <iframe> | align, allowtransparency, height, hspace, name, sandbox, seamless, src, srсdoc, width |
| Отформатированный текст | <pre>…</pre> | |
| Атрибуты | События | |
| Мышка | ||
| onclick | клик | |
| ondblclick | двойной клик | |
| onmousedown | нажатие кнопки | |
| onmouseup | отпускание кнопки | |
| ondragstart | начало перетаскивания | |
| ondrag | перетаскивание элемента | |
| ondragend | окончание перетаскивания элемента | |
| ondragenter | попадание перетаскиваемого объекта в заданную область | |
| ondragleave | отпускание объекта в заданной области | |
| ondragover | перетаскиваемый объект вышел за границы заданной области | |
| ondrop | перетаскиваемый объект упал в заданной области | |
| onmousemove | перемещение указателя | |
| onmouseover | указатель перемещается по элементу | |
| onmouseout | указатель вышел за границы элемента | |
| onmousewheel | вращение колёсика мышки | |
| onscroll | прокручивание полосы прокрутки объекта | |
| Клавиатура | ||
| onkeydown | нажатие клавиши | |
| onkeyup | отпускание клавиши | |
| onkeypress | нажатие и отпускание клавиши | |
| Форма | ||
| onfocus | элемент попал в фокус | |
| onblur | объект потерял фокус | |
| onchange | изменение элемента | |
| onformchange | изменение формы | |
| onforminput | ввод данных в форму | |
| oninput | изменение данных элемента формы | |
| oninvalid | значение элемента введено неправильно | |
| onselect | выделение текста в элементе | |
| onsubmit | клик на кнопке Submit (отправить форму) | |
| onreset | клик на кнопке Reset (сбросить форму) | |
| Окно браузера (атрибуты тега <body>) | ||
| onafterprint | после печати документа | |
| onbeforeprint | перед печатью документа | |
| onfocus | окно попало в фокус | |
| onblur | окно потеряло в фокус | |
| onhashchange | изменение хэштега (окончания url-адреса после знака «решётка» #) | |
| onload | страница полностью загружена | |
| onmessage | окно получило сообщение | |
| onoffline | переход в offline (пропал Интернет) | |
| ononline | переход в online (появился Интернет) | |
| onpagehide | покинули страницу по ссылке или по истории | |
| onpageshow | вернулись на страницу по истории (из кэша) | |
| onpopstate | открыли страницу из истории посещений браузера | |
| onredo | повтор | |
| onresize | изменение размеров окна браузера | |
| onstorage | изменение Web Storage | |
| onundo | отмена | |
| onbeforeunload | попытка покидания страницы | |
| onunload | закрытие окна | |
| Буфер обмена | ||
| oncopy | копирование | |
| oncut | вырезание | |
| onpaste | вставка | |
| Медиа | ||
| onstalled | браузер не может получить медиа-данные | |
| onloadstart | перед началом загрузки | |
| onabort | отмена загрузки | |
| onsuspend | прерывание загрузки медиа-данных | |
| onprogress | браузер в процессе получения медиа-данных | |
| onloadeddata | медиа-данные загружены | |
| onloadedmetadata | мета-данные загружены | |
| onerror | ошибка при загрузке | |
| oncanplay | файл готов для проигрывания (уже достаточно буферизирован) | |
| oncanplaythrough | файл готов для проигрывания без задержек на буферизацию | |
| onreadystatechange | изменение состояния готовности | |
| onemptied | файл недоступен | |
| onplay | перед началом воспроизвдения | |
| onplaying | воспроизведение файла | |
| onpause | пауза воспроизведения | |
| onratechange | изменение режима воспроизведения | |
| ondurationchange | изменение длины медиа-файла | |
| onseeking | происходит перемещение в новую позицию воспроизведения | |
| onseeked | завершено перемещение в новую позицию воспроизведения | |
| onwaiting | воспроизведение приостановлено на буферизацию | |
| ontimeupdate | изменение позиции воспроизведения | |
| onvolumechange | изменение громкости звука | |
| onended | файл воспроизведён до конца | |
Семантические элементы HTML5
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div>). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div>, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны глобальные атрибуты.
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Метаданные
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент <time>
Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
<time datetime="2014-09-25"> 25 Сентября 2014</time>Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>2. Элемент <mark>
Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
3. Элемент <bdi>
Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
4. Элемент <wbr>
Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
5. Элементы для описания Восточно-Азиатских символов
Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.
Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.
Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
Необязательные теги HTML5-разметки
В спецификации HTML5 некоторые правила разметки были ослаблены. В частности, использование элементов <html>, <head> и <body> уже не является обязательным для разметки HTML5. Тем не менее браузер все равно считает, что они существуют, в чем можно убедиться, просмотрев разметку веб-страницы в Mоzilla Firebug или в Google Chrome Inspector.
Эти элементы всегда «подразумеваются», но если они будут использоваться в таблице CSS-стилей или в JavaScript-сценариях, то их надо прописывать в явном виде.
Также разрешается не использовать закрывающую обратную косую черту в элементах без содержимого, их список можно увидеть в нижеприведенной таблице.
1. Элемент <html>
Начальный тег <html> может быть опущен, если сразу за тегом не идет комментарий. Закрывающий тег </html> также может быть опущен, если перед ним нет комментария.
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>2. Элемент <head>
Начальный тег <head> может быть опущен, если элемент <head> пуст, или если сразу после него идет другой HTML-элемент.
Закрывающий тег </head> может быть опущен, если он не следует сразу за пробелом или за комментарием.
<!DOCTYPE HTML>
<title>Hello</title>
<body>
<p>Welcome to this example.</p>
</body>3. Элемент <body>
Начальный тег <body> может быть опущен, если элемент пуст, или если первое, что внутри элемента не является пробелом или комментарием, за исключением случаев, когда первое, что идет за тегом <body> являются элементы <meta>, <link>, <script> или <style>.
Закрывающий тег </body> может быть опущен, если перед ним нет комментария.
<!DOCTYPE HTML>
<title>Hello</title>
<p>Welcome to this example.</p>4. Элемент <li>
Закрывающий тег </li> может быть опущен, если элемент <li> сразу следует за другим элементом <li>, или если больше нет содержания в элементе, в который вложен тег.
5. Элементы <dt> и <dd>
Закрывающий тег </dt> может быть опущен, если элемент <dt> следует сразу за еще одним элементом <dt> или <dd>.
Закрывающий тег </dd> может быть опущен, если элемент <dd> следует сразу за еще одним элементом <dd> или <dt>, или если больше нет содержания в элементе, в который вложен тег.
6. Элемент <p>
Закрывающий тег </p> может быть опущен, если <p> следует сразу за любым из перечисленных элементов:
address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h2, h3, h4, h5, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, ul, или если больше нет содержания в элементе, в который вложен тег <p>, или родительским элементом не является тег <a>.
7. Элементы <rt> и <rp>
Закрывающий тег </rt> может быть опущен, если элемент <rt> следует сразу за еще одним элементом <rt> или <rp>, или если больше нет содержания в элементе, в который вложен тег.
Закрывающий тег </rp> может быть опущен, если элемент <rp> следует сразу за еще одним <rp> или <rt> элементом, или если больше нет содержания в элементе, в который вложен тег.
8. Элементы <optgroup> и <option>
Закрывающий тег </optgroup> может быть опущен, если элемент <optgroup> следует сразу за еще одним элементом <optgroup>, или если нет больше содержания в родительском элементе.
Закрывающий тег </option> может быть опущен, если элемент <option> следует сразу за еще одним элементом <option>, или если он идет сразу после <optgroup>, или если нет больше содержания в родительском элементе.
9. Элемент <colgroup>
Начальный тег элемента <colgroup> может быть опущен, за элементом <colgroup> сразу идет элемент <col>, и если перед элементом непосредственно не предшествует другой элемент <colgroup>, закрывающий тег которого был опущен. (Он не может быть опущен, если элемент пустой.)
10. Элементы <thead>, <tbody>, <tfoot>, <td>, <tr>
Закрывающий тег </thead> может быть опущен, если элемент <thead> следует сразу за <tbody> или <tfoot>.
Открывающий тег <tbody> может быть опущен, если за ним сразу идет элемент <tr>, и если перед элементом непосредственно не предшествует другой <tbody>, <thead>, или <tfoot>, закрывающий тег которого был опущен. (Он не может быть опущен, если элемент является пустым.)
Закрывающий тег </tbody> может быть опущен, если после элемента <tbody> сразу следует <tbody> или <tfoot>, или если больше нет содержания в родительском элементе.
Закрывающий тег </tfoot> может быть опущен, если элемент <tfoot> следует сразу же за <tbody>, или если больше нет содержания в родительском элементе.
Закрывающий тег </tr> может быть опущен, если элемент <tr> следует сразу же за еще одним элементом <tr>, или если больше нет содержания в родительском элементе.
Закрывающий тег </td> может быть опущен, если элемент <td> следует сразу же за еще одним элементом <td> или <th>, или, если нет больше содержания в родительском элементе.
Закрывающий тег </th> может быть опущен, если элемент <th> следует сразу же за <td> или <th>, или, если больше нет содержания в родительском элементе.
<table>
<caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
<colgroup><col><col><col>
<thead>
<tr><th>Function<th>Control Unit<th>Central Station
<tbody>
<tr><td>Headlight<td>✔<td>✔
<tr><td>Interior Lights<td>✔<td>✔
<tr><td>Electric locomotive operating sounds<td>✔<td>✔
<tr><td>Engineer's cab lighting<td><td>✔
<tr><td>Station Announcements - Swiss<td><td>✔
</table>| Тег | Открывающий тег | Закрывающий тег | Пустой тег |
|---|---|---|---|
| area | Запрещен | Разрешен | |
| base | Запрещен | Разрешен | |
| body | Необязательный | Необязательный | |
| br | Запрещен | Разрешен | |
| col | Запрещен | Разрешен | |
| colgroup | Необязательный | ||
| dd | Необязательный | ||
| dt | Необязательный | ||
| head | Необязательный | Необязательный | |
| hr | Запрещен | Разрешен | |
| html | Необязательный | Необязательный | |
| img | Запрещен | Разрешен | |
| input | Запрещен | Разрешен | |
| li | Необязательный | ||
| link | Запрещен | Разрешен | |
| meta | Запрещен | Разрешен | |
| option | Необязательный | ||
| p | Необязательный | ||
| param | Запрещен | Разрешен | |
| tbody | Необязательный | Необязательный | |
| td | Необязательный | ||
| tfoot | Необязательный | ||
| th | Необязательный | ||
| thead | Необязательный | ||
| tr | Необязательный |
улучшенные возможности, новые типы полей и атрибуты
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
Рис. 1. Улучшенные веб-формы с помощью HTML5Создание HTML5-формы
1. Элемент <form>
Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
| Атрибут | Значение / описание |
|---|---|
| accept-charset | Значение атрибута представляет собой разделенный пробелами список кодировок символов, которые будут использоваться для отправки формы, например, <form accept-charset="ISO-8859-1">. |
| action | Обязательный атрибут, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение #. Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> |
| autocomplete | Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм. |
| enctype | Используется для указания MIME-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data". Указывается только в случае method="post". application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как +, а специальный символ, например, такой как ! будет закодирован шестнадцатиричной форме как %21. multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. text/plain — указывает на то, что передается обычный (не html) текст. |
| method | Задает способ передачи данных формы. Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2. Имена и значения переменных присоединяются к адресу сервера после знака ? и разделяются между собой знаком &. Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn, пробел заменяется на +. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. <form action="action.php" enctype="multipart/form-data" method="post"></form> |
| name | Задает имя формы, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros". |
| novalidate | Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения |
| target | Указывает окно, в которое будет направлена информация: _blank — новое окно _self — тот же фрейм _parent — родительский фрейм (если он существует, если нет — то в текущий) _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. |
2. Группировка элементов формы
Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:
<form>
<fieldset>
<legend>Контактная информация</legend>
<p><label for="name">Имя <em>*</em></label><input type="text"></p>
<p><label for="email">E-mail</label><input type="email"></p>
</fieldset>
<p><input type="submit" value="Отправить"></p>
</form>
Рис. 2. Группировка элементов формы с помощью <fieldset>| Атрибут | Значение / описание |
|---|---|
| disabled | Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset>, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled>. |
| form | Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером. |
| name | Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id. |
3. Создание полей формы
Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.
| Атрибут | Значение / описание |
|---|---|
| accept | Определяет тип файла, разрешенных для отправки на сервер. Указывается только для <input type="file">. Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc" audio/* — разрешает загрузку аудиофайлов video/* — разрешает загрузку видеофайлов image/* — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов. |
| alt | Определяет альтернативный текст для изображений, указывается только для <input type="image">. |
| autocomplete | Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм. |
| autofocus | Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения. |
| checked | Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio". |
| disabled | Отключает возможность редактирования и копирования содержимого поля. |
| form | Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы. |
| formaction | Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы. |
| formenctype | Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image". Варианты: application/x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ +, специальные символы преобразуются в значения ASCII HEX) multipart/form-data — символы не кодируются text/plain — пробелы заменяются на символ +, а специальные символы не кодируются. |
| formmethod | Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута method формы. Варианты: get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение post — данные формы отправляются в виде http-запроса. |
| formnovalidate | Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута. |
| formtarget | Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута target формы. _blank — загружает ответ в новое окно/вкладку _self — загружает ответ в то же окно (значение по умолчанию) _parent – загружает ответ в родительский фрейм _top – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем. |
| height | Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, <input type="image" src="img_submit.gif">. Рекомендуется одновременно устанавливать как высоту, так и ширину поля. |
| list | Является ссылкой на элемент <datalist>, содержит его id.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. |
| max | Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min. Работает со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week. |
| maxlength | Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов. |
| min | Позволяет ограничить допустимый ввод числовых данных минимальным значением. |
| multiple | Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута. |
| name | Определяет имя, которое будет использоваться для доступа к элементу <form>, к примеру, в таблицах стилей css. Является аналогом атрибута id. |
| pattern | Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="[a-z]{3}-[0-9]{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9. |
| placeholder | Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка). |
| readonly | Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута. |
| required | Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута. |
| size | Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text, search, tel, url, email и password. |
| src | Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image">. |
| step | Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг). |
| type | button — создает кнопку. |
| checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль | |
| color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате. | |
| date — позволяет вводить дату в формате дд.мм.гггг. День рождения: | |
| datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм. День рождения — день и время: | |
| email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail: | |
| file — позволяет загружать файлы с компьютера пользователя. Выберите файл: | |
| hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию. | |
| image — создает кнопку, позволяя вместо текста на кнопке вставить изображение. | |
| month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм. | |
| number — предназначено для ввода целочисленных значений. Его атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5): | |
| password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль: | |
| radio — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец: | |
| range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора | |
| reset — создает кнопку, которая очищает поля формы от введенных пользователем данных. | |
| search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск: | |
| submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки. | |
| text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста. | |
| time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время: | |
| url — поле предназначено для указания URL-адресов. Главная страница: | |
| week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю: | |
| value | Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file. |
| width | Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы. |
4. Текстовые поля ввода
Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.
| Атрибут | Значение / описание |
|---|---|
| autofocus | Устанавливает фокус на нужном начальном текстовом поле автоматически. |
| cols | Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки. |
| disabled | Отключает возможность редактирования и копирования содержимого поля. |
| form | Значение атрибута должно быть равно значению атрибута id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле. |
| maxlength | Значение атрибута задает максимальное число символов для ввода в поле. |
| name | Задает имя текстового поля. |
| placeholder | Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение. |
| readonly | Отключает возможность редактирования содержимого поля. |
| required | Выводит сообщение о том, что данное поле является обязательным для заполнения. |
| rows | Указывает число, которое означает, сколько строк должно отображаться в текстовой области. |
| wrap | Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard, то должно указываться значение атрибута cols. |
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.
Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
| Атрибут | Значение / описание |
|---|---|
| autofocus | Устанавливает автоматический фокус на элементе при загрузке страницы. |
| disabled | Отключает раскрывающийся список. |
| form | Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы. |
| multiple | Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl. |
| name | Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка. |
| required | Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы. |
| size | Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом. |
| Атрибут | Значение / описание |
|---|---|
| disabled | Делает недоступным для выбора элемент списка. |
| label | Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка. |
| selected | Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером. |
| value | Указывает значение, которое будет отправлено на сервер при отправке формы. |
| Атрибут | Значение / описание |
|---|---|
| disabled | Отключает данную группу элементов списка для выбора. |
| label | Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержит текст, недоступный для выбора, который будет располагаться над соответствующими пунктами списка. Текст выделяется в браузере жирным начертанием. |
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.
<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>
<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>| Атрибут | Значение / описание |
|---|---|
| for | Определяет, к какому полю формы привязан данный элемент. Можно создавать поясняющие надписи к следующим элементам формы: <input>, <textarea>, <select>. Значение атрибута содержит идентификатор поля формы. |
7. Кнопки
Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.
Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
| Атрибут | Значение / описание |
|---|---|
| autofocus | Устанавливает фокус на кнопке при загрузке страницы. |
| disabled | Отключает кнопку, делая ее некликабельной. |
| form | Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы. |
| formaction | Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit". Переопределяет значение атрибута action, указанного для элемента <form>. |
| formenctype | Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit". Переопределяет значение атрибута enctype, указанного для элемента <form>. Возможные значения: application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы. multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. text/plain — символы не кодируются, а пробелы заменяются на символ +. |
| formmethod | Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method, указанного для элемента <form>. Указывается только для кнопок типа type="submit". Возможные значения: get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру. |
| formnovalidate | Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit". |
| formtarget | Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit". Переопределяет значение атрибута target, указанного для элемента <form>. _blank — загружает ответ в новое окно/вкладку _self — загружает ответ в то же окно (значение по умолчанию) _parent — загружает ответ в родительский фрейм _top — загружает ответ во весь экран framename — загружает ответ во фрейм с указанным именем. |
| name | Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript. |
| type | Определяет тип кнопки. Возможные значения: button — кликабельная кнопка reset — кнопка сброса, возвращает первоначальное значение submit — кнопка для отправки данных формы. |
| value | Задает значение по умолчанию, отправляемое при нажатии на кнопку. |
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked, то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент <label> применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить <input> внутрь элемента <label>.