Структура сайт на HTML5 немногим отличается от обычной структуры. В новой версии языка разметки введены новые семантические элементы которые позволяют лучше структурировать страницу сайта и придать каждому блоку определенный смысл.
Мы рассмотрим основные нововведения HTML5 которые облегчают разработку сайта.
Самая простая структура тела сайта имеет стандартные части (в большинстве случаев), это заголовок, меню, боковая панель, основное содержимое и подвал.
Семантические элементы HTML5 помогают упростить работу с этими частями. Итак давайте рассмотрим какие элементы HTML нам необходимы для создания структуры сайта
1. Основная стандартная структура сайта, которая имеет заголовок страницы и тело страницы:
<!DOCTYPE html>
<html>
<head>
<title> Структура сайта на HTML5 </title>
</head>
<body>
</body>
</html>
2. Теперь добавим в тело страницы (внутрь тега BODY) элемент которые будет отвечать за заголовок страницы в новом HTML5 это тег HEADER
<body>
<header>
<h1>Это структура сайта с использованием семантических тегов HTML5 </h1>
</header>
</body>
3. Часть HEADER обычно включает в себя часть меню. Меню создается с помощью парного тега NAV
<body>
<header>
<h1>Это структура сайта с использованием семантических тегов HTML5 </h1>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</header> </body>
4. Следующий элемент который используется для создания структуры сайта это ARTICLE. Он используется для группировки записей, статей и прочего на странице. В большинстве своем используется для разделения частей сайта на различные блоки. Может содержать внутри себя другие элементы ARTICLE.
<body>
<article>
<header>
<h1>Это структура сайта с использованием семантических тегов HTML5 </h1>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</article>
</header> </body>
5. Далее идет элемент ASIDE, который чаще всего используется для создания боковых колонок на странице сайта, это может быть меню, дополнительная информация и прочее.
<aside>
<h3> Рекламные блоки </h2>
<p> Какая то реклама </p>
</aside>
6. И последний часто используемый элемент это подвал FOOTER. Представляет собой нижнюю часть страницы сайта, обычно эта часть всегда одинакова на всех страницах сайта. Но каждая страницы или статья может иметь свой собственный footer.
<footer>
<adress> Ул.Новая д.43, г.Большой </adress>
</footer>
Подведя итог можно сделать окончательную структуру сайта на HTML5, который будет иметь следующий вид:
<!DOCTYPE html>
<html>
<head>
<title> Структура сайта на HTML5 </title>
</head>
<body>
<header>
<h1>Это структура сайта с использованием семантических тегов HTML5 </h1>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</header>
<aside>
<h3> Рекламные блоки </h2>
<p> Какая то реклама </p>
</aside>
<footer>
<adress> Ул.Новая д.43, г.Большой </adress>
</footer>
</body>
</html>