HTML 5 - это новая версия самого популярного языка разметки.

Уже более 10-ти лет язык гипертекстовой разметки HTML практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5 .

В HTML 5 добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font и center ).

Добавлены следующие элементы:

1) header .

2) footer .

4) section .

5) article .

6) aside .

7) figure .

8) dialog .

9) m (mark) .

10) time .

11) meter .

12) progress .

13) video .

14) audio .

15) details .

16) datagrid .

17) menu .

18) command .

В остальном осталось всё без изменений. То есть никаких проблем с не возникнет, при условии, что Вы знакомы со стандартным . Собственно, всё осталось как прежде, только добавились новые возможности.

Благодаря нововедениям HTML 5 можно существенно облегчить труд Web-мастеров по , упростив ту же самую разметку.

Наверняка, Вы задаётесь вопросом: "А будет ли работать HTML 5 со старыми браузерами?". Ответ таков: "Конечно, да, но новые элементы, разумеется, отображаться не будут". Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому.

Я уверен, что в ближайшие время HTML 5 смогут увидеть такой же процент пользователей, как сейчас видят HTML 4 , которому уже более 10-ти лет.

А об использовании новых возможностей HTML 5 мы поговорим с Вами в следующих статьях.

Введение

HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.

Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.

Итак, что же нового в HTML 5?

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

Тег

Тег

Контекстные меню

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

Новые структурные элементы

Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:

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

• - может быть использован, например, для создания диаграмм.

Новые inline-элементы

Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:

• - помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
• - можете использовать этот тег для вывода времени или даты в текстовом блоке.
• - для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
• Может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.

Новые типы полей ввода

HTML5 добавляет ряд новых типов для полей ввода данных:

• datetime
• datetime-local
• month
• number
• range
• email

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

Устаревшие (deprecated) элементы

Следующие элементы HTML считаются устаревшими:

• acronym
• applet
• basefont
• center
• frame
• frameset
• isindex
• noframes
• noscript
• strike

Синтаксис для задания кодировки

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

Интерактивные нововведения

Несколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:

• - дополнительная информация о чем либо. Например, данный тег может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет.
• - В отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для таблицы с выбором строк или колонок, inline-редактированием данных, сортировкой и т.п.
• - ранее нерекомендуемый, тег вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы , которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.

Новое определение типа документа (DTD)

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

Необязательный href в ссылках

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

Атрибут async

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

Заключение

Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег поддерживается в Firefox, Opera, Chrome и Safari. Плюс, на сколько мне известно, Firefox 3.5 будет поддерживать теги

Так что, ждем с нетерпением.

Кому интересно, спецификацию HTML 5 можно найти по следующей ссылке -

1 февраля 2008 в 23:51

Что нового в HTML 5.0? Часть 1

• Разработка веб-сайтов

• Перевод

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

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

Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG . Многие известные компании принимают участие в разработках, в том числе: Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных лиц с различными интересами и опытом.

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

Структура

HTML 5 вводит целый ряд новых элементов, которые делают структуру страниц намного проще. Большинство HTML4 страниц содержат ряд общих структур, например, колонтитулы (шапка и футер страницы) и столбцы, и сегодня это становится уже традицией - выделять их, используя элементы div, присваивая ему класс или id.


На иллюстрации типичный 2х колоночный макет с использованием div элементов, с присвоением им класса или id. Структура сожержит - «шапку» страницы, подвал, навигационное меню и контент, разбитый на 2 колонки -

Использование div элементов преимущественно, потому что в текущей версии HTML 4 не хватает семантики для описания этих частей более конкретно. HTML 5 данную проблему решает за счет введения новых элементов, каждый из который имеет свое отдельное название.

Код документа выглядит так:

...
...
...

...
...

Есть несколько преимуществ использования этих элементов. При использовании их в сочетании с заголовками элементов (h1 - h6), это дает возможность внедрить в каджый уровень свой подраздел с заголовком, в отличие от возможных 6 уровней в предыдущей версиии HTML. Спецификация включает в себя детальный алгоритм для генерации границ . Эти элементы могут быть использованы как авторские и браузерные инструменты для генерации оглавления и помощи пользователям в навигации по документу.

Например, следующая структура разделена на уровни с вложенными элементами h1:

Level 1

Level 2

Level 3

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

Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что заменив элементы div на соотвествующие элеметы, исходный код будет проще и «чище».

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

A Preview of HTML 5

By Lachlan Hunt

Example Blog

Insert tag line here.

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

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

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

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

К нашему счастью, на этот раз нам не пришлось ждать так же долго нового поколения HTML. В октябре 2015 W3C начали разработку черновика HTML 5.1, в котором должны были решить ряд проблем, которые остались открытыми в HTML5. Спустя долгое время в июня 2016 спецификация достигла статуса «Candidate Recommendation», в сентябре 2016 статуса «Proposed Recommendation» и, наконец, статуса W3C Recommendation в ноябре 2016. Кто следил за разработкой, могли заметить, что путь был тернистый. Много первичных HTML 5.1 свойств были отклонены из-за плохой проработки и отсутствия поддержки в браузерах.

HTML 5.1 находится до сих пор в разработке, а W3C начали работу над черновиком HTML 5.2, который предположительно должен выйти в конце 2017. А в этой статье мы рассмотрим пару интересных новых свойств и улучшений в версии 5.1. Поддержка у данных свойств до сих пор скудная, но мы расскажем в каких браузерах можно хотя бы попробовать примеры.

Контекстное меню при помощи тегов menu и menuitems

Черновая версия 5.1 представляет два типа элементов menu: context и toolbar. Первое используется для расширения родного контекстного меню, которое обычно отображается по клику на правую кнопку мыши по странице. Второй определяет простые компоненты меню. В процессе разработки от toolbar отказались, тег context до сих пор присутствует.

С помощью тега menu можно создать меню с одним или более тегами menuitems, после чего присвоить эти теги к любым элементам при помощи атрибута contextmenu. Тег menuitem может быть одного из трех типов:

checkbox – позволяет выбирать или снимать выбор;

command – позволяет выполнять действие по клику;

radio – позволяет выбирать один вариант из группы.

Базовый пример использования, работает в Firefox 49, в Chrome 54 поддержка отсутствует.

В браузерах с поддержкой контекстное меню должно выглядеть так:

Элементы details и summary

Теги details и summary позволяют показывать и прятать блоки с дополнительной информацией по клику. Обычно такое делают на JS, но теперь это можно делать и с помощью тегов details и summary. По клику на тег summary открывается контент из тега details.

Пример ниже тестировался в Firefox и Chrome.

В поддерживаемых браузерах демо выглядит так:

Дополнительные типы поля input – month, week и datetime-local

Арсенал поля инпут был расширен тремя новыми типами: month, week и datetime-local.

Первые два типа позволяют выбирать неделю и месяц. В Chrome оба этих типа показываются в виде выпадающих календарей, где можно выбрать месяц или неделю. При получении доступа из JS строка будет выглядеть примерно так: «2016-W43» для week и «2016-10» для month.

Изначально в черновике 5.1 было представлено два инпута date-time: datetime и datetime-local. Разница между ними в том, что datetime-local всегда выбирает время в часовом поясе пользователя, а datetime позволяет менять часовой пояс. В процессе разработки тип datetime был отброшен, остался только datetime-local. Поле типа datetime-local состоит из двух частей: даты, которую можно выбрать так же, как и в полях типа week и month, и времени, которое можно указать отдельно.

В CodePen демо ниже показаны примеры всех типов. Работает в Chrome, в Firefox поддержки пока нет:

В браузерах с поддержкой демо будет выглядеть так:

Адаптивные изображения

В HTML 5.1 появилось несколько новых функций для работы с адаптивными изображениями без подключения CSS. У каждой функции есть свои примеры использования.

Атрибут изображения srcset

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

Атрибут srcset принимает список URL изображений, разделенных запятой с Х модификатором. Модификаторы описывают соотношение пикселей (количество физических пикселей на CSS пиксель), подходящее к каждому изображению. Простой пример:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 1x, Images/high-res.jpg 2x, Images/ultra-high-res.jpg 3x"

Если соотношение пикселей равно 1, будет показано изображение low-res, для 2 будет показано high-res, для 3 — ultra-high-res. Можно показывать изображения разных размеров вместо соотношения пикселей. Для этого нужно использовать модификатор w:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

В этом случае для low-res задано изображение шириной 600px, для high-res – 1000px, для ultra-high-res – 1400px.

Атрибут изображения sizes

Возможно, вы захотите показывать изображения разными способами в зависимости от размера экрана. К примеру, можно показывать изображения в две колонки на широких экранах, а для узких экранов – в одну колонку. В этом вам поможет атрибут sizes. Атрибут позволяет переводить ширину экрана в пространство, отведенное для изображения, после чего подходящее изображение выбирается с помощью атрибута srcset. Пример:

< img src = "images/low-res.jpg" sizes = "(max-width: 40em) 100vw, 50vw" srcset = "images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

Когда ширина окна браузера больше 40em, атрибут sizes определяет ширину изображения, как 50% от ширины окна. Когда ширина окна меньше или равна 40em, ширина изображения составляет 100%.

Тег picture

Недостаточно просто менять размер изображений под разные экраны. Вам нужен способ показывать совсем другие изображения. В этом вам поможет тег picture. Данный тег позволяет прописать несколько изображений для разных экранов. Для этого нужно обернуть тег img в picture и указать дополнительные теги source. В тегах source указываются ссылки на изображения.

< picture > < source media = "(max-width: 20em)" srcset = " Images/small/low-res.jpg 1x, > < / picture >

Валидация форм с помощью form.reportValidity()

В HTML5 прописан метод form.checkValidity(), с помощью которого можно проверять поля формы по валидаторам. В качестве результата возвращается Булево значение. Новый метод reportValidity() работает схожим образом. С его помощью можно провести валидацию формы и вернуть результат. Дополнительно данный метод показывает ошибки пользователю прямо в браузере. В CodePen демо ниже показан результат (тестировалось в Firefox и Chrome):

Поле First name должно быть подсвечено, оно не должно быть пустым. Обычно это работает так:

Атрибут allowfullscreen для фреймов

Новый Булев атрибут для фреймов allowfullscreen позволяет изменять способ отображения контента при помощи метода requestFullscreen(). С его помощью можно разворачивать контент на весь экран.

Проверка орфографии при помощи element.forceSpellCheck()

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

Функции, которые не были реализованы

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

Атрибут inert

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

Тег dialog

С помощью тега dialog можно было создавать попап окна. Была даже продумана удобная форма интеграции. Атрибут method тега dialog запрещал отправку формы на сервер, вместо этого тег возвращал значение создателю диалога.

Тег до сих пор поддерживается в Firefox, пример его работы:

Дополнительные ссылки

Это отнюдь не полный список изменений в HTML 5.1. В спецификации прописано множество мелких функций и изменений, которые были приняты в Living Standard, а также много функций, которые были удалены. Полный список изменений можете посмотреть в разделе Changes спецификации. А пока что будем надеяться, что разработчики браузеров быстро подхватят новые функции!

А что вам в HTML 5.1 понравилось больше всего? Пишите в комментариях!

Редакция: Pavels Jelisejevs

Перевод: Влад Мержевич

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

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

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

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

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

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

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

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

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

,

,

и