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

html5book.ru

HTML: Теги video и audio

Хотя веб-браузеры имеют встроенную поддержку изображений с самых первых дней, встраивание аудио или видео на веб-страницу всегда требовало дополнительных подключаемых модулей (отдельных программных компонентов), которые добавляют больше возможностей браузеру, но не являются его частью (например Flash, QuickTime, RealPlayer и другие).

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

Стандарт HTML5 вводит новые элементы <audio> и <video>, которые позволяют веб-разработчикам встраивать звук и видео на веб-страницу, не требуя собственных плагинов. Конечно из этого следует, что сам браузер должен иметь возможность воспроизведения таких файлов, на данный момент только последние версии браузеров поддерживают эти элементы.

Медиа кодеки и форматы

Цифровые аудио и видео данные обрабатываются через кодек, формулу, которая преобразует и сжимает звук или видео в поток битов для передачи через Интернет (термин "кодек" представляет сокращенное сочетание двух слов "код" и "декодирование"). Когда данные доходят до конечного пользователя, то он должен иметь тот же кодек для декодирования закодированного сигнала и преобразования его обратно в звук или видео.

Некоторые медиа кодеки запатентованы, то есть они принадлежат только одной компании и не относятся к открытым стандартам, и, как правило, владельцы патентов обычно взимают лицензионные сборы за использование их алгоритмов. Разработчики браузеров, такие как Apple, Google и Microsoft, имеют большой капитал и готовы лицензировать запатентованные кодеки для своих браузеров. Другие производители браузеров, такие как Mozilla и Opera вместо этого выбирают открытые стандарты кодеков и не используют запатентованные их виды. Даже не смотря на то, что последние версии всех браузеров поддерживают встроенные медиа-файлы HTML5, они еще не пришли к соглашению какие кодеки лучше использовать.

После того как медиа данные закодированы, они должны быть инкапсулированы и упакованы для доставки в одном из нескольких форматов. Эти форматы являются контейнерами для медиа-файлов, которые передаются между сервером и клиентом. Для проигрывания встроенных медиа-файлов браузер должен сначала прочитать формат контейнера, а затем расшифровать закодированные данные внутри него. Так же, как браузеры поддерживают разные кодеки, они также поддерживают различные форматы контейнеров для встроенных медиа-файлов.

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

Тег <audio>

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

Однако он редко используется в такой простой форме. По умолчанию элемент <audio> не имеет элементов управления и поэтому полностью невидимый. Он будет располагаться в HTML-документе и может быть доступен в браузере или JavaScript, но простое внедрение аудио файла не принесет особой пользы. С помощью логического атрибута controls можно добавить к аудио-файлу его собственные элементы управления, которые будут отображаться на веб-странице в месте расположения элемента <audio>:

Эти элементы управления предоставляются браузером и могут визуально отличаться в зависимости от браузера, но предоставляемые функции остаются неизменными:

• кнопка play/pause
• полоса прокрутки
• отображение времени
• громкость

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

Аудио форматы и поддержка браузерами

В настоящее время, существует 3 поддерживаемых аудио формата для элемента <audio>: MP3, Wav, Ogg

Начальная Windows Commander Far WinNavigator Frigate Norton Commander WinNC Dos Navigator Servant Salamander Turbo Browser Winamp, Skins, Plugins Необходимые Утилиты Текстовые редакторы Юмор		File managers and best utilites Главная » Браузер » Поддержка браузерами тегов Новые структурные теги HTML5. Поддержка браузерами тегов Как узнать поддерживает ли браузер HTML/CSS свойства? Частенько бывает, что необходимо уточнить, какой процент браузеров поддерживает то или иное CSS свойство или HTML элемент. Дать ответ в такой ситуации поможет отличный online сервис. Знакомьтесь – мощный онлайн помощник, в вопросе поддержки браузерами CSS/CSS3 свойств и HTML/HTML5 элементов:    Как узнать поддерживает ли браузер HTML/CSS свойство? Узнать поддерживает браузер нужное вам свойство – очень просто, достаточно вбить его в поиск: В скрине выше я вбил тег HTML5 article и мгновенно получил график поддержки данного тега, разными версиями браузеров. Все наглядно и очень просто 🙂 Обратите внимание на настройки и возможности У этого сервиса есть очень полезные настройки: 1. Отсеять браузеры по % использования, т.е. если браузером пользуются менее 1% людей, вы можете не учитывать его особенности при разработке своего проекта.2. Очень полезная опция по выбору региона, так вы можете узнать процент людей, браузеры которых поддерживают выбранное вами CSS свойство или HTML элемент.3. Также вы настроить набор браузеров, поддержка которых вас интересует. Узнать поддержку CSS/CSS3 свойств Используя все тот же поиск вы можете узнать какие браузеры поддерживаю введенное CSS/CSS3 свойство, увидеть статус работы над этим свойством и в какой версии языка CSS оно было введено. Узнать % поддержку CSS/CSS3 и HTML/HTML5 определенной версией браузера в Вашем регионе Изменив вид на Usage relative вы можете просмотреть поддержку индивидуально по каждой версии браузера и посмотреть процент людей который им пользуется в вашем регионе, тем самым определится стоит ли использовать это свойство/элемент в своем проекте или подождать пока процент поддержки увеличится. Сравнение браузеров между собой На этом сайте можно провести сравнение поддержки браузерами разных свойств, например вот так отличаются версии InternetExplorer`a между собой:     webcomplex.com.ua seodon.ru | Теги HTML Опубликовано: 25.06.2010 Последняя правка: 10.12.2015 В этом разделе находится справочник, включающий в себя теги HTML и их подробное описание: тип, назначение, атрибуты, синтаксис, примеры использования, поддержку версиями HTML и браузерами. Вся информация подробно расписана и удобно структурирована. HTML-теги и атрибуты Описание Каждая страница тегов HTML и атрибутов начинается с описания их предназначения, чтобы сразу можно было понять то ли это, что вам необходимо. Кроме этого в верстке (да и не только) существует такое понятие, как семантика кода, которую в двух словах можно описать так: из всего многообразия тегов в каждой конкретной ситуации используйте именно тот и них, который больше к ней подходит по логике и смыслу, естественно не забывая о синтаксисе. Что это значит. Например, в HTML существует сразу несколько тегов отображающих заключенный в них текст курсивным шрифтом, но предназначение у них разное. Тег <I> используется просто для визуального выделения текста, <EM> — для акцентирования внимания на выделенном фрагменте, обозначения его важности, <VAR> — для выделения отдельных частей программного кода и так далее. Атрибуты Этот подраздел присутствует только у тегов HTML и в нем идет перечисление и краткое описание атрибутов, которые можно использовать в каждом из них. Атрибуты делятся на два основных типа: «Личные» и «Общие». Личные атрибуты — это те, которые можно указывать только внутри данного тега (хотя в HTML есть и такие личные атрибуты, которые присутствуют сразу у нескольких HTML-тегов). С общими атрибутами все гораздо проще — они имеются практически у всех HTML-тегов, а в версии HTML 5 уже вообще у всех без исключения. Тип тега Данный подраздел также имеется только у HTML-тегов, в нем описаны их краткие характеристики, которые помогут вам быстро сориентироваться в вопросах правильного синтаксиса и использования тегов. Вообще словосочетание «тип тега» в данном случае довольно условное и служит лишь для группирования следующих характеристик. Назначение. Здесь указывается ссылка на страницу, которая содержит все теги, относящиеся к той же группе, что и данный тег HTML, например текстовые теги уровня строки. Модель тега. Здесь находится информация по тому, к какой модели относится данный тег, которая поможет вам понять, как поведет себя его содержимое (текст, изображения и т.д.) при отображении браузером. Также эти данные подскажут вам можно ли указывать данный HTML-элемент внутри другого. Различают несколько моделей тегов (кстати, иногда их тоже называют «типы»): Встроенные (inline, уровня строки) — все, что выводят эти HTML-теги на страницу располагается на одной строке и только если доступной ширины (например, ширины окна браузера) недостаточно, то происходит перевод строки на следующую. Таким образом, содержимое сразу нескольких встроенных тегов вполне может располагаться на одной строке, если уместится. Блочные (block, уровня блока) — каждый из таких тегов создает перевод строки до и после себя, выводя свое содержимое всегда с новой строки. Именно поэтому текст двух блочных тегов никогда не будет отображаться браузерами на одной строке, даже если в каждом из них его будет очень мало. Естественно это в том случае, если с тегами не были произведены какие-то модификации, например с помощью свойств CSS. Уникальные — все остальные теги HTML, которые не принадлежат ни к одной из предыдущих категорий, являются уникальными и могут располагаться только внутри определенных HTML-элементов, поэтому в таких случаях в справочнике сразу указано, где именно их можно прописывать. Может содержать. В этом пункте находится информация о том, какие теги HTML может содержать данный элемент на первом уровне вложенности. Эта информация поможет вам избежать таких «ошибок новичков», как указание внутри ссылки (<A>) тега параграфа <P>. Должен содержать. Этот пункт присутствует в тех случаях, когда при использовании данного тега, вы обязаны внутри него указать какой-то другой тег. Другими словами «друг без друга они жить не могут». Не может содержать. Данный пункт есть не у всех HTML-тегов и имеется только тогда, когда надо сделать дополнительное исключение. Открывающий тег. Закрывающий тег. Здесь указывается информация о том, из каких тегов может или должен состоять данный элемент. Значения Этот подраздел есть только у атрибутов, и описывает, какие допустимые значения может иметь каждый из них. Значение по умолчанию. Здесь указывается значение атрибута по умолчанию, то есть то, которое браузер будет использовать, если атрибут не будет указан в HTML-теге. Синтаксис Для того, чтобы наглядно продемонстрировать, как выглядит указание того или иного тега или атрибута, в этом подразделе приведен их синтаксис кода, а для более полной картины показан реальный пример их использования. Обязательный атрибут. Как вы понимаете, этот пункт есть только у атрибутов, он показывает, является ли указание данного атрибута обязательным для тега. Поддержка версиями HTML Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1 Поддержка: Частично Да Частично Нет В нижней части страниц справочника имеется полная информация по поддержке тегов и атрибутов версиями HTML и XHTML. Для удобства пользования эти данные также продублированы в верхней части страниц в виде небольших изображений. Поэтому при создании макета обязательно обращайте внимание на возможность использования данного атрибута или тега HTML с вашим <!DOCTYPE>. Хотелось бы отметить, что во многих случаях браузеры правильно отображают страницу даже в тех случаях, когда в ее коде имеются какие-то теги или атрибуты, которые не поддерживаются версией HTML указанной в Доктайпе. Но это означает лишь то, что они научились самостоятельно исправлять многие ошибки допущенные верстальщиками и уж совсем не обязательно, что все браузеры будут это делать одинаково. Поддержка браузерами Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari Версия: 6.0 7.0 8.0 и выше 2.0 3.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше Поддержка: Нет Частично Да Нет Да Частично Нет Да Также в конце каждой страницы есть подробная информация по поддержке тегов и атрибутов разными версиями популярных браузеров. Вверху страниц она тоже продублирована, но в более сокращенной форме. Например, если все версии какого-то браузера поддерживают тег, то возле его значка будет зеленая галочка, если не поддерживают — красный крестик. Если же все версии браузера поддерживают тег частично, либо какие-то из них понимают его полностью, а какие-то наоборот не понимают совсем, то во всех этих случаях будет стоять фиолетовая галочка. spravka.seodon.ru теги - полный список, таблица тегов по разделам HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега. В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом. Таблица 1. HTML-элементы
<!--...-->	Используется для добавления комментариев.
<!DOCTYPE>	Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a>	Создаёт гипертекстовые ссылки.
<abbr>	Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address>	Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>	Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article>	Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>	Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>	Загружает звуковой контент на веб-страницу.
<b>	Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>	Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>	Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>	Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote>	Выделяет текст как цитату, применяется для описания больших цитат.
<body>	Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>	Перенос текста на новую строку.
<button>	Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas>	Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>	Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite>	Используется для указания источника цитирования. Отображается курсивом.
<code>	Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col>	Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<datalist>	Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd>	Используется для описания термина из тега <dt>.
<del>	Помечает текст как удаленный, перечёркивая его.
<details>	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn>	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<div>	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl>	Тег-контейнер, внутри которого находятся термин и его описание.
<dt>	Используется для задания термина.
<em>	Выделяет важные фрагменты текста, отображая их курсивом.
<embed>	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>	Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>	Заголовок/подпись для элемента <figure>.
<figure>	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>	Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h2-h6>	Создают заголовки шести уровней для связанных с ними разделов.
<head>	Элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>.
<header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>	Горизонтальная линия для тематического разделения параграфов.
<html>	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i>	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>	Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input>	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<keygen>	Генерирует пару ключей — закрытый и открытый. При отправке формы, закрытый ключ хранится локально, и открытый ключ отправляется на сервер. Работает внутри тега <form>.
<label>	Добавляет текстовую метку для элемента <input>.
<legend>	Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>.
<li>	Элемент маркированного или нумерованного списка.
<link>	Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<main>	Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>.
<map>	Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark>	Выделяет фрагменты текста, помечая их желтым фоном.
<meta>	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter>	Индикатор измерения в заданном диапазоне.
<nav>	Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>	Определяет секцию, не поддерживающую сценарий (скрипт).
<object>	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol>	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>	Контейнер с заголовком для группы элементов <option>.
<option>	Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output>	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>	Параграфы в тексте.
<param>	Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<pre>	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>	Индикатор выполнения задачи любого рода.
<q>	Определяет краткую цитату.
<ruby>	Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>	Определяет вложенный в него текст как базовый компонент аннотации.
<rt>	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc>	Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>	Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script>	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section>	Определяет логическую область (раздел) страницы, обычно с заголовком.
<select>	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small>	Отображает текст шрифтом меньшего размера.
<source>	Указывает местоположение и тип альтернативных медиа ресурсов для элементов <video> и <audio>.
<span>	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>	Расставляет акценты в тексте, выделяя полужирным.
<style>	Подключает встраиваемые таблицы стилей.
<sub>	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>	Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>	Задает надстрочное написание символов.
<table>	Тег для создания таблицы.
<tbody>	Определяет тело таблицы.
<td>	Создает ячейку таблицы.
<textarea>	Создает большие поля для ввода текста.
<tfoot>	Определяет нижний колонтитул таблицы.
<th>	Создает заголовок ячейки таблицы.
<thead>	Определяет заголовок таблицы.
<time>	Определяет дату/время.
<title>	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr>	Создает строку таблицы.
<track>	Добавляет субтитры для элементов <audio> и <video>.
<u>	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul>	Создает маркированный список.
<var>	Выделяет переменные из программ, отображая их курсивом.
<video>	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr>	Указывает браузеру возможное место разрыва длинной строки.

Тег <video>

Элемент <video> встраивает цифровое видео на веб-страницу. Как и в случае с <audio>, элемент <video> может иметь атрибут src, указывающий URL-адрес видеофайла:

Атрибут controls добавляет элементы управления, с помощью которых пользователь сможет взаимодействовать с плеером. Атрибут autoplay указывает браузеру, что видео должно начать воспроизведение сразу, как только страница будет загружена, если он не указан, то в плеере будет отображен первый кадр исходного видео. Но чаще всего он не несет никакой полезной информации о том, что будет представлено с помощью видео-контента. Вместо этого можно предоставить любое изображение, указав к нему путь в атрибуте poster:

Элемент <video> также может содержать один или несколько элементов <source>, которые будут указывать на файлы разных форматов:

Видео форматы и поддержка браузерами

В настоящее время, существует 3 поддерживаемых видео формата для элемента <video>: MP4, WebM и Ogg.

puzzleweb.ru

Новые структурные теги 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-декларации и их возможности

К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в листинге 1.

Листинг 1. HTML5-декларация doctype

Декларация должна находиться в самом начале HTML-документа, перед тегом <html>.

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

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

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

Подход HTML 4

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

Листинг 2. Простая HTML-страница, использующая теги div

Этот подход работает прекрасно; тег 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 в листинге 3 также был изменен — чтобы показать браузеру, что при отображении страницы он должен использовать HTML5. Во всех последующих примерах предполагается, что мы тоже используем корректный элемент doctype.

Тег section

Тег section предназначен для разбиения контента на существенные блоки. В определенном смысле его применение аналогично разбиению книги на главы. После добавления тега section к примеру кода мы получаем код, показанный в листинге 4.

Листинг 4. Добавление тега section

Тег article

Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в листинге 5.

Листинг 5. Добавление тегов article

Тег aside

Тег aside указывает, что контент, который содержится внутри этого элемента, связан с основным контентом данной страницы, но не является его частью. В определенном смысле его применение аналогично внедрению комментария в тело текста (подобно данному комментарию). Контент в круглых скобках предоставляет дополнительную информацию об элементе, содержащем этот контент. После добавления тега aside к примеру кода мы получаем код, показанный в листинге 6.

Листинг 6. Добавление тега aside

Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в листинге 7.

Листинг 7. Добавление тега footer

К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.

Тег nav

Контент, содержащийся в теге nav, предназначен для навигационных целей. После добавления тега nav к примеру кода мы получаем код, показанный в листинге 8.

Листинг 8. Добавление тега nav

Итоговый вариант примера

В листинге 9 показан результат замены исходных тегов div новыми структурными тегами HTML5.

Листинг 9. Итоговый вариант примера

Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов 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 (и чем не является).

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

www.ibm.com

HTML5-аудио

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

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

Как добавить HTML5-аудио на веб-страницу

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

Поддержка браузерами

IE: 9.0Firefox: 3.5 базовая поддержка, 15.0 — полнаяChrome: 3.0Safari: 3.1Opera: 10.5iOS Safari: 7.1Opera Mini: —Android Browser: 4.1Chrome for Android: 44

HTML5-элемент <audio> используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:

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

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

2. Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

3. Альтернативные медиа-ресурсы

Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio> и <video>. Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

4. Добавление субтитров и заголовков

Элемент <track> используется в качестве дочернего элемента <audio> и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения аудио или видео файла.

5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.

See the Pen Music animation by Elena Nazarova (@nazarelen) on CodePen.

html5book.ru

| htmlhook.ru

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

Синтаксис

Читайте также: <audio>

Тег picture может содержать больше чем один элемент source с атрибутами media, sizes, type, srcset.

Элемент source

Элемент source в HTML для изображений определяет несколько ресурсов.

Атрибут media — выполняет CSS медиа-запрос: @media="(max-width: 30em)".

Атрибут sizes — выполняет один или несколько запросов ширины дескриптора:,,.

последнее значение используется по умолчанию.

Атрибут srcset содержит ссылку на изображение: srcset="http://site.ru/image.jpg". Или разделенные запятыми несколько ссылок на изображения:

Для экранов с высокой плотностью пикселей указывается значения 1.5x или 2x srcset="image-120-90.jpg, image-240-180.png 2x"

Атрибут type выполняет запрос для альтернативных форматов графических файлов type="изображение/webp" или type="изображение/vnd.ms-photo".

Элемент img

Элемент img в контейнере picture обязательный без него изображение не будет отображаться в браузере.

Элемент img должен быть последним дочерним элементом контейнере picture, если будет первым или в середине контейнера, браузер будет игнорировать атрибуты source.

Атрибут alt для альтернативного описания изображения.

Атрибут longdesc содержит гиперссылку на содержание подробного описания изображения.

Альбомная или книжная ориентация

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

picture

Код из примера:

Вот как этот код работает: если для книжной ориентации окно просмотра шириной 800px. Браузер будет отображать изображение-640.jpg (640px) если устройство 2x, будет показано изображение-1280.jpg (1280px). Для альбомной ориентации всё просто, браузер покажет изображение размером больше чем 800px.

Поддержка

Таблица поддержки браузерами: “<picture>”

Включить поддержку тега picture в браузерах:

После перезапуска браузера тег picture будет работать в браузере. Или скачать polyfill (picturefill) для элемента HTML 5.1 picture.

Поэкспериментировать с демонстрацией элемента picture можно с помощью «Chrome DevTools».

htmlhook.ru

Смотрите также

• 
  Smb через браузер
• 
  Uc браузер тегос
• 
  Браузер вивальди хабр
• 
  Браузер тор hydra
• 
  Браузер для слабовидящих
• 
  Общение через браузер
• 
  Спидхак для браузеров
• 
  Powerpoint в браузере
• 
  Удаление браузера амиго
• 
  Удаление амиго браузера
• 
  Discord через браузер