Існують спеціальні теги для елементів макету сайту. Використання таких тегів покращує семантику коду, тобто надає йому більше сенсу.
Основні теги макета
Для хедера сайту слід використовувати тег
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>
Перетворіть цей код за допомогою вивчених вами нових тегів.