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

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

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

Для хедера сайта следует использовать тег 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>

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