Шпаргалка HTML5 на русском поможет в обучении. Обзор HTML5 спецификации Имя атрибута Lowercase

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

Глобальные атрибуты - это атрибуты, которые могут быть внедрены в любой тег HTML-документа. В HTML5 появились новые глобальные атрибуты, в описаниях ниже они выделены словом Новый

Рассмотрим названия и описания глобальных атрибутов HTML5:

accesskey=" " - позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,
class=" " - позволяет устанавливать имя класса,
contenteditable=" " - позволяет редактировать содержимое элемента Новый,
contextmenu=" " - позволяет создавать контекстное меню для элемента Новый,
dir=" " - позволяет управлять направлением текста,
draggable=" " - позволяет пользователю перетаскивать элемент Новый,
dropzone=" " - позволяет указывать, что делать с элементом при перетаскивании Новый,
hiden=" " - позволяет скрывать элемент Новый,
id=" " - позволяет устанавливать уникальный идентификатор для элемента,
lang=" " - позволяет указывать код языка в содержимом элемента,
spellcheck=" " - позволяет указывать проверять или нет правописание, в содержимом элемента Новый,
style=" " - позволяет создавать стиль для элемента,
tabindex=" " - позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab ,
title=" " - позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.

Так как в спецификации HTML5, теги превратились в полноценные объекты, то в этих объектах уже изначально заложено понятие глобального атрибута, даже для тех тегов которые еще не описаны в спецификации.

Структура кода в HTML5 претерпела некоторые изменения, вот некоторые из них:

1. В отличии от предыдущих версий языка, в HTML5 существует лишь один доктайп:
его например вы можете увидеть в исходниках страниц данного сайта (не забывайте что перед доктайпом ничего не должно быть, ни пробелов, ни переносов строк и т.д.).

2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:
нужно использовать атрибут lang="ru" в теге :

3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:

нужно использовать мета-тег , без атрибутов http-equiv и content

4. При создании JavaSсript сценария, теперь в тег , внедрять атрибуты type="text/javascript" и language="JavaScript" не нужно.

5. При внедрении CSS стилей, теперь в теги и , внедрять атрибут type="text/css" не нужно.

6. Ссылка - строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.

Абзац

Теперь при HTML5, можно делать так:

По материалам сайта http://html-5.ru/ , http://html-5.ru/uchebnik-html5

• Дополнения к HTML W3C от 2015-2017 года

• Рекомендации W3C от 24 декабря 1999 года

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

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

К примеру, в приведенном ниже фрагменте разметки используется вложенные секции и заголовки первого уровня :

Level 1

Level 2

Level 3

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

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

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

Элемент предназначен для представления заголовка определенной секции документа. Собственно, помимо заголовка он может содержать и другого рода информацию. Например, вполне резонно было бы размещать между его тегами подзаголовки, информацию об авторе и/или информацию о версиях документа, его модификациях и т.п.:

A Preview of HTML 5

By Lachlan Hunt

Элемент представляет подвальную часть секции документа, которой он принадлежит. Он, как правило, содержит авторскую информацию контента раздела, ссылки на тематические посты и т.п.:

2007 Example Inc.

Элемент предназначен для размещения навигационных ссылок. Он в равной степени подойдет как для навигации по сайту, так и для размещения содержания документа:

• Home


• Products


• Services


• About

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

Archives

• September 2007


• August 2007


• July 2007

Элемент представляет собой общий раздел документа или приложения, такой как глава, к примеру:

Chapter 1: The Period

It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
…

(Отрывок из произведения «A Tale of Two Cities»)

Элемент является независимой секцией документа, страницы или сайта в целом. Его удобно использовать для размещения такого контента как новости, блог посты, сообщения на форумах или индивидуальные комментарии:

Comment #2
by Jack O’Niell

August 29th, 2007 at 13:58

That’s another great article!

В Web среде последнее время все большую актуальность получают такие типы данных как видео и аудио. И множество подобных YouTube , Viddler , Revver и MySpace сайтов дают возможность любому пользователю Интернета без труда разместить в сети видео и аудио информацию. По причине того, что на данный момент стандарт HTML не располагает необходимыми средствами включения и управления медиа контентом, то большинство нынешних сайтов используют технологию Flash для обеспечения требуемой функциональности. Кроме того, существует возможность включения мультимедиа посредством плагинов (таких как QuickTime , Windows Media и другие). Но всё же именно Flash технология наиболее широко распространена и является кроссбраузерным решением, предоставляющим необходимый для разработчиков API .

Судя по тому, как представлены различные медиа плееры на основе Flash , можно с уверенностью сказать что разработчики заинтересованы в получении возможности создания собственного типа пользовательского интерфейса, который позволяет полностью контролировать воспроизведение медиа файла – регулировка громкости, стоп, пауза, поиск и воспроизведение. Но главной целью на данный момент является нативная поддержка такой функциональности в браузерах без каких-либо плагинов, что позволит включать видео и аудио компоненты с необходимым API для управления воспроизведением из скриптов.

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

Оба движка Opera и WebKit уже реализовали частичную поддержку элемента. Чтобы убедиться в этом, вы можете загрузить и попробовать в работе экспериментальную сборку Opera и автоматическую тестовую сборку WebKit . В Opera представлена поддержка кодека Ogg Theora , а WebKit обеспечивает работу всех форматов, поддерживаемых в QuickTime , включая ряд сторонних кодеков.

Простейшим способом включения видео в документ является использование элемента, без каких либо дополнительных настроек. В этом случае браузер предоставит предусмотренные по умолчанию элементы пользовательского интерфейса. Для дефолтного (по умолчанию) включения или отключения элементов управления медиа контентом предназначен булевый атрибут controls с значениями:

Download movie

Необязательный атрибут poster предназначен для определения изображения, которое будет отображаться на месте видео элемента до начала его воспроизведения. И хотя некоторые видео форматы предусматривают собственную, свойственную только им заставку, как это сделано в MPEG-4 , но атрибут poster является альтернативным способом определения заставки, которая будет отображаться независимо от используемого видео формата.

Также просто дело обстоит и с включением на страницу аудио контента с помощью элемента . Большинство атрибутов, свойственных элементу, применяют и для элемента, хотя в последнем не предусмотрена установка ширины width , высоты height и заставки poster .

Download song

В стандарте HTML5 для указания альтернативных источников видео и аудио данных также вводится элемент , который позволяет браузеру выбрать тот формат, который поддерживается устройством и/или кодеком. Атрибут media может быть использован для указания типа устройства, с целью выбора необходимого источника данных в соответствии с ограничениями используемого устройства, а type атрибут для определения типа данных и кодеков. Имейте в виду, что при использовании элемента в его родительских или элементах должен отсутствовать атрибут src , в противном случае, альтернативные источники данных будут проигнорированы браузером.

В тех случаях, когда направленность веб-ресурса требует от разработчика создания полного контроля над пользовательским интерфейсом, то для этих целей он может использовать расширенные возможности API , предоставляющие ряд методов и событий, посредством которых из скриптов можно контролировать процесс воспроизведения медиа файла. Самыми простыми представителями таких возможностей являются методы play() и pause() , а также свойство currentTime , предназначенное для установки текущего положения проигрывания медиа файла в начало или другое необходимое место. Ниже представлен пример их использования:

var video = document.getElementById("video");

Play
Pause