Семантичний HTML та структура сторінки

До цього моменту ви навчилися створювати елементи на веб-сторінці. Тепер покращимо структурування та сприйняття вашого контенту.

Що таке семантичний HTML?

Семантичний HTML означає використання елементів, які чітко описують призначення вашого контенту. Замість використання загальних контейнерів, таких як <div>, застосовуйте змістовні теги, наприклад:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

Чому це важливо

• Допомагає браузерам і розробникам розуміти структуру сторінки;
• Покращує доступність (екранні читачі залежать від цього);
• Дозволяє пошуковим системам краще інтерпретувати ваш контент.

Поширені семантичні елементи

<header>

Відображає верхню частину сторінки або розділу (логотип, заголовок, навігація).

<header>
  <h1>My Website</h1>
</header>

<nav>

Визначає навігаційні посилання.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Групує пов’язаний вміст.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Позначає самостійний вміст (наприклад, блог-пост).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Визначає нижню частину сторінки.

<footer>
  <p>&copy; My Website</p>
</footer>

Як це виглядає разом