# Специальные теги для элементов макета сайта

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

## Основные теги макета

Для хедера сайта следует использовать тег `header`, для футера - тег `footer`, для сайдбара - тег `aside`, для контента - тег `main`. Давайте посмотрим, как будет выглядеть макет сайта, написанный с помощью этих тегов:

`<div id="wrapper"> <header> header </header> <div id="container"> <aside> sidebar </aside> <main> content </main> </div> <footer> footer </footer> </div>`

## Тег для меню

Для меню следует использовать тег `nav`:

`<nav> <a href="#"></a> <a href="#"></a> <a href="#"></a> </nav>`

## Секции

Блоки сайта можно объединять в секции с помощью тега `section`:

`<section> <h2></h2> <p> </p> <p> </p> </section> <section> <h2></h2> <p> </p> <p> </p> </section>`

## Практические задачи

Дан следующий код:

`<div id="wrapper"> <div id="header"> <div id="menu"> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> <div id="container"> <div id="sidebar"> sidebar </div> <div id="content"> content </div> </div> <div id="footer"> footer </div> </div>`

Преобразуйте этот код с помощью изученных вами новых тегов.

Дан следующий код:

`<div id="content"> <h1></h1> <div class="section"> <h2></h2> <p> </p> <p> </p> </div> <div class="section"> <h2></h2> <p> </p> <p> </p> </div> </div>`

Преобразуйте этот код с помощью изученных вами новых тегов.

Дан следующий код:

`<div id="wrapper"> <div id="header"> <div id="logo"> <img src="" alt="logo"> </div> <div id="menu"> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> <div id="container"> <div id="left"> <div class="section"> section </div> <div class="section"> section </div> <div class="section"> section </div> </div> <div id="content"> <h1>main header</h1> <div class="section"> <h2>section header</h2> <div> <p> </p> <p> </p> </div> <div> <p> </p> <p> </p> </div> </div> <div class="section"> <h2>section header</h2> <div> <p> </p> <p> </p> </div> <div> <p> </p> <p> </p> </div> </div> </div> <div id="right"> <div class="section"> section </div> <div class="section"> section </div> <div class="section"> section </div> </div> </div> <div id="footer"> footer </div> </div>`

Преобразуйте этот код с помощью изученных вами новых тегов.

←→
↑