Html5 это

1. Это не одна большая вещь

Html5 этоВы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.

2. Вам не надо откидывать имеющееся


Html5 этоНравится вам это или нет, но вы не сможете отрицать, что HTML4 это наиболее удачный формат разметки. HTML5 основывается на этой удаче, поэтому вам не придется выкидывать имеющуюся разметку и переучиваться. Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5 и точка.

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email", поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать

Html5 это«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

<!DOCTYPE html>    

Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде <article>, <section>, <header> и <footer>.

4. Это уже работает

Html5 этоЕсли вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом <canvas>, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.

5. Он уже здесь


Html5 этоТим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

HTML5 уже здесь. Давайте погрузимся в него.

htmlbook.ru

Используйте корректный тип документа

На первой строке всегда декларируйте тип документа:

 <!DOCTYPE html>  

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

 <!doctype html>  

Имена элементов пишите маленькими буквами

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

  • Смешение больших и маленьких букв в именах тегов считается плохой практикой
  • Разработчики обычно используют маленькие буквы (как в XHTML)
  • Написание в нижнем регистре выглядит чище
  • В нижнем регистре легче писать

Плохо:

 <SECTION>  <p>Это параграф текста.</p> </SECTION>  

Очень плохо:

 <Section>  <p>Это параграф текста.</p> </SECTION>  

Хорошо:

 <section>  <p>Это параграф текста.</p> </section>  

Закрывайте все HTML элементы

В HTML5 вы не обязаны закрывать все элементы (например, элемент <p>). Тем не менее, мы все же рекомендуем закрывать все HTML элементы.

Плохо:

 <section>  <p>Это параграф текста.  <p>Это параграф текста. </section>  

Хорошо:

 <section>  <p>Это параграф текста.</p>  <p>Это параграф текста.</p> </section>  

Закрывайте пустые HTML элементы

В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.

Допустимо:

 <meta charset="utf-8">      

Также допустимо:

 <meta charset="utf-8" />  

Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.

Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!

В именах атрибутов используйте маленькие буквы

В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.

Мы рекомендуем в именах атрибутов всегда использовать только маленькие буквы. Это вызвано следующими причинами:

  • Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
  • Разработчики обычно используют маленькие буквы (как в XHTML)
  • Написание в нижнем регистре выглядит чище
  • В нижнем регистре легче писать

Плохо:

 <div CLASS="menu">  

Хорошо:

 <div class="menu">  

Заключайте значения атрибутов в кавычки

HTML5 допускает написание значений атрибутов без кавычек. Однако мы рекомендуем всегда заключать значения атрибутов в кавычки, потому что

  • Смешение больших и маленьких букв в значениях считается плохой практикой
  • Значения в кавычках легче читать
  • Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы

Очень плохо:

 Это не будет работать, потому что в значении есть пробелы <table class=table striped>  

Плохо:

 <table class=striped>  

Хорошо:

 <table class="striped">  

Атрибуты изображений

При определении изображений всегда используйте атрибут «alt». Этот атрибут важен, когда изображение по какой-то причине не отображается.

Также, всегда определяйте ширину и высоту изображения. Это уменьшает слом макета страницы, так как браузер будет резервировать место для изображения еще на этапе загрузки страницы.

Плохо:

 <img src='html5.gif'>  

Хорошо:

 <img src='html5.gif' alt="HTML5" style="width: 128px; height: 128px">  

Пробелы и знак равно

HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.

Плохо:

 <link rel = "stylesheet" href = "styles.css">  

Хорошо:

 <link rel="stylesheet" href='styles.css'>  

Избегайте длинных строк кода

При использовании HTML редактора, неудобно читать HTML код, если приходится прокручивать окно влево или вправо.

Следует стараться, чтобы строка кода в длину не превышала 80 символов.

Пустые строки и отступы


Не следует без веских причин добавлять пустые строки.

Для лучшей читабельности пустые строки следует добавлять только для разделения больших и логически единых блоков кода.

Также, для лучшей читабельности добавляйте два пробела отступов. Не используйте для этого табуляцию.

Не используйте ненужные пустые строки и отступы. Нет необходимости ставить отступ перед каждым элементом.

Необязательно:

 <body>   <h1>Famous Cities</h1>   <h2>Tokyo</h2>   <p>  Tokyo is the capital of Japan, the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.  It is the seat of the Japanese government and the Imperial Palace,  and the home of the Japanese Imperial Family.  </p>  </body>  

Лучше:

 <body>  <h1>Famous Cities</h1>  <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>  </body>  

Таблица:

 <table>  <tr>  <th>Name</th>  <th>Description</th>  </tr>  <tr>  <td>A</td>  <td>Description of A</td>  </tr>  <tr>  <td>B</td>  <td>Description of B</td>  </tr> </table>      

Список:

 <ol>  <li>London</li>  <li>Paris</li>  <li>Tokyo</li> </ol>  

Пропускать или нет <html> и <body>?

По стандарту HTML5 тег <html> и тег <body> могут не использоваться.

Следующий код согласно стандарту HTML5 считается валидным:

 <!DOCTYPE html> <head>  <title>Заголовок страницы</title> </head>  <h1>Это текстовый заголовок</h1> <p>Это абзац текста.</p>  

Однако мы не рекомендует пропускать теги <html> и <body>.

Элемент <html> — это корень документа. Это рекомендованное место для определения языка страницы:

 <!DOCTYPE html> <html lang="en-US">  

Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.

Кроме этого, если не написать тег <html> или тег <body>, то это может сломать структуру DOM и XML приложения. А пропуск тега <body> к тому же может привести к ошибками в старых браузерах (IE9).

Пропускать ли тег <head>?

Согласно стандарту HTML5 тег <head> может не использоваться.

По умолчанию, браузеры будут добавлять все элементы, расположенные перед открывающем тегом <body> внутрь созданного ими элемента <head>.

Вы можете снизить сложность структуры HTML, пропустив тег <head>:

   
<!DOCTYPE html> <html> <title>Заголовок страницы</title> <body> <h1>Текстовый заголовок</h1> <p>Это текстовый абзац.</p> </body> </html>

Однако мы не рекомендуем пропускать тег <head>, так как это еще не вошло в повседневную практику и может запутать веб-разработчиков.

Метаданные

Элемент <title> является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:

 <title>Стандарты синтаксиса и кодирования в HTML5</title>  

Чтобы обеспечить правильную интерпретацию и корректное индексирование страницы поисковыми системами, определение языка и кодировки символов страницы необходимо декларировать как можно раньше:

 <!DOCTYPE html> <html lang="ru-RU"> <head>  <meta charset="UTF-8">  <title>Стандарты синтаксиса и кодирования в HTML5</title> </head>  

Установка вьюпорта (окна просмотра)

«Вьюпорт» — это видимая пользователю область веб-страницы. Эта область разница от устройства к устройству и на мобильных телефонах будет меньше, чем на экране компьютера.

В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега <meta>.

Следует всегда использовать элемент управления вьюпортом <meta> в следующей форме на всех веб-страницах:

   
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Данный элемент управления вьюпортом <meta> предоставляет браузеру инструкцию, как контролировать размеры и масштабирование страницы.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана текущего устройства (которая будет разной в зависимости от используемого устройства).

Часть initial-scale=1.0 устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.

Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:

HTML комментарии

Короткий комментарий должен писаться на одной строке:

 <!-- Это комментарий -->  

Комментарии, занимающие более одной строки, должны записываться следующим образом:

 <!--   Это пример длинного комментария. Это пример длинного комментария.  Это пример длинного комментария. Это пример длинного комментария. -->  

Длинные комментарии легче читать, если они имеют отступ в два пробела.

Таблицы стилей

Используйте простой синтаксис для подключения внешних каскадных таблиц стилей (атрибут type не нужен):

 <link rel="stylesheet" href='styles.css'>  

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

  p.intro {font-family: Verdana; font-size: 16em;}   

Длинные правила следует записывать на нескольких строках:

  body {  background-color: lightgrey;  font-family: "Arial Black", Helvetica, sans-serif;  font-size: 16em;  color: black; }  
  • Открывающие скобки размещайте на одной строке с селектором
  • Используйте один пробел перед открывающими скобками
  • Для отступов используйте два пробела
  • После каждой пары свойство-значение, включая последнюю, ставьте точку с запятой
  • Кавычки используйте только со значениями, содержащими пробелы
  • Закрывающие скобки пишите на новой строке без отступа
  • Старайтесь, чтобы длина записи на одной строке была не больше 80 символов

Загрузка JavaScript в HTML

Для загрузки внешних скриптов Javascript используйте простой синтаксис (атрибут type не нужен):

 <script src='myscript.js'>  

Доступ к HTML элементам при помощи JavaScript

«Неряшливость» во время кодирования HTML может привести к ошибкам в работе скриптов JavaScript.

Следующие два выражения JavaScript дадут разные результаты:

 var obj = getElementById("Demo")  var obj = getElementById("demo")  

В именах файлов используйте маленькие буквы

Некоторые веб-серверы (Apache, Unix) являются регистрозависимыми при обращении к файлам, т. е. к файлу с именем «london.jpg» нельзя получить доступ как «London.jpg».

Другие веб-серверы (Microsoft, IIS) на размер букв в именах файлов не обращают внимание, т. е. к файлу с именем «london.jpg» можно обращаться как «London.jpg», так и «london.jpg».

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

Если вы переносите свой сайт с регистронезависимого на регистрозависимый сервер, то малейшая ошибка может обрушить весь ваш ресурс!

Чтобы избежать этой проблемы, в именах файлов всегда используйте только буквы в нижнем регистре (маленькие буквы).

Расширения файлов

HTML файлы должны иметь расширение .html или .htm.

CSS файлы должны иметь расширение .css.

JavaScript файлы должны иметь расширение .js.

Разница между .htm и .html

Нет никакой разницы между расширениями .htm и .html. Файлы и с одним и с другим расширением будут рассматриваться любым браузером или веб-сервером как файл с HTML кодом.

В настоящее время разница между ними лежит лишь в культурной плоскости:

  • .htm отдает духом ранних DOS систем, у которых были ограничения на длину расширения файла в 3 символа.
  • .html напоминает о системах Unix, у которых таких ограничений не было.

Технические особенности

Если в URL не указывается имя файла (например, http://example.com/css/), то сервер передаст файл по умолчанию. Обычно файлами по умолчанию являются index.html, index.htm, default.html и default.htm.

Если на сервере в качестве имени файла по умолчанию установлено только имя «index.html», то и у вас должен быть файл с именем «index.html», но никак не «index.htm».

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

В любом случае полное расширение для HTML файлов — это .html, и нет никаких причин, почему его не следует использовать.

msiter.ru

Что такое HTML5 и почему про него так много говорят? Откуда взялся HTML5?
Я не буду вдаваться глубоко в историю HTML и HTML5 — это тема для отдельного большого рассказа, но суть вопроса вот в чем.
Сама история HTML имеет весьма давние корни, начиная с языка GML (Generalized Markup Language), родившегося в недрах IBM в конце 60х годов, продолжая стандартизированным в первой половине 80х языком SGML (Standard Generalized Markup Language) и переходя непосредственно к работам Tim Berners Lee в начале 90х, которые и вылились в первые наброски HyperText и HTML и первую официальную стандартную версию HTML 2.0 в 1995 г.

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

В конце-концов уже в течение года эта активность дала дорогу HTML 3.2, довольно быстро перешедшему в состояние официальной рекомендации W3C.
Появлялись новые идеи, стандарт продолжал усложняться и в 1997 г. был выработан и утвержден HTML 4.0, спустя 2 года обновившийся до ревизии HTML 4.01.
Это последняя полностью утвержденная версия HTML, которой мы продолжаем активно пользоваться и на базе которой построены практически все страницы современного интернета. Это был 1999 год и это было более 11 лет назад.

Волнующий многих вопрос: а что же дальше? А дальше нужно вернуться на несколько лет назад — в 1996 г., когда появился первый черновик нового языка разметки — знакомый сегодня всем разработчикам язык XML (eXtensible Markup Language), довольно быстро (по сегодняшним меркам) стандартизированный и нашедший огромное применение во множестве сфер благодаря своей универсальности и формализму, крайне удобному при машинной обработки данных.
Не оказался неподвластным влиянию XML и наш любимый HTML, что, как вы уже догадались, вылилось в XML-версию HTML, известную как XHTML. В новом статусе язык обретает новые возможности, получает модульность и… развитие самого языка разметки практически прекращается.
Не менее интересен и браузерный фон происходящих событий — наступает царство IE5.5 и далее IE6, рынок практически остается без серьезной конкуренции, традиционно являющейся ключевым элементом устойчивого развития.
Фокус W3C тем временем смещается в новые области, особенно завязанные на развитие и использование XML — от языков разметки специализированных данных до языков обработки XML.

С возвратом конкуренции в середине 2000х и накоплением довольно большого опыта в работе с XML в W3C появляется новый проект — XHTML 2.0, на практике явивший собой несовместимую со старыми версию языка для разметки веб-страниц — хотя и со множеством новых идей, но преимущественно в силу обозначенного недостатка, не принятый активно в сообществе.
В конечном счете в 2009 работа над XHTML 2.0 была заморожена, а в конце 2010 перестала работать и соответствующая рабочая группа.
Параллельно со всем этим процессом шла активная работа по разработке новой версии HTML, совместимой с HTML 4.01. Начиная с новой версии веб-форм WebForms 2.0, разрабатываемой Яном Хиксоном (Ian Hickson) и внесенной в 2005 г. на рассмотрение в W3C, годом позже формально принятой в качестве черновика, — и переходя к новым возможностям для создания веб-приложений Web Applications 1.0. Вместе оба документа вылились в черновик стандарта HTML5, в начале 2008 г. внесенный на рассмотрение в W3C.
(Надо отметить, что работа над стандартом изначально велась в рамках рабочей группы WHATWG и впоследствии проходила и сегодня проходит в параллельном режиме в W3C и WHATWG. Группы имеют несколько разные подходы к работе, но обе версии стандарта синхронизируются между собой и у них также общий редактор — Ян Хиксон.)

На сегодня HTML5 находится в стадии Last Call Working Draft и в целом уже устоялся и находит активную поддержку как среди производителей браузеров, так и в сообществе разработчиков.
Спецификация HTML5 значительна по объему — она в три раза больше описания HTML 4.01. Но пусть вас не смущает размер: значительная часть спецификации адресована разработчикам браузеров и нацелена на обеспечение совместимости реализаций HTML5, выполненных различными производителями.

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

Актуальную версию черновика стандарта HTML5 можно найти тут: http://www.w3.org/TR/html5/
В W3C также ведется специальный документ, описывающий отличия HTML5 от HTML 4.01 — их можно посмотреть в этом документе: http://dev.w3.org/html5/html4-differences/

Ну хорошо, сегодня у нас есть HTML5, что с того? Зачем он взялся и зачем он нужен?
Что происходило, пока HTML спал?
Если кратко, то весь фоновый (хотя какой он фоновый? он как раз самый что ни на есть активный!) мной уже описан в одном из предыдущих постов с вот этой картинкой:

Фактически, пока спал HTML и спали или подремывали сопутствующие технологии (главным образом, CSS и javascript), интернет продолжал активно развиваться, требовал новых возможностей и находил способы их воплощения.

Подумайте, в рамках стандартного четвертого HTML и тогда еще не окончательно принятого CSS 2.1 и предыдущего стандарта javascript — ECMAScript 3, вооруженные мощностью плагинов (прежде всего, Flash и позднее Silverlight), веб-разработчики совершили целую революцию в интернете:

  • Насыщенные интернет-приложения (RIA) и вообще веб-приложения, работающие целиком в браузере
  • Асинхронное взаимодействие (AJAX — хотя технология XMLHTTPRequest, лежащая в его основе появилась еще в IE 5.5, но только с 2004 этот подход начал активное шествие по вебу)
  • Web 2.0, социальные сети
  • Онлайновое видео и аудио в браузере, живой стриминг
  • Общение через веб-камеру и микрофон прямо в браузере
  • Расцвет мобильного веба и специфических возможностей вроде геолокации
  • Драматическое ускорение javascript (за последние несколько лет это увеличение на порядок)

И многое чего еще — и не забываем, что компьютерная техника также сильно обновилась, включая появление возможности аппаратного ускорения за счет ресурсов видео-карты и приход многоядерных процессов даже в небольших нетбуках.
Веб изменился. А HTML все спал и спал 🙂 Тут самое время сказать: дождались!

Если вы читаете этот пост, вы наверняка уже много слышали про HTML5. А то и вовсе вам уже приелось слышать из всех углов истории про HTML5 и увлекательные рассказы разработчиков браузеров про всеобщую любовь к HTML5?
И ведь сегодня действительно очень многие воодушевлены приходом HTML5. И это не просто слова, радостный маркетинг или восторженная истерия на пустом месте (без них, конечно, тоже не обходится). За HTML5 и правда стоит ряд принципиальных нововведений, подчеркивающих и направляющих дальнейшее развитие веб-стандартов.

Давайте уже к сути?
Почему HTML5 — это мега-мега-круто?
(Это тонкий момент, на котором я не буду останавливаться подробно в этой статье, но будьте уверены — расширения браузеров в виде плагинов еще рано списывать со счетов и во многих сценариях их возможности на несколько лет впереди того, что сегодня может предложить семейство HTML5.)
HTML5, на мой взгляд, дает три основных преимущества на концептуальном уровне, которые важно понимать прежде, чем мы перейдем к деталям:
1. Нативная поддержка. Браузеры, поддерживающие HTML5 (а на сегодня это современные версии всех популярных браузеров), делают это нативно, из коробки, то есть без необходимости устанавливать дополнительные плагины. Функционал из коробки — это всегда хорошо, если он работает не хуже того, что в принципе можно доставить сверху. За надежность и интеграцию встроеного функционала отвечает производитель браузера, он же следит за обеспечением безопасности и приватности. Для встроенного функционала проще обеспечить доступ к системным ресурсам — будь то данные или вычислительные мощности.
2. Полноправные элементы. В отличие от плагинов, работающих как черный ящик, вставленный на страницу и в лучшем случае взаимодействующий с ней через специальные интерфейсы на javascript, встроенный в браузер функционал полноправно интегрируется во всю экосистему технологий и поддерживаемых стандартов. Например, это означает, что видео-элементы HTML5 можно стилизовать через CSS, к ним можно напрямую обращаться через DOM и javascript. Это единая хорошо связанная экосистема.
3. Открытые технологии. Открытость — штука двоякая и есть палка о двух концах. Открытые стандарты, доступные любому для изучения, использования и реализации, — с одной стороны, и необходимость в стандартизации и стремлении к совместимости разных реализаций — с другой. И вместе с этим относительно легкий доступ к коду (благо в каждом уважающем себя браузере сегодня есть встроенные средства разработки, ну или популярный плагин :)). Открытость, да! Да, с побочными эффектами.

Так что там нового?
Как я уже писал выше, спецификация HTML5 несет в себе множество изменений разного уровня и разной важности. Принципиально, ключевые изменения можно разделить на 5 блоков:

  • Семантика. В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц. Это включает как блочные теги вроде header, footer, article, так и теги для разметки текста, например, mark, ruby, details. Ряд существующих тегов HTML4 признан устаревшим, отдельные теги поменяли свое значение, определенные изменения претерпели атрибуты.
  • Мультимедиа. HTML5 добавляет нативную поддержку мультимедийного контента (аудио и видео) прямо в HMTL-разметке — с соответствующим API для управления воспроизведением (и некоторыми заморочками с кодеками).
  • Графика. Работать с графикой на стороне клиента стало заметно проще. В HTML5 добавлен элемент canvas и специальный API на javascript для работы с ним. Canvas представляет собой динамическую «поверхность», поверх которой можно программного рисовать. Также в HTML5 официально включен тег svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
  • Веб-формы. Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами без использования дополнительных библиотек — от подсказок в поле ввода (placeholder) и проверки вводимых значений до специальных элементов для ввода дат и цвета.
  • javascript APIs. Как обозначенные выше API для работы с графикой и мульмедиа, так новые возможности по перемещению объектов (Drag & Drop) и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.

HTML5 — это спецификация. HTML5 — это и зонтичный термин, объядиняющий в себе целое семейство спецификаций, или даже, как правильнее будет сказать, новое поколение веб-стандартов.
Вы это наверняка слышали и, наверняка, еще много раз услышите — “HTML5” — это и про верстку, и про новые стили CSS, и про множество новых API, и даже про новую версию javascript — ECMAScript5.

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

И в этом контексте, абсолютно все равно, будете ли вы называть левую и правую части соответственно HTML5 и все остальное, или смотреть на них как стандарт HTML5 и большой маркетинговый “HTML5”, или вполне справедливо полагать первое просто HTML5, а второе каким-нибудь “HTML5 Extended” или “HTML5+” или “HTML5*” или как вам больше нравится.

webtun.com

Insert tag line here.

Элемент «footer» представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.

© 2007 Example Inc.

Элемент «nav» — определяет раздел навигации по сайту:

  • Home
  • Products
  • Services
  • About

Элемент «aside» определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.

Archives

  • September 2007
  • August 2007
  • July 2007

Элемент «section» можно использовать как общий раздел содержания страницы

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,
...

Элемент «article» представляет собой непосредственно содержание страницы, т.е. определяет контент как таковой: статьи, новости, комментарии и т.п.

Comment #2
by Jack O'Niell

August 29th, 2007 at 13:58

That's another great article!

В следующей части статьи описание внедрения видео- и аудио-элементов

habr.com

1. Введение

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

HTML4 стал Рекомендацией W3C в 1997. В то время как он продолжал для многих быть грубым руководством к основным функциям HTML, он также не обеспечивал достаточной информации для построения реализаций, которые взаимодействуют с другими реализациями, и что важнее с критическим объёмом созданного HTML-содержимого. Это относилось и к XHTML1 и DOM Level 2 HTML. HTML5 заменит эти документы.

Рабочий проект HTML5 начал разрабатываться в 2004 году с попытки изучения современных реализаций HTML и созданных с помощью них HTML-документов. Рабочий проект:

  • Описывает отдельный язык, названный HTML5, который может использовать синтаксис HTML или XML.
  • Определяет подробные модели обработки для развития способных к взаимодействию реализаций.
  • Совершенствует разметку для HTML-документов.
  • Внедряет разметку и API для зарождения идиом, таких как Web applications.

1.1. Нерешенные проблемы

HTML5 — пока еще незаконченная спецификация. Содержание HTML5, также как и содержание этого документа («HTML5 differences from HTML4»), напрямую зависящего от HTML5, всё ещё обсуждается в Рабочей группе HTML и WHATWG. Нерешенные проблемы включают в себя (список не исчерпывающий):

  • Семантическое определение некоторых элементов, ранее предназначенных лишь для оформления. 
  • Сведения о доступности, возможностях замены и сопровождения альтернативным содержимым медиа-данных, таких как атрибуты alt и summary.

1.2. Обратная совместимость

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

Агенты пользователей, однако, всегда должны будут поддерживать устаревшие элементы и атрибуты, и именно поэтому спецификация полностью отделяет требования к авторам и агентам пользователей. Это означает, что авторы не могут использовать элементы isindex или plaintext, но агентам пользователей необходимо их поддерживать для совместимости с созданным HTML-содержимым.

Так как в HTML5 требования для автором и агентов пользователей разделены, больше нет необходимости присвоения отдельным частям спецификации статуса «устаревшая».

1.3. Разрабатываемая модель

Спецификация HTML5 не будет рассматриваться завершённой до тех пор, пока не существуют, по крайней мере, две завершённые реализации этой спецификации. Этот подход отличается от предыдущих версий HTML. Его цель – гарантировать полную пригодность спецификации для дизайнеров и разработчиков.

1.4. Влияние на веб-архитектуру

Предполагается, что на веб-архитектуру окажут влияние следующие области/возможности, определенные в HTML5:

  • Использование DOM в качестве основы для описания языка.
  • Концепция окружения браузера.
  • Разделение требований к агентам пользователей и авторам HTML-документов.
  • Использование обязательных определений вместо абстрактных определений с требованием эквивалента «чёрного ящика» при реализации.
  • Новая концепция модели содержимого (взамен концепции строчных и блочных элементов в HTML4).
  • Рассмотрение доступности как неотъемлемой концепции для создания новых возможностей (таких как атрибут hidden, элемент progress и т.п.) вместо каких-либо расширений (к примеру, атрибута alt).
  • Подробное определение семантики (например, алгоритма outline, взамен его нечёткой семантики в HTML4).
  • Элементы menu и command.
  • Основополагающие идеи.
  • Оффлайн-кеш веб-приложений.
  • Определение алгоритма контекстной навигации в браузере (browsing context "navigation" algorithm) и связанных с ним алгоритмов просмотра истории сессий (session history traversal algorithms).
  • Контроль типов содержимого и кодировок.
  • Очень строгое и недвусмысленное описание парсера.
  • Возможности contentEditable и UndoManager.
  • Архитектура Drag&Drop и Copy&Past.
  • Новые возможности «sandbox» («песочницы», учебно-эксперементальных сред) для iframe.

2. Синтаксис

HTML5 использует синтаксис HTML, который совместим с HTML4- и XHTML1-документами, опубликованными в Интернете, но несовместим с нечёткими функциями SGML языка HTML4, такими как команды обработки (processing instructions) и сокращенная разметка (shorthand markup). Документы, использующие синтаксис HTML почти всегда имеют медиа-тип text/html.

HTML5 также описывает подробные правила синтаксического анализа (включая обработку ошибок), которые в значительной степени совместимы с уже существующими популярными реализациями парсеров. Агенты пользователей должны использовать эти правила для документов, которые имеют медиа-тип text/html. Ниже приведен пример документа, который соответствует HTML-синтаксису языка HTML5:

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>

HTML5 также определяет медиа-тип text/html-sandboxed для документов, использующих HTML-синтаксис и содержащих непроверенное (разрабатываемое) содержимое.

Другим синтаксисом, который можно использовать для HTML5, является XML. Этот синтаксис совместим с реализациями и документами XHTML1. Документы, использующие такой синтаксис, должны иметь медиа-тип XML, а элементы должны быть помещены в пространство имён http://www.w3.org/1999/xhtml по правилам, в дальнейшем устанавливаемым спецификациями XML.

Ниже представлен пример документа, который соответствует XML-синтаксису языка HTML5. Обратите внимание на то, что документы XML должны иметь медиа-тип XML, например, application/xhtml+xml или application/xml.

 <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>

2.1. Кодировка символов

Для HTML-синтаксиса языка HTML5 у авторов документов существует три варианта задания кодировки:

  • На транспортном уровне можно использовать заголовок HTTP Content-Type
  • Использовать символ маркера порядка байтов Unicode (BOM) в начале файла. Этот символ обеспечивает сигнатуру для использования необходимой кодировки. 
  • Используя элемент meta с атрибутом charset. Например, <meta charset="UTF-8"> может использоваться для установки кодировки UTF-8. Эта запись заменяет более длинную <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, которая также допустима в HTML-синтаксисе.

Для установки кодировки в случае XML-синтаксиса авторы должны использовать правила, которые установлены в спецификациях XML.

2.2. DOCTYPE

HTML-синтаксис HTML5 требует наличия DOCTYPE для гарантирования того, что браузер отобразит страницу в режиме поддержки стандартов. У DOCTYPE нет иного предназначения и поэтому он необязателен для XML. Документы с медиа-типом XML всегда отображаются в режиме поддержки стандартов. Объявление DOCTYPE должно быть следующим: <!DOCTYPE html>, оно регистронезависимо в HTML-синтаксисе. DOCTYPE в ранних версиях HTML был длиннее, потому что язык HTML был основан на SGML, и поэтому требовал ссылки на DTD. В HTML5 такой ссылки не требуется, и DOCTYPE нужен лишь для включения режима поддержки стандартов для документов с HTML-синтаксисом. Браузеры уже выполняют переключение в режим стандартов при использовании объявления <!DOCTYPE html>.

2.3. MathML и SVG

HTML-синтаксис языка HTML5 допускает использование элементов MathML и SVG непосредственно внутри документа. Ниже представлен пример использования такой возможности:

 <!doctype html> <title>SVG в text/html</title> <p>Зелёный круг: <svg><circle r="50" cx="50" cy="50" fill="green"/></svg> </p>

Более сложные сочетания также допустимы. Например, с помощью SVG-элемента foreignObject вы можете внедрять MathML, HTML внутрь фрагмента SVG, который сам находится внутри HTML.

2.4. Прочее

Существует несколько других синтаксических изменений, о которых следует упомянуть:

  • HTML теперь имеет встроенную поддержку идентификаторов IRI, хотя они могут использоваться в полной мере, только если документ имеет кодировку UTF-8 или UTF-16.
  • Атрибут lang может иметь значение пустой строки или верного идентификатора языка, также как и атрибут xml:lang в XML.
Статья основана на официальном документе W3C "HTML5 differences from HTML4" (от 10 марта 2010 года).

 

w3pro.ru

Каковы основные различия между HTML и HTML5

Единственной постоянной вещью в области информационных технологий является то, что периодические обновления и изменения неизбежны. Ни один язык не может избежать обновлений или новых выпусков. HTML не является исключением. HTML5 был выпущен с целью улучшения работы Всемирной паутины как для разработчиков, так и для обычных пользователей. Как уже упоминалось, самым большим преимуществом, которое имеет HTML5 над своим ненумерованным предшественником, является то, что у него есть поддержка аудио и видео высокого уровня, которая не была частью спецификации в предыдущих HTML. Другие различия между HTML и HTML5:

  • SVG, canvas и другая виртуальная векторная графика поддерживаются в HTML5, тогда как в HTML использование векторной графики стало возможным только при использовании его в сочетании с различными технологиями, такими как Flash, VML, Silver-light и т.д.
  • HTML5 использует базы данных SQL и кеш приложений для временного хранения данных, тогда как в HTML для этого используется только кэш браузера.
  • Еще одно отличие между HTML и HTML5, о котором стоит упомянуть: первый не позволяет запуск JavaScript в коде (вместо этого он работает в потоке интерфейса браузера), тогда как последний обеспечивает полную поддержку JavaScript для запуска в фоновом режиме.
  • HTML5 не основан на SGML, и это позволяет ему иметь улучшенные правила синтаксического анализа, которые обеспечивают улучшенную совместимость.
  • В HTML5, в тексте могут использоваться встроенные MathML и SVG, тогда как это невозможно в HTML.
  • Некоторые из устаревших элементов были полностью удалены: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
  • HTML5 поддерживает новые виды элементов управления, к примеру, dates and times, email, number, range, tel, url, search и т.д.
  • В HTML появилось много новых элементов. Вот некоторые из самых важных: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

различия между html4 html5

Основные преимущества HTML5 для разработчиков

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

  1. Постоянная обработка ошибок:

Большинство браузеров поддерживают парсинг структурно или синтаксически неправильного HTML кода, но до недавнего времени для этого не было стандартного процесса. Это означает, что разработчикам новых браузеров необходимо производить тесты неверных HTML документов для создания более улучшенного процесса обработки ошибок. Постоянная обработка ошибок в HTML5 сыграла в этом процессе огромное значение.

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

  1. Улучшенная семантика для элементов:

Для упрощения и улучшения понимания кода были внесены улучшения в семантические роли различных существующих элементов. Section, article, nav и header – это новые элементы, которые заменили большинство из ныне устаревших div элементов. Это сделало процесс обработки ошибок менее сложным.

  1. Расширенная поддержка функций веб-приложений:

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

  1. Создание мобильных сайтов стало проще:

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

  1. Элемент canvas:

Одной из самых обсуждаемых особенностей HTML5 является элемент  <canvas>. Внедрение этого уникального тега произвело огромное влияние на Adobe Flash. Несмотря на то, что многие сайты до сих пор используют Flash, все больше людей склоняются к использованию HTML5, именно поэтому есть основание полагать, что Flash в ближайшем будущем полностью устареет.

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

<canvas id=”TestCanvas” width=”200″ height=”100″></canvas>  var c = document.getElementById(“TestCanvas”);       var context = c.getContext(“2d”);       context.fillStyle = “#FF0000”;       context.fillRect(0,0,140,75);
  1. Элемент menu:

Недавно добавленные элементы <menu> и <menuitem> являются составными частями интерактивных элементов, однако, они не очень популярны в сообществе разработчиков. Несмотря на это, эти два элемента могут быть использованы для обеспечения более лучшей интерактивности на странице.

Тег <menu> используется для простоты предоставления команд меню на мобильных приложениях и приложениях рабочего стола. Здесь показано возможное применение тега <menu>:

<body contextmenu=”new-menu”>           <menu id=” new-menu” type=”context”>            <menuitem>Hello!</menuitem>         </menu> </body>
  1. Настраиваемые атрибуты данных:

Добавление пользовательских атрибутов было возможно и до появления HTML5, но оно было связано с определенным риском, к примеру, в HTML4 пользовательские атрибуты могли приводить к остановке рендера страницы или что еще хуже, могли стать причиной неправильной работы документа. Атрибут data-* в HTML5 поставил точку в решении этой часто встречающейся проблемы. Этот атрибут имеет несколько предназначений, но основной целью его введения было хранение дополнительной информации о разных элементах. Теперь, благодаря этому атрибуту могут быть включены пользовательские данные, что дает разработчикам больше возможностей сделать привлекательные и эффективные страницы, без лишних запросов на сервер или вызовов Ajax.

  1. (Возможное) прощание с Cookies:

Поддержка локального хранилища стала важным дополнением к HTML5. До появления HTML5, если разработчики хотели хранить что-либо на стороне пользователя, им приходилось использовать файлы cookie. Однако файлы cookie могут содержать лишь небольшой объем данных (не говоря уже о том, что все их ненавидят), это прибавило добавлению объекта localStorage в HTML5 еще больше преимуществ. Объект localStorage является частью глобального пространства имен и при использовании скриптов может быть доступен из любого места.

Шпаргалка HTML5

Если вы еще не знаете что такое HTML5 и с чем его едят, шпаргалка может быть отличным подспорьем при его изучении. Используйте приведенную ниже таблицу стилей HTML, для более продуктивного начала работы с HTML. Эта шпаргалка показывает наиболее часто используемые теги HTML.

шпаргалка html

Преимущества HTML5 для обычного пользователя

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

  1. Мобильные браузеры теперь работают более стабильно, чем стандартные приложения. До появления HTML5 ситуация была иная.
  2. Сегодня ставка на адаптивные сайты (дружелюбные к мобильным устройствам) очень высока, так как почти 30 процентов пользователей мобильных устройств не хотят загружать специальные приложения. Это стало еще одним преимуществом HTML5, к примеру, если пользователь хочет использовать услуги компании, но не хочет загружать специальное приложение, он может просто зайти на сайт компании, чтобы сделать это.
  3. Искоренение необходимости использования Adobe Flash позволяет разработчикам обеспечить более эстетичный пользовательский интерфейс. Использование JavaScript и MPEG4 в сочетании с HTML5 сделало жизнь пользователей намного лучше.
  4. Возможность поддержки собственных аудио и видео элементов означает, что пользователям не придется загружать дополнительные плагины для просмотра мультимедиа на вашем сайте. Поддержка мультимедиа, предоставляемая HTML5, является одной из самых значимых причин, по которой он используется намного чаще чем HTML.

Заключение

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

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

www.hostinger.ru

Что такое HTML5?

Зто зависит от того, о чем идет речь. Выражение «HTML5» используют в трех разных значениях:

Спецификация HTML5

Наиболее точным определением понятия «HTML5» будет следующее: это спецификация, разработанная совместно двумя группами, W3C и WHATWG. Существуют разные версии спецификации HTML5.

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

    Ключевые понятия:

  • Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы в чем-то из них.
  • Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Adobe, IBM, HP, BBC и многим другими.
  • Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.

HTML5 и его друзья

в дополнение к самому ядру HTML5, WHATWG разработали другие спецификации, такие как Web Workers, Web Sockets, Web Database. Все они дополняют его новыми свойствами и функциями, полезными для приложений, игр и тому подобного.

Многое из их содержимого изначально было частью самого ядра, но по некоторым производственным и организационным причинам было выведено из него. Вся группа вместе называется Web Applications 1.0.

3. Новые «супер-веб-технологии»

Часто большинство людей, налеких от веб-разработки (а часто и не очень сведущие разработчики), говоря «HTML5», подразумевают целый ряд технологий: ядро HTML5, его дополнения — и еще уйму вообще никак не связанных с ними технологий, таких как геолокация (способность вашего браузера «распознавать» ваше местонахождение), ориенацию устройства, события касания, анимацию CSS3 (которая может заменять несложную Flash-анимацию), SVG (способ отображения графики четко и гладко на экране любого размера), и недавно вошедший сюда WebGL, позволяющий использовать популярные библиотеки 3D-графики в веб, внося трехмерность в веб-гарфику и браузерные игры.

Многое из этого разработано W3C, а WebGL, к примеру, создан Khronos Group.

Также важно не забывать, что так называемые «демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.

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

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

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper; Nationwide Building Society, Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

Правда ли, что HTML5 предназначен для мобильных устройств?

Совершенно нет. В основе HTML5 лежат определенные принципы разработки, один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования… Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.

Перевод — Дежурка. Автор оригинальной статьи — Bruce Lawson, один из соавторов книги Introducing HTML5.

www.dejurka.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector