Что такое структура сайта
Структура сайта — это расположение основных элементов веб-страницы. Практически любой сайт состоит из нескольких основных блоков.
Эти блоки помогают: - упорядочить информацию; - сделать сайт удобным для пользователей; - облегчить разработку страницы.
Основные части веб-страницы
Большинство сайтов имеют следующую структуру:
HEADER
MENU
MAIN
FOOTER
Разберём каждый элемент подробнее.
Header (шапка сайта)
Header — это верхняя часть страницы.
В шапке обычно размещаются: - название сайта - логотип - навигация - контактная информация
Пример:
--------------------------------
ЛОГОТИП НАЗВАНИЕ САЙТА
--------------------------------
HTML пример:
<header>
<h1>Мой сайт</h1>
</header>
Navigation (меню сайта)
Меню позволяет пользователю переходить между страницами сайта.
Примеры пунктов меню: - Главная - О нас - Новости - Контакты
Пример структуры:
Главная | О нас | Контакты
HTML пример:
<nav>
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</nav>
Main (основное содержимое)
Main — это основная часть страницы.
Здесь размещается основной контент: - текст - изображения - статьи - карточки товаров - новости
HTML пример:
<main>
<h2>Добро пожаловать</h2>
<p>Это основной текст страницы.</p>
</main>
Section (раздел страницы)
Иногда основной контент делится на разделы.
Для этого используется тег:
<section>
Пример:
<section>
<h2>Новости</h2>
<p>Последние новости сайта.</p>
</section>
Footer (подвал сайта)
Footer — это нижняя часть страницы.
В подвале обычно размещают: - контактную информацию - ссылки - авторские права - дополнительное меню
Пример:
--------------------------------
Контакты
© 2025 Мой сайт
--------------------------------
HTML пример:
<footer>
<p>© 2025 Мой сайт</p>
</footer>
Пример структуры страницы
Пример каркаса сайта:
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<header>
<h1>Мой сайт</h1>
</header>
<nav>
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</nav>
<main>
<section>
<h2>Новости</h2>
<p>Последние новости сайта.</p>
</section>
</main>
<footer>
<p>© 2025 Мой сайт</p>
</footer>
</body>
</html>
Схема структуры сайта
Пример расположения элементов:
--------------------------------
HEADER
--------------------------------
MENU
--------------------------------
MAIN CONTENT
--------------------------------
FOOTER
--------------------------------
Рекомендации
При создании структуры сайта рекомендуется: - разделять страницу на логические блоки; - использовать понятные названия; - соблюдать структуру страницы; - использовать семантические теги HTML.
Это делает код более понятным.