Реализация семантической разметки

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

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

Мы заменим теги <DIV>, формирующие блочные контейнеры, что составляют разметку Web-страниц, тегами семантической разметки.

Тег <DIV>, формирующий верхний широкий блок с заголовком Web-сайта (к нему привязан именованный стиль header), мы заменим тегом <HEADER>. Так мы создадим для Web-страниц настоящий заголовок.

В результате у нас должен получиться вот такой код, создающий контейнер

header:

<HEADER ID="header">

<H1>Веники и швабры</H1>

</HEADER>

Правка кода, создающего остальные контейнеры, выполняется аналогично.

Тег <DIV>, формирующий плавающий контейнер с полосой навигации (именованный стиль nav), мы заменим на тег <NAV>.

Тег <DIV>, создающий плавающий контейнер с основным содержимым (именованный стиль main или main2), мы заменим тегом <ARTICLE>. Превратим основное содержимое в статью — все равно наши Web-странички невелики по объему.

Тег <DIV>, формирующий плавающий контейнер с новостями Web-сайта (именованный стиль news), заменим на тег <ASIDE>. Пусть новости станут примечанием к основному содержимому.