Новации HTML 5

В статье мы рассмотрим новшества и изменения HTML 5, и посмотрим, что из этого уже работает в новейших браузерах.

Новый доктайп и способ указания кодировки в HTML 5

В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично:

<span><!doctype html></span>

Это связано с тем, что HTML 5 больше не является частью SGML, теперь это самостоятельный язык разметки.

Объявление кодировки в HTML 5 так же притерпело изменения. Выглядит оно теперь вот так:

<span><<span>meta</span><span> charset=<span>"UTF-8"</span></span>></span>

Новая структура в HTML 5

HTML 5 подразумевает, что страница всегда имеет структуру, сравнимую со структурой книг или XML документов. Обычно, у веб-страницы есть навигация, основной контент, второстепенный контент (чаще в сайдбаре), заголовки, футеры и так далее. Для каждого такого элемента в HTML 5 есть свои теги:

  • <section> — для каких-то частей страницы;
  • <header> — заголовок страницы;
  • <footer> — футер страницы;
  • <nav> — навигация;
  • <article> — статья или основной контент;
  • <aside> — дополнительный контент;
  • <figure> — определяет картинку, сопровождающую статью (типа как у нас к каждой статье).

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

Эти элементы определяют основные семантические объекты страницы:

  • <mark> — указывает на элемент, который взаимодействует с какой-то функцией;
  • <time> — выделяет дату или время;
  • <meter> — какие-либо метрические данные или характеристики;
  • <progress> — показывает процесс выполнения задачи (функции, например).

Новая поддержка динамичных страниц в HTML 5

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

  • контекстное меню — создание и использование контекстных меню внутри страниц;
  • аттрибут href больше не является обязательным, что позволяет использовать тег <a> для скриптов без необходимости выставлять якоря;
  • аттрибут async тега <script> — указывает браузеру, что загружать этот скрипт следует асинхронно; браузер не тормозит загрузку страницы, скрипт грузиться уже после загрузки страницы;
  • <details> — более подробная информация от каком-то элементе;
  • <datagrid> — создает таблицу, которая строится исходя из данных из базы или другого динамичного источника (какая-нибудь обновляемая статистика);
  • <menu> для создание системы меню;
  • <command> определяет действия, которые должны случиться при активации какого-то элемента.

Новые типы полей форм в HTML 5

HTML 5 по-прежнему поддерживает все основные типы полей форм, добавив при этом и некоторые новые:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

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

Вот лишь некоторые новые элементы, добавленные в HTML 5:

  • <canvas> — элемент, который позволяет вам рисовать внутри страницы, используя JavaScript; как вы знаете, многие современные js библиотеки и скрипты используют этот тег для графиков;
  • <video> позволит вам вставить видеоролик в страницу с помощью одного тега.
  • <audio> — для аудио.


При этом из HTML 5 исчезли некоторые теги

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

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u


Что уже работает в браузерах

Как я уже сказал, многие браузеры решили не дожидаться официального выхода HTML 5 (как и CSS 3) и уже начали внедрять некоторые из описанных фич в последние версии своих продуктов.


Автор данной статьи - Администратор проекта для начинающих программистов (UProgram. ru), который носит ник webDoktor.

Автор статьи: неизвестный | Дата публикации: 15:24 14.12.2016 3248440.Ru




Отзывы и комментарии
Ваше имя (псевдоним):
Проверка на спам:

Введите символы с картинки:



Сайдинг: за что его так полюбили хозяева загородной недвижимости?

Сайдинг: за что его так полюбили хозяева загородной ...

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

Что же будет со знаниями человечества после глобальн...

Каждый из нас наивен в восприятии мира вокруг себя даже, когда локальные страшилки возникают в виде простых вопросов безопасности: можешь поскользнуться - надевай хорошую обувь, не клади бумажник в за...
Драма «Кроличья нора». Как пережить смерть ребенка?

Драма «Кроличья нора». Как пережить смерть ребенка?

Не ждите, что авторы фильма, в числе которых режиссер Джон Кэмерон Митчелл и сценарист Дэвид Линдси-Эбейр (написавший одноименную пьесу), предоставят зрителю однозначные ответы на поставленный вопрос....
Что такое контактная импровизация?

Что такое контактная импровизация?

Как и большинство из модных сейчас увлечений, контактная импровизация пришла к нам с Запада. Её отцом-основателем принято считать американского хореографа Стива Пэкстона, который в начале 70-х в США в...
Как бороться со спонтанными покупками?

Как бороться со спонтанными покупками?

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

Камин и обогрев дома.

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

Почему я не учу ребенка давать сдачи?

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

Разработка сайтов и конкурентные преимущества

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

Искусство приготовления пищи

Искусство приготовления пищи — кулинария, как и все виды искусств, без сомнения, требует таланта и в...

Вкусные рецепты: Eierlikr Kuchen -Пирог с яичным л

Eierlikr Kuchen -Пирог с яичным ликёромОтделить белки от желтков, белки взбить до крепкой с ванильны...

Что такое тайм-ауты?

Сегодня мы с вами поговорим о таком методе позитивного воспитания, как тайм-аут.Бог сделал детей мал...

Восстанавливающие психотехники: как навести гармон

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

Заработок в интернете

Хотите научиться зарабатывать настоящие деньги в Интернете? Хотите приобрести что-нибудь полезное? Т...

Создание барьера для грязи

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

Как применять приборы домашней физиотерапии

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

Преимущества серебряных украшений

В последние годы на рынке ювелирных украшений происходят перемены – растет спрос на оригинальные укр...



Развивая портал:

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

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