Які є принципи семантичної верстки?

Повне пояснення

Що це і навіщо Семантична верстка – застосування тегів, що описують структуру і зміст сторінки. Це підвищує зрозумілість коду для розробників, пошукових систем і інструментів доступності.

Ключові принципи, терміни, інваріанти

• Використання семантичних тегів: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
• Відокремлення контенту від стилів: CSS застосовується через класи/ID, а не через інлайнові атрибути.
• Доступність: ARIA‑атрибути доповнюють семантику, коли потрібна додаткова інформація.

Як це працює (життєвий цикл, алгоритм) Браузер парсить HTML, створює DOM‑дерево. Семантичні теги формують логічну структуру, що полегшує рендеринг і інтерпретацію контенту пошуковими роботами.

Практика і реалізація (React/Next.js приклади)

export default function Page() {
  return (
    <main>
      <article>
        <h1>Заголовок</h1>
        <p>Текст статті.</p>
      </article>
    </main>
  );
}

Тестування (Jest, Testing Library)

• Перевірка наявності семантичних елементів: screen.getByRole('article').
• Валідація доступності через axe‑jest.

Оптимізація продуктивності

• Мінімізація кількості вкладених тегів.
• Використання React.lazy для розділення коду, коли статичний контент великий.

Accessibility (ARIA)

• Додаємо aria-label до <nav> для опису навігації.
• Використовуємо <main> як основний контент, щоб скриншотні інструменти знали його роль.

Безпека та валідація

• Уникаємо innerHTML без очищення.
• Використовуємо CSP для обмеження джерел контенту.

Типові помилки й edge cases

• Використання <div> замість семантичного тегу.
• Дублювання ролей (наприклад, дві <nav> без різних aria-label).

Cheatsheet + можливі follow‑up питання

• Коротка таблиця тегів і їх ролей.
• Питання: «Як семантична верстка впливає на SEO?»; «Чому важливо розділяти контент і стиль?"