HTML5 — краткий обзор некоторых новых тегов

HTML5 был разработан для того, чтобы облегчить работу разработчикам, которых теперь просто верстальщиками и не назовешь, так как язык стал более самостоятельным и самодостаточным. Каким же образом приносит облегчение html5? Тем, что структура языка теперь будет продуманней и понятней. Это можно проиллюстрировать на примере верстки таблицами, пока ей на смену не пришла div-верстка. И как див-верстка гораздо удобнее для разработчика + понятней для поисковиков по сравнению с версткой таблицами, так и верстка html5 намного совершенней в этих вопросах. Также отпадет надобность в использовании некоторых java-скриптов или плагинов типа того же Flash, без которых раньше просто обойтись было невозможно. Ведь теперь для создания той же формы поиска или добавления видео на страницу достаточно просто использовать элементы html5.

Постепенно устаревали некоторые теги, которыми раньше активно пользовались, поменялся, как мы упоминали выше, вид верстки, а вот с появлением html5 даже появились новые теги (элементы) и атрибуты, которых раньше не существовало вовсе, а некоторые обросли большим количеством атрибутов. И сегодня в общих чертах познакомимся с некоторыми из них

1. <header> и <footer>

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

<header> — чудесная замена для <div id=»header»>, который мы использовали для обозначения шапки сайта (верхней части сайта). Но, что важно помнить, этот элемент можно не только как обозначение классической шапки сайта, но и для обозначения любого другого элемента. Это тег является как бы заголовком либо для всей страницы, либо для какого-то определенного раздела (для html4 мы бы использовали div). Например, мы можем ту же навигацию задать как <header nav>.

<footer> — этот элемент аналогичен предыдущему, но отвечает за вывод футера (подвала) сайта, или же также может быть использован большое количество раз на одной и той же странице в сочетании с другими тегами.

2. <article> и <section>

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

<article> — данный тег является самостоятельным тегом для вывода части контента страницы, например, вывода статьи или новости, комментария.

<section> — этот элемент практически является заменой тега <div>. Данный тег можно спокойно использовать, также как и его предшественника, внутри других элементов, например, того же тега <article>.

3. <aside>

Элемент <aside> является тем элементом, который используется как дополнительный основной элемент, не входящий в тег <article>. Чаще всего это элемент используется разработчиками для создания сайдбара, то есть это важный независимый элемент, но не внутри центрального контента.

4. <nav>

Тег <nav> — элемент навигации, который содержит в себе ссылки, как обычное меню или даже просто текст . Данный элемент может использоваться как для основного меню, так и для какого-либо блока с ссылками.

5. <audio> и <video>

Специализированные теги для вывода аудио и видео файлов на сайте.

Пример кода для вывода видео:

6. <input>

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

7. <figure> и <figcaption>

Элементы <figure> и <figcaption>ответственны за вывод таблиц, изображений, цитат, кода-образца. Суть в том, что они выводят важные элементы, но такие, которые не влияют на саму страницу. Например, нельзя в тег <figure> обрамлять логотип, графику, используемую как иконки или кнопки на сайте или изображения, у которых должно быть четко определенное место. А тег <figcaption> является своего рода заголовком для элемента <figure>.

Пример сочетания тегов <figure> и <figcaption>:

И немного теории по теме…. Говоря о плюсах HTML5 и его преимуществах, не стоит забывать и о том, что хоть и прошел уже не один год со времени его появления, не все браузеры могут отображать элементы HTML5. Большая часть тегов успешно отображается в том же Google Chrom и Opera, не так уж много элементов поддерживает Firefox, а IE совсем уж хромает в этом отношении (9й практически не в счет, но еще очень многие используют IE более ранних версий).

И сейчас мы ознакомимся с отличным решением именно для браузера Internet Explorer. Велосипед изобретать мы не будем, а просто воспользуемся отличным скриптом, который был разработан Jonathanом Nealом.

Возможно, многие уже слышали о скрипте HTML Shiv, а если же нет, то скачивая шаблоны HTML5, уже наверняка встречались с ним.

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

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