Html5 нововведения. Что нового в HTML5? Почему вам нужен ЦАП
С выходом HTML5
, в HTML добавилось много новых функций. И что еще лучше, некоторые браузеры уже поддерживают часть этих функций, когда другие еще двигаются к этому. Вы можете следить за добавлением этих функций в браузеры на этой странице .
1. Новый Doctype и Charset.
Одно из достоинств HTML5 – это его простота.
Да, вот и все. Буквально два слова. Это простота объясняется, возможно, тем что HTML5 существует сам по себе, а не остается частью SGML.
Charset так же очень просто, используется utf-8, и задается так же, буквально одним тегом:
2. Новая структура
HTML5 понимает, что веб страницы имеет структуру, так же как, например, книга. Обычно это навигация, сам контент, боковое меню (сайдбар) и заглавную часть. И в HTML5 предусмотрены теги для всех этих элементов.
– определяет разделы страницы
– определяет заголовок страницы
– определяет статью или основной контент на странице
– определяет изображение, аннотацию статьи
3. Новые встроенные элементы.
Эти новые элементы определяют некоторые базовые концепции и обозначают элементы страницы:
– для обозначения содержимого
– для обозначения некоторых измерений, например дискового пространства
4. Новая поддержка динамических страниц
HTML 5 был разработан для упрощения задач веб-разработчиков, по-этому появилось много новых возможностей для поддержки динамических страниц.
Контекстное меню – HTML 5 будет поддерживать создание и использование контекстного меню на веб-страницах и приложениях
асинхронный атрибут – этот тег указует браузеру, что сценарий должен быть загружен асинхронно, так что он не замедлит нагрузки и отображения остальной части страницы.
– содержит подробную информацию об элементе.
– создает таблицу, которая создается из базы данных или другого источника динамической страницы
– определяет действия, которые должны произойти, когда динамический элемент активируется
5. Новые типы форм
HTML5 поддерживает все старые типы форм, но так же добавлены и новые:
datetime
datetime-local
month
number
range
email
6. Новые элементы
Появились некоторые новые элементы в HTML5:
Это может позволить вам добавить изображения или графики в подсказки или просто создать динамическую графику на странице “на ходу”.
7.Удаленные элементы
Существуют так же элементы HTML4, которые больше не могут использоваться в HTML5. Большинство из них давно устарели, по-этому такие действия не удивительны.
От автора:
релиз стандарта 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. Пример:
Когда ширина окна браузера больше 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
Что же такого нового в HTML5, чего не было в HTML4?
А новое в принципе все. Спецификация HTML5 несет в себе множество изменений разного уровня и важности. Фундаментальные изменения можно разделить на несколько блоков:
Семантика языка.
В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц.
Рассмотрим наиболее известные из них:
nav
- служит для создания панели навигации;
aside
- является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся навигационными (рекламные баннеры, фотография автора, кнопки социальных сетей и т.д.);
section
- также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей, либо разделять на отдельные секции непосредственно статью на странице;
article
- служит для разбивки страницы на отдельные статьи. Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня H1 на одной странице несколько раз, что ранее было недопустимо;
hgroup
- тэг призван группировать заголовки страницы в одну логическую единицу;
video
- служит для простой вставки видео на страницы сайта;
audio
- также предназначен для простой вставки медиа-контента на страницы сайта;
canvas
- создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.
Про остальные тэги можно узнать из htmlbook.ru .
Мультимедиа
. HTML5 теперь из коробки поддерживает мультимедийный контент (аудио и видео проигрыватель) в HMTL-разметке - с соответствующим API для управления воспроизведением и кодеками.
Графика
. Работать с графикой стало заметно проще, благодаря тэгу canvas и специальному JavaScript API для работы с ним. Также в HTML5 официально включен тэг svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
Веб-формы.
Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами, без использования дополнительных библиотек для валидации вводимых данных, подсказок в формах.
JavaScript API.
API для работы с графикой и мульмедиа, новые расширенные возможности по перемещению объектов и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.
Многое другое.
Усовершенствованные сетевые коммуникации. Существенно улучшенное хранение данных. Средства Web Worker для исполнения фоновых процессов. Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером. Повышенная скорость сохранения и загрузки страниц. Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.
Итак, очевидно, что формат HTML5 демонстрирует принципиально новый подход к созданию эффектной и запоминающейся графики, интерактивных элементов и прочих составляющих качественного веб-дизайна и интерфейса. Это дает несомненное преимущество – возможность отказа от flash-элементов, которые создают определенные трудности в загрузке страниц. Вместе с этим, определенное время на загрузку таких страниц все же требуется. Кроме того, для корректной работы с HTML5 необходим компьютер, с соответствующими системными мощностями, да и разработчики браузеров ленятся добавлять полную поддержку всех возможностей HTML5.
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 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.
Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.
Итак, что же нового в HTML 5?
Тег
Тег
Контекстные меню
HTML5 также предусматривает метод для простого добавления на веб-страницу контекстных меню. Возможно, такие меню не слишком полезны для обычных сайтов. Зато для приложений, в которых множество функций хотелось бы сгруппировать и отображать контекстно, такая возможность в самый раз.
Новые структурные элементы
Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:
- секция, либо параграф.
- верхний колонтитул страницы (не путать с )
- в этот тег может быть включена, например, статья блога.
- может быть использован, например, для создания диаграмм.
Новые inline-элементы
Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:
- помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
- для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
Новые типы полей ввода
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-редактированием данных, сортировкой и т.п.
Новое определение типа документа (DTD)
В HTML5 стало гораздо проще объявлять DTD: Объявление DTD стало более симпатичным и, я полагаю, проще запоминающимся. Скорее всего, это является результатом того, что HTML больше не связан с SGML.
Необязательный href в ссылках
Атрибут href теперь необязательный, поскольку ссылки могут использоваться в сочетании со сценариями. Вероятно, это будет полезно в web-приложениях.
Атрибут async
Атрибут дает браузеру подсказку, что блок сценария может выполняться асинхронно, вместо того, чтобы ждать, пока страница не загрузилась полностью.
Заключение
Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег
Так что, ждем с нетерпением.
Кому интересно, спецификацию HTML 5 можно найти по следующей ссылке -
Загрузка...