Все теги html5 с описанием и примерами: HTML 5 Справочник всех тегов онлайн и примеры – HTML и HTML5. Описание тегов по основным разделам

Содержание

Новые структурные теги HTML5

Которые позволяют четко описывать блоки контента

Jeremy Wischusen photo

Джереми Вишузен
Опубликовано 01.02.2012

Comments

Что такое 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Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены. <!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.

Листинг 7. Добавление тега footer
<!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, предназначен для навигационных целей. После добавления тега nav к примеру кода мы получаем код, показанный в листинге 8.

Листинг 8. Добавление тега nav
<!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 (и чем не является).

Подпишите меня на уведомления к комментариям

HTML5 теги | Vavik96

ТегОписание
<!–…–>Используется для добавления комментариев.
<!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>Указывает браузеру возможное место разрыва длинной строки.

HTML5 за один урок

HTML-теги обеспечивают смысловое (семантическое) структурирование HTML документа и подготовку текста к стилизации с помощью таблиц CSS.

У тегов могут быть параметры, которые называются атрибутами.
Атрибут состоит из имени и значения: имя="значение"

Глобальные атрибуты могут применяться ко всем тегам.

Атрибуты событий привязывают к тегам скрипты JavaScript, которые запускаются при событиях:

Изучение всех атрибутов выходит за рамки одного урока, поэтому ограничимся только теми атрибутами, без которых трудно обойтись.

Теги и атрибуты
Объекты Теги Специфические атрибуты тегов
Документ 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&gt 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>
Таблица 1. Необязательные и запрещенные теги в спецификации HTML5
Тег Открывающий тег Закрывающий тег Пустой тег
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.

html5_formРис. 1. Улучшенные веб-формы с помощью HTML5

Создание HTML5-формы

1. Элемент <form>

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

Таблица 1. Атрибуты тега <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>
fieldsetРис. 2. Группировка элементов формы с помощью <fieldset>
Таблица 2. Атрибуты тега <fieldset>
Атрибут Значение / описание
disabled Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset>, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled>.
form Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
name Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id.

3. Создание полей формы

Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.

Таблица 3. Атрибуты тега <input>
Атрибут Значение / описание
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. Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Таблица 4. Атрибуты тега <textarea>
Атрибут Значение / описание
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>, который создает заголовки в списках.

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

Таблица 5. Атрибуты тега <select>
Атрибут Значение / описание
autofocus Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled Отключает раскрывающийся список.
form Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы.
multiple Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl.
name Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
required Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
size Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.
Таблица 6. Атрибуты тега <option>
Атрибут Значение / описание
disabled Делает недоступным для выбора элемент списка.
label Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка.
selected Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером.
value Указывает значение, которое будет отправлено на сервер при отправке формы.
Таблица 7. Атрибуты тега <optgroup>
Атрибут Значение / описание
disabled Отключает данную группу элементов списка для выбора.
label Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержит текст, недоступный для выбора, который будет располагаться над соответствующими пунктами списка. Текст выделяется в браузере жирным начертанием.

6. Надписи к полям формы

Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>

<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>
Таблица 8. Атрибуты тега <label>
Атрибут Значение / описание
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>.

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

Таблица 9. Атрибуты тега <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>.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *