HTML5 новые возможности


Содержание

Что нового в HTML 5?

категория
Веб технологии
дата 15.07.2009
автор Faceless
голосов 15

[Disclaimer: Данная статья была переведена в рамках «Конкурса на лучший перевод статьи» на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]

Введение

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-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:

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

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

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

— может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут async

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

Заключение

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

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

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

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

Если Вам понравилась статья, проголосуйте за нее

5 новых возможностей HTML5 и CSS3, которые можно начать использовать в 2020

Здравствуйте, уважаемые читатели XoZbloga! HTML и CSS непрерывно развиваются, предлагая разработчикам и веб-дизайнерам множество новых возможностей. Давайте посмотрим на 5 действительно интересных новых возможностей HTML и CSS для создания веб-сайтов в 2020 году.

1. Элемент

Выпущенный вместе с новой спецификацией HTML 5.2 в декабре 2020 года, элемент дает возможность разработчику создавать собственные диалоги на чистом HTML. А возможность использовать его вместе с элементом

HTML5 — новые возможности

Свое развитие язык HTML начал в 1990 году. Версия HTML4 была внедрена в 1997 году и используется до настоящего времени. И вот свершилось, вышла новая версия – HTML5. Его создатели, разработчики WHATWG ( группа создания Гипертекстовых Прикладных Технологий в Веб), прогрнозируют и надеются на серьезный скачок в его эволюции.
Поскольку версия HTML4 уже не всегда удовлетворяет требованиям сегодняшнего дня, в 2004 году началась работа над новой версией. Работа продолжается, но результаты этих трудов уже начали применять. Люди старались учесть все последние наработки в технологии веб-дизайна.

Возможности веб-дизайна в html5

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

Также необходимо обратить внимание на возможность отображения страниц без использования дополнительных плагинов для браузеров . В частности, просмотр видио возможен исключительно средствами HTML5, без традиционного приложения Adobe Flash Player. Для этого будут использованы теги audio и video . Это хорошо скажется на совместимости и на той же скорости загрузки страниц. Ведь все распространенные браузеры уже поддерживают стандарт HTML5. Функциональность и мультимедиа-возможности нового стандарта не уступают всем наработкам его предшественника, использующего для этого необходимые дополнительные плагины. Разработчики обещают максимально возможную совместимость с устаревшими браузерами, чтобы они могли корректно отображать страницы на новом стандарте.

Оптимизация и структурирование

Можно сказать, что в вопросах оптимизации и структурирования страниц сделан большой шаг вперед, можно даже сказать скачок. Дело в том, что для структурирования добавлены абсолютно новые теги:
Header, тег заголовка, содержит логотип, наименование, меню
Sidebar, тег боковых колонок
Article, тег основного контента страницы
Section, тег для разбивки текста на части
Footer, тег нижней части страницы.

При помощи этих тегов очень удобно разбивать страницу на все традиционные части. И эти возможности необходимо максимально использовать веб-дизайнером и сео-оптимизаторам. Эти теги существенно повышают эффективность индексации страниц поисковыми системами . Они будут больше акцентировать внимание на данных в теге Article, содержащим основную информационную часть страницы.

Работа со ссылками

В новом стандарте даны и новые возможности работы со ссылками. Это реализованио за счет использования следующих атрибутов, используемых для описания ссылки.
author, указывает адрес страницы об авторе
external, внешняя ссылка
help, ведет на страницу помощи
license, ведет на страницу лицензирования
alternate, указывает альтернативный адрес
next/prev, ведут на следующие и предыдущие страницы
nofollow, закрывает ссылки от индексации.
При использовании этих атрибутов улучшается индексация ссылок и уменьшается количество ошибок при индексации.

Этой информацией я делюсь с вами по-горячему. Сам недавно познакомился и теперь осознаю, что нам это может дать. Конечно, возникают вопросы о том, как конкретно и с пользой использовать новый стандарт? Когда и как его будут использовать популярные CMS и, в частности, WordPress? И, самое интересное, как действительно его будут воспринимать поисковые системы ? Особенно интересно поведение Яндекса, который всегда отличается своей точкой зрения на большинство вопросов.

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

Для тех, кто хочет разобраться с этой темой более основательно, ниже я привожу пару ссылок. Здесь информация дана в виде справочника по HTML5, расширяйте кругозор с этим стандартом более подробно, если возникнет в этом необходимость.
Ссылка на первый ресурс http://ru.wikibooks.org/wiki/Html5
Ссылка на второй ресурс http://htmlbook.ru/html5

Да, поделюсь еще одной новостью, я обновил версию WordPress до последней 3.3.1. Все прошло на удивление гладко, в отличие от предыдущего обновления, интерфейс немного поменялся, стал поудобнее, мне кажется. Тема у меня, напомню, своя, сделал при помощи программы Artisteer. Конфликтов никаких не возникало, плагины тоже все на месте, не выеживаются. Копию предварительно сделал по FTP, на свой компьютер.
На этом закругляюсь, всем успехов, спасибо за внимание.


Новые элементы в HTML 5

Структура и семантика

Работа над HTML фактически остановилась в 1999 г. после выхода HTML 4, после чего W3C сосредоточилась на изменении синтаксиса с SGML (Standard Generalized Markup Language) на XML, а также на разработке новых языков разметки, таких как SVG (Scalable Vector Graphics), XForms и MathML. Производители браузеров были поглощены работой над новыми возможностями своих продуктов, например, закладками или чтением новостных лент RSS, а Web-дизайнеры изучали CSS и JavaScript™, позволяющие использовать существующие решения на основе Ajax (Asynchronous JavaScript + XML) для разработки Web-приложений. Сам же язык HTML практически не развивался все эти восемь лет.

И вот недавно этот зверь проснулся. Три крупнейших производителя браузеров — Apple, Opera и Mozilla Foundation — создали рабочую группу под названием WhatWG (Web Hypertext Application Technology Working Group), целью которой стала разработка новой, улучшенной версии HTML. W3C обратил на это внимание чуть позднее и в итоге также включился в работу над HTML следующего поколения, причем силами многих участников WhatWG. В конце концов, эти две группы, скорее всего, объединятся. Несмотря на то, что споры над множеством деталей по-прежнему ведутся, общая картина следующей версии HTML постепенно проясняется.

Если представить себе Web-дизайнера, который проспал все восемь лет, начиная с 1999 г., то он по-прежнему сможет легко работать с HTML 5 (альтернативное название— Web Applications 1.0). Как и ранее, нет никаких пространств имен или схем, элементы закрывать необязательно, а браузеры прощают синтаксические ошибки. Другими словами, p и table – это все те же p и table .

Но в тоже время наш очнувшийся от спячки дизайнер наверняка обнаружит новые, непонятные элементы. К такому старому доброму приятелю, как div , добавились section , header , footer и nav , а к em , code и strong — meter , time и m . Также вдобавок к img и embed появились video и audio . Но если присмотреться, то можно заметить, что эти элементы не сильно отличаются от сушествующих. Многие из них требовались еще в 1999 г., просто тогда их еще не было. К тому же в них легко разобраться по аналогии с уже использующимися элементами, что делает HTML 5 более простым для изучения, чем, например, Ajax или CSS.

Если же вместе с дизайнером все восемь лет спал и его старый ноутбук с процессором 300MГц и Windows 98, то на нем по-прежнему можно будет запустить новые страницы, и, как ни странно, они будут замечательно отображаться браузерами Netscape 4 или Windows® Internet Explorer® 5. Разумеется, браузер не распознает новые элементы и все что с ними связано, но отобразить содержимое страницы он вполне сможет.

Это вовсе не какая-то счастливая случайность – одной из задач HTML 5 было то, что браузеры, не поддерживающие новый стандарт, должны отображать страницы с минимальными потерями. Причина этого проста: мы все в той или иной степени очнулись от спячки. Несмотря на такие возможности браузеров, как закладки, поддержка CSS или XmlHttpRequest, рендеринг HTML по-прежнему тот же, что был восемь лет назад. Web не может двигаться вперед без учета существующего положения дел, и разработчики HTML 5 это прекрасно понимали. Новый стандарт предоставляет новые возможности авторам страниц уже сейчас, обещая, что все они станут доступными для пользователей по мере выпуска новых версий браузеров. В свете этого давайте посмотрим, что же появилось нового в HTML 5.

Структура

Недостаток строгой структурированности документов создает трудности при обработке даже корректно сформированных документов. В частности, для определения границ секций приходится анализировать уровни заголовков. К тому же на единственный тег div возложены функции по описанию огромного множества конструкций, таких как боковые панели (sidebar), верхние и нижние разделы страниц, меню, области для контента и т.д. В HTML 5 эти функции распределены между следующими новыми элементами:

  • section : служит для определения частей и секций, например для разбивки книжных глав на разделы. Этот элемент может использоватья для любого описания любого блока текста, для которого требуется собственный заголовок.
  • header : определяет верхнюю секцию на странице. Учтите, что это не то же самое, что head .
  • footer : определяет нижнюю секцию на странице. Например, место для подписи в сообщениях email.
  • nav : содержит набор ссылок на другие страницы.
  • article : может описывать отдельные записи в блогах, статьи в журналах или руководствах и т.д.

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

Листинг 1. Типичная запись в блоге

Даже несмотря на отступы, такая масса вложенных элементов div выглядит запутанно. Используя новые элементы HTML 5, страницу можно переписать, как показано в листинге 2.

Листинг 2. Та же запись, переписанная на HTML 5

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

Элементы уровня блока

Вдобавок к структурным элементам, HTML 5 предлагает набор семантических элементов уровня блока:

Я постоянно использую первые два в своих статьях и книгах. Несмотря на то, что я не очень часто использую dialog, он достаточно популярен у других авторов.

aside

Этот элемент обычно используется для советов, примечаний, цитат, ремарок – т.е. для всего, что не является частью основного повествования. Например, в статьях developerWorks, часто встречаются боковые панели, выполненные в виде таблиц, как показано в листинге 3.

Листинг 3. Боковая панель в статьях developerWorks на HTML 4

However, Firefox doesn’t yet support this syntax.

На HTML 5 подобный фрагмент описывается значительно элегантнее, как показано в листинге 4.

Листинг 4. Та же панель, но на HTML 5

However, Firefox doesn’t yet support this syntax.

Используя CSS, браузер самостоятельно расположит панель в нужном месте документа.

figure

Элемент figure описывает изображение вместе с подписью. Например, в статьях developerWorks можно найти фрагменты, схожие с листингом 5. Результат показан на рисунке 1.

Листинг 5. Рисунок в статье developerWorks на HTML 4
Рисунок 1. Диалог установки Mozilla XForms

Подобные вещи реализуются значительно более осмысленно на HTML 5, как показано в листинге 6.

Листинг 6. Тот же рисунок, но описанный на HTML 5

Самое большое преимущество подобного подхода — это то, что браузеры, в особенности программы экранной интерпретации, могут легко ассоциировать картинку с подписью.

Кроме картинок figure может использоваться для добавления подписей к таким элементам, как audio , video , iframe , object и embed .

dialog

Элемент dialog служит для оформления диалога между несколькими собеседниками. В HTML 5 элемент dt по умолчанию используется для отображения имени говорящего, а элемент dd служит для форматирования речи. В итоге диалог отображается достаточно неплохо даже в старых браузерах. В листинге 7 показан фрагмент знаменитого диалога из работы Галилео Галилея “Диалог о двух главнейших системах мира”.

Листинг 7. Диалог Галилео на HTML 5

Точный синтакс этого элемента пока еще не утвержден, потому как некоторые разработчики хотели бы добавить возможности для представления стороннего текста внутри диалога (например, сценических указаний), в то время как другие считают, что достаточно перегружать элементы dt и dd . Но, несмотря на эти разногласия, большинство согласно, что подобное семантическое представление диалога – это шаг вперед.

Семантические элементы уровня текста

В HTML 4 существуют несколько элементов уровня текста для представления разного рода фрагментов кода, такие как var , code , kbd , tt и samp . При этом не существует никаких специальных конструкций для выделения таких базовых понятий, как время, числа, саркастические оттенки и т.д. В целях выровнять этот перекос в сторону технических текстов, HTML 5 предлагает несколько новых встроенных элементов.

Элемент m указывает, что фрагмент текста отмечен каким-либо образом (необязательно подчеркнут), скажем, для выделения важных эпизодов в книге. Классическим примером использования могут служить закешированные страницы Google, на которых отмечены ключевые слова, использованные для поиска. Если поиск был выполнен по некоторому слову, например, “Egret”, то закешированная страница может быть размечена следующим образом:

Название этого элемента до сих пор остается предметом обсуждения. Оно может быть измененено на mark вместо m в окончательной версии спецификации.

Элемент time служит для представления определенных моментов времени, таких как 23 апреля, 5:35 P.M., EST, 2007. Например:

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

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

meter

Элемент meter служит для представления числового значения в определенном интервале. Он может использоваться для таких вещей, как зарплаты, процент французов, проголосовавших за Ле Пена, результаты тестирования и т.д. В данной статьей meter используется для разметки данных полученных от одного программиста Google на конференции Software Development 2007.

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

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

Это означает, что студент получил 88.7 баллов из 100 возможных. При этом нижний минимум оценки – 0, самая низкая из полученных оценок – 65, а самая высокая – 96 из ста. Разумеется, различные программы-агенты могут по-разному представлять эту информацию, используя различные интерфейсные элементы или же просто выдавая подсказку, расшифровывающую значение оценки, но большинство, скорее всего, будет использовать стандартное оформление для элементов уровня текста.

progress

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

Атрибут value служит для представления текущего, а атрибут max – для конечного состояния процесса. Например, в данном случае элемент показывает, что скачалось 1,534,602 байт из 4,603,807.

Если опустить атрибут max , то можно использовать этот элемент для отображения процессов с неопределенным текущим состоянием.

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

Элементы мультимедиа

Использование видеофайлов на Web-страницах растет быстрыми темпами, но только за счет проприетарных технологий, таких как Flash на YouTube, Microsoft Windows Media® или QuickTime в случае Apple. Таким образом, способы разметки подобного контента зависят от конкретного браузера. WhatWG предложила новый элемент video , позволяющий размещать видеоролики произвольных форматов. Например, можно добавить фильм “Sora in Prospect Park” в формате QuickTime следующим образом:

В то же время продолжаются споры о том, надо ли отдавать предпочтение какому либо одному кодеку или видеоформату. В частности, очень вероятно, что поддержка Ogg Theora будет, как минимум, рекомендована, а может и вовсе стать обязательной, в отличие от проприетарных форматов, таких как QuickTime, а также форматов, защищенных патентами, например, MPEG 4. Скорее всего, набор поддерживаемых форматов определится в результате естественной конкуренции, аналогично тому, как изображения в форматах GIF, JPEG и PNG стали в итоге использоваться гораздо чаще в элементах img , чем BMP, X-Bitmap или же JPEG 2000.

Кроме video также предложен новый элемент audio . Например, он может использоваться для добавления музыкального фона к Web-странице:


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

Поддержка формата WAV будет обязательной для браузеров, в отличие от других форматов, например, MP3.

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

Листинг 8. Выступление Джона Ф. Кеннеди на инаугурации. HTML 5

Интерактивные элементы

HTML 5 также известен как Web Applications 1.0. В частности, поэтому он предоставляет несколько элементов для улучшения интерактивной составляющей Web-страниц:

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

details

Элемент details служит для представления информации, которую необязательно показывать по умолчанию. Дополнительный атрибут legend может использоваться для краткого отображения содержимого details . Например, элемент может применяться для отображения сносок:

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

В элементе details есть еще необязательный атрибут open , служащий для указания браузеру, что содержимое элемента должно быть показано пользователю при первоначальной загрузке страницы. Если же атрибут отсутствует, то содержимое будет скрыто, до момента явного запроса со стороны пользователя. В любом случае, пользователь всегда может кликнуть на иконке или другом индикаторе, чтобы скрыть или отобразить содержимое элемента details .

datagrid

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

Изначально данные в datagrid берутся из одного или нескольких дочерних элементов, таких как table , select и т.д. Например, в листинге 9 приведен пример datagrid для показа ведомости с оценками. В этом примере, данные берутся из элемента table . В более простом случае, они могут находиться в одноразмерном элементе select . Если используются несколько дочерних элементов, то каждый из них превращается в отдельную строчку в таблице.

Листинг 9. Ведомость с оценками в datagr >

Главным отличием данного элемента от обычных HTML-таблиц является то, что пользователь может выбирать, сворачивать, удалять строки, столбцы и ячейки, сортировать таблицу, т.е. работать с данными непосредственно в браузере на клиентской стороне. Для отслеживания изменений в данных служит HTMLDataGridElement — специальный JavaScript-интерфейс, добавленный в модель DOM (Document Object Model).

Листинг 10. HTMLDataGr >

DOM также может быть использован для автоматической загрузки данных в таблицу. Таким образом, datagrid не обязан содержать дочерние элементы для хранения изначальных данных. Вместо этого они могут устанавливаться с помощью объекта типа DataGridDataProvider , как показано в листинге 11. Подобным образом можно получать информацию из баз данных, через XmlHttpRequest и вообще из любых источников, доступных через JavaScript.

Листинг 11. DataGr >

Элементы menu и command

Элемент menu существовал в HTML как минимум со второй версии, затем был объявлен устаревшим в HTML 4, однако триумфально вернулся в HTML 5. В новом стандарте он содержит дочерние элементы command , каждый из которых моментально запускает определенное действие. В листинге 12 приведен пример использования menu для показа сообщений alert.

Листинг 12. Меню на HTML 5

C помощью атрибута checked=»checked» элементы command можно превратить в группу флажков (check boxes), которые в свою очередь легко преобразуются в группу радиокнопок путем использования атрибута radiogroup (он должен содержать название группы неповторяющихся названий кнопок).

Кроме простого списка команд, элемент menu можно использовать для создания панелей инструментов или контекстных меню, используя значения toolbar и popup атрибута type . Например, в листинге 13 показана панель инструментов, типичная для редакторов блогов, таких как WordPress. В ней используется атрибут icon для ссылок на иконки для кнопок.

Листинг 13. Панель инструментов на HTML 5

Для задания заголовка меню используется атрибут label . Пример использования в меню «Правка» показан в листинге 14.

Листинг 14. Меню «Правка» на HTML 5

Также можно создавать иерархические меню путем вложения одних элементов в другие.

Заключение

HTML 5 – это часть будущего Web. Новые элементы упрощают разметку страниц, делая их более понятными для пользователя. И хотя старые теги div и span по-прежнему могут использоваться, область их применения значительно сужается, а многим страницам они становятся и вовсе не нужны.

Конечно, не все браузеры сразу станут поддерживать новые элементы, но ведь та же ситуация наблюдалась и в случае многих конструкций, добавленных после выхода первого стандарта HTML, например, тегов img , table , object и т.д. Поддержка новых элементов будет постепенно реализовываться, а пока же они будут игнорироваться старыми браузерами в соответствии с соглашением “необходимо пропускать” (must-ignore). Это означает, что браузеры по-прежнему смогут отображать страницы HTML 5, что и происходит в настоящее время. Пользователи современных браузеров, конечно, получат определенное преимущество, но возможность просматривать новые страницы будет у всех.

Восемь лет ожидания новых возможностей – это очень долго, особенно в стремительно развивающемся мире Web. HTML 5 частично возрождает радостное возбуждение ранних дней развития HTML, когда Netscape, Microsoft и другие компании еженедельно предлагали новые элементы. Но в данном случае используется гораздо более осторожный и обдуманный подход к определению элементов, направленный на то, чтобы сделать их доступными для всех. В общем, будущее выглядит очень привлекательным.

Ресурсы для скачивания

Похожие темы

  • Оригинал статьи: New elements in HTML 5: Structure and semantics. (EN)
  • Ознакомьтесь с различными предложениями по развитию HTML, сделанными разработчиками, дизайнерами, авторами, производителями ПО и т.д., приведенными в статье Будущее HTML, часть 1: WHATWG (Эд Дамбилл (Edd Dumbill), developerWorks, декабрь 2005 г.).
  • Прочитайте о следующей версии языка XHTML (Extensible Hypertext Markup Language) и об ответе W3C на необходимость разработки многофункциональных клиентов на Ajax в статье Будущее HTML, часть 2: XHTML 2.0 (Эд Дамбилл (Edd Dumbill), developerWorks, январь 2006 г.).
  • Обратитесь к статье XHTML 1.0: Marking up a new dawn (Молли Хольцшлаг (Molly Holzschlag), developerWorks, январь 2006 г.) за сведениями о создании правильно сформированных и валидных документов XHTML 1.0. (EN)
  • Ознакомьтесь со списком часто задаваемых вопросов о деятельности рабочей группы WhatWG на странице Часто задаваемые вопросы о WhatWG и HTML 5. (EN)
  • Ознакомьтесь с текущим вариантом спецификации HTML 5 на странице Web Applications 1.0. (EN)
  • Прочитайте работу Галилео Диалог о двух главнейших системах мира, переведенную на английский Стиллманом Дрейком (Stillman Drake) с сокращениями и комментариями С. И. Скортино (S. E. Sciortino). (EN)
  • Опробуйте открытый видеоформат нового поколения Ogg Theora. (EN)
  • Сертификация по XML корпорации IBM: узнайте, как стать сертифицированным разработчиком IBM в области XML и связанных с ним технологий. (EN)
  • XML: данный раздел сайта developerWorks содержит множество статей, советов, руководств, стандартов и IBM Redbooks.
  • Скачайте программное обеспечение IBM (время работы без регистрации ограничено): начните ваш следующий проект, используя программное обеспечение, которое можно скачать прямо с сайта IBM developerWorks. (EN)

Комментарии

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

28 особенностей, советов и техник HTML5, которые необходимо знать

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

1. Новый Doctype

До сих пор используешь этот надоедливый, сложнозапоминающийся XHTML doctype?

Если так, то зачем? Начни использовать новый HTML5 doctype. Ты проживешь дольше — как бы сказал Дуглас Квейд

На самом деле знал ли ты, что, по правде говоря, даже эта директива не является обязательной в HTML5? Однако, она используется для современных и браузеров более ранних версий, которые требуют определенного doctype . Браузеры, которые не понимают эту директиву, просто отображают содержащуюся разметку в стандартном режиме. Поэтому начинай использовать новый doctype без боязни и особых стеснений.

2. Элемент figure

Рассмотрим следующую разметку для изображений:

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

3. Переопределенный элемент

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


Элемент small сейчас относится к «маленькому тексту».

4. Больше нет атрибута type для элементов script и link.

Ты возможно до сих пор добавляешь атрибут type в тэги элементов link и script

Это уже не нужно. При объявлении обоих этих тэгов уже предполагается, что они ссылаются на определенные таблицы стилей и скрипты соответственно. Таким образом, мы можем удалить в целом type .

5. Брать в кавычки или нет.

. В этом вопрос. Помни, что HTML5 это не XHTML. Ты не обязан помещать атрибуты в кавычки, если не хочешь этого делать. Ты не обязан добавлять закрывающий тэг. Фактически в этом нет ничего плохого, если это делает твою жизнь намного проще. Для меня это на самом деле проще.

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

6. Сделай свой контент редактируемым

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

Или, как мы узнали из прошлого совета, мы можем написать это так:

7. Поля ввода Email

Если мы используем значение «email» атрибута type для форм ввода, мы можем проинформировать браузер о возможности ввести строки, соответствующие только валидным email адресам. Да, все верно: встроенная валидация форм «на лету» скоро будет доступна! Мы пока не можем на все 100% положиться на результаты данной проверки по понятным причинам. Браузеры более ранних версий, которые «не понимают» значение email атрибута type, отображают поля ввода самими что ни на есть обычным образом.

В то же время, мы не можем зависеть от валидации браузера. Решение на стороне сервера по-прежнему должно быть реализовано.

Также стоит учесть, что все современные браузеры достаточно нестабильны, когда дело доходит до использования элементов или атрибутов, которые не поддерживаются ими полностью. Например, Opera поддерживает проверку форм email, только если определен атрибут name . Однако, она не поддерживает атрибут placeholder , который будет рассмотрен более подробно в следующем совете. В итоге, не завися пока от этих форм валидации, мы все равно можем их использовать.

8. Заполнители

Прежде мы были вынуждены использовать немного Javascript для создания заполнителей для областей текста (textbox). Конечно, ты можешь изначально назначить атрибут value как ты считаешь нужным, но как только пользователь удаляет этот текст и снимет фокус с него, щелчком мыши вне этого поля, его содержимое снова станет заданным по умолчанию. Атрибут placeholder исправляет эту ситуацию.

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

9. Локальное хранилище

Благодаря локальному хранилищу(не введенным с HTML5, а упомянутому ради удобства), мы можем организовывать расширенную «память» браузера введенных данных, даже после его закрытия или обновления страницы.

«Локальное хранилище устанавливает пространство на домене. Даже закрывая и открывая заново браузер и переходя на тот же сайт, все данные из полей сохраняются в локальном хранилище.
-QuirksBlog

Хотя очевидно, что данное хранилище не поддерживается всеми браузерами, мы можем изучить этот метод для работы, наиболее заметно это в Internet Explorer 8, Safari 4 и Firefox 3.5. Учти только то, что для компенсации отсутствия поддержки данной технологии в старых браузерах, ты должен сперва определить существует ли свойство window.localStorage.

Прошли времена подобного кода:

Блоки, изначально, не имели семантичной структуры — даже после появления атрибута id . Теперь в HTML5 у нас появилась возможность использовать элементы и . Разметка, приведенная выше, может быть переписана следующим образом:

Это в полной мере позволяет создавать в своих проектах сложные по структуре разделы header и footer

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

11. Еще о дополнениях работы с формами в HTML5

Изучи новые полезные дополнения HTML5 по работе с формами в небольшом видео-совете.

12. Internet Explorer и HTML5

К сожалению, Internet Explorer по-прежнему привносит множество пререканий при работе с новыми HTML5 элементами.

Все элементы, по умолчанию, имеют значение inline атрибута display

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

К сожалению, Internet Explorer будет все равно игнорировать эти стили, потому что он понятия не имеет, что, например, элемент header сам по себе блочный. К счатью, существует простой фикс этой проблемы:

Достаточно странно, но этот код кажется включает Internet Explorer. Для упрощения использования данного метода в дальнейшем, Рэмми Шарп создал скрипт, на который можно ссылаться, как на HTML5 факел. Этот скрипт также исправляет часть вопросов с печатью.

13. hgroup

Представь, что в заголовке моего сайта имеется его имя, немедленно следующее за подзаголовком. Используя тэги ≪h1> и ≪h2> соответственно для создания разметки в HTML4 до сих пор не было возможности семантично проиллюстрировать взаимоотношения между этими двумя элементами. К тому же, использование тэга h2 привносит больше проблем, с точки зрения иерархии, когда он описывает и другие заголовки на странице. Используя элемент hgroup , мы можем группировать заголовки вместе без влияния на поток вывода документа.

14. Атрибут для обязательных полей

Формы поддерживают новый атрибут required , который указывает, естественно, является ли конкретное поле для ввода обязательным. В зависимости от твоих предпочтений написания кода, ты можешь объявить этот атрибут двумя путями:

Либо более структурированным способом:

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

Если обязательное поле остается пустым и форма отправляется, поле будет подсвечено.

15. Атрибут Autofocus

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

Любопытно, пока я сам предпочитаю использовать более XHTML подход(с использованием кавычек и т.д.) и пишу «autofocus=autofocus» , хоть это и странно. Таким образом, скоро мы будем использовать подход с использованием одного ключевого слова.

16. Поддержка аудио

Mozilla и Webkit еще не определились до конца с форматом аудио. Firefox хочет использовать файл формата .ogg, когда как Webkit-браузеры отлично взаимодействуют с распространенным .mp3 расширением. Это означает следующее, что ты, как минимум, должен создавать две версии для аудио.

Когда Safari загружает страницу, браузер может не распознать .ogg формат, пропустит его и, соответственно, обратиться к mp3 версии. То учти, что IE, как обычно, не поддерживает воспроизведение аудио, а Opera 10 и более ранние версии могут работать только с .wav файлами.

17. Поддержка видео

Также как элемент , мы также можем использовать HTML5 видео в новых браузерах. На самом деле, совсем недавно YouTube анонсировал новый встроенную поддержку HTML5 видео для своих роликов, для браузеров, которые поддерживают эту технологию. К сожалению, опять же, потому что HTML5 спецификация не определяет конкретного кодека для видео, решение о выборе кодека остается за разработчиками браузеров. Пока Safari и Internet Explorer 9 могут поддерживать видео в формате H.264 (который могут вопроизводить Flash-плееры), Firefox и Opera используют свободные форматы Theora и Vorbis. Опять же, для отображения HTML5 видео, ты должен учитывать оба формата.

Chrome может корректно обрабатывать видео, которое кодировано в форматах «ogg» и «mp4».

Есть несколько моментов, на которые стоило бы обратить внимание.

  1. Мы не обязаны объявлять атрибут type ; однако, если мы не будем объявлять этот атрибут, браузер должен будет определить его самостоятельно. Можно сэкономить немного пропускной способности, если самому объявить атрибут type
  2. Не все браузеры понимают HTML5 видео. Под элементом source , мы можем также предложить ссылку для скачивания или встроенную Flash-версию видео. Твое дело.
  3. Атрибуты controls и preload будут более подробно рассмотрены в слелующих двух пунктах.

18. Предзагрузка видео.

Атрибут preload делает именно то, о чем ты мог бы предположить. Хотя изначально ты должен решить хочешь ли ты, чтобы браузеры осуществлял предварительную загрузку видео. Так ли это необходимо? Возможно, если посетитель получает доступ к странице, которая специально создана для отображения видео, несомненно видео предварительно должно быть загружено, тем самым сэкономив пользователю немного времени. Видео будет предварительно загружаться, если имеется следующее объявление preload=»preload» или просто добавлен атрибут preload . Я предпочитаю последний вариант, так как он менее многословный.

19. Отображение контрольной панели

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

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

20. Регулярные выражения

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

Если ты достаточно знаком с регулярными выражениями, ты знаешь, что шаблон [A-Za-z] <4,10>принимает только прописные и строчные буквы. Также эта строка должна быть длиной минимум 4 и максимум 10 знаков.


Обрати внимание, что мы объединили все новые атрибуты!

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

21. Определение поддерживаемых атрибутов

В чем прелесть этих атрибутов, если мы не имеем возможности определить заранее поймет ли их браузер? Хорошо, но есть несколько вариантов определить это заранее. Мы обсудим два. Первый вариант: использовать отличную библиотеку Modernizr. Кроме того, мы можем создать и анализировать эти элементы, чтобы определить какие из браузеров способны их понять. Например, в нашем предыдущем примере, если мы хотим определить поддерживает ли браузер атрибут pattern , мы должны добавить немного Javascript на нашу страницу:

На самом деле, это достаточно популярный метод определения браузерной совместимости. Библиотека jQuery использует данный метод. В коде, приведенном выше, мы создаем новый элемент input , и сразу же определяем распознается ли атрибут pattern для этого элемента. Если да — браузер поддерживает данную функциональность.

Помни, что все это основывается на JavaScript!

22. Маркировка элементов

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

23. Когда именно надо использовать

Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные div ы. Сейчас мы можем пользоваться элементами header , arcticle , section и footer . Если ли четко определенные моменты, когда следует использовать div ? Конечно!

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

Например, если тебе необходимо поместить блок кода специально в элемент-обвертку с целью дальнейшего позиционирования контента, элемент

24. Что необходимо немедленно начать использовать.

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

25. Что не является HTML5

Люди могут быть прощены за то, что удивительные Javascript малообъемные переходы, сгруппированы во всеобъемлющем HTML5. Эй, даже Apple непреднамеренно способствал этой идее. Для интересующихся «не разработчиков» это простой способ соответствовать современным веб-стандартам. Однако, для нас, несмотря на кажущуюся семантичность, важно понимать, что это не HTML5.

  1. SVG: Не HTML5. По-крайней мере, 5 лет.
  2. CSS3: Не HTML5. Это CSS.
  3. Геолокация: Не HTML5.
  4. Хранилище на стороне клиента: Не HTML5. Понятие изначально фигурировало в спецификации, но позже оно было удалено из нее, так как некоторые специалисты были обеспокоены тем, что спецификация становилась слишком сложной. И теперь эта технология выведена в отдельную спецификацию.
  5. Web Sockets: Не HTML5. Также было выведено в отдельную спецификацию.

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

26. Атрибут Data

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

. валидатор подобную конструкцию мог не пропустить. Но сейчас, когда мы уже не относим придуманный нами атрибут к атрибуту «data», мы можем официально использовать этот метод. Если вы хоть раз передавали важную информацию посредством имени такого атрибута, как class (возможно для использования в Javascript), то эта новая возможность является большим подспорьем!

HTML сниппет

Получение значения пользовательского атрибута

Также этот метод может быть использован в твоих CSS, как и в этом глупом и хромом примере по CSS изменению текста.

Ты можешь увидеть демо размещенного выше эффекта на JSBIN.

27. Элемент вывода

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

В качестве простого примера, давай вставим сумму двух чисел в пустой элемент output с помощью Javascript после того, как кнопка submit будет нажата.

Пожалуйста, только учти, что поддержка элемента output до сих пор немного нераспространенная. Во время написания этой статьи, у меня получалось нормально использовать этот элемент только в Opera. Что и было отражено в коде, приведенном выше. Если браузер не распознает этого элемента, то он просто сообщит вам об этом. В противном случае, браузер определит элемент вывода с именем «sum» и установит его значение, равное 15 , соответственно, после того, как форма будет отправлена на сервер.

Элемент output может также содержать атрибут for , который отражает имя элемента, с которым он связан, подобно логике работы атрибута label .

28. Создание ползунков

HTML5 предоставляет новый вид элементов input — range

Особенно примечательно, что он может содержать атрибуты min , max , step и value и др. Хотя только Opera сейчас поддерживает это новшество полностью, будет просто восхитительно, когда мы сможем в полной мере пользоваться этой технологией.

Для быстрой демонстрации, давайте создадим ползунок, который позволит пользователям оценить насколько хорош «Total Recall». Мы не будем создавать приближенное к реальной жизни решение, а просто покажем простоту реализации.

Шаг 1: Разметка

В начале создадим разметку.

Заметь, для того, чтобы установить min и max значения, мы можем всегда определить какой step (шаг) будет использоваться при переходе. Если step равен 1 , будет доступно 10 значений для выбора. Мы также можем воспользоваться преимуществом нового элемента output , с которым мы ознакомились в предыдущем совете.

Шаг 2: CSS

Далее мы добавим немного стилей. Мы также используем :before и :after для информирования наших пользователей о том, какие значения определены в качестве минимального ( min ) и максимального ( max ) значения. Большое спасибо Реми и Брюсу, которые научили меня данному трюку в статье «Вступление в HTML5.»

В коде, приведенном выше, перед и после нашего ползунка мы добавилии значения, которые использовали в качестве min и max соответственно.

Шаг 3: Javascript

  • Определяем поддерживает ли браузер эту технологию. Если нет — мы предупреждаем пользователя, что демо не будет работать.
  • Динамично обновляем элемент output , если пользователь двигает слайдер.
  • Отслеживаем событие, когда пользователь уводит курсор мыши от слайдера, считываем значение и сохраняем его в локальном хранилище.
  • Затем, когда пользователь в следующий раз обновит страницу, ползунок и поле вывода будут автоматически устанавливаться в свое последнее состояние.

Готовы к решению реальных задач? Возможно не до конца, но это действительно весело готовиться к этому!

Загрузи исходники кода, и попробуй все примеры самостоятельно. Но только используй Opera.

Благодарю за прочтение статьи! Мы рассмотрели достаточно много материала, но на самом деле лишь поверхностно коснулись того, что возможно в HTML5. Я надеюсь, это послужит хорошей основой для дальнейшего развития!

Что такое HTML5?

Дата публикации: 2020-04-03

От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…

Что такое HTML5?

Первое — это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.

Второе — это «большой», маркетинговый, трендовый HTML5, зонтик для целого поколения новых технологий, включающий как непосредственно спецификацию HTML5, так и множество модулей CSS3, различные API для JavaScript, да и сам новый стандарт для JavaScript — ECMAScript5.

Рассмотрим некоторые ключевые особенности html5:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.

В нем есть своя интеграция с интерфейсами, которые могут понадобиться в современных приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователю (его координаты). Ранее это можно было сделать только через GPS.

Что дает HTML5?


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

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

Цели HTML5

Кратко цели html5 можно назвать так:

Ликвидация плагинов, таких как Flash, для общих функций, которые необходимы каждому. Построить собственную поддержку для таких вещей, как аудио, видео и т.д.

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

Новые возможности HTML5

Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.

Новые элементы html5

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

для любых видов меню

практически то же, что и div

для рисование на странице использую javascript

для вставки внешнего контента на страницу

Наряду с тем, что появились новые теги часть существующих тегов в HTML5 приобретает новое значение. Так, если раньше выбор между i и em (аналогично b и strong) был чаще в пользу более короткого написания, то сегодня это теги с различной смысловой нагрузкой, даже если по умолчанию они имеют одинаковое представление курсивом или жирным начертанием.

Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об aria- и role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Надо сказать, что обеспечение доступности не самая тривиальная задача, и в HTML5 чуть ли не впервые уделено столь большое внимание этому вопросу.

Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений. Вот некоторые из них:

Audio and video позволяет проигрывать видео в браузере без плагинов.

Geolocation: определяет положение посетителя.

Drag and drop: например, для загрузки файла перетаскиванием его в браузер.

Application cache: обеспечивает поддержку открытия сайтов offline.

Web workers: запускает JavaScript в фоновом режиме

Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.

Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies

Примеры использования html5

Давайте посмотрим на html5 в действии! HTML5 позволяет создавать новую, более простую и чистую разметку для страниц. Код становится более контентоориентированным и его проще читать и понимать. Вот пример простой веб-страницы на html5:

Новые элементы форм HTML5

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

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

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

Подсказки ввода

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

Чтобы использовать элемент datalist, сначала нужно создать обычное текстовое поле. Допустим, мы создали обычный элемент :

Чтобы добавить к этому полю выпадающий список возможных значений, для него нужно создать элемент . Технически этот элемент можно разместить в любом месте разметки, т.к. он не отображается браузером, а просто предоставляет данные для использования в текстовом поле ввода. Но логично поместить этот элемент либо непосредственно перед тем элементом , для которого он предоставляет свои данные, либо сразу же после него. Далее показан пример кода для создания списка :

Как и традиционное поле
Или введите вручную:

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

Но этот подход не работает незаметно. При получении данных формы на сервере необходимо проверить на наличие данных из списка (favoriteFruite) и из списка (dl_fruits). За исключением этого незначительного недостатка, это надежный способ предоставить новое удобство всем пользователям без исключения.

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

Новые графические элементы

и внешне похожи друг на друга, но имеют разные назначения. Элемент

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

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

Элемент указывает значение в диапазоне известных значений. Внешне похож на элемент

, но зеленая полоска имеет другой оттенок и не пульсирует. В зависимости от браузера цвет индикаторной полоски элемента может меняться при отображении значения, определенного как «слишком низкое» или «слишком высокое». Например, в браузере Chrome при отображении последнего значения цвет индикатора меняется с зеленого на желтый. Но самая важная разница между элементами

и заключается в их семантическом значении.

Для помещения в форму элементов и

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

В настоящее время элементы

и поддерживаются браузерам Chrome 9, Opera 11, Firefox 5 и Safari 5.1 (а также их более поздними версиями).

и не составляет никакого труда. Сначала рассмотрим элемент

. Он использует атрибут value, который обозначает ход выполнения задания в виде дробной величины от 0 до 1. Графически это отображается соответствующей шириной полоски индикатора. Например, чтобы показать, что задание выполнено на 25%, атрибуту value присваивается значение 0,25:

Альтернативно, можно использовать атрибут max, чтобы установить максимальное значение и изменить масштаб индикатора. Например, при значении max, равном 200, значение value должно быть между 0 и 200. Если сделать значение value равным 50, то получим те же самые 25% заполнения индикатора, как и в предыдущем примере:

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

, попросту игнорируют его. Эту проблему можно решить, вставив в элемент

резервное содержимое следующим образом:

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


Для индикатора выполнения есть еще одна опция в виде неопределенного состояния индикатора, которое указывает, что задание выполняется, но точное время его завершения неизвестно. (Индикатор в неопределенном состоянии можно рассматривать как вычурное сообщение «Задание в процессе выполнения».) Визуально индикатор в неопределенном состоянии выглядит как серое поле, вдоль которого периодически слева направо пробегает зеленая размытая полоска. Чтобы создать этот индикатор, просто не употребляйте атрибут value:

Элемент имеет подобную модель, но отображает любой вид измерений. Иногда его еще называют шкалой. Часто значение атрибута value этого элемента отображает какую-то действительную величину, например денежную сумму на счету, количество дней, вес в килограммах и т.п. Отображение этой информации управляется установкой значений атрибутов min и max:

Как и для элемента

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

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

Например, значение value, превышающее значение high, но меньше значения max, будет выше какого-то требуемого значения, но все еще в пределах допустимого максимального значения. Подобным образом значение value ниже значения low, но выше значения min, не удовлетворяет какому-либо требованию низкого значения, но будет все еще в пределах допустимого минимального значения:

Браузеры могут использовать или не использовать информацию атрибутов low и high. Например, браузер Chrome отображает слишком высокие значения (как в предыдущем примере) желтым цветом, но значения ниже low показывает как обычные. Наконец, атрибут optimum служит для указания определенного оптимального значения, но использование этого атрибута не влияет на отображение этого значения в современных браузерах.

В общем, элементы

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

Элементы и для создания кнопок команд и меню

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

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

HTML5. НОВОЕ ПОКОЛЕНИЕ — НОВЫЕ ВОЗМОЖНОСТИ

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

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

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

К основным возможностям, которые привнес с собой HTML5 в разработку веб-приложений и интерфейсов, относятся:

  • Новая улучшенная разметка документов
    Благодаря новым элементам разметки создание документов на основе HTML5 становится более быстрым и качественным, что приводит к меньшим затратам на создание макетов для веб-страниц и приложений. Повышается семантика страницы – поисковые системы автоматически распознают где на странице навигация, а где содержание.
  • Рисование на странице
    HTML5 определяет тег canvas как «холст для растровой графики, который может использоваться для отображения диаграмм, компьютерных игр или вывода других изображений на лету». Сам холст представляет собой прямоугольник на странице, в котором с помощью JavaScript рисуется, что вы пожелаете. HTML5 определяет набор функций называемых «Canvas API» для рисования фигур, контуров, создания градиентов и трансформации.
  • Новые элементы форм
    Благодаря HTML5 у разработчиков появились новые возможности, ранее доступные только при использовании сложных JavaScript библиотек. Проверка правильности введенных данных происходит теперь «на лету» прямо в браузере, что упрощает заполнение формы.
  • Поддержка аудио и видео потоков
    Теперь с легкостью можно вставлять медиафайлы прямо в веб-страницу без использования «тяжелых» технологий, таких как Adobe Flash или Microsoft Silverlight. Более того, спецификации HTML5 позволяют осуществлять непосредственный контроль над воспроизведением этих файлов, что может пригодиться, например, при синхронизации видео и субтитров к нему.
  • Кроссплатформенная поддержка
    Спецификации HTML5 подходят для различных юзер-агентов, которыми могут быть не только компьютерные браузеры, но и различные портативные устройства. На HTML5 создаются различные приложения для смартфонов, мобильных телефонов, домашних игровых консолей текущего поколения.
  • Обработка ошибок
    Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM). Чёткое определение требований к юзер-агентам делается с целью достижения совместимости между браузерами разных производителей. Так же, как и требования к синтаксису разметки документов с целью корректного отображения их в различных браузерах.
  • Геолокация
    Некоторым веб-приложениям с разрешения пользователя могут быть переданы данные о его местонахождении. Существует несколько способов определить ваше положение — по IP-адресу, подключению к беспроводной сети, сотовому оператору или через GPS оборудование.

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

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

БЛОГ SEO ОПТИМИЗАТОРА

Язык гипертекстовой разметки постоянно совершенствуется. Недавно была представлена пятая версия этого языка — HTML5. Пятая версия представляет разработчикам интернет — проектов огромные перспективы. Наверное, самое главное новшество заключается в упрощении тега doctype.

Теперь каждый раз не нужно запоминать или копировать длинные строки. В HTML5 теперь используется просто doctype html.

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

В результате html – код на странице значительно упростится. А самое главное, что работать с аудио и видео стало намного удобнее. В вопросах связанных со структурированием и оптимизацией веб – страниц сделан огромный шаг вперед.

Для этих целей добавились совершенно новые теги:

1. Header -Тег для заголовка, в котором находится меню, логотип и наименование

2. Sidebar — Этот тег используется для работы с боковыми колонками.

3. Article — Тег для основного содержания страницы

4. Section — С помощью этого тега, текст можно разбивать на части

5. Footer — Нижняя часть html – страницы. Следует отметить, что кроме удобства работы, использование этих тегов в значительной мере повышают эффективность индексации созданных страниц поисковыми системами.

В HTML5 изменилась также и работа со ссылками.

Изменения произошли за счет добавления новых атрибутов:

1. Author — Здесь указывается информация об авторе

2. External — Тег внешней ссылки

4. License — Переход на страницу лицензирования

5. Alternate — Тег, который показывает альтернативный адрес

6. Next/prev — Переход на следующую и пред идущую страницы

7. Nofollow — Закрытие ссылки от индексирования поисковыми системами. Использование этих атрибутов, тоже способствуют улучшению индексации. Также уменьшается количество ошибок, которые возникают при индексации.

В HTML5 появилось изменения, связанные с работой над блочными элементами:

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

2. Figure. Тоже необходим закрывающийся тег. С его помощью можно группировать элементы.

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

html5 — вопросы с ответами

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

Примечание: в более правильном смысле, аудио и видео заменяют объект и весь встраиваемый код, который люди годами загружают на веб-страницы. Тем не менее эти элементы работают таким образом, чтобы перетаскивать ссылку на страницу, а не отправлять вас в другое место. В этом смысле даже элемент img является в некотором роде не чем иным, как встроенным элементом: он захватывает контент из другого места и внедряет его в страницу. Все это просто ссылки, соединенные вместе. И именно для этого HTML и предназначен.

Теперь вы можете вставлять изображения, аудио и видео прямо в документ. Что еще более важно, поскольку эти объекты теперь имеют элементы первого порядка, вы можете легко манипулировать аудио и видео из JavaScript. Короче говоря, элемент первого порядка всегда будет стимулировать более прямой программный доступ.

HTML5 позволяет интегрировать больше ресурсов в один документ, сохраняя целостность и разделение этих активов на месте.

HTML5-соединения

Все вышесказанное перетекает в следующие установки:

Веб-страницы больше не должны выглядеть (и вести себя) как веб-страницы

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

Веб-страницы больше не должны представлять контент одного человека/организации

Несмотря на то, что веб-программисты и дизайнеры годами извлекали изображения с других сайтов, веб-страницы по-прежнему в значительной степени однородны с точки зрения владения активами. Сегодня веб-страница действительно содержит контент, изображения, страницы, мультимедиа и тому подобное одного человека. Даже такие сайты, как Vimeo и YouTube, чаще используются в качестве расширений частного репозитория, чем в качестве реального бесплатного носителя для доступа к миру.

Веб-страницы могут легко функционировать на мобильных платформах

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

HTML5 вводит парадигму, которая отходит от обоих этих ограничений. Во-первых, HTML5 и CSS3 предоставляют для JavaScript довольно солидный рабочий набор инструментов и эффектов, сравнимый с большинством Flash-сайтов. Обычно мы можем взять Flash-сайт среднего размера и воссоздать его на WordPress, HTML5, JavaScript (через jQuery) и CSS3 за неделю, если не меньше. И преимущества такой перестройки огромны: текст снова выбирается, закладки работают без заморочек, и, конечно, владельцы сайтов могут обновлять свои собственные сайты, вместо того чтобы полагаться на чрезмерно занятого Flash-программиста, к которому они обычно обращаются за помощью.

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

Отличия от HTML4 и новые теги

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

  • Меньшая зависимость от плагинов для раскрытия функциональности;
  • Сценарии должны быть заменены разметкой, когда это возможно;
  • Независимость от устройства (т. е. доступность на всех устройствах и обеспечение одинакового конечного опыта);
  • Процесс общественного развития, чтобы люди могли видеть, что происходит.

В частности, HTML5 добавляет целую кучу новых тегов разметки:

Новые возможности

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

  • Перетаскивание. Позволяет перетаскивать любой элемент на странице, чтобы вы могли определить, что перетаскивать, куда перетаскивать и к чему это приведет;
  • Локальное хранилище. Новейший и самый эффективный в кэшировании, HTML5 Local Storage API является отличной заменой куки, делая его незаменимым, когда дело доходит до кэшируемой информации. Гибридный метод хранения файлов cookie в облаке означает, что информация сохраняется даже при закрытом браузере. Содержимое сохраняется для последующего просмотра, в следствии чего страницы загружаются быстрее;
  • Кэш приложения. API, который позволяет пользователю получить доступ к веб-приложению без подключения, создав его автономную версию. Это снижает нагрузку на сервер, ускоряет его работу и позволяет просматривать информацию без подключения;
  • Web workers. Скрипты Java, которые работают в фоновом режиме, отделены от любых других сценариев, которые позволяют пользователю иметь доступ к сайту и переходить в нужные разделы, не дожидаясь загрузки сценариев;
  • SSE. Отправленные сервером события теперь исключают необходимость запроса сайтом обновлений с сервера. Эти автоматические обновления отправляются посредством одностороннего обмена сообщениями, чтобы сайт мог загружать свежий контент, например, обновления Twitter, цены на акции или новостные ленты;
  • Новые мультимедийные элементы. Новые теги для аудио и видео означают, что ваши медиафайлы воспроизводятся так, как вы хотите;
  • Новые семантические элементы. HTML является языком разметки описания или «семантики», что означает, что он маркирует логические, структурные части сайта в своем коде. В HTML4 отсутствие хорошо структурированных семантических элементов, таких как или , означало, что поисковым системам было очень трудно узнать, что есть на веб-странице. Новые семантические элементы HTML5, такие как , и , делают разделы страницы кристально чистыми;
  • HTML5 Canvas, CSS3 и новые графические элементы. Появившись с HTML5 и наряду с ним, CSS3 добавляет новые стандарты дизайна и новые функции. HTML5 также добавил новые графические элементы, такие как , который позволяет рисовать через JavaScript в браузере, и или «масштабируемая векторная графика» (2D-графика на основе XML);
  • Функции определения местоположения. HTML5 может задействовать информацию о местоположении, позволяя браузерам получать доступ к местоположению пользователя через телефон GPS, IP-адрес и т. д.

Взаимодействие с JavaScript

Идея о том, что HTML-страница представляет собой нечто большее, чем просто организацию гибких элементов, не является чем-то новым, но HTML5, похоже, является очевидной отправной точкой для программистов на JavaScript и веб-разработчиков, которые еще не сделали этот концептуальный скачок. Примечательно, что с появлением CMS, таких как WordPress, для небольших компаний и личных веб-сайтов, почти все теперь знакомы с разделением проблем, когда даже текст HTML-страницы не обязательно кодируется и хранится в статическом HTML-файле. Будучи программистом на JavaScript, вы бы наверняка предпочли иметь больший программный контроль и создать страницу, которая построена на основе пользовательских решений, логики на основе базы данных и программирования для одного человека с помощью HTML или текстового редактора.

И на самом деле, наиболее очевидным примером такого подхода является сайт Twitter. Но если вы присмотритесь поближе, просмотрев его исходный код, вы обнаружите сотни строк JavaScript в начале файла, еще больше JavaScript в конце файла. А небольшие фрагменты HTML втиснуты в середину. Вот примерно 1/3 этого HTML:

Теперь стоит отметить, что хотя в целом это хорошо (использование JavaScript для соединения организации HTML с контентом, не закодированным непосредственно в этот HTML), но развитие новых элементов HTML5 таким образом достигается торможением и деградацией такого рода программирования. По крайней мере, в том виде, в котором оно реализовано в настоящее время.

Это еще одна область, которую HTML5 стремится улучшить. Введение нескольких новых элементов (например, nav, header и footer) в значительной степени игнорировалось многими. Почему бы просто не продолжать использовать

Цукерберг рекомендует:  Советы для подготовки к экзамену

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих