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

Семантическая разметка в веб-приложениях играет ключевую роль в улучшении читаемости кода, доступности и SEO. В контексте Inferno, легковесного виртуального DOM-фреймворка на JavaScript, семантическая разметка реализуется через JSX, который позволяет создавать HTML-структуры с ясной семантикой.

Основы JSX и семантических тегов

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

  • <header> — верхняя часть страницы или блока, содержащая навигацию или заголовки.
  • <nav> — секция навигации по сайту или приложению.
  • <main> — основной контент страницы, уникальный для каждой страницы.
  • <section> — тематическая группа контента.
  • <article> — отдельная публикация или блок, имеющий смысл независимо от остальной страницы.
  • <aside> — побочный контент, например, боковые панели, цитаты или ссылки на связанные материалы.
  • <footer> — нижняя часть страницы или блока с контактной информацией, ссылками на авторские права и прочее.

В Inferno JSX эти теги можно использовать напрямую внутри компонентов:

import { render } from 'inferno';
import { Component } from 'inferno-component';

class Page extends Component {
    render() {
        return (
            <div>
                <header>
                    <h1>Заголовок страницы</h1>
                    <nav>
                        <ul>
                            <li><a href="#home">Главная</a></li>
                            <li><a href="#about">О нас</a></li>
                        </ul>
                    </nav>
                </header>
                <main>
                    <article>
                        <h2>Статья 1</h2>
                        <p>Содержимое статьи...</p>
                    </article>
                    <aside>
                        <p>Дополнительная информация</p>
                    </aside>
                </main>
                <footer>
                    <p>© 2025 Компания</p>
                </footer>
            </div>
        );
    }
}

render(<Page />, document.getElementById('root'));

Роль компонентов в семантической разметке

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

  • Header — для верхней панели и навигации.
  • Article — для публикаций и новостей.
  • Sidebar — для побочной информации.
  • Footer — для нижнего колонтитула.

Пример структурирования с использованием компонентов:

function Header() {
    return (
        <header>
            <h1>Мой сайт</h1>
            <nav>
                <ul>
                    <li><a href="#home">Главная</a></li>
                    <li><a href="#services">Услуги</a></li>
                </ul>
            </nav>
        </header>
    );
}

function Article({ title, content }) {
    return (
        <article>
            <h2>{title}</h2>
            <p>{content}</p>
        </article>
    );
}

function Footer() {
    return (
        <footer>
            <p>© 2025 Все права защищены</p>
        </footer>
    );
}

function App() {
    return (
        <div>
            <Header />
            <main>
                <Article title="Новость 1" content="Содержимое новости 1" />
                <Article title="Новость 2" content="Содержимое новости 2" />
            </main>
            <Footer />
        </div>
    );
}

render(<App />, document.getElementById('root'));

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

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

Некоторые рекомендации для Inferno:

  • Всегда использовать <main> один раз на странице.
  • Для списков навигации применять <nav> и вложенные <ul>/<li>.
  • При отображении групп контента, связанных по теме, использовать <section> с заголовком.
  • Для интерактивных элементов следить за соответствием ARIA-атрибутов и семантических тегов, чтобы сохранить доступность.

Динамическая семантика

Inferno позволяет динамически генерировать семантическую разметку с помощью props и условного рендеринга:

function Section({ title, items }) {
    return (
        <section>
            <h2>{title}</h2>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </section>
    );
}

const data = ['Элемент 1', 'Элемент 2', 'Элемент 3'];

render(<Section title="Список элементов" items={data} />, document.getElementById('root'));

Такой подход позволяет создавать гибкие интерфейсы без потери семантики и поддерживает удобочитаемую структуру DOM.

Итоги по семантической разметке

  • Семантика в Inferno строится через правильные HTML-теги и структурирование компонентов.
  • Компоненты служат для логического разделения содержимого и упрощают поддержку.
  • Доступность и SEO напрямую зависят от использования <header>, <main>, <article>, <section>, <aside> и <footer>.
  • Динамическое создание элементов через JSX сохраняет семантику при любых изменениях данных.

Соблюдение этих принципов обеспечивает чистый, поддерживаемый и доступный код в современных приложениях на Inferno.

Оглавление