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

Atomico — это современная библиотека для создания веб-компонентов на JavaScript, основанная на реактивной модели. Семантическая разметка в контексте Atomico играет ключевую роль, так как компоненты должны быть не только функциональными, но и логически структурированными для браузеров, поисковых систем и вспомогательных технологий.

Основы семантики в веб-компонентах

В Atomico каждый компонент — это отдельный элемент DOM, который можно использовать как стандартный HTML-тег. Семантика достигается через правильное использование тегов и атрибутов, соответствующих их смыслу. Например:

import { c, html } from "atomico";

function Article() {
    return html`
        <article>
            <header>
                <h1>Заголовок статьи</h1>
                <p>Дата публикации: <time datetime="2026-01-17">17 января 2026</time></p>
            </header>
            <section>
                <p>Первый абзац текста статьи.</p>
            </section>
            <footer>
                <p>Автор: Иван Иванов</p>
            </footer>
        </article>
    `;
}

customElements.define("x-article", c(Article));

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

  • Использование тегов <article>, <header>, <section>, <footer> для логической структуры.
  • Тег <time> для даты позволяет браузерам и скринридерам правильно интерпретировать временные данные.
  • Компоненты Atomico полностью интегрируются в DOM, сохраняя семантику HTML.

Атрибуты и свойства

Atomico разделяет свойства компонента и атрибуты HTML. Для семантики важно синхронизировать их:

import { c, useProp, html } from "atomico";

function Button() {
    const [label, setLabel] = useProp("label", "Нажми меня");

    return html`
        <button aria-label=${label}>
            ${label}
        </button>
    `;
}

customElements.define("x-button", c(Button));

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

  • Атрибуты aria-* повышают доступность компонентов.
  • Свойства компонента управляют содержимым и состоянием без нарушения семантики.

Роль семантики в композиции компонентов

Компоненты часто объединяются в сложные интерфейсы. Atomico позволяет строить иерархию без потери смысловой структуры:

import { c, html } from "atomico";

function BlogPost() {
    return html`
        <article>
            <x-article></x-article>
            <aside>
                <h2>Сопутствующие материалы</h2>
                <ul>
                    <li><a href="/guide">Руководство</a></li>
                    <li><a href="/faq">FAQ</a></li>
                </ul>
            </aside>
        </article>
    `;
}

customElements.define("x-blog-post", c(BlogPost));

Смысловая нагрузка:

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

Динамический контент и семантика

Atomico поддерживает реактивные данные и динамическое создание DOM-узлов. Семантика сохраняется при использовании условного рендеринга:

import { c, useState, html } from "atomico";

function Comments({ comments }) {
    const [visible, setVisible] = useState(true);

    return html`
        <section>
            <h2>Комментарии</h2>
            <button onCl ick=${() => setVisible(!visible)}>
                ${visible ? "Скрыть" : "Показать"} комментарии
            </button>
            ${visible &&
            html`
                <ul>
                    ${comments.map(
                        (comment) => html`<li><p>${comment}</p></li>`
                    )}
                </ul>
            `}
        </section>
    `;
}

customElements.define("x-comments", c(Comments));

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

  • Компоненты условно рендерят <ul> и <li> без потери семантики.
  • Кнопки и состояния управляются через свойства, атрибуты и обработчики событий.

Доступность и семантика

Atomico поощряет использование стандартных HTML-тегов и атрибутов для улучшения доступности. Важные аспекты:

  • role — определяет назначение элемента для скринридеров.
  • aria-label и aria-hidden — управляют доступностью содержимого.
  • Семантические теги (<nav>, <main>, <section>) помогают структурировать страницу без визуальных подсказок.

Пример использования навигации:

function Navigation({ items }) {
    return html`
        <nav aria-label="Главное меню">
            <ul>
                ${items.map((item) => html`<li><a href=${item.href}>${item.title}</a></li>`)}
            </ul>
        </nav>
    `;
}

customElements.define("x-navigation", c(Navigation));

Принципы правильной семантики в Atomico

  1. Использовать правильные HTML-теги для структурирования содержимого.
  2. Применять атрибуты доступности (aria-*) для интерактивных компонентов.
  3. Разделять свойства и атрибуты для контроля поведения и визуализации.
  4. Сохранять логическую иерархию компонентов при их компоновке.
  5. Динамический контент должен сохранять семантику, используя условный рендеринг и массивы компонентов.

Эти подходы обеспечивают, что компоненты на Atomico остаются понятными для браузеров, скринридеров и поисковых систем, одновременно предоставляя гибкий инструмент для создания реактивных интерфейсов.

Оглавление