Что такое HTML5

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

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

Создание документа HTML5

Для того, чтобы браузер «узнал» о ваших намерениях использовать новую версию HTML, нужно в начале нового документа просто написать следующее: <!DOCTYPE HTML>. Также есть несколько важных отличий между новой и старой версией, которые призваны облегчить вам жизнь при написании сайтов:

  • Теперь можно не пользоваться закрывающими тегами;
  • При указании значения атрибута можно не ставить кавычки;
  • Можно пользоваться символами верхнего регистра в атрибутах и элементах.

Введение в HTML5

Что же такого нового и интересного появилось в HTML5? В первую очередь, это несколько новых полезных тегов:

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

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

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

Новые возможности: блоки в HTML5

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

Рассмотрим их по порядку. Тег <aside> — можно использовать для выделения части текста. Эта функция пригодится при выделении сноски либо цитаты в блоке основного текста. Например:

Либо без закрывающих тегов, как это теперь можно делать в HTML5:

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

Тег <figure> — используется для указания названия изображения. Например:

В данном примере мы использовали три тега: <img>, <legend>, <figure>. Тег <img> используется для указания самого изображения, <legend> – для указания его названия, а наш новый тег <figure> — для того, чтобы связать все вместе. Таким образом, получился замечательный блок, которым будет удобно пользоваться впоследствии, например, если понадобится выделить его каким-либо образом.

Еще один тег — <dialog>, используется, как можно догадаться по его названию, для создания диалога. Например, между несколькими пользователями. Пример использования тега:

<dialog> имеет еще два вложенных тега: <dt> – используется для указания имени пользователя, участвующего в диалоге, <dd> – используется для указания самого текста сообщения.

Использование тега <dialog> очевидно, при создании сайтов используется часто, и поэтому его введение в HTML5 оправданно.

Новые структурные теги

Далее мы рассмотрим, как можно создать структуру документа в HTML5. В HTML4 и более старых версиях мы использовали всем знакомые теги <table> и <div>. Можно сказать, этот способ теперь устарел и не рекомендуется к использованию. Ведь когда мы используем указанные выше теги, мы создаём структуру страницы, независимо от того, с чем мы работаем: меню, шапкой или футером. Именно поэтому теперь лучше использовать новые теги HTML5. Они помогут разбить документ на несколько частей и работать непосредственно с каждой из них. Это облегчит работу при создании более-менее больших документов.

Всего новых тегов 5. Вот полный их список:

  1. <header> — задаёт верхнюю часть документа. То есть, то, что мы в старых версиях делали при помощи тегов <table> или <div> и атрибутов, теперь вынесено в отдельный тег. В результате возникает гораздо меньше путаницы и используется меньше ненужных тегов и атрибутов.
  2. <footer> — по аналогии с предыдущим тегом, используется для задания футера, или нижней части документа.
  3. <section> — полезный тег, который используется для задания разделов в границах основного содержимого. Например, тег можно использовать для разбиения текста на составные части. Опять же, призван уменьшить количество ненужных тегов и упростить работу с документом.
  4. <nav> — тег, позволяющий собрать все ссылки на другие HTML-страницы в одном блоке.
  5. <article> — тег немного похож на <section>. Используется для задания части текстового содержимого страницы.

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

На этом простом примере можно четко увидеть, для чего нужны новые теги и как они упрощают жизнь при создании сайта. Все используется четко и к месту: название документа заключается в тег <header>, содержимое нижней части (футера), например, указание авторских прав — в футер. При помощи тега <section> мы разбили документ на разделы (хотя в примере он всего один). А саму «секцию» мы разбили еще на две части – при помощи тега <article>. Он всегда используется как подчиненный тег для разбиения на еще более маленькие части. Ну а все ссылки были аккуратно собраны в границы тега <nav>. Теперь их не придется искать по всему документу. Все получилось очень логично и удобно.

Некоторые могут спросить: ну и что? Разве то же самое нельзя было сделать при помощи старого доброго тега div? Или даже при помощи table? Конечно, можно сделать и так, но при этом вы никогда не добьетесь того, чтобы ваш документ выглядел удобным и понятным для поисковых систем, для других людей, да и для вас самого. А с использованием новых тегов документ выглядит привлекательно как для человеческих, так и для компьютерных глаз.

Внимание! Что нужно учесть при использовании новых блочных и структурных тегов HTML5?

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

Команды аналогичны для каждого элемента.

Почему в Internet Explorer все несколько по другому? Все потому, что он не понимает CSS, использованный в отношении неизвестных тегов. К тегу <script> можно не добавлять атрибут type=”text/javascript”. Он присутствует по умолчанию в HTML5.

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

HTML5 наконец-то приобрел теги, которые позволят максимально просто выводить мультимедиа-контент на вашем сайте. Два простых тега — <audio> и <video> с говорящими названиями позволят вам это сделать.

Пример использования тега <audio>:

У этого тега есть три атрибута: src, loop и autoplay. Первый используется для указания пути к файлу, второй – для задания количества раз проигрывания файла (в данном случае аудио будет проиграно 2 раза), последний – определяет, будет ли проигрываться файл сразу после открытия страницы (в данном случае это так). Также тег <audio> позволяет расположить внутри себя некоторые другие теги, которые могут содержать дополнительную информацию.

<video> — используется для вывода видео-файлов. Например:

Здесь использован только один атрибут, <src>, который определяет путь к нашему видео-файлу.

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

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

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

 

Тег <mark> или <m> используется для выделения важной части текста с любой целью. Например:

В примере мы просто выделили важную часть текста при помощи тега <m>.

 

<time> — используется для указания времени. Используется обычно в тексте. Например:

 

Тег <progress> — используется для указания точки некоторого прогресса. К примеру, это может быть процент выполнения какого-либо процесса:

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

 

Последний тег из этой группы — <meter>. Используется для указания чисел в определенном формате. Пример:

У тега есть несколько атрибутов. А именно: value — фактическое значение, min — минимальное значение, low — нижний предел, high — верхний предел, max — максимальное значение, optimum — оптимальное значение.

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

В HTML5 наконец-то появились интерактивные теги, которые позволят «оживить» страницу без ее перезагрузки. Всего было введено 4 новых тега:

Тег <menu> — контейнер для тега <command>, который используется для создания команды в виде кнопки, переключатели или флажка. Данные теги используются для создания интерактивных меню. Пример:

<details> — используется для указания дополнительной информации, справки. Например:

<canvas> — используется для рендеринга растровых изображений и 2D форм.

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