Главная | Обратная связь | Поможем написать вашу работу!

Теги обогащающие язык HTML5

ЛАБОРАТОРНАЯ РАБОТА № 12

Теоретические сведения

Чем HTML5 отличается от HTML4 и XHTML

Немного изменилась структура кода HTML-документа, остался лишь один доктайп <!DOCTYPE html>, появились новые теги, например интересны те которые семантически разделяют страницу сайта на верхнюю часть, нижнюю, боковую и основной контент. Множество тегов и атрибутов, теперь считаются устаревшими. Но при этом HTML5 сохраняет полную совместимость с предыдущими языками разметки XHTML, HTML4 и 3.

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

Список новых тегов HTML5 отвечающих за семантическое разделение страницы:

<article> </article> - теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п. (что для поискового робота является основным контентом уточняйте в службе поддержки поисковиков).

<aside> </aside> - теги обрамляющие сайдбар. Сайдбар - это так называемая "боковая панель" которая обычно содержит блоки рубрик (категорий), архива, облака тегов (меток) и т.п.

Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта), социальные кнопки. Обычно ссылки находящиеся в сайдбаре, ведут на страницы не содержащие основной контент страницы, т.е. не имеющие в своём коде теги article

<footer> </footer> - теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), дату, правовую информацию и т.п.

<header> </header> - теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы".

<nav> </nav> - теги обрамляющие основное меню ссылок на сайте. Обычно ссылки находящиеся в основном меню ссылок, ведут на страницы содержащие основной контент страницы, т.е. имеющие в своём коде теги article

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

Семантика на уровне текста

<mark> </mark> - текст находящийся между этими тегами становится "выделенным". Одно из предназначений тегов mark, обрамлять слова в тексте которые например совпадают со словом введённым пользователем в поисковую строку.

<time> </time> - теги предназначены для создания дат и/или времени в формате ISO вида:
YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.

<meter> </meter> - теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

<progress> </progress> - теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

Теги HTML5 описывающие новые технологии

<audio> </audio> - теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).

<video> </video> - теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).

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

<canvas> </canvas> - теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию.

Теги обогащающие язык HTML5

Список новых тегов HTML5, обогащающих язык:

<command /> - тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.

<datalist> </datalist> - теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

<details> </details> - теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).

<figcaption> </figcaption> - теги обрамляют описание какого-либо объекта (например рисунка), находятся между тегами figure,..

<figure> </figure> - теги группируют различные объекты страницы имеющие свои описания, например фотографии с описанием, товары с описанием и т.д.

<hgroup> </hgroup> - теги предназначены для группировки заголовков h*

<keygen /> - тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

<menu> </menu> - между этими тегами помещают тег command.

<output> </output> - теги предназначены для вывода работы скрипта.

<rp> </rp> - теги предназначены для браузеров которые не поддерживают теги ruby.

<rt> </rt> - теги находятся между тегами ruby, предназначены для обрамления аннотации.

<ruby> </ruby> - теги обрамляют текст и аннотацию к нему.

<summary> </summary> - теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать как спойлер), находятся между тегами details.

<wbr /> - тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

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

Пример кода тега <audio>

Пример добавления аудиофайла при помощи тега <audio>:

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

Пример кода тега <video>

Пример добавления видеофайла при помощи тега <video>:

В HTML5 добавили новый тег source, он создан для решения проблемы поддержки браузерми различных аудио/видео форматов.

Тег <source /> помещают между тегами <audio> </audio> и <video> </video>

На данный момент каждый браузер поддерживает только определённые аудио/видео форматы. Чтобы аудио/видеофайлы работали в каждом браузере, придумали тег <source />, который может указать путь на одну и ту же аудио/видеозапись, но записанную в разных форматах.

Для того чтобы аудио/видеофайлы работали во всех существующих популярных браузерах: FireFox, Opera, Chrome, Internet Explorer, Safari, достаточно лишь два аудио/видео формата, для аудио это.ogg и.mp3, для видео это.ogv и.mp4

Воспользуйтесь поиском по сайту: