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

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

Структурные теги.

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

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

Теперь нам доступны следующие структурные теги:

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

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

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

Цель его в том, чтобы определить список ссылок на другие HTML страницы.

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

Вот к примеру HTML код с новыми тэгами.

Заголовок

Заголовок 1

 
 Некоторый текст...     

Заголовок 2

 
 Некоторый текст..       Ссылка 1    Ссылка 2         
Copyright 2011 My Company       

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

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

Новые блочные теги HTML5.

В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:

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

Основной текст… Цитата …

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

  Пользователь 1   Сообщение пользователя 1  Пользователь 2   Сообщение пользователя 2    

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

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

  Заголовок изображения      

Мы использовали тэг чтобы указать название изображения, тег , чтобы вставить определенное изображение и тэг чтобы связать их вместе.
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.
Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block; чтобы они должным образом отображались. Что касается старых версий Internet Explorer то необходимо так же добавить следующее:

  document.createElement('header');  document.createElement('footer');  document.createElement('section');  document.createElement('aside');  document.createElement('article');  document.createElement('nav');   

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

Встроенные теги.

У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:

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

Некоторая очень важная часть текста…

Мы вставили определенную важную часть в тэг .

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

Сегодня в18:30 24 ноября 2010 …

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

ежемесячный доход$15,000…

У тега есть 6 полезных атрибутов:

• value — задает фактическое значение чего-то;
• min — задает минимальное значение чего-то;
• low — определяет предел, при достижении которого значение считается низким;
• high — определяет предел при котором значение считается низким;
• max — определяет максимальное значение чего-то;
• optimum — определяет оптимальное значение чего-то.

Например:

Концентрация сахара: 8.2.

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

Завершение: 20%

Тег имеет два атрибута value — текущее значение прогресса и max — максимально значение прогресса.

Мультимедийные теги.

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

Вот пример применения тега :

Сейчас играет  …

У этого тега имеется три атрибута:

• src — путь к звуквому файлу;
• autoplay — определяет начать ли проигрываться файлу сразу после загрузки страницы в браузере;
• loop — определяет сколько раз аудио должно проигрываться.

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

Клип…

Атрибут src определяет путь к видео файлу.
Мультимедийные теги позволяют вывести аудио и видео файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.

Интерактивные теги.

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

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

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

Некоторый контент Информация справки …

Тег используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.

  var example = document.getElementById('sample');  var context = example.getContext('2d');  ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);     Ваш браузер не поддерживает HTML5.   

Атрибут ID используется для идентификации тега как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст заключенный между тегами будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.

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