Предварительный обзор HTML5

Содержание

Что нового появилось в разметке HTML5 и отличия от HTML 4?

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

Давайте посмотрим, какие новые возможности для нас несет HTML5.

1) Название

Первое, что сразу бросается в глаза – это то, что в названии HTML 4.01 версия «4.01» отделяется от HTML через знак пробела, HTML5 пишется слитно. Это не случайно. HTML5 – это принципиально новый стандарт, который не имеет отношения к предыдущей нумерации версия HTML.

2) У HTML5 появился новый doctype, который намного проще запомнить.

Теперь он пишется так:

Причем, не имеет значения регистр, в котором он написан, можно написать так:

Эта короткая запись заменяет старую и длинную форму:

3) Теперь кодировку можно указывать новым сокращенным способом:

3) Добавление новых элементов, которые добавляют логику и семантику на страницу.

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

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

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

4) Появились другие новые элементы, которые выполняют какие-то спецефические задачи.

5) Появилась новая технология построения оглавления веб-страницы (outline).

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

6) HTML5 добавляет новые правила, которые делают язык более строгим.

HTML4 был слишком вольным, в плане синтаксиса.

HTML и HTML5 – в чем разница?

Дата публикации: 2020-02-14

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

Основы HTML

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

Из названия следует, что HTML нельзя назвать языком программирования. Это язык разметки, используемый для организации данных в интернете. HTML документы состоят из HTML элементов, представленных в виде тегов. Теги записываются в угловых скобках и разделяют контент на категории. Простой пример HTML структуры с сообщением «Hello World» выглядит следующим образом:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

История HTML

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

Последнее крупное обновление с 1990-х было направлено на интернационализацию языка, а также на то, чтобы упростить программистам со всего мира возможности для улучшения HTML. Как часть этих усилий, в качестве официальной кодировки HTML была принята Universal Coded Character Set. Этот шаг улучшил отображение множества символов и акцентов, которые есть в человеческих языках и диалектах.

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

HTML или HTML5: эволюция веб-разработки

Интернет сейчас сильно отличается от того, что был в 1999 году, когда вышло последнее крупное обновление HTML 4.01. Сейчас есть такие технологии, которые мы не могли себе представить на рубеже веков. Смартфоны, планшеты и другие мобильные устройства – это новые вызовы для инженеров и разработчиков ПО. Ускоряющаяся глобализация сделала стандартизацию интернет технологий приоритетной задачей для всех с долей в мировой экономике. Мировое потребление интернета растет год за годом, и используемые технологии по прогнозам будут развиваться все быстрее и быстрее.

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

HTML – плод совместных усилий World Wide Web Consortium или W3C и Web Hypertext Application Technology Working Group или WHATWG. В 2006 организации объединились, чтобы снизить зависимость от плагинов, улучшить обработку ошибок и заменить скрипты на разметку. Как следствие, HTML5 сильно упростил процесс создания веб-приложений.

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

Постепенное внедрение

HTML4 являлся стандартом на протяжении 15 лет, поэтому многие разработчики до сих пор им пользуются. Браузеры еще долго будут поддерживать этот стандарт. Старые браузеры могут «игнорировать» новый HTML5 код при рендеринге контента. По факту все современные браузеры хорошо поддерживают HTML5 спецификацию: Chrome, Firefox, Opera и Safari. HTML5 постоянно развивается, поэтому браузеры в новых версиях добавляют поддержку новых свойств. К нашему счастью, все основные браузеры одновременно добавляют поддержку новых свойств, как только те выходят.

Можете проверить свой браузер на поддержку HTML5 с помощью HTML5test.

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

HTML или HTML5: что нового?

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

были удалены устаревшие элементы, такие как center, font и strike;

улучшение правил парсинга сделало его более гибким и совместимым;

появились новые элементы video, time, nav, section, progress, meter, aside и canvas;

новые атрибуты для инпутов, в том числе email, URL, dates и times ;

новые атрибуты, в том числе charset, async и ping;

новые API с офлайн кэшированием и поддержкой drag-and-drop и т.д;

поддержка векторной графики без сторонних программ типа Silverlight или Flash;

поддержка MathML улучшила отображение математических обозначений;

благодаря JS Web worker API, JS теперь может работать в фоновом режиме;

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

глобальные атрибуты типа tabindex, repeat и id теперь можно применять ко всем элементам.

На изображении ниже показаны основные свойства HTML5, разбитые по категориям.

Какие преимущества для пользователей есть в HTML5 по сравнению с HTML?

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

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

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

объекты на странице могут двигаться вместе с курсором;

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

браузеры могут отображать интерактивную 3D графику с помощью графического процессора компьютера.

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

Какие преимущества для веб-разработчиков есть в HTML5 по сравнению с HTML?

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

1. Одинаковая обработка ошибок

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

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

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

2. Улучшенная поддержка свойств для веб-приложений

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

3. Усовершенствованная семантика элементов

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

4. Максимальная поддержка мобильных устройств

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

Другие заметные улучшения

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

1. Поддержка пользовательских data-атрибутов

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

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

2. Больше никаких кук

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

Объект localStorage принадлежит к глобальному пространству имен window, то есть он доступен из любой точки скрипта. В локальное хранилище можно помещать только строки, однако с помощью методов JSON.stringify() и JSON.parse() можно с легкостью помещать туда все новые данные. Есть и другой объект sessionStorage, позволяющий хранить данные до тех пор, пока пользователь не закрыл окно браузера.

3. Автофокус на полях формы

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

В HTML5 подразумевается, что теги script и link ссылаются на скрипты и стили, то есть необходимость в использовании атрибута type отпала.

Будущее HTML и HTML5

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

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

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Предварительный обзор HTML5.

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

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

Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.

Илон Маск рекомендует:  Что такое код clearviewport

Положительные стороны использования новых тегов

Поисковая оптимизация

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

Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.

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

Доступность

Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:

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

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

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

Коротко об основном назначении структурных тегов:

section

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

Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье «Построение структуры документа в HTML5 используя section «

Для более понятного разъяснения вернемся к примеру разбития объемного текста на главы и параграфы, которые также могут иметь подразделы и подпункты. Обратимся к следующему примеру кода для закрепления материала

Заголовок статьи Вступительное слово. Заголовок подраздела статьи Контент подраздела Заголовок второго подраздела статьи Контент подраздела

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

Некоторые пользователи утверждают, что — это не более, чем замена тега блочной верстки . Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к . Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.

article

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

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

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

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

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

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

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

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

  1. Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
  2. Если рационально было бы добавить атрибуты pubdat или cite.
  3. В случае полной автономности рассматриваемого нами фрагмента кода.

aside

Создан для отделения основного содержимого страницы от вспомогательного.

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

Чаще всего подобная информация на сайте располагается в сайдбаре.

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

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

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

Важный текст 21. 02. 10 [ Текст публикации]

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

Важный текст [ Текст публикации]

Это нерациональное использование header, более правильной с точки зрения семантики будет следующая запись кода:

Важный текст [ Текст публикации]

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

& copy ; 2014 Vaden Pro Все права защищены

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

Важная информация 05. 04. 2015 Данил Гойда об авторе | Все публикации автора [ сама публикация]

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

Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:

Сложная навигация Первый раздел сайта пункт [ . ] Второй раздел сайта Пункт

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

Простой документ HTML5

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

Крошечный документ HTML5

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

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

Разработка сайтов на HTML5. Что нового в HTML5?

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

Поддержка браузерами HTML5

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

На какие браузеры будем обращать внимание? Заглянем на минутку на GlobalStats от StatCounter и узнаем статистику за последнее время. Вот такая статистика была на момент написания этой статьи.

На первой картинке видна мировая статистика, на второй — данные по России.

Хорошо видно, что Chrome по популярности среди пользователей уже несколько лет вне конкуренции. На втором месте — Firefox. IE с каждым годом теряет позиции. В России хорошее место также занимает Opera и Yandex Browser, у которого позиции только растут. Не стоит забывать и про Safari, который неплохо смотрится в общей динамике. Вот пожалуй и все браузеры, которые сегодня стоит учитывать при верстке страниц, в частности на HTML5.

Чтобы узнать, насколько хорошо каждый браузер поддерживает HTML5, есть 2 отличных сервиса caniuse.com и html5test.com. Только следует сразу поправиться, — нужно говорить не о поддержке браузерами HTML5, а о поддержке различных возможностей, которые стали доступны при переходе на HTML5.

С помощью сервиса caniuse.com можно увидеть, что сегодня поддержка основными браузерами уже около 86 — 87%, у Safari чуть хуже. Воспользовавшись поиском на этом сервисе, вы можете быстро получить интересующую вас информацию.

Не нужно думать, что 86% — это не 100%, этого может никогда не произойдет. Все браузеры будут отображать HTML5-страницы, но в каждом браузере пока что не все новые возможности одинаково хорошо реализованы. При переходе к HTML5 вы ничего не теряете, а наоборот, только выигрываете. Правда есть некоторые особенности, которые стоит иметь ввиду при новой верстке страниц.

Сервис html5test.com также очень удобен. Он позволяет протестировать ваш браузер и посмотреть, сколько очков он наберет. Таблица результатов очень наглядная.

Я протестировал свой Chrome (он набрал 521 очко из возможных 555) и заметил, что не поддерживается: input type=datetime в полях формы, элементы: time, menu (в toolbar и popup), видео формата MPEG-4 ASP и прочее.

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

А вот результаты тестов в других браузерах:

— Firefox — 478 очков (не очень поддерживает новые элементы форм и потоки),

— Opera — 520 очков.

Что нового в HTML5? Отличия между HTML и HTML5

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

Что появилось нового:

  • Рисование в реальном времени на прямоугольном холсте с помощью JavaScript
  • Расширенные возможности проигрывания видео — и аудио —
  • Локальное хранилище — стало доступным хранить большие объемы информации прямо в браузере пользователя
  • Многопоточность
  • Геолокация — можно узнать местонахождение пользователя
  • Управление историей браузера
  • Drag-and-drop
  • Микроданные
  • Редактирование

Чтобы узнать, какие из новых возможностей HTML5 и CSS3 поддерживает браузер пользователя, поможет JavaScript-библиотека Modernizr.

Подробнее об этих возможностях смотрите здесь и здесь .

Также HTML5 поддерживает MathML (математическая разметка для формул) и SVG (форма изображений, масштабируемая векторная графика).

Упрощения элементов страницы HTML5. Что нового?

  • Доктайп: , его легко запомнить
  • Корневой элемент:
  • Кодировка симоволов:
  • В некоторых ссылках можно не указывать тип:

Новые теги HTML5

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

Вот основные из новых:

  • — шапка/заголовок, может быть несколько на странице в разных разделах
  • — основной контент
  • — подвал страницы

Обзор HTML 5. Что нового?

В этом видеоуроке будут рассмотрены такие вопросы:

  • Что нового в HTML 5?
  • Какие теги добавили в HTML 5 и для чего они предназначены?
  • Какие теги убрали из HTML 5?
  • 2 новых и очень интересных тега — audio и video.
  • Добавлено: 18 апреля 2011
  • Автор: Олег Зубцов
  • Рубрика: Видеокурс по HTML
  • Метки:
    • HTML
    • HTML 5
  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Отличия HTML 5 от HTML 4

Два самых главных отличия HTML 5 от HTML 4:

  • Появилось много новых тегов (header, footer, section), благодаря чему структура документа стала более простой.
  • Убраны старые теги, которые с появлением CSS3 и HTML5 становятся совсем невостребованными.

Обзор HTML 5. Что нового?

Давайте разберем HTML5 на примере создания новой веб-страницы. Я создал эту страницу и добавил структуру документа.

Уже с первого взгляда заметно, что структура на HTML5 стала значительно меньше в объеме. Начнем с первой строчки. Элемент !DOCTYPE: теперь вместо длинной строки кода нам нужно написать лишь html. Далее идет уже знакомый нам тег html, после него идет тег head — голова документа. Потом идет объявление кодировки. Опять же значительно короче. Затем заголовок нашей страницы. Закрываем голову документа. Тег body. Закрываем тег body. И закрываем html. На этом этапе мы заметили лишь то, что текста стало меньше только в элементах !DOCTYPE и head. Но, в течение этого видеоурока, пока мы будем изучать все новые и новые теги, вы заметите, что они позволяют сделать код меньше и проще.

Давайте приступим к изучению. Первый тег — тег header. Когда я начинал записывать курс по html, я вам немного рассказывал, что тег header в HTML5 означает место для шапки нашего сайта. Если вы начнете изучать CSS вместе с HTML4, то там вместо тега header будут использоваться теги divdiv. Отличия как такового нет, однако, согласитесь, что структура документа становится более понятной.

Следующие два тега в HTML5 – это теги section и article. Тег section — это раздел нашего документа, в котором находятся теги article. В переводе article – это статья. То есть в разделе section у нас будут находиться статьи. Они имеют свой заголовок и свой текст.

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

Давайте теперь сохраним наш документ, но прежде переведем его в кодировку UTF-8 без BOM. Теперь проверяем в браузере (скачать браузеры можно отсюда).

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

Следующий тег — тег навигации nav. Он используется, в основном, для создания меню сайта.

Давайте посмотрим, что у нас получается. Получилось горизонтальное меню.

Перейдем в код и выучим еще три новых тега.

Думаю, тут объяснять ничего не надо. Разве что, различие dt и dd: dd — записывается имя человека, участвующего в диалоге, а dd — его текст, сообщение. Сохраняем. Проверим в браузере. Видим, что структура диалога построена за счет тех тегов, которые мы написали.

Тег figure — это тег, позволяющий связать медиа-контент (изображения, аудио, видео) с подписью или заголовком.

Подпись получилась под изображением. Потом это все можно оформить с помощью CSS.

Следующий тег — aside. Применяется для создания цитат.

Поправка: спецификация HTML5 потерпела изменения и теперь тег aside может также использоваться и для блоков связанных с содержимым сайта (пример: блок ссылок на похожие сайты).
Прошу Вас, обязательно прочитать подробный диалог в комментариях на счет данного тега. Это действительно важно!

Тег time служит для выделения даты или времени.

Пожалуй, на этом с тегами, которые относятся к тексту, мы закончим.

Самый главный «БУМ» HTML5 – это теги audio и video. Они позволяют запустить файлы аудио и видео средствами браузера. Также в HTML5 есть специальные API, которыми можно воспользоваться.

В этом видеоуроке я не буду рассказывать, как создать плеер на HTML5, а просто покажу, как работают теги audio и video. Итак, тег audio: атрибут src указывает путь к файлу; autoplay означает, что файл нужно запустить сразу же, как будет открыта страница в браузере; loop указывает на то, сколько раз проигрывать этот файл. Таким образом, при открытии нашей страницы в браузере, у нас должен одновременно запуститься и видеоурок, и песня группы Depeche mode. Давайте сохраним и обновим браузер.

Браузер Opera у меня старой версии и, видимо, не поддерживает теги audio и video. Поэтому давайте запустим нашу страницу в браузере Google Chrome. Мы слышим и видим, что у нас запустились файлы аудио и видео. Это значит, что теги audio и video работают нормально.

Спасибо за внимание. До встречи в следующем видеокурсе под названием CSS! Приступайте к его изучению, я вас уже жду ��

Обзор элементов в HTML5

Введение

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

Прежде чем начать, необходимо установить Visual Studio.

Мы можем включить опцию HTML в целевом разделе:

Tools -> Options -> Text Editor -> HTML.

Разметка HTML5

Объявление кодировки символов:

meta charset =» utf -8″ />

meta charset =»UTF-8″>

title > Sibeesh Passion wish you a happy new year title >

Welcome to Sibeesh Passion

Структура HTML5

Как уже говорилось, у HTML5 есть семантическая структура. Это уменьшает усилия UI-разработчика. На изображении объясняется эта структура.

До применения HTML5:

Исходя из рисунка, понятно, что в HTML5 доступны такие элементы:

Добавление собственных элементов

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

title > Your own element title >

script > document.createElement( «yourelement» ) script >

yourelement > My element yourelement >

Вы создали новый элемент «yourelement».

Новый синтаксис Атрибута

В HTML5 введен новый синтаксис атрибута:

  • Empty
  • Unquoted
  • Double Quoted
  • Single Quoted

Можно присвоить текстовое значение тега input type таким образом:

input type =»text» value =»Sibeesh» disabled >

input type =»text» value =Sibeesh>

input type =»text» value =»Sibeesh»>

input type =»text» value =’Sibeesh’>

Примените CSS

Так же, как к обычным элементам HTML, так и к новым семантическим элементам можно применять стили.

Предыдущий стиль будет применен ко всем footer , доступным на странице. Не рекомендуется использовать верхний регистр (Footer, FOOTER) в названии элементов.

Обзор элемента Canvas

Если Вы хотите создать определённый графический контент, элемент Canvas, то Вам нужно:

Объявление Canvas

canvas id =»canvasExample» width =»200″ height =»100″

style =» border : 1px solid #ccc ; «>

Bad Luck, It seems your browser won’t support :(

Реализация Canvas

var c = document.getElementById( «canvasExample» ); //Get the element

var ctx = c.getContext( «2d» ); // Get the context for the element

var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line

grd.addColorStop(0, «blue» ); // Apply the colors

grd.addColorStop(1, «white» ); // Apply the colors

ctx.fillStyle = grd; //apply the style

ctx . fillRect (10, 10, 150, 80); // Fill

Здесь мы применили градиент к canvasExample.

Введение в SVG

Масштабируемая векторная графика (Scalable Vector Graphics) – графика для web типа canvas. Одно из различий между canvas и SVG то, что SVG поддерживает обработчик событий, а элементы canvas – нет.

Объявление SVG

canvas id =»canvasExample» width =»200″ height =»100″

style =» border : 1px solid #ccc ; «>

Bad Luck, It seems your browser won’t support :(

Полный вариант HTML-документа:

table style =» border : 1px solid #ccc ; «>

tr style =» border : 1px solid #ccc ; «>

td style =» border : 1px solid #ccc ; «>

h2 style =» text-align : center ; «> Canvas h2 >

canvas id =»canvasExample» width =»200″ height =»100″

style =» border : 1px solid #ccc ; «>

Bad Luck, It seems your browser won’t support :(

td style =» border : 1px solid #ccc ; «>

h2 style =» text-align : center ; «> SVG h2 >

svg width =»200″ height =»200″>

circle cx =»100″ cy =»100″ r =»50″

stroke =»green» stroke-width =»4″ fill =»yellow» />

Bad Luck, It seems your browser won’t support :(

Рецепты HTML5: Погружаемся в кодинг под HTML5 на конкретных примерах

Содержание статьи

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

Что такое HTML5?

На первый взгляд HTML5 — это всего лишь новая версия языка разметки. Однако сейчас под этим термином подразумевают несколько иное. Рассматривать HTML5 без упоминания того же CSS3 просто нелепо, поскольку для разработки действительно современных web-приложений без него никак не обойтись. Нельзя забывать и о JavaScript. С его помощью реализуется обращение к богатому API, описанному в стандарте HTML5. Резюмируя все вышесказанное, напрашивается определение: HTML5 — это совокупность современных технологий/стандартов (JS, HTML5, CSS3 и так далее), применяемых для разработки web-приложений.

Капелька истории

HTML5 появился отнюдь не внезапно. Его разработка началась еще в 2007 году. За процесс работки отвечала специально созданная группа от консорциума W3C. Но многие возможности HTML5 были придуманы еще в рамках стандарта Web Application 1.0, а над ним корпели аж с 2004 года. Так что в реальности HTML5 не такая уж и юная технология, как может показаться на первый взгляд.

Первая черновая версия спецификации HTML5 стала доступна уже 22 января 2008 года. Прошло три года, но окончательная версия спецификации так и не готова и вряд ли поспеет в ближайшие годдва. Этот печальный момент обязывает разработчиков аккуратно применять новые возможности в своих проектах. Спецификация может запросто поменяться, да и не все современные браузеры (FireFox 4, Google Chrome 10, IE9, Opera 11) в полной мере поддерживают новые возможности.

Полезные рецепты

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

Рецепт №1: Включаем Drag&Drop на полную

Одной из приятных няшек (наверное, зря ты употребил столько энергетиков, ведь тут должно быть слово «фишек» — прим. ред.) HTML5 стала возможность применения File API и Drag and Drop API.

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

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

А ведь технология Drag&Drop применяется в системе сплошь и рядом. Мне лично всегда хотелось просто выделить нужные файлы и легким взмахом крысы кинуть на страницу. Это куда удобней, чем рыскать в поисках файла при помощи стандартного диалога.

Как предварительно просмотреть проект в формате HTML5

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

Есть четыре режима работы, в которые можно экспортировать контент ( « Д емонстрация», « Обучение», « П рактика» и « Т ест»). При предварительном просмотре эти четыре режима также доступны.

Предварительный просмотр экспорта в HTML5 ​

Чтобы просмотреть экспорт в HTML5, откройте вкладку «Главная» или « Э кспорт» и нажмите кнопку « Предп росмотр HTML5».

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

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

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

Режим «Демонстрация» ​

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

Режим «Обучение» ​

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

Режим «Практика» ​

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

Режим «Тест» ​

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

HTML5 и обзор новых возможностей веб-программирования

Статус спецификации HTML5

HTML5 – новое поколения языка разметки интернет страниц. С момента выхода рекомендации HTML 4.01 прошло уже более 10 лет (1999 год), а, стало быть, изменений и дополнений стоит ожидать достаточно много. Спецификация HTML5 на данный момент еще находится на стадии разработки. Консорциум всемирной паутины W3C не разрабатывает стандарты, а выпускает лишь рекомендации. Начинается все с рабочих обсуждений, потом инициируется рабочий проект, потом выпускается кандидат на роль рекомендации и только потом спецификация окончательно получает статус рекомендации. Сейчас работы над HTML5 находятся еще на стадии рабочего проекта. Не смотря на это, большинство наиболее популярных интернет браузеров уже частично поддерживают нововведения HTML5. Перед тем, как сделать краткий их обзор повторюсь, что реализуют эту функциональность далеко не все браузеры и пока еще не в полном объеме. Сегодня мы можем рассчитывать на то, что в той или иной степени HTML5 поддерживают Opera, Chrome, Firefox, Safari и Internet Explorer.

Что нового в HTML5

А нового действительно много. Теперь веб-разработчики сайтов получат целый ряд дополнительных возможностей, таких как рисование геометрических фигур на веб-холсте, встроенную возможность перетаскивания элементов, воспроизведение видео и аудио файлов (раньше это можно было сделать только с использованием plug-in компонентов, таких как Adobe Flash Player) и многое другое, о чем будет сказано чуть позже. Для начала хотелось бы сказать пару слов об общих тенденциях развития HTML.

Та часть спецификации HTML5, которая “торчит” в виде новых тегов – это лишь “верхушка айсберга”. Большинство дополнительных возможностей HTML5 доступно только с использованием языка программирования сценариев JavaScript, который является основой веб-программирования на стороне клиента. Если взять ту же функциональность рисования, реализованную с использованием тега , то речи не идет о “разметке рисунка” с использованием тегов геометрических фигур, как можно было бы предположить. Разметка холста заканчивается размещением элемента canvas на странице и все. Само рисование – это функция JavaScript, которая, получив доступ к холсту, будет выводить на нем фигуры примерно так же, как обычные приложения под Windows выводят графику на окна через интерфейсы GDI (Graphics Device Interface). Таким образом, спецификация HTML5 предъявляет достаточно серьезные требования к интернет браузерам в части реализации работы с JavaScript, которые во многом регламентируют программный интерфейс (API) работы с объектной моделью документа (DOM). Это не может не радовать, поскольку многие знают, что разные браузеры могут организовывать работу с объектной моделью через программные интерфейсы, отличающиеся друг от друга. Отчасти, спецификация программного интерфейса — это заслуга организации Web Hypertext Application Technology Working Group (WHATWG), которая прикладывает усилия, направленные на стандартизацию не только языка разметки, но и API, используемого в приложениях, написанных на языках сценариев, таких как JavaScript. Организация WHATWG также участвует в разработке спецификаций HTML совместно с W3C.

Еще можно сделать вывод, что авторы HTML5 старались перенести реализацию некоторых популярных приемов веб-дизайна и востребованных задач веб-программирования в зону ответственности самих интернет браузеров. К примеру, используя HTML5, можно достаточно легко реализовать функциональность перетаскивания элементов, которая стала столь популярной в пользовательских интерфейсах интернет магазинов (выбор товаров в корзину). Раньше, для этого дела нужно было писать сценарий на JavaScript с использованием различного рода вспомогательных библиотек, таких как jQuery. Теперь реализовать перетаскивание намного легче, определив ряд дополнительных атрибутов и добавив несколько обработчиков событий для нужных вам тегов. Организация “drag&drop” с использованием jQuery тоже не отличается особой сложностью, но, в случае с HTML5, мы будем иметь дело с единой рекомендацией для всех программных интернет клиентов, а это уже совсем другой уровень поддержки и гарантии кроссбраузерности. Оказывается, что браузеры, поддерживающие рекомендации HTML5 теперь будут давать возможность сохранять и восстанавливать параметры сессии в контексте самого веб-сеанса. К примеру, при повторной загрузке страницы, введенная на ней ранее информация не будет потеряна, а будет восстановлена из окружения текущей сессии. Это уже “выход на территорию” веб-программирования на стороне сервера, поскольку ранее только средствами HTML и JavaScript этого сделать было нельзя.

Рисование на веб-холсте или использование элемента canvas

Как уже было сказано, основная часть рекомендаций в части использования нового элемента — это спецификация программного интерфейса вывода на него графики. Для начала вы размещаете на странице тег определенной ширины и высоты, затем в коде JavaScript получаете к нему доступ (например, по id) и начинаете на нем рисовать. Рисование сводится к последовательному определению стиля линий strokeStyle , стиля заливки fillStyle и вызову методов рисования, таких как moveTo (перенести перо), lineTo (нарисовать отрезок), arc (нарисовать дугу) и т.д. Далее смотрите пример — простейший инструмент для рисования с помощью мыши. Ниже приведен его исходный код на JavaScript и HTML разметка. Для рисования «пером» нажмите левую кнопку мыши и водите курсором по холсту. В режиме «линии» или «полигоны» просто последовательно щелкайте по холсту, указывая тем самым вершины ломаных линий или площадных объектов.

Пример рисования на элементе canvas

Пример реализации операций рисования на элементе средствами HTML5.

Исходный JavaScript код
Исходный HTML код

Перетаскивание элементов

Это не что иное, как поддержка браузерами классической модели “drag and drop”, которая очень популярна в обычных приложениях с графическим интерфейсом. Для элементов, которые будете “перетаскивать” определяете атрибут draggable , а для элементов, на которые будете “бросать” перетаскиваемые элементы определяете обработчики событий ondragenter , ondragover и ondorp . Вот, собственно, и все. Пример ниже.

Пример drag and drop на HTML5 — «Баскетбольная корзина»

Пример реализации операций drag and drop (перетаскивание элементов) средствами HTML5.

Исходный HTML код

Воспроизведение видео и аудио файлов

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

Новые пользовательские элементы веб-форм

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

Пользовательские элементы управления

Варианты элемента с различными значениями атрибута type :

Если значение адреса не соответствует формату url, то после нажатия [подтвердить] браузер предпримет попытку его исправить. Если он этого сделать не сможет, то выведет сообщение об ошибке. Если значение электронной почты не соответствует формату email, то после нажатия [подтвердить] браузер либо исправит адрес, либо сообщит об ошибке ввода.

Визуализация числовых величин

Представление числовой величины в виде шкалы с возможностью указания интервалов ниже нормы low и выше нормы high , а также оптимальной величины optimum .

Визуализация процесса выполнения. Можно указать только максимальное max и текущее value значение.

Исходный HTML код

Управление историей просмотра страниц

Появится возможность самостоятельно управлять переходом по загруженным ранее страницам с использованием JavaScript и объекта history. Например, вызов window.history.length вернет “длину предыстории”, а вызовы window.history.back() , window.history.forward() или window.history.go(stepCount) осуществят соответствующие переходы. Далее небольшой пример:

Сохранение состояния сеанса работы

Эта замечательная функциональность позволит сохранять и восстанавливать данные сессии. Заполнили заказ, перешли на просмотр товара, вернулись (по ссылке) снова к заполнению заказа, а ранее введенные данные никуда не делись. Раньше, для того, чтобы обеспечить такое свойство страницы, без дополнительных усилий на стороне серверной части веб-приложения было не обойтись. Теперь будет возможность сохранять данные в контексте веб-сеанса (sessionStorage) или локально в оперативной памяти браузера (localStorage). Предполагается, что sessionStorage позволит сохранять данные, пока активен сеанс, в рамках которого они были инициализированы. Доступ к сохраненным данным может быть осуществлен с различных страниц сайта, загруженных браузером. Вариант с localStorage, судя по всему, должен сохранять данные, пока открыт сам браузер. Поскольку доступ к localStorage должен быть всегда, даже если нет связи с сервером, то и получить данные из localStorage сможет любая открытая браузером страница. Состояние сеанса работы в обоих случаях – это набор пар “ключ — значение”, доступ к которому осуществляется вызовами xxxStorage.setItem(key, value) и xxxStorage.getItem(key) .

Пример: В разделе о редактировании содержимого элементов с помощью нового атрибута contenteditable, появившегося в HTML5, есть блок, содержимое которого можно изменять. Ниже добавлены две кнопки, одна из которых сохраняет содержимое редактируемого блока, а вторая — его восстанавливает. Нажмите [Сохранить], отредактируйте содержимое блока и нажмите [Восстановить]. Если ваш браузер поддерживает функциональность HTML5 sessionStorage, то содержимое блока contenteditable будет восстановлено.

Обмен сообщениями между страницами

Если ваша страница содержит элементы
Пример реализации обмена сообщениями между страницами средствами HTML5.

Исходный код страницы — источника сообщений
Исходный код страницы — приемника сообщений

Редактирование содержимого элементов

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

Содержимое данного блока можно редактировать, поскольку для него определен атрибут contenteditable:

В ходе редактирования ячеек таблицы ширина колонок и высота строчек изменяется автоматически.

Колонка 1 Колонка 2 Колонка 3
Ячейка 11 Ячейка 12 Ячейка 13
Ячейка 21 Ячейка 22 Ячейка 23

Для ввода нового элемента списка нажмите [Enter].

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3

После добавления нового элемента в список

    нумерация будет обновлена автоматически.
  1. Элемент нумерованного списка 1
  2. Элемент нумерованного списка 2
  3. Элемент нумерованного списка 3

Векторная графика

Ожидается поддержка SVG — языка разметки векторной графики на базе XML. Графика будет вставляться в разметку, что логично, с использованием тега , например вот так:

Если вы видите геометрические фигуры ниже, то значит ваш браузер уже поддерживает svg.

Математические выражения

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

Если вы видите формулу с символом квадратного корня, то ваш браузер уже понимает MathML.

Другие элементы разметки

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

Тег Краткое описание
Статья, новость, заметка, комментарий или любой другой вид отдельной публикации. Тег article объединяет информацию, относящуюся к одной теме или вопросу. Один элемент article может включать в себя другие элементы article (пример ниже).
Ремарка, отступление. Тег aside также может быть использован для выделения части текста, не относящейся к основному содержанию страницы, например, для размещения рекламных объявлений.
Раскрываемый по требованию блок детализации сведений.
Подпись рисунка. Тег figcaption используется внутри тега figure.
Рисунок с подписью. Данный элемент должен содержать изображение img и подпись figcaption.
Нижний колонтитул. Тег footer имеет смысл также размещать внутри тега article для указания автора статьи или заметки.
Заголовок страницы или введение к статье. При размещении внутри тега article в тег header можно включить заголовок, краткое описание публикации и ссылки на связанные материалы.
Группировка заголовков h1h6 в многоуровневый заголовок.
Пометка. Тег mark имеет смысла использовать, если вам необходимо выделить часть текста другим стилем и сослаться на него из другого места документа.
Блок навигационных ссылок.
Раздел страницы, глава статьи. При размещении внутри статьи (тег article) может интерпретироваться, как отдельная ее глава.

Ниже представлен пример HTML разметки с использованием перечисленных тегов.

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

  1. Не стоит использовать тег header только для того, чтобы разместить в нем один тег заголовка h1h6 точно также, как не нужно запихивать внутрь тегов-заголовков ничего кроме текста самих заголовков. Так делать не стоит:
  2. Не стоит использовать тег hgroup для создания групп заголовков из одного элемента. Каждый отдельно взятый элемент от h1 до h6 и так сам себе заголовок. Вот пример, как делать не нужно:
  3. Не стоит добавлять элементы section внутрь других элементов, если они будут включать в себя все основное содержание этих элементов. В приведенном выше примере внутри каждого комментария нет отдельных блоков section для выделения самого текста комментария. Вот пример лишнего элемента section:
  4. Не нужно понимать смысл элемента article буквально. Это не только статья, но и любая форма представления законченной мысли. Именно по этой причине комментарии к статье в приведенном ранее примере также выделены в отдельные блоки article.
  5. Используйте структурные теги HTML5, только если уверены, что они помогут поисковым машинам больше узнать о семантике вашей разметки. Если тег не несет отдельного смысла, а добавлен только лишь для «красоты», то результат его добавления — это «лишний вес» вашей страницы, который, как известно, «вреден для здоровья» сайта.

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

Опубликовал +автор Июнь 21 2012 15:22:25 31355 Прочтений
Компьютерные курсы и курсы программирования

Курс для начинающих программистов на C# и VB.NET.

Построение SQL запросов и работа с базой данных.

Программирование на C#. Краткое руководство.

Применение регулярных выражений.

Примеры программной Plug-in архитектуры.

Язык разметки XML и его расширения с примерами.

Языки HTML, XHTML и CSS с примерами разметки.

Основы веб-дизайна: решения типовых задач верстки.

Руководство по программированию на PHP для начинающих.

Шаблоны проектирования
Каталог шаблонов проектирования программных компонентов.

Рефакторинг кода
Каталог приемов рефакторинга программного кода.

Предварительный обзор HTML5

RomanLoveText — Обзор GameDev статей со всего интернета.
Лучшие посты попадают сюда)

Страницы

Отличия html5 от html 4

В статье кратко рассмотрены различия html5 и html 4.
Синтаксис, кодировка символов, новые элементы, новые атрибуты, API. Также будуn рассмотрены отменённые атрибуты и ряд значительных изменений.

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

HTML 5 будет иметь два синтаксиса — «custom» HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая «обработку ошибок»). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:

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

Для синтаксиса HTML разработчики могут использовать три способа установки кодировки: — на транспортном уровне. При использовании Content-Type HTTP заголовка, например. — используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования. — используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head. Обратите внимание, что для определения кодировки используется

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

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

  • section представляет часть документа или раздел
  • article представляет независимую часть содержания для включения в документ статей
  • as >
  • 01 dialog >
  • datatemplate, rule, и nest обеспечивают механизм шаблонов (templating mechanism) для HTML.
  • event-source используется для перехвата событий, посланных сервером.
  • output представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
  • progress представляет ход выполнения задачи, например, загрузки.
  • Атрибут type элемента input теперь имеет следующие новые значения:
    • datetime
    • datetime-local
    • date
    • month
    • week
    • time
    • number
    • range
    • email
    • url

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

  • Новые атрибуты

    HTML 5 вводит несколько новых атрибутов для элементов, которые уже входили в HTML 4:

    • элементы a и area получили новый признак ping, который определяет список URI адресов, которые должны пропинговаться при переходе по гиперссылке. Принцип функционирования пока до конца не ясен.
    • элемент area теперь имеет атрибуты hreflang и rel
    • base получил атрибут target
    • атрибут value для li и атрибут start для элемента ol больше не deprecated
    • meta получил атрибут charset
    • новый атрибут autofocus может быть определен у input (кроме тех случаев, когда type атрибут — hidden), select, textarea и button. Это обеспечивает способ передачи управления форме во время загрузки страницы
    • атрибут form для input, output, select, textarea, button и fieldset позволяет связать элемент с более чем одной формой
    • input, button и form получили атрибут replace, который определяет, что будет с элементом после отправки формы
    • form, select и datalist имеют атрибут data, который учитывает автоматическое предзаполнение, в случае заполнения данными с сервера
    • новый атрибут required применяется к input (кроме тех случаев, когда type атрибут — hidden, image или кнопка) и textarea. Он указывает обязательные для заполнения поля
    • input и textarea имеют новый атрибут inputmode, который дает подсказку пользовательскому интерфейсу относительно того, какие данные ожидаются для ввода
    • теперь можно disable (отключить) сразу целый fieldset, что не было возможно прежде
    • элемент input имеет несколько новых атрибутов для определения ограничений: autocomplete, min, max, pattern и step, а также list, который может использоваться вместе с элементами select и datalist
    • input и button также получили новый атрибут template, который может использоваться для шаблонов повторения
    • элемент menu имеет три новых атрибута: type, label и autosubmit
    • script имеет новый атрибут async, который влияет на загрузку и выполнение сценария
    • элемент html имеет новый атрибут manifest, который указывает на кэш приложений, используемый вместе с API для автономных Web приложений

    Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными атрибутами: class, dir, id, lang, tabindex и title.

    Появились также несколько новых глобальных атрибутов:

    • атрибут contenteditable указывает, что элемент доступен для редактирования
    • contextmenu может использоваться для указания на контекстное меню, созданное автором
    • draggable может использоваться вместе с новым drag&drop API
    • irrelevant указывает, что элемент еще или больше не актуален

    Атрибуты для модели повторения (repetition model):

    • repeat
    • repeat-start
    • repeat-min
    • repeat-max

    Отмененные элементы

    Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:

    • basefont
    • big
    • center
    • font
    • s
    • strike
    • tt
    • u

    Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности:

    • frame
    • frameset
    • noframes

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

    • acronym
    • applet замещен object
    • isindex
    • dir замещен ul

    Наконец noscript остался только в синтаксисе HTML, поскольку его использование предполагает разбор с помощью HTML парсера.

    Отмененные атрибуты

    • accesskey для a, area, button, input, label, legend и textarea
    • rev и charset для link и a
    • shape и coords для a
    • longdesc для img и iframe
    • target для link
    • nohref для area
    • profile для head
    • version для map, img, object, form, iframe, a
    • scheme для meta
    • archive, classid, codebase, codetype, declare и standby для object
    • valuetype и type для param
    • charset и language для script
    • summary для table
    • headers, axis и abbr для td и th
    • scope для td

    Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:

    • align для caption, iframe, img, input, object, legend, table, hr, div, h1-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr и body
    • alink, link, text и vlink для body
    • background для body
    • bgcolor для table, tr, td, th и body
    • border для table, img и object
    • cellpadding и cellspacing для table
    • char и charoff для col, colgroup, tbody, td, tfoot, th, thead и tr
    • clear для br
    • compact для menu, ol и ul
    • frame на table
    • frameborder приписывают на iframe
    • height для iframe, td и th
    • hspace и vspace для img и object
    • marginheight, marginwidth и scrolling для iframe
    • noshade для hr
    • nowrap для td и th
    • rules для table
    • size для hr, input и select
    • style для всех элементов
    • type для li, ol и ul
    • valign для col, colgroup, tbody, td, tfoot, th, thead и tr
    • width для hr, table, td, th, col, colgroup, iframe и pre
    Илон Маск рекомендует:  rem в CSS
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL
    Справочные материалы