Семантический HTML5

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

<strong>— сильное выделение
<em> — очень сильное выделение
<code> — компьютерный код
<cite> — цитата
<var> — переменная

Стандарт HTML5 всё еще формируется (часто под HTML5 понимают не только язык разметки, но и сопутствующие технологии; раньше в ходу был термин DHTML), но уже известны новые теги, регламентирующие особенности семантической верстки. Возможно подобные нововведения и не вызывают такого WoW-эффекта и не дают каких-либо очевидных преимуществ, как новые API для языка JavaScript (геолокация, локальное хранилище, новые методы DOM), CSS3, WebGL, расширенная поддержка мультимедиа или графический контейнер canvas, но при правильном использовании семантическая верстка может упростить в будущем технологии веб-поиска и поддержки кода, мы сможем получить более четко структурированные веб-документы. HTML5 уже сегодня предлагает следующие теги-контейнеры (вместо множества контейнеров <div> и <span>):

<header> — "шапка" страницы. Как правило, содержит логотип, слоган и возможно еще какие-то элементы, характерные для верхней части страницы.
<nav> — определяет область навигационного меню. Обычно содержит список ссылок. <nav> <a href="http://www.blogger.com/...">Home</a> <a href="http://www.blogger.com/...">Previous</a> <a href="http://www.blogger.com/...">Next</a> </nav>
<article> — контейнер для материала из внешнего источника (новость, статья, запись в блоге, сообщение из форума)
<section> — контейнер элемента страницы, статьи. Обычно глава, параграф, раздел.
<address> — адресная/контактная информация.
<aside> — дополнительная информация, относящаяся к основному содержанию. Обычно это боковые панели.
<footer> — "подвал" страницы. Обычно содержит дату написания документа, автора или контактную информацию.
и так далее...

с более полным списком тегов HTML5 и примерами можно ознакомиться на странице w3schools.com

Важно заметить, что вышеперечисленные теги являются лишь контейнерами и не несут в себе какого-либо визуального оформления.
Сегодня при разработке клиентских веб-приложений принято четко разделять и не смешивать содержание (HTML), оформление (CSS) и поведение (JavaScript). Язык HTML - это только содержание с минимумом оформления.

Разные браузеры при рендеринге страниц используют различные настройки по-умолчанию для контейнеров, если четко не заданы пользовательские стили. Часто веб-разработчики сбрасывают стили для контейнеров (в основном padding и margin) для того, чтобы настройки конкретных браузеров не влияли на отображение страницы; существует несколько различных техник сброса (css reset), но можно пользоваться простым правилом:

* {
     margin: 0;
     padding: 0;
}

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

header, footer, section, aside, nav, article {
       display: block;
}

Задание

Ознакомьтесь с новыми тегами HTML на сайте w3schools.com
Ознакомьтесь с примерами сайтов на HTML5

Сделайте новую версию главной страницы портфолио, в соответствии со стандартом HTML5, с ипользованием новых тегов.
Воспользуйтесь инструментом Semantic Extractor, проверьте насколько хорошо робот смог проанализировать вашу страницу, насколько хорошо она структурирована. Опубликуйте результат работы сервиса на страницах портфолио или в блоге.
Кроме инструмента Semantic Extractor можно воспользоваться расширением Firefox Web Developer (Информация -> показать оглавление документа)

Ссылки

суббота, 6 ноября 2010 г.