HTML5 новые тэги time, figure, video, audio, canvas
Добавим к предыдущей статье о новых тэгах в HTML5 еще несколько описаний нововведений.
Итак, новые тэги: time, figure, video, audio и canvas.
Тэг time
time — позволяет однозначно кодировать время и дату по грегорианскому календарю с учетом всех возможных смещений часовых поясов. Состоит данный тэг из т.н. «считываемой» части и контентной. Что это значит?
Рассмотрим пример:
<time datetime=2012-02-20>20 февраля 2012</time>
Здесь атрибут datetime со значением 2012-02-20 и является считываемой частью, которую считывает как браузер, так и всевозможные агрегаторы. На основе этих данных они могут, например, занести в календарь пользователя определенную дату или создавать временные шкалы с указанием точек-событий.
А вторая часть (контентная) — это то, что видит пользователь на экране. Если запись и там и там должна быть одинаковая (например, время в формате 24-часовом), то можно ограничиться вот такой записью:
<time>11:00</time>
Этот тэг может иметь расширенный вариант, в котором указана как дата и время, так и часовой пояс. Чтобы показать одновременно дату и время необходимо между ними вставить префикс в виде латинской буквы Т. При этом необходимо указывать часовой пояс: либо буквой Z (всемирное время), либо смещением относительно всемирного времени на нужное число с соответствующим знаком + или -
<time datetime=2012-02-20Т11:00Z>
или
<time datetime=2012-02-20Т11:00+02:00>
Есть у этого тэга еще один дополнительный параметр, который выглядит как pubdate и прописывается после атрибута datetime таким образом:
<time datetime=2012-02-20Т11:00Z pubdate>
Такая запись однозначно определяет дату и время публикации статьи. Зачем это нужно?
Например, в статье есть другая дата, означающая анонс какого-нибудь события, и автору нужно, чтобы эту дату тоже считывали агрегаторы или встроенный в браузер календарь. Как определить, какая из этих двух дат является датой публикации? А вот как раз при помощи дополнительного параметра pubdate.
Тэг figure
figure — теперь для подписи и заголовков к картинкам не нужно городить огород из кучи блочных и строковых тэгов, а достаточно воспользоваться элегантными тэгами figure и figcaption. Выглядеть это может так:
<figure>
<img src=kartinka.jpg alt="">
<figcaption>
Красивая картинка
<small>рисовал не я</small>
</figcaption>
<figure>
Здесь figure означает блок с картинкой и текстом к нему, а figcaption служит одновременно и заголовком и описанием. Чтобы отделить описание от заголовка, его поместили в тэг small, который в HTML5 теперь просто означает «мелкий текст» и нужен для всякой служебной инфы, не являющейся по сути контентом.
НО! Далеко не каждая картинка на сайте есть эта самая figure. Не стоит оформлять этим тегом буквально все картинки на страницах. Это все равно что на коробках с ботинками писать «коробка». Это и так всем понятно. Вот что говорят умные люди (ссылка):
Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно НЕ figure. Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не figure. Тег figure следует использовать только когда вы ссылаетесь на него в документе.
.
Короче, если в вашей статье картинки просто для красивости и разнообразия, то это не figure. Или если вы фотограф и насыпали в своем посте на блоге стопятьсот фоток, то они тоже ни разу не figure. И логотип вашего сайта тоже не figure от слова совсем.
И еще про тег figure:
Другой частый случай недопонимания элемента figure заключается в предположении, что его можно применять только для картинок. Но это не так. В figure может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании figure одними картинками. Наша задача как приверженцев веб-стандартов — описать контент нашей разметки.
Все понятно теперь про тег figure? Ок, поехали дальше.
Тэг video
video — служит для простой вставки видео на страницы сайта. То есть, код вставки может быть до безобразия простым:
<video src=kinoshka.ogv></video>
Без всяких сторонних плееров, жутких object и embed. Красота!
Кроме того, в этот код можно добавить либо автозапуск (autoplay), либо элементы управления (controls). В первом случае ролик запустится сам при открытии страницы (не есть хорошо), а во втором браузер предоставит собственные элементы управления воспроизведением.
Также можно добавить размеры окна проигрывателя в пикселях и картинку-заставку (poster). Выглядеть это может так:
<video src=kinoshka.ogv width=600 height=400 poster=kinoshka.jpg controls></video>
Тэг audio
audio — также предназначен для простой вставки медиа-контента на страницы сайта. На этот раз, как несложно догадаться, речь идет об аудио. Все в принципе похоже на работу с видео. Точно также просто добавляется аудио-файл, к которому можно пристегнуть элементы управления controls.
<audio src=pestnya.ogg controls></audio>
Все это замечательно, конечно, но на данный момент времени все упирается в кодеки. Разные браузеры поддерживают разные кодеки: Opera и FF — ogv и ogg, Safari — H.246 и MP3, а Google Chrom — и тех и других. Поэтому сейчас приходится на сайте прописывать несколько вариантов файлов и использовать для этого специальный тэг source. Пример:
<video controls>
<source src=kinoshka.ogv type='video/ogg; codecs="theora, vorbis"'>
<source src=kinoshka.mp4 type='video/mp4; codecs="avcl.42E01E, mp4a.40.2"'>
</video>
Тэг canvas
canvas — попросту говоря, рисовалка на сайте. Хоть графики, хоть каляки-маляки всякие в духе MS Paint.
Элемент canvas предоставляет посетителям сайта интерфейс для двумерного рисования: линии, заливки, формы, текст и пр. Вот отличный пример — Harmony.
По умолчанию тэг canvas создает на странице невидимую область размерами 300 на 150 пикселей. Размеры, разумеется, можно переопределить.
Чтобы начать рисовать, не достаточно просто прописать этот тэг. Нужен еще специальный JavaScript:
<canvas width="600 height=400></canvas>
<script type="text/javascript">
var ctx = document.querySelector('canvas')
getContext('2d');
ctx.fillRect (10, 20, 50, 50);
</script>
Эта жуткая на вид штука нарисует на площадке 600х400 пикселей квадрат со сторонами 50х50 пикселей. первые два значения (10 и 20) это соответственно координаты x и y верхнего левого угла квадрата.
Возможностей у данного тэга масса, нужно только знать, как использовать JavaScript, а это уже тема для отдельной обширной статьи с примерами.
HTML5 Введение
HTML5 первые шаги
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
HTML5 новые тэги time, figure, video, audio, canvas
