Быстрое введение в HTML5 для веб-мастеров
HTML5 является последней версией самого популярного языка разметки. HTML не претерпел существенных изменений за последние 10 лет.
Это отчасти является странным, для быстроразвивающихся веб-технологий, и вот наконец мы получили новенький HTML5.
Материалы по теме:
Для указания типа текущего документа в HTML5 достаточно просто указать: <! DOCTYPE HTML> В HTML5 не такие строгие правила как у его предшественника XHTML:
# вы можете не использовать закрывающие теги;
# не использовать кавычки в значениях атрибута;
# использовать символы верхнего регистра в элементах и атрибутах.
Новые теги HTML5
В HTML5 появились следующие новые теги:
Остальное остается прежним, кроме некоторых тегов которые не являются актуальными и не рекомендуются для использования:
Поэтому если вы знакомы с HTML4 и XHTML, то у вас не возникнет никаких проблем в изучении HTML5. Новые тэги и атрибуты безусловно помогут вам в создании новых и модернизации старых сайтов, благодаря новым возможностям это будет намного легче, чем это было со старым хорошим HTML4.
Хорошо, но будет ли HTML5 работать со старыми браузерами? Ответ - "ДА", кроме новых тегов, естественно. Новые страницы, сделанные в HTML5 будут отображаться во всех браузерах, но пользователи новых браузеров увидят немного больше, а в некоторых случаях страница будет вообще смотреться по-другому.
Структурные теги.
Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги <table> и <div>, чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.
Теперь нам доступны следующие структурные теги:
<section> Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.
<header> Цель его состоит в том, чтобы определить верхнюю часть HTML документа.
<footer> Этот тег применяется для того, чтобы определить нижнюю часть документа.
<nav> Цель его в том, чтобы определить список ссылок на другие HTML страницы.
<article> Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.
Вот к примеру HTML код с новыми тэгами.
Как вы видите, мы поместили название нашего документа в теги <header>. Затем мы добавили раздел к нашей странице при помощи тэга <section> и вложили в него 2 тега <article>, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг <nav>. И наконец мы создали нижний колонтитул нашей страницы при помощи тега <footer>.
Так и что же здесь особенного? Мы могли сделать тоже самое, используя старый хороший тэг <div>. Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.
Новые блочные теги HTML5.
В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
Тег <aside> используется для обозначения какой-то части текста, в пределах основного текста, например цитаты или сноски. ...
Веб-браузер никак не выделяет текст, заключенный в тэге <aside>, он используется для создания хорошей структуры HTML документа. Это по достоинству смогут оценить разработчики поисковых систем.
Следующий тэг <dialog> используется для создания диалогов между пользователями:
В тег <dialog> мы вложили еще два тэга: <dt> - содержащий имя пользователя и <dd> для отображения сообщения пользователя.
Третий тег <figure> используется для того, чтобы указать название изображения.
Мы использовали тэг <legend>, чтобы указать название изображения, тег <img>, чтобы вставить определенное изображение, и тэг <figure>, чтобы связать их вместе.
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.
Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block; чтобы они должным образом отображались. Что касается старых версий Internet Explorer, то необходимо так же добавить следующее:
Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега <script> есть type="text/javascript" по умолчанию, поэтому его мы можем не добавлять.
Встроенные теги.
У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:
Тег <m> используется для обозначения какой-то части текста для определенных целей, например, чтобы показать важную часть текста:
Мы вставили определенную важную часть в тэг <m>.
Тег <time> используется для обозначения времени и даты в каком либо тексте, например:
Тег <meter> используется, чтобы показать некоторые числа в определенном формате, например:
У тега <meter> есть 6 полезных атрибутов:
value - задает фактическое значение чего-то;
min - задает минимальное значение чего-то;
low - определяет предел, при достижении которого значение считается низким;
high - определяет предел, при котором значение считается низким;
max - определяет максимальное значение чего-то;
optimum - определяет оптимальное значение чего-то.
Например:
Последний новый тэг <progress> используется, чтобы показать некоторую точку некоторого прогресса, например, процент завершения чего-то:
Тег <progress> имеет два атрибута: value - текущее значение прогресса и max - максимально значение прогресса.
Мультимедийные теги.
В HTML5 имеется два новых тэга, предназначенных для вывода мультимедиа <audio> и <video>.
Вот пример применения тега <audio>:
У этого тега имеется три атрибута:
src - путь к звуковому файлу;
autoplay - определяет, начать ли проигрываться файлу сразу после загрузки страницы в браузере;
loop - определяет, сколько раз аудио должно проигрываться.
Тег <audio> позволяет разместить внутри себя другие тэги, содержащие некоторую информацию.
Тег <video> используется для того, чтобы вывести на страницу видеофайлы.
Атрибут src определяет путь к видео файлу.
Мультимедийные теги позволяют вывести аудио- и видео-файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.
Интерактивные теги.
В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:
Тег <menu> являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег <menu> в HTML5 выполняет роль контейнера для тега <command>, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.
Используя эти тэги, мы можем создавать различные интерактивные меню.
Тег <details> используется, чтобы показать некоторую дополнительную информацию, например, поле справки.
Тег <canvas> используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.
Атрибут ID используется для идентификации тега <canvas> как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст, заключенный между тегами <canvas>, будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.
Мы можем начать использовать новые возможности HTML5 уже сегодня. Некоторые простые приемы будут работать даже в старых браузерах. Если вы планируете построить новый веб-сайт, вы можете рассмотреть возможность применения HTML5, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.
Материал подготовлен порталом: WebMasterMix.ru
Источник
- Подробности
-
Обновлено: 04 Сентябрь 2013
-
Создано: 08 Декабрь 2010
-
Просмотров: 24597