Основні семантичні теги

1.1 Тег <header>

Семантичні теги HTML5 допомагають розробникам створювати більш структуровані та легко читані документи, покращуючи при цьому доступність і SEO (пошукову оптимізацію). Ці теги надають більш чіткий опис структури вебсторінки та її вмісту. Нижче ми детально розглянемо основні семантичні теги.

Тег <header> використовується для представлення заголовка вмісту або розділу. Цей елемент зазвичай містить вступну інформацію, навігаційні посилання, логотипи, заголовки та інші елементи, пов'язані з верхньою частиною контенту.

Приклад використання:

    
      <header>
        <h1>Website Title</h1>
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>
    
  

Основні особливості:

1. Розміщення: тег <header> може бути використаний як для всього документа, так і для окремих розділів, таких як <article> або <section>.
2. Вміст: зазвичай містить заголовки, логотипи, навігаційні елементи, та інші вступні елементи.

1.2 Тег <footer>

Тег <footer> використовується для представлення нижньої частини вмісту або розділу. Цей елемент зазвичай містить інформацію про автора, посилання на пов'язані документи, політику конфіденційності, контактну інформацію та інші елементи, пов'язані з нижньою частиною контенту.

Приклад використання:

    
      <footer>
        <p>&copy; 2024 My Website</p>
        <nav>
          <ul>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
          </ul>
        </nav>
      </footer>
    
  

Основні особливості:

1. Розміщення: тег <footer> може бути використаний як для всього документа, так і для окремих розділів, таких як <article> або <section>.
2. Вміст: зазвичай містить інформацію про автора, юридичну інформацію, навігаційні посилання та інші завершальні елементи.

1.3 Тег <article>

Тег <article> використовується для представлення незалежного, самостійного блоку вмісту, який можна розповсюджувати і використовувати повторно. Це може бути блог-пост, новинна стаття, коментар, користувацький пост тощо.

Приклад використання:

    
      <article>
        <header>
          <h2>Blog Post Title</h2>
          <p>Published on July 6, 2024</p>
        </header>
        <p>This is the content of the blog post. It can include text, images, and other media.</p>
        <footer>
          <p>Author: John Doe</p>
        </footer>
      </article>
    
  

Основні особливості:

1. Самостійність: тег <article> використовується для вмісту, який може бути незалежно використаний і поширений.
2. Структура: зазвичай містить заголовок (<header>), основний контент і завершальну частину (<footer>).

Застосування:

• Статті
• Блог-пости
• Новини
• Коментарі

Переваги:

• Позначає незалежні фрагменти вмісту
• Допомагає пошуковим системам і іншим сервісам ідентифікувати і перевикористовувати контент

1.4 Тег <section>

Тег <section> використовується для визначення тематично пов'язаних груп вмісту. Це можуть бути розділи, глави або інші великі частини контенту. На відміну від <div>, який використовується для стилізації та групування без семантичного значення, <section> має чітке семантичне значення.

Приклад використання:

    
      <section>
        <header>
          <h2>About Us</h2>
        </header>
        <p>This section provides information about our company and its history.</p>
      </section>
    
  

Основні особливості:

1. Тематична групування: тег <section> використовується для розподілу контенту на тематичні групи.
2. Структура: зазвичай містить заголовок (<header>) і основний контент.

Застосування:

• Розділи всередині статті
• Тематично пов'язані групи контенту
• Частини сторінки, які можуть бути виділені логічно

Переваги:

• Покращує структуру і читабельність документа
• Допомагає пошуковим системам краще розуміти і індексувати контент