HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.
Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.
Итак, что же нового в HTML 5? - это поле для рисования двухмерной графики, управлямый с помощью JavaScript. Вы можете использовать его для построения графиков и других динамических изображений.
Тег упрощает добавление видео клипов на HTML-страницы. Он может содержать атрибуты src, autoplay и loop. Тег также допускает задание текстового описания для видео (например, для незрячих людей). В идеале это должна быть полная текстовая интерпретация видео.
Тег очень похож на , но предназначен для аудио-файлов. Неожиданно, не правда ли?
Контекстные менюHTML5 также предусматривает метод для простого добавления на веб-страницу контекстных меню. Возможно, такие меню не слишком полезны для обычных сайтов. Зато для приложений, в которых множество функций хотелось бы сгруппировать и отображать контекстно, такая возможность в самый раз.
Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:
- - секция, либо параграф.
- - верхний колонтитул страницы (не путать с )
- - нижний колонтитул страницы.
- - содержит набор ссылок на другие страницы. Например, вы можете расположить там навигацию по вашему сайту.
- - в этот тег может быть включена, например, статья блога.
- - может быть использован для предоставления дополнительной информации к текстовому блоку.
- - может быть использован, например, для создания диаграмм.
Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:
- - помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
- - можете использовать этот тег для вывода времени или даты в текстовом блоке.
- - для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
- Может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.
HTML5 добавляет ряд новых типов для полей ввода данных:
- datetime
- datetime-local
- month
- number
- range
Некоторые из них широко применяются в пользовательских интерфейсах desktop-приложений. И, вероятнее всего, они будут уже хорошо знакомы всем вашим пользователям.
Устаревшие (deprecated) элементыСледующие элементы HTML считаются устаревшими:
- acronym
- applet
- basefont
- center
- frame
- frameset
- isindex
- noframes
- noscript
- strike
Синтаксис для задания кодировки документа в HTML5 теперь выглядит очень просто:
Интерактивные нововведенияНесколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:
- - дополнительная информация о чем либо. Например, данный тег может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет.
- - В отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для таблицы с выбором строк или колонок, inline-редактированием данных, сортировкой и т.п.
- - ранее нерекомендуемый, тег вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы , которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.
В 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:
Заметим, что для наибольшей совместимости с разными браузерами, можно использовать различные уровни заголовков, такие как h2, h3 и т.д.
Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что заменив элементы div на соотвествующие элеметы, исходный код будет проще и «чище».
Элемент «header»
представлет собой заголовок страницы. Этот раздел может содержать не только заголовок как таковой, но также и любые подзаголовки, которые помогут пользователю больше понять содержание страницы.
Элемент «footer» представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.
Элемент «nav» - определяет раздел навигации по сайту:
Элемент «aside» определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.
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 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 позволяют показывать и прятать блоки с дополнительной информацией по клику. Обычно такое делают на JS, но теперь это можно делать и с помощью тегов details и summary. По клику на тег summary открывается контент из тега details.
Пример ниже тестировался в Firefox и Chrome.
В поддерживаемых браузерах демо выглядит так:
Арсенал поля инпут был расширен тремя новыми типами: 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 > |
В HTML5 прописан метод form.checkValidity(), с помощью которого можно проверять поля формы по валидаторам. В качестве результата возвращается Булево значение. Новый метод reportValidity() работает схожим образом. С его помощью можно провести валидацию формы и вернуть результат. Дополнительно данный метод показывает ошибки пользователю прямо в браузере. В CodePen демо ниже показан результат (тестировалось в Firefox и Chrome):
Поле First name должно быть подсвечено, оно не должно быть пустым. Обычно это работает так:
Новый Булев атрибут для фреймов 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 представляет собой последнюю версию основного языка разметки web – страниц. За последние 10 лет HTML не имел серьёзных изменений, что является немного странным в соответствии с тем как стремительно развиваться web-технологии. И вот наконец нам переставлен HTML5, и что же нового мы получили в этой версии, расскажет эта статья.
У HTML5 в сравнении с предыдущим XHTML не такие строгие правила, теперь вы можете:
- Вы можете не использовать закрывающие теги.
- Не использовать кавычки в значениях атрибута.
- Использовать символы верхнего регистра в элементах и атрибутах.
Новые теги.
И так в HTML5 появились новые теги.
Есть также исключённые теги, которые являются неактуальными и не рекомендованы для использования.
Так что если вы знакомы с предыдущими версиями HTML, то у вас не будет никаких сложностей в понимании HTML5. А новые теги и атрибуты помогут вам в создании новых и улучшения существующих сайтов, и благодаря новым возможностям это делать станет намного легче.
Но возникает вопрос, а будет ли HTML5 правильно отображаться в старых версия браузеров.
Конечно будет, естественно кроме новых тегов. Страницы сделанные с использованием HTML5 будут отображаться во всех браузерах, но те кто использует новые версии могут получить и увидеть намного больше.
Структурные теги.
Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги
