Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

HTML5

HTML5 — последняя версия стандарта HTML. Термин имеет два определения:

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

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

Семантика: позволяет точнее описывать, что из себя представляет ваш контент;

Связь: новые способы общения с сервером;

Оффлайн и Хранилище: методы, позволяющие сохранять информацию локально на стороне клиента;

Мультимедиа:создание и взаимодействие с видео и звуком;

2D/3D Графика и эффекты: способы значительно разнообразить  представление;

Доступ к устройствам: использование разных устройств для ввода и вывода информации;

Стилизация: создание изощренных и совершенных тем.

СЕМАНТИКА

Секции и контуры в HTML5
Контурные и секционные элементы в HTML5: <section>, <article>, <nav>, <header>, <footer>, <aside> and <hgroup>.
Использование HTML5 audio и video
<audio> и <video> элементы вставляют и позволяют управлять мультимедиа контентом.
Формы в HTML5
Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для аттрибута type тега <input> и новый элемент <output>.
Новые семантические элементы
Кроме секций, медиа и форм, множество новых тегов, такие как <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> и <meter>, увеличено количество валидных HTML5 элементов.
Улучшение <iframe>
Использование атрубутов sandbox, seamless, and srcdoc, разработчики могут задать нужный уровень безопасности и осуществивить рендеринг тега <iframe>.
MathML
Позволяет вставлять математические формулы.
Введение в HTML5
Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.
HTML5-совместимый парсер
Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.
 

СВЯЗЬ

Web Sockets
Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.
Server-sent события
Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
WebRTC
Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.

ОФФЛАЙН И ХРАНИЛИЩЕ

Оффлайн ресурсы: кеш приложения
Firefox полностью поддерживает спецификацию HTML5 по оффлайн ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне
Online and offline events
Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.
WHATWG сессионное или постоянное хранилище (aka DOM Storage)
Постоянное или сессионое храилище позволяет веб-приложениям хранить структурированны данные на стороне клиента.
IndexedDB
Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.
Using files from web applications
Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя <input> с типом file, имеющих атрибут multiple. Ещё это FileReader.

МУЛЬТИМЕДИА

Использование HTML5 audio и video
<audio> и <video> элементы вставляют и позволяют управлять мультимедиа контентом.
WebRTC
Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
Использование Camera API
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.

ГРАФИКА И ЭФФЕКТЫ

Canvas Tutorial
Узнайте о элементе <canvas> и узнайте, как рисовать графику и другие элементы в Firefox.
HTML5 text API для <canvas>
HTML5 text API сейчас поддерживается в <canvas>.
WebGL
WebGL приносит 3D в web, соответстсвует OpenGL ES 2.0, может использоваться в HTML5 через <canvas>.
SVG
Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.
 

производительность и интеграция

Web Workers
Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.
XMLHttpRequest Level 2
Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе Ajax.
JIT-compiling JavaScript engines
Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.
History API
Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.
contentEditable атрибут: трансформируйте свой сайт в википедию!
HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.
Drag and drop
HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.
Управление фокусом в HTML
Поддержка новый атрибутов HTML5 activeElement and hasFocus.
Обработчики протоколов для Web
Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler().
requestAnimationFrame
Контролирует анимации для обеспечения оптимальной производительности.
Fullscreen API
Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.
Pointer Lock API
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
Online and offline events
Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернется в сеть.

доступ к устройствам

Использование Camera API
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
Touch события
Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.
Геолокация
Позволяет браузерам получать местоположение пользователя.
Определение ориентации устройства
Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).
Pointer Lock API
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.

стилизация

CSS был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.

Новые способы стилизирования фона
Новая возможность задать тень элемента, используя box-shadow или установление множественных фонов.
Лучшие границы
Не только изображения можно использовать для стилизирования границы, используя border-image или его длинные формы записи, а скруглить уголки можно свойством border-radius.
Анимируйте свой стиль
Используйте CSS Transitions, чтобы анимировать изменение состояния элемента или CSS Animations для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.
Улучшение типографии
Авторы могут лучше контролировать типографию. Например, они могут контролировать text-overflow и перенос слов, а также тень текста и его декорированиe. Могут загрузить и применить другой шрифт правилом @font-face.
Новые презентационные макеты
Для того, чтобы улучшить гибкость дизайна, добавили: CSS мульти-колоночный макет и CSS отзывчивый блочный макет.

 

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: MuradAz, teoli, bychek.ru, M57, Jmunb, repby, uleming, askhat, andygol, Grakov, AxDaim
 Обновлялась последний раз: MuradAz,