Из чего состоит структура HTML макета

1.8 Middle🔥 201 комментариев

#HTML и CSS#Оптимизация и производительность

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Структура HTML макета

Структура HTML макета (layout) — это организация элементов на странице. Правильная структура важна для доступности, SEO и взаимодействия с браузером.

Базовая структура HTML5 документа

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Заголовок страницы</title>
  <meta name="description" content="Описание для SEO">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Содержимое страницы -->
</body>
</html>

Семантические теги макета

HTML5 предоставляет специальные теги для структурирования контента:

1. <header> — шапка, логотип, меню

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <h1>PrepBro</h1>
</header>

2. <nav> — навигация

<nav class="main-nav">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/questions">Вопросы</a></li>
    <li><a href="/profile">Профиль</a></li>
  </ul>
</nav>

3. <main> — основное содержимое страницы (один на странице)

<main>
  <article>
    <!-- Основной контент -->
  </article>
</main>

4. <article> — независимый контент (статья, пост, комментарий)

<article>
  <h2>Интервью на React</h2>
  <p>Дата: 2024-01-15</p>
  <section>
    <h3>Вопрос 1</h3>
    <p>Как работает virtual DOM?</p>
  </section>
</article>

5. <section> — логический раздел контента

<section class="interview-prep">
  <h2>Подготовка к интервью</h2>
  <p>Здесь размещены материалы для подготовки.</p>
</section>

6. <aside> — боковая панель, виджеты, дополнительная информация

<aside class="sidebar">
  <h3>Рекомендуемые вопросы</h3>
  <ul>
    <li>Замыкания в JavaScript</li>
    <li>Promise и async/await</li>
  </ul>
</aside>

7. <footer> — нижняя часть, копирайт, ссылки

<footer>
  <p>&copy; 2024 PrepBro. All rights reserved.</p>
  <ul>
    <li><a href="/privacy">Privacy</a></li>
    <li><a href="/terms">Terms</a></li>
  </ul>
</footer>

Типичная структура веб-приложения

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PrepBro - Подготовка к интервью</title>
</head>
<body>
  <!-- Шапка с навигацией -->
  <header class="header">
    <nav class="navbar">
      <div class="logo">PrepBro</div>
      <ul class="nav-links">
        <li><a href="/">Главная</a></li>
        <li><a href="/questions">Вопросы</a></li>
        <li><a href="/profile">Профиль</a></li>
      </ul>
    </nav>
  </header>

  <!-- Основной контент -->
  <main class="container">
    <!-- Левая сторона - главный контент -->
    <section class="main-content">
      <h1>Вопросы интервью</h1>
      
      <article class="question-card">
        <h2>Как работает event loop в JavaScript?</h2>
        <p class="difficulty">Сложность: средняя</p>
        <button>Читать ответ</button>
      </article>
      
      <article class="question-card">
        <h2>Объясните замыкания (closures)</h2>
        <p class="difficulty">Сложность: средняя</p>
        <button>Читать ответ</button>
      </article>
    </section>

    <!-- Правая сторона - боковая панель -->
    <aside class="sidebar">
      <section class="filters">
        <h3>Фильтры</h3>
        <label>
          <input type="checkbox" name="difficulty" value="easy">
          Легко
        </label>
        <label>
          <input type="checkbox" name="difficulty" value="medium">
          Средне
        </label>
      </section>
      
      <section class="recommended">
        <h3>Рекомендуемые</h3>
        <ul>
          <li>Event Loop</li>
          <li>Async/Await</li>
        </ul>
      </section>
    </aside>
  </main>

  <!-- Нижняя часть -->
  <footer class="footer">
    <p>&copy; 2024 PrepBro</p>
    <nav>
      <a href="/privacy">Приватность</a>
      <a href="/terms">Условия</a>
      <a href="/contact">Контакт</a>
    </nav>
  </footer>
</body>
</html>

Современный подход: Grid/Flexbox макеты

/* Двухколонный макет с шапкой и подвалом */
body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header {
  grid-column: 1;
}

main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  padding: 2rem;
}

footer {
  grid-column: 1;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr; /* Одна колона на мобильных */
  }
}

Роли элементов в доступности (Accessibility)

<!-- Правильная структура улучшает доступность -->
<header role="banner">
  <!-- Логотип, меню -->
</header>

<nav aria-label="Main navigation">
  <!-- Основная навигация -->
</nav>

<main id="main-content" role="main">
  <!-- Основной контент -->
</main>

<aside aria-label="Sidebar">
  <!-- Дополнительная информация -->
</aside>

<footer role="contentinfo">
  <!-- Информация о сайте -->
</footer>

Ключевые принципы

Семантика — используй правильные теги (header, main, footer)
Иерархия — правильный порядок заголовков (h1 > h2 > h3)
Доступность — aria-labels для скрин-ридеров
Респосивность — адаптация под разные размеры экранов
Производительность — чистая структура без лишних div-ов
SEO — правильная семантика улучшает индексацию

Правильная структура HTML — это основа качественного веб-приложения.