Структура в HTML

При написании содержимого в HTML, такого как абзацы, списки или ссылки, вы наделяете смыслом свой текст. Но вы, возможно, захотите сгруппировать некоторые из этих элементов вместе.

Например, веб-страницу блога можно разделить на четыре части:

• «шапка», которая похожа на каждой странице и является главной навигацией по сайту;
• основное содержание, что меняется для каждой страницы: список статей, одна статья с комментариями, страница «о нас» и др.;
• боковая панель, которая содержит ссылки на ежемесячные архивы и категории;
• «подвал» для дополнительных ссылок на менее важные страницы.

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

<header>

<header>, как правило, идёт первым элементом в коде HTML. Он действует как введение в веб-страницу, с логотипом, слоганом и навигационными ссылками.

<header>
  <p>
    <a>
      <img src="my-logo.jpg" alt="Логотип">
    </a>
    <em>Клёвый сайт</em>
  </p>
  <ul>
    <li>
      <a href="home.html">Главная</a>
      <a href="about.html">О нас</a>
      <a href="contact.html">Контакты</a>
    </li>
  </ul>
</header>

<footer>

В отличие от <header>, <footer>, как правило, это последний элемент страницы, где основные навигационные ссылки повторяются и добавляются вторичные.

<footer>
  <p>MarkSheet.io | Copyright 2015</p>
  <ul>
    <li>
      <a href="home.html">Главная</a>
    </li>
    <li>
      <a href="about.html">О нас</a>
    </li>
    <li>
      <a href="contact.html">Контакты</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="privacy-policy.html">Политика конфиденциальности</a>
    </li>
    <li>
      <a href="terms-of-use.html">Условия использования</a>
    </li>
  </ul>
</footer>

<main>

Элемент <main> содержит, как предполагает его название, наиболее важное содержание страницы, то, что определяет назначение страницы.

В то время как все веб-страницы сайта содержат общие элементы (такие как шапка, навигация, подвал и др.), элемент <main> фокусируется на уникальном содержании.

Например, статья, которую вы сейчас читаете, находится внутри <main> на этой странице, потому что её содержание является уникальным на всём сайте.

<aside>

Элемент <aside>, как правило, располагается вместе с <main> и содержит дополнительную информацию, связанную с основным содержанием.

<section>

Элемент <section> позволяет группировать элементы в разделы. Сами по себе разделы не несут определённого смысла. Это больше об отношении между его дочерними элементами, а не свой собственный смысл на странице в целом.

Главная страница MarkSheet отображает три раздела:

• «шапка» (логотип, название, подзаголовок);
• вступление;
• главы («Web», «HTML», «CSS»).

Все они находятся внутри элемента <main> главной страницы, но разделены логически на группы похожего содержания и обеспечивают большее значение для структуры страницы.

Перейти к заданиям