Учебник HTML. Глава 3: Разделение HTML-страницы на фрагменты

HTML-разметка: руководство по созданию структурированных и семантических веб-страниц. Узнайте, как правильно использовать заголовки, абзацы, теги <div> и семантические элементы для улучшения SEO и удобства пользователей.

<< Учебник HTML

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

3.1. Заголовки

Заголовки позволяют разбивать текст на смысловые блоки и указывать на иерархию информации. В HTML заголовкам соответствуют теги <h1> до <h6>, где <h1> является главным заголовком, а <h6> — наименее значимым.

Пример:

<h1>Основной заголовок</h1>
<p>Первый абзац текста.</p>
<h2>Подзаголовок первого уровня</h2>
<p>Второй абзац текста.</p>

Здесь <h1> используется для обозначения главного заголовка страницы, а <h2> — для подзаголовков внутри раздела.

3.2. Разделение на абзацы

Для разделения текста на отдельные абзацы применяются теги <p>. Каждый такой блок текста будет отображаться отдельно от других частей контента.

Пример:

<p>Это первый абзац текста.</p>
<p>Это второй абзац текста.</p>

Каждый абзац начинается с нового параграфа, что делает текст удобным для чтения.

3.3. Тег div

Тег <div> позволяет группировать элементы страницы в единые блоки. Он служит контейнером для других элементов HTML и может использоваться для создания структуры документа, стилизации отдельных блоков через CSS и применения JavaScript.

Пример:

<div class="container">
  <h2>Раздел сайта</h2>
  <p>Этот текст находится внутри блока div.</p>
</div>

Весь контент внутри <div> образует единый блок, который можно оформлять и позиционировать как отдельный элемент страницы.
Тег <div> поддерживает вложенность, позволяя размещать другие элементы и даже другие <div> внутри одного блока. Это даёт возможность создавать сложные структуры на странице.

Пример:

<div class="main-container">
  <div class="left-sidebar">
    <ul>
      <li>Ссылка 1</li>
      <li>Ссылка 2</li>
    </ul>
  </div>
  <div class="content">
    <h2>Основная часть страницы</h2>
    <p>Контент страницы.</p>
  </div>
</div>

Здесь два блока <div> находятся внутри основного контейнера <div class="main-container">: один для боковой панели (<div class="left-sidebar">), другой для основного содержимого (<div class="content">).
Незакрытие вложенных тегов может привести к неправильному отображению страницы и нарушению её структуры. Браузеры пытаются исправить ошибки автоматически, но результат может отличаться от ожидаемого.

Пример:

<div class="outer">
  <div class="inner">
    Некорректное закрытие тега!
</div>

В этом случае тег <div class="inner"> не закрыт, что нарушает структуру документа. Всегда следите за тем, чтобы закрывающие теги соответствовали открывающим.

3.4. Семантическая разметка в HTML

Семантическая разметка подразумевает использование специальных HTML-тегов, которые передают браузерам и поисковым системам информацию о типе данных, содержащихся в каждом фрагменте страницы. Например, тег <nav> указывает на навигационное меню, а <footer> — на нижний колонтитул страницы.

Пример:

<header>
  <h1>Главная страница</h1>
  <nav>
    <a href="/about.html">О нас</a>
    <a href="/contact.html">Контакты</a>
  </nav>
</header>
<section>
  <article>
    <h2>Интересный материал</h2>
    <p>Статья о чем-то полезном.</p>
  </article>
</section>
<footer>
  <small>&copy; 2023 Все права защищены</small>
</footer>

Рассмотрим подробнее каждый семантический тег.

3.4.1. Тег <header>

Тег <header> представляет собой заголовочную часть страницы или раздела. Обычно включает в себя логотип, название сайта, слоган и, возможно, основное меню навигации.

Описание: Содержит вводную информацию к документу или секции.

Область применения: Может использоваться многократно на одной странице, например, для каждой статьи или раздела.

Пример:

<header>
  <h1>Название сайта</h1>
  <nav>
    <a href="/about.html">О нас</a>
    <a href="/contact.html">Контакты</a>
  </nav>
</header>

Возможная вложенность:

• Внутри <header> могут находиться теги <h1>-<h6>, <nav>, <img>, <p>, <div>, <span> и другие элементы, представляющие вводную информацию.

3.4.2. Тег <nav>

Тег <nav> предназначен для представления основных навигационных ссылок на сайте. Это может быть главное меню, боковая панель или нижняя навигационная панель.

Описание: Используется для выделения важных навигационных ссылок.

Область применения: Чаще всего встречается в шапке или боковой панели страницы.

Пример:

<nav>
  <ul>
    <li><a href="/home.html">Главная</a></li>
    <li><a href="/services.html">Услуги</a></li>
    <li><a href="/blog.html">Блог</a></li>
  </ul>
</nav>

Возможная вложенность:

• Внутри <nav> могут находиться теги <ul>, <ol>, <li>, <a>, <div>, <span> и другие элементы, создающие структуру навигационного меню.

3.4.3. Тег <section>

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

Описание: Представляет собой обособленный раздел страницы.

Область применения: Часто используется для выделения крупных смысловых блоков, таких как главы или разделы страницы.

Пример:

<section>
  <h2>Новости компании</h2>
  <article>
    <h3>Новость №1</h3>
    <p>Краткое описание новости.</p>
  </article>
  <article>
    <h3>Новость №2</h3>
    <p>Еще одна интересная новость.</p>
  </article>
</section>

Возможная вложенность:

• Внутри <section> могут находиться теги <h1>-<h6>, <article>, <div>, <p>, <ul>, <ol>, <li>, <a>, <img> и другие элементы, формирующие содержание раздела.

3.4.4. Тег <article>

Тег <article> используется для обозначения независимого составного материала, который может существовать вне контекста остальной страницы. Это может быть статья, запись в блоге, комментарий или любой другой самостоятельный элемент.

Описание: Представляет собой законченный компонент страницы, который может распространяться независимо.

Область применения: Подходит для блогов, форумов, новостей и других подобных ресурсов.

Пример:

<article>
  <h2>Интересная статья</h2>
  <p>Текст статьи...</p>
  <footer>
    Автор: Иван Иванов
  </footer>
</article>

Возможная вложенность:

• Внутри <article> могут находиться теги <h1>-<h6>, <p>, <blockquote>, <figure>, <footer>, <div>, <img>, <video>, <audio> и другие элементы, составляющие статью.

3.4.5. Тег <aside>

Тег <aside> применяется для размещения дополнительного контента, который косвенно связан с основным содержанием страницы. Это может быть боковая панель, рекламные баннеры или ссылки на связанные материалы.

Описание: Дополнительный контент, связанный с основной темой страницы.

Область применения: Боковые панели, виджеты, реклама.

Пример:

<aside>
  <h3>Похожие статьи</h3>
  <ul>
    <li><a href="/related-post-1.html">Статья 1</a></li>
    <li><a href="/related-post-2.html">Статья 2</a></li>
  </ul>
</aside>

Возможная вложенность:

• Внутри <aside> могут находиться теги <h1>-<h6>, <ul>, <ol>, <li>, <a>, <div>, <p>, <img>, <iframe> и другие элементы, создающие дополнительный контент.

3.4.6. Тег <footer>

Тег <footer> используется для обозначения нижнего колонтитула страницы или раздела. Здесь обычно размещается информация об авторских правах, контактные данные, ссылки на социальные сети и другая служебная информация.

Описание: Нижний колонтитул страницы или раздела.

Область применения: Футер страницы, контактная информация, авторские права.

Пример:

<footer>
  <small>&copy; 2023 Компания ООО</small>
  <address>Адрес: г. Москва, ул. Ленина, д. 10</address>
  <nav>
    <a href="/privacy-policy.html">Политика конфиденциальности</a>
    <a href="/terms-of-use.html">Условия использования</a>
  </nav>
</footer>

Возможная вложенность:

• Внутри <footer> могут находиться теги <nav>, <ul>, <ol>, <li>, <a>, <small>, <address>, <div>, <p>, <img> и другие элементы, содержащие информацию для нижнего колонтитула.

3.4.7. Тег <details>

Тег <details> используется для создания интерактивных раскрывающихся областей, содержащих дополнительную информацию. Пользователь может раскрыть или скрыть эту информацию, нажимая на кнопку или заголовок области.

Описание: Элемент, содержащий скрытый контент, который пользователь может раскрыть.

Область применения: Часто используется для FAQ-секций, инструкций, технической документации, где требуется предоставить дополнительные сведения при необходимости.

Пример:

<details>
  <summary>Как настроить аккаунт?</summary>
  <p>Чтобы настроить аккаунт, выполните следующие шаги:</p>
  <ol>
    <li>Зайдите в настройки профиля.</li>
    <li>Выберите вкладку "Аккаунт".</li>
    <li>Измените необходимые параметры и сохраните изменения.</li>
  </ol>
</details>

Возможная вложенность:

• Внутри <details> обязательно должен присутствовать тег <summary>, который определяет заголовок раскрывающейся области. После <summary> могут идти любые элементы, такие как <p>, <ul>, <ol>, <div>, <table>, <code> и другие, которые формируют содержимое скрытого блока.

3.4.8. Тег <hr>

Тег <hr> создаёт горизонтальную линию-разделитель между различными частями контента на странице. Этот элемент визуально отделяет одну часть текста от другой.

Описание: Горизонтальная линия, используемая для визуального разделения контента.

Область применения: Разделение больших блоков текста, создание границ между разными разделами страницы.

Пример:

<p>Первый абзац текста.</p>
<hr>
<p>Второй абзац текста.</p>

Возможная вложенность:

• Тег <hr> является одиночным элементом и не имеет вложенного содержания. Его используют для визуальной разметки страницы без дополнительных вложений.

3.5. Сравнение блочной и семантической разметки в смысле SEO

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

Преимущества семантической разметки:

• Улучшение восприятия страницы поисковыми системами, что положительно влияет на ранжирование.
• Упрощение чтения кода разработчиками благодаря тому, что сразу видно назначение каждого элемента.
• Обеспечение лучшей доступности для пользователей с ограниченными возможностями, так как вспомогательные технологии могут легче интерпретировать такие страницы.

Пример:

<!-- Блочный вариант -->
<div class="navigation">
  <a href="/about.html">О нас</a>
  <a href="/contact.html">Контакты</a>
</div>

<!-- Семантический вариант -->
<nav>
  <a href="/about.html">О нас</a>
  <a href="/contact.html">Контакты</a>
</nav>

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

---