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

Mithril — лёгкий и быстрый JavaScript-фреймворк для построения одностраничных приложений (SPA), который использует виртуальный DOM. Семантическая разметка в контексте Mithril имеет особое значение, поскольку структура HTML напрямую влияет на читаемость кода, доступность интерфейса и правильное использование компонентов.

Элементы и их семантическая нагрузка

В Mithril для создания DOM-элементов используется функция m(). Первый аргумент функции — это строка с названием HTML-тега, второй — объект с атрибутами, третий — содержимое. Например:

m("article", { class: "post" }, [
    m("h1", "Заголовок статьи"),
    m("p", "Основной текст статьи с семантической разметкой.")
])

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

  • article используется для самостоятельных блоков контента.
  • h1-h6 — для заголовков с правильной иерархией.
  • p — для абзацев текста, поддерживающих читаемость.
  • Классы и идентификаторы помогают CSS и JS манипуляциям, но не заменяют семантический тег.

Использование секций и навигации

Для структурирования страниц применяются семантические контейнеры:

m("header", [
    m("nav", [
        m("ul", [
            m("li", m("a", { href: "/" }, "Главная")),
            m("li", m("a", { href: "/about" }, "О проекте"))
        ])
    ])
]),
m("main", [
    m("section", { id: "features" }, [
        m("h2", "Особенности"),
        m("p", "Описание основных возможностей.")
    ])
]),
m("footer", [
    m("p", "© 2025 Компания")
])

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

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

Доступность и aria-атрибуты

Mithril поддерживает любые HTML-атрибуты, включая ARIA, что позволяет создавать доступные интерфейсы:

m("button", { "aria-label": "Закрыть окно", onclick: closeModal }, "×")

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

  • Использовать aria-label для кнопок без текста.
  • Для динамических списков и табов применяются role, aria-expanded, aria-controls.
  • Семантические теги + ARIA обеспечивают правильную работу скринридеров и голосовых помощников.

Компоненты с семантической структурой

Mithril позволяет строить компоненты как объекты с методом view:

const Article = {
    view: ({ attrs }) => m("article", [
        m("h2", attrs.title),
        m("p", attrs.content)
    ])
};

const App = {
    view: () => m("main", [
        m(Article, { title: "Первый пост", content: "Содержимое статьи..." }),
        m(Article, { title: "Второй пост", content: "Ещё одна статья..." })
    ])
};

Замечания:

  • Компоненты позволяют переиспользовать семантическую разметку.
  • Атрибуты (attrs) передаются компонентам, сохраняя гибкость.
  • Каждый компонент должен использовать HTML-теги, отражающие смысл содержимого (article, section, aside).

Семантика списков и таблиц

Для списков применяются ul и ol, а для элементов li:

m("ul", [
    m("li", "Элемент 1"),
    m("li", "Элемент 2"),
    m("li", "Элемент 3")
])

Для таблиц — table, thead, tbody, tr, th, td:

m("table", [
    m("thead", m("tr", [
        m("th", "Имя"),
        m("th", "Возраст")
    ])),
    m("tbody", [
        m("tr", [ m("td", "Анна"), m("td", "28") ]),
        m("tr", [ m("td", "Иван"), m("td", "35") ])
    ])
])

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

  • Правильная структура таблицы повышает читаемость и доступность.
  • Использование семантических тегов списка улучшает навигацию и SEO.

Практические советы

  • Всегда использовать теги, соответствующие типу контента.
  • Стилизация должна быть отделена от структуры (CSS не заменяет семантику).
  • Компоненты должны быть атомарными, легко читаемыми и логически завершёнными.
  • ARIA-атрибуты применяются только при необходимости, не заменяя семантические теги.

Соблюдение семантической разметки в Mithril обеспечивает чистый, поддерживаемый код, улучшает доступность и оптимизирует работу интерфейса с виртуальным DOM.

Оглавление