html5 что это такое
HTML5
HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.
Семантика
Семантика дает представление о структуре документа и позволяет людям и программам более полно управлять данными. В HTML5 добавлено множество семантических тегов, а также поддержка RDFa, микроформатов и микроданных.
Автономная работа
Благодаря кэшу HTML5, веб-приложения могут быстрее работать и запускаться даже без подключения к Интернету.
3D, графика и эффекты
Можно рисовать прямо на веб-странице используя Canvas API. Технологии WebGL и CSS3 3D позволяют отображать трехмерную графику непосредственно в браузере.
Мультимедиа
Приложения и сайты могут проигрывать аудио и видео без установки дополнительных плагинов вроде Flash-а.
Производительность и интеграция
Сделайте свои веб-приложения быстрыми и динамичными с разными технологиями вроде Web Workers и XMLHttpRequest 2.
CSS3 в интеграции с HTML5 позволяет управлять видом любых элементов на странице, создавать потрясающие эффекты без ущерба семантической структуры, производительности и без дополнительных скриптов.
Ничего не знаете об HTML5?
Начните изучение HTML5 с книги Марка Пилгрима Погружение в HTML5.
Теги HTML5
В HTML5 появилось множество семантических элементов, а также тегов, позволяющих вставлять аудио и видео на сайт.
Вёрстка сайта на HTML5
Описание процесса вёрстки сайта lionindesert.ru на HTML5.
Форум
Также разные аспекты HTML5 можно обсудить на форуме.
Введение в HTML5
Преимущества HTML5 ¶
Среди основных преимуществ HTML5 необходимо отметить:
Контентные модели HTML5 ¶
В HTML5 контент страницы можно разделить на смысловые группы, которые характеризуют содержимое веб-страницы. Эти группы получили название контентных моделей (content model). Каждая модель описывает тип содержимого элемента. Содержимым элемента является текст и дочерние элементы. Элемент может принадлежать как к одной, так и к нескольким категориям.
В HTML5 различают следующие категории контента:
Для того, чтобы понять, как контентные модели располагаются на веб-странице и взаимодействуют друг с другом, приводим следующую иллюстрацию.
Как видите, в некоторых местах контентные модели перекрывают друг друга, а это значит, что в данной модели есть элементы, которые принадлежат одновременно к нескольким категориям. Так секционный, заголовочный, текстовой, встроенный, интерактивный контент, а также некоторая часть метаданных относятся к потоковому контенту. Метаданные и интерактивный контент в некоторых случаях могут относится к текстовому контенту. Встроенный контент может также одновременно быть текстовым, однако часть элементов при этом может относится к интерактивному контенту.
Стоит еще отметить, что есть элементы, которые используются для конкретных целей, например, для определения форм. Такие элементы не относятся к любой из данных категорий.
Метаданные¶
К метаданным относят элементы, которые содержат дополнительную информацию об HTML-документе, связывают его с другими документами (например, таблицами стилей css), определяют внешний вид или поведение контента на странице. На странице метаданные не отображаются.
Потоковый контент ¶
К потоковому содержимому относят большинство элементов, которые используются в теле документа (между тегами
HTML5 для веб-дизайнеров. Часть 1: Краткая история языка разметки
HTML5 для веб-дизайнеров
HTML — язык, объединяющий всемирную сеть. Всего лишь посредством набора простых тегов, человечеству удалось создать несравнимую ни с чем по своим масштабам систему связанных между собой страниц и веб-узлов: от Amazon, eBay и Википедии, до личных блогов и сайтов, посвященных котам, похожим на Гитлера.
HTML5 — свежайшая версия этого языка. Но несмотря на то, что она собирается принести с собой значительные изменения и новые возможности, нельзя сказать, что подобное происходит впервые и до этого язык никак не развивался. Развивался и постоянно улучшался, причем с самого своего появления.
Как и всемирная сеть вообще, HTML — язык разметки гипертекста (HyperText Mark-up Language) — является детищем сэра Тима Берненс-Ли (Sir Tim Berners-Lee). В 1991 году он написал работу, озаглавленную «HTML Tags», в которой описал чуть меньше двух дюжин тегов, предложенных им для разметки веб-страниц.
Идея использовать для этого кодовые слова внутри треугольных скобок, впрочем, не принадлежит сэру Тиму. Такая система на тот момент уже существовала и использовалась в SGML (Standard Generalised Markup Language, стандартный обобщённый язык разметки), и вместо того, чтобы изобретать что-то с нуля, сэр Тим посчитал более рациональным взять за основу уже существующие решения. Аналогичный подход применялся и вообще на всем пути к HTML5 в процессах разработки.
От IEFT к W3C: дорога к HTML 4
Версии HTML 1 никогда не существовало. Первой официальной спецификацией был сразу HTML 2.0, и издала его организация IETF (Internet Engineering Task Force, Специальная комиссия интернет-разработок). Многие из возможностей языка, описанных в этой спецификации, были основаны на уже используемых сторонних разработках. Например, тег для вставки картинок на страницы был реализован в лидирующем на тот момент (мы говорим о 1994 году) браузере Mosaic, и потом просто перекочевал в стандарт для HTML 2.0.
Эстафету IEFT позже подхватил W3C (World Wide Web Consortium, Консорциум Всемирной Паутины), который и занимался всеми последующими версиями HTML. Во второй половине девяностых велась активная работа над пересмотром и изменением спецификаций, которые в конце концов (точнее, в 1999 году) дали жизнь HTML 4.01.
После этого в истории HTML наступил первый ключевой поворот.
XHTML 1: HTML в виде XML
Новая версия языка разметки после HTML 4.01 была названа XHTML 1.0. «Икс» в названии означал eXtreme, и веб-разработчики были обязаны скрещивать перед собой руки каждый раз, когда произносили это слово.
Нет, конечно нет. На самом деле «икс» означал eXtensible («расширяемый»), а скрещивание рук было по желанию.
Сама по себе спецификация для XHTML 1.0 ничем не отличалась от HTML 4.01. Не добавилось никаких новых тегов или параметров — разница была лишь в правилах синтаксиса. Если в HTML разработчикам была дана полная свобода относительно стиля написания кода, в XHTML требовалось соблюдать правила языка XML, — куда более жесткого и нетерпимого к вольностям, — на котором основывалось большинство разрабатываемых Консорциумом технологий.
Жесткие правила, впрочем, пришлись как раз кстати. Они побуждали кодеров придерживаться единого стиля, например — писать все теги и параметры исключительно в нижнем регистре, тогда как в HTML можно было делать как придется.
Выход XHTML 1.0 совпал с возросшим уровнем поддержки современными браузерами таблиц стилей — CSS, — и строгий синтаксис XHTML укрепился в сообществе разработчиков с репутацией лучшего способа написания кода разметки.
Потом был XHTML 1.1.
Если версия 1.0 была просто HTML, сделанным под XML, то XHTML 1.1 — это уже настоящий, чистый XML. В том смысле, что к нему уже нельзя было применить mime-type text/html и нужно было обозначить документ как отформатированный в XML. Однако в том случае его никак не смог бы отобразить самый популярный на тот момент браузер — Internet Explorer, — так что применять на практике этот язык было явно не вариантом.
Создавалось впечатление, что W3C в свои разработках начинает терять связь с реальностью, по которой жила всемирная сеть.
XHTML 2: нет, это уже ни в какие ворота не лезет
Если бы герой Дастина Хоффмана из фильма «Выпускник» был веб-дизайнером, W3C сказал был ему только одно слово: XML.
Консорциум был уверен, что HTML изжил себя после четвертой версии, и начал работу над XHTML 2, задачей которого было привести сеть к светлому XML-ному будущему. И несмотря на то, что название осталось прежним, новая версия не имела абсолютно ничего общего с XHTML 1. Более того, она не собиралась быть обратно-совместимой со своими предшественниками и старыми версиями HTML (а значит — всем существующим содержимым сети). Вместо этого она должна была представить новый чистый язык, не отягощенный никакими пережитками прошлых спецификаций.
Иными словами, это был бред.
Раскол: W(HATWG) TF?
В среде Консорциума назрело восстание. Было очевидно, что он собирается вести разработку стандартов, — пусть новых, чистых и прекрасных, — но совершенно не отвечающих нуждам современного сообщества веб-дизайнеров и разработчиков. Opera, Apple и Mozilla были явно от этого не в восторге, так как ожидали совершенно другого — больше упора на форматы, позволяющие расширить возможности для создания веб-приложений.
Начало переменам было положено в 2004 году на одном из собраний. Ян Хиксон (Ian Hickson), который на тот момент был сотрудником Opera Software, выдвинул предложение заняться развитием HTML до уровня, позволяющего использовать этот язык для веб-приложений. Предложение было отклонено.
Разочарованные бунтари вынуждены были отколоться от Консорциума и организовать собственную группу: Web Hypertext Application Technology Working Group, сокращенно WHATWG.
От Web Apps 1.0 к HTML5
Принцип работы WHATWG несколько отличался от того, что был в W3C. В W3C вопросы поднимаются, обсуждается, и конечное решение выносится всеобщим голосованием. В WHATWG вопросы так же поднимаются, обсуждается, но окончательные решения относительно того, что включается в спецификацию, а что нет, остаются за главным редактором — Яном Хиксоном.
С виду может показаться, что система в W3C более демократична и честна, но практика показывает, что бесконечные споры и внутренние перебранки жутко тормозят процесс развития. В WHATWG, где каждый может внести свой вклад, но последнее слово остается за Главным, дела движутся куда быстрее. Главред, впрочем, и не обладает абсолютной властью — избранная группа руководящих лиц может оспорить его решение в том маловероятном случае, если оно того требует.
Первоначально, WHATWG было занято двумя спецификациями — Web Forms 2.0 и Web Apps 1.0, — обе из которых должны были стать расширениями для HTML. Но со временем они были объединены в одну общую, названную просто HTML5.
Воссоединение
В то время как в WHATWG работали над HTML5, W3C продолжал канителиться со своим XHTML 2. Нельзя сказать, что вся эта затея скатывалось в говно. Она в него медленно-медленно погружалась.
В октябре 2006-го сэр Тим Бернерс-Ли признал в своем блоге, то идея перевести сеть с HTML на XML была глупой. Спустя несколько месяцев W3C выдал новую установку для HTML Working Group: было разумно решено, что будущие версии HTML следует основать на наработках WHATWG, вместо того, чтобы делать что-то с нуля.
Все эти развороты и смены курса привели к несколько запутанной ситуации. Какое-то время W3C одновременно работал над двумя совершенно несовместимыми языками разметки — XTHML 2 и HTML 5 (обратите внимание, с пробелом), — в то время как WHATWG, отдельная организация, занималась спецификацией HTML5 (без пробела), которая должна была стать основой для другой спецификации в W3C. Хрен срастишь тут, что к чему. Проще было заняться разгадкой последовательности событий в «Мементо» и работах Дэвида Линча.
XHTML мертв, да здравствует синтаксис XHTML
Ситуация начала проясняться в 2009-ом, когда W3C объявил, что обновлений по XHTML 2 больше поступать не будет. По сути, они просто официально признали, что формат был мертв с самого рождения.
Последнее, впрочем, не должно казаться серьезной проблемой — как мы рассмотрим далее, степень сторогости синтаксиса HTML5 каждый вправе выбрать для себя самостоятельно.
Развитие HTML5
Текущее состояние HTML5 не настолько туманное как раньше, но и все еще не слишком прозрачное.
Две организации сейчас работают над этим форматом. В WHATWG разрабатывают спецификацию, основываясь на принципе «сначала запустить, потом проверять». W3C HTML Working Group в свою очередь берет эту спецификацию и пропускает ее через процесс «сначала проверить, потом запустить». Как видно, такое сотрудничество вряд ли можно назвать крепким и эффективным. Но по крайней мере, вроде как разрешился вопрос «ставить или не ставить пробел» в названии стандарта (ставить его не надо, если что, — HTML5).
Что сейчас больше всего волнует веб-дизайнеров, которые уже опробывали некоторые из возможностей нового языка, это вопрос «Когда это будет готово?» В одном из интервью Ян Хиксон упомянул 2022-ой год как дату, когда HTML5 получит статус «proposed recommendation». Это вызвало волну возмущения среди дизайнеров, так как они понятия не имели, что значит «proposed recommendation», но точно знали, что им явно не хватает пальцев посчитать, сколько лет надо еще ждать до 2022-го.
Дата, на которую действительно надо ориентироваться, это 2012 год, когда HTML5 будет присвоен статус «candidate recommendation», означающий, что спецификация окончательно сформулирована и как таковой стандарт готов.
Но, ясное дело, это не будет означать, что все из него будет сразу доступно к применению — нужно будет следить за тем, как браузеры постепенно добавляют поддержку тех или иных фич и начинать их использовать по мере появления. Точно так же было с CSS 2.1, на самом деле: мы начали применять возможности этого стандарта по мере того, как браузеры включали его поддержку по частям. Если бы мы предпочли ждать, когда они реализуют его целиком, мы бы ждали до сих пор.
Иными словами, не будет такого момента, когда можно будет сказать «Бах, время HTML5 пришло!». Но начинать работать с ними можно уже сейчас. Благо, язык этот получил рождение не через революцию, а в процессе эволюции, и основывается на том, что было создано до него. Таким образом, можно сказать, что если вы пользуетесь любыми предыдущими версиями HTML, вы уже пользуетесь HTML5.
40 важных вопросов и ответов по HTML5
Введение
Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.
Какая связь между SGML, HTML, XML и XHTML?
SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.
HTML – это язык разметки, который описывается с помощью SGML.
Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию « DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.
Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.
Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).
Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.
Что такое HTML 5?
HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.
HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).
В HTML 5 нам не нужно DTD. Почему?
HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.
Какие браузеры поддерживают HTML 5?
Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.
Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?
Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:
Что такое HTML5?
Дата публикации: 2016-04-03
От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…
Что такое HTML5?
Первое — это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.
Второе — это «большой», маркетинговый, трендовый HTML5, зонтик для целого поколения новых технологий, включающий как непосредственно спецификацию HTML5, так и множество модулей CSS3, различные API для JavaScript, да и сам новый стандарт для JavaScript — ECMAScript5.
Рассмотрим некоторые ключевые особенности html5:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.
Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.
В нем есть своя интеграция с интерфейсами, которые могут понадобиться в современных приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователю (его координаты). Ранее это можно было сделать только через GPS.
Что дает HTML5?
Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.
Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.
Цели HTML5
Кратко цели html5 можно назвать так:
Ликвидация плагинов, таких как Flash, для общих функций, которые необходимы каждому. Построить собственную поддержку для таких вещей, как аудио, видео и т.д.
Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.
Обеспечение согласованности между браузерами и устройствами.
Сделать все это настолько прозрачным, насколько это возможно.
Новые возможности HTML5
Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.
Новые элементы html5
Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:
для любых видов меню
практически то же, что и div
для рисование на странице использую javascript
для вставки внешнего контента на страницу
Наряду с тем, что появились новые теги часть существующих тегов в HTML5 приобретает новое значение. Так, если раньше выбор между i и em (аналогично b и strong) был чаще в пользу более короткого написания, то сегодня это теги с различной смысловой нагрузкой, даже если по умолчанию они имеют одинаковое представление курсивом или жирным начертанием.
Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об aria- и role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Надо сказать, что обеспечение доступности не самая тривиальная задача, и в HTML5 чуть ли не впервые уделено столь большое внимание этому вопросу.
Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений. Вот некоторые из них:
Audio and video позволяет проигрывать видео в браузере без плагинов.
Geolocation: определяет положение посетителя.
Drag and drop: например, для загрузки файла перетаскиванием его в браузер.
Application cache: обеспечивает поддержку открытия сайтов offline.
Web workers: запускает JavaScript в фоновом режиме
Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.
Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies
Примеры использования html5
Давайте посмотрим на html5 в действии! HTML5 позволяет создавать новую, более простую и чистую разметку для страниц. Код становится более контентоориентированным и его проще читать и понимать. Вот пример простой веб-страницы на html5: