Семантический HTML в LibArea

Семантический означает «относящийся к смыслу». Написание семантического HTML означает использование элементов HTML для структурирования содержимого на основе смысла каждого элемента, а не его внешнего вида.

Пример, где мы используем <div> и <span> — два элемента без семантического значения.

<div>
    <span>Three words</span>
    <div>
        <a>one word</a>
        <a>one word</a>
        <a>one word</a>
        <a>one word</a>
    </div>
</div>
<div>
    <div>
        <div>five words</div>
    </div>
    <div>
        <div>three words</div>
        <div>forty-six words</div>
        <div>forty-four words</div>
    </div>
    <div>
        <div>seven words</div>
        <div>sixty-eight words</div>
        <div>forty-four words</div>
    </div>
</div>
<div>
    <span>five words</span>
</div>

Давайте перепишем этот код с использованием семантических элементов:

<header>
    <h1>Three words</h1>
    <nav>
        <a>one word</a>
        <a>one word</a>
        <a>one word</a>
        <a>one word</a>
    </nav>
</header>
<main>
    <header>
        <h1>five words</h1>
    </header>
    <section>
        <h2>three words</h2>
        <p>forty-six words</p>
        <p>forty-four words</p>
    </section>
    <section>
        <h2>seven words</h2>
        <p>sixty-eight words</p>
        <p>forty-four words</p>
    </section>
</main>
<footer>
    <p>five words</p>
</footer>

Подобный пример часто приводят в документации.

Глянул структуру кода в LibArea. Возможно нам стоит во фронте сделать разметку более строгой и более простой?

Использование семантических элементов повышает доступность, а использование несемантических элементов снижает доступность. HTML обычно доступен по умолчанию.