Семантическая разметка

FullPage.js позволяет создавать полноэкранные скроллируемые страницы с разделами (sections) и слайдами (slides). Правильная семантическая разметка критична для доступности, SEO и удобства поддержки кода. Основной принцип заключается в использовании HTML-тегов по их назначению, вместо универсальных <div>.

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

Основная структура страницы для fullPage.js выглядит следующим образом:

<div id="fullpage">
  <section class="section">
    <header>
      <h1>Заголовок первой секции</h1>
    </header>
    <article>
      <p>Содержимое первой секции</p>
    </article>
    <footer>
      <p>Футер первой секции</p>
    </footer>
  </section>

  <section class="section">
    <header>
      <h1>Заголовок второй секции</h1>
    </header>
    <article>
      <p>Содержимое второй секции</p>
    </article>
    <footer>
      <p>Футер второй секции</p>
    </footer>
  </section>
</div>

Ключевые моменты:

  • section используется для каждого экрана fullPage.js. Этот тег семантически соответствует отдельной секции контента.
  • header и footer внутри секции выделяют заголовки и нижние части секции.
  • article применяется для основного содержимого, которое логически представляет собой самостоятельную единицу информации.

Слайды и их семантика

Слайды внутри секции оформляются с использованием контейнера slide:

<section class="section">
  <div class="slide">
    <h2>Первый слайд</h2>
    <p>Контент первого слайда</p>
  </div>
  <div class="slide">
    <h2>Второй слайд</h2>
    <p>Контент второго слайда</p>
  </div>
</section>

Особенности:

  • Каждый слайд может содержать заголовки и параграфы. Использование тегов <h2>, <p> обеспечивает правильную семантическую структуру.
  • Для более сложного контента слайдов допустимо использовать <section> внутри слайда, если слайд представляет отдельный контентный блок.

Навигационные элементы и aria-атрибуты

FullPage.js поддерживает клавиатурную навигацию и управление скроллом. Для повышения доступности важно использовать aria-label и role:

<nav role="navigation" aria-label="Основная навигация">
  <ul>
    <li><a href="#section1">Секция 1</a></li>
    <li><a href="#section2">Секция 2</a></li>
    <li><a href="#section3">Секция 3</a></li>
  </ul>
</nav>

Рекомендации:

  • role="navigation" четко указывает назначение элемента.
  • aria-label помогает вспомогательным технологиям идентифицировать область.
  • Ссылки на секции (href="#sectionX") синхронизируются с fullPage.js через идентификаторы.

Семантика при использовании внутренних элементов

Контент секции и слайдов можно структурировать с помощью:

  • <h1>…<h6> для заголовков, соблюдая иерархию.
  • <article> для независимых единиц контента.
  • <aside> для боковой информации или дополнительных блоков.
  • <figure> и <figcaption> для иллюстраций с подписями.
  • <blockquote> для цитат.

Пример с комбинированными элементами:

<section class="section">
  <header>
    <h1>Новости компании</h1>
  </header>
  <article>
    <h2>Выпуск нового продукта</h2>
    <p>Описание нового продукта с важными деталями.</p>
    <figure>
      <img src="product.jpg" alt="Новый продукт">
      <figcaption>Фото нового продукта</figcaption>
    </figure>
  </article>
  <aside>
    <p>Дополнительная информация: контакты для прессы</p>
  </aside>
</section>

Идентификаторы и классы

  • Каждой секции стоит присваивать уникальный id, что облегчает навигацию и улучшает SEO.
  • Классы section и slide обязательны для работы fullPage.js.
  • Дополнительные классы можно использовать для стилизации и логической группировки элементов, но не заменять семантические теги.

Влияние семантики на SEO и доступность

  • Поисковые системы лучше индексируют страницы, где <section> и <article> используются корректно.
  • Скринридеры и голосовые помощники правильно воспринимают заголовки и разделы, если соблюдена иерархия <h1>–<h6> и структурированы основные блоки.
  • Использование aria-label, role и уникальных id повышает удобство навигации для пользователей с ограниченными возможностями.

Итоговые рекомендации по разметке

  • Секции должны быть семантически независимыми блоками <section>.
  • Слайды внутри секции могут быть <div class="slide"> или дополнительно <section> при необходимости.
  • Заголовки обязаны соответствовать логической иерархии страницы.
  • Контент внутри секций и слайдов структурируется с помощью <article>, <aside>, <figure> и других семантических элементов.
  • Все элементы навигации снабжаются aria-label и корректными role для доступности.

Эта структура обеспечивает не только корректную работу fullPage.js, но и создает семантически осмысленную страницу, удобную для поисковых систем и пользователей с различными потребностями.

Оглавление