Структура HTML-документа

Верстку сторінок потрібно робити семантичними тегами. Кожен із них потрібно використовувати у чітко визначеному для нього місці та випадку. Далі розглянемо ці теги, якими роблять розмітку всередині тегу body.

Тег <header>

Тег <header> - це по суті шапка нашого сайту, або сторінки. Зазвичай містить логотип і навігацію.

<body>
  <header>
    <a href="/">Logo</a>
    <ul>
      Page Navigation
    </ul>
  </header>
</body>

Тег <footer>

Тег <footer> - нижня частина сторінки або сайту. Зазвичай тут розташовують копірайт список посилань на соціальні мережі контактну форму та іншу інформацію.

<body>

  <header>
    <a href="/">Logo</a>

    <ul>
      Page Navigation
    </ul>
  </header>

  <footer>
    <ul>
      <li><a href="">Facebook</a></li>
      <li><a href="">Twitter</a></li>
      <li><a href="">Instagram</a></li>
    </ul>
    
    <p>All rights reserved &copy;website.com</p>
  </footer>
</body>

Тег <main>

Тег <footer> - головний унікальний контент сторінки. Може бути лише один на сторінку. Зазвичай розташовується між <header> і <footer>.

<body>
  <header></header>

  <main></main>

  <footer></footer>
</body>

Тег <nav>

Тег <nav> - всередині цього тегу розміщують основну навігацію сайту.

<body>
  <header>
    <a href="/">Logo</a>
    <nav>
      <ul>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main></main>

  <footer>
    <ul>
      <li><a href="">Facebook</a></li>
      <li><a href="">Twitter</a></li>
      <li><a href="">Instagram</a></li>
    </ul>
  </footer>
</body>

Тег <article>

Тег <article> - частина сторінки, яка має самостійне смислове значення. Це може бути стаття, пост на форумі, картка товару в інтернет-магазині тощо.

<article>
  <h1>Гаррі Поттер і філософський камінь</h1>
  <img src="шлях до постера" alt="Гаррі Поттер" />
  <p>
    Фільм про юного чарівника із школи чародійства і магії "Гоґвортс".
  </p>
  <p>Ціна квитка: 100 гривень</p>
</article>

Якщо цей розділ сторінки винести на окрему сторінку разом із заголовком і він все ще матиме самостійне смислове наповнення, то це - <article>.

Тег <section>

Тег <section> - у цей тег вміщують контент за спільним смисловим значенням. У окремі секції наприклад обʼєднують профілі користувачів, приклади робіт, список товарів тощо.

<section>
  <h1>Найкращі працівники тижня:</h1>

  <ul>
    <li>Іван Іваненко</li>
    <li>Петро Петренко</li>
    <li>Степан Степаненко</li>
  </ul>
</section>

У кожному тезі <li> може бути картка працівника з фотографією і посадою.

Якщо цей розділ сторінки винести на окрему сторінку разом із заголовком і він не матиме самостійне смислове наповнення, то це - <section>.

Тег <div>

Тег <div> - універсальний контейнер. Не має семантичного значення. Зазвичай його використовують як обгортку для подальшої стилізації контенту. Поганою практикою є верстання сайту тільки на <div> без використання семантичних тегів.

Як вибрати тег

Приблизну схему вибору правильного тегу наведено в алгоритмі нижче.

Розмітка сторінки

Звичайно всю вищезгадану верстку роблять всередині тегу <body>. Скелет сайту (Базова розмітка) має такий вигляд.

<!DOCTYPE html>
<html lang="uk">
<head>
  <!-- Service information -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- Content -->
</body>
</html>