Что нового в HTML 5.0

Развитие HTML остановилось в 1999 году. Уже более 10 лет не обновлялось. Но в последнее время «зверь» вернулся к жизни. HTML 5 добавляет множество новых возможностей в спецификации HTML. И что еще лучше, существует уже несколько поддержок браузера для этих возможностей.

HTML 5  Doctype и Charset

Хорошая вещь HTML 5. Помните Вы использовали элемент DOCTYPE в HTML 4? Каким он был? HTML 5 предоставляет Вам DOCTYPE, который очень прост и обтекаемый:

<! DOCTYPE HTML>

Да, это так. Буквально два слова «DOCTYPE» и «HTML». Это может быть просто потому, что HTML 5 уже не часть SGML (Standard Generalized Markup Language). Набор символов для HTML 5, а также рационализации  использует UTF-8 и вы определите это только с одной мета тег:

<meta charset='UTF-8'>

HTML 5  Структура

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

    <section> <!-- Определить разделы страницы -->

    <header> <!-- Определяет заголовке страницы -->

    <footer> <!-- Определяет нижний колонтитул страницы -->

    <nav> <!--Определяет навигация по странице -->

    <article> <!-- Определяет статьи или основного содержания на странице -->

    <aside> <!-- Определяет дополнительный контент, как боковой панели на странице -->

    <figure> <!-- Определяет изображения, комментировать статьи -->

HTML 5 Встроенные элементы

Эти встроенные элементы определяют некоторые основные понятия:

    <mark> <!-- Указать содержание, которое отмечается в некотором роде -->

    <time> <!-- Для обозначения содержимого, даты или времени -->

    <meter> <!-- Для обозначения содержимого, доля известного диапазона – например, использование дискового пространства -->

    <progress> <!-- Указать ход выполнения задачи по завершению -->

HTML 5  Динамические страницы поддержки

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

1. Контекстное меню – HTML 5 будет поддерживать создание и использование контекстных меню в веб-страниц и приложений.
2. Href не требуется, теги - позволяют использовать тег с помощью скриптов и веб-приложений.
3. Асинхронный атрибут – добавляется в тег, чтобы сообщить браузеру, что сценарий должен быть загружен асинхронно так, чтобы она не замедлит загрузки и отображения в остальной части страницы.
4. <details> – Приводится подробная информация об элементе. Это было бы как подсказки, не связанных с веб-приложениями.
5. <datagrid> – Создает таблицу, которая построена из базы данных или других динамических источников.
6. <menu> – Старые теги вернули и дали новую жизнь, позволяющая создавать систему меню на веб-страницах.
7. <command> – определяет действия, которые должны произойти, если динамический элемент активируется.

HTML 5 Типы формы

HTML 5 поддерживает все стандартные типы формы ввода, но это добавляет еще несколько:

1. datetime
2. datetime-local
3. date
4. month
5. week
6. time
7. number
8. range
9. email
10. url

HTML 5 Элементы

Есть несколько захватывающих новых элементы в HTML 5:

<canvas> <!-- Элемент, чтобы дать вам пространства для рисования в JavaScript на веб-страницах.
Это может позволить вам добавить изображения или графики для подсказки или просто создать dyanmic
графики на веб-страницах, построенный на лету -->

<video> <!-- Добавить видео на ваш веб-страниц с помощью этого простого тега -->

<audio> <!-- Добавить звук на веб-страницах с помощью этого простого тега -->

HTML 5 Удаляет некоторые элементы

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

    <acronym>

    <applet>

    <basefont>

    <big>

    <center>

    <dir>

    <font>

    <frame>

    <frameset>

    <isindex>

    <noframes>

    <noscript>

     <s>

    <strike>

    <tt>

    <u>

Готовы ли вы к HTML 5?

HTML 5 добавляет много новых возможностей для веб-страниц и веб-дизайна и это будет интересно, когда больше браузеров поддерживают его. Microsoft заявила, что они будут начинать поддерживать по крайней мере части HTML 5 в IE 8. Если вы хотите, начать работу раньше, Опера лучшая поддержка, а Safari за ним.

Зачем нужен DOCTYPE?

В этой статье многим начинающим разработчикам хочу ответить на распространенный вопрос «Зачем нужен <!DOCTYPE>?» многие считают, что элемент <!DOCTYPE> не важен и не указывают его в первой строке  web – документа.  Да, элемент  <!DOCTYPE> необязательный, но важен.

Он указывает  тип  документа – DTD (document type definition, описание типа документа). И дает понять браузеру как следует воспринимать web – страницу. Это следует из-за того, что HTML существует в нескольких  версиях. Ниже вы сможете познакомится с версиями языка HTML и XHTML. Чтобы браузер «не бился головой» и понял, какой стандарт использует страница. Для этого необходимо прописывать в первой строке web – документа элемент <!DOCTYPE>.

Варианты  <!DOCTYPE> различающие версии языка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Не содержит элементов, помеченных как «устаревшие» или «не одобряемые» -->

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!-- Аналогичен переходному, но содержит также теги для создания наборов фреймов -->

<!DOCTYPE html>
<!-- Для всех документов -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Не включает поддержку «устаревших» дескрипторов и атрибутов. Полностью отделяет содержание от оформления -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Есть поддержка многих «устаревших» определений и атрибутов. Предназначен для упрощения перехода со старых версий HTML -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!-- Применяется при разработке на основе фреймов -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- Не включает поддержку «устаревших» дескрипторов и атрибутов. Доступен импорт дополнительных свойств в разметку -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd">
<!-- Cпециальная облегчённая версия XHTML для устройств, которые не могут использовать полный набор элементов (X)HTML — в основном используется в компактных устройствах -->