Podstawowe tagi semantyczne

1.1 Tag <header>

Tagi semantyczne HTML5 pomagają developerom tworzyć bardziej ustrukturyzowane i łatwiejsze do czytania dokumenty, poprawiając przy tym dostępność i SEO (optymalizację pod kątem wyszukiwarek). Tagi te dostarczają jaśniejszy opis struktury strony i jej zawartości. Poniżej omówimy szczegółowo podstawowe tagi semantyczne.

Tag <header> używany jest do reprezentowania nagłówka treści lub sekcji. Ten element zazwyczaj zawiera informacje wprowadzające, linki nawigacyjne, logo, nagłówki i inne elementy związane z górną częścią zawartości.

Przykład użycia:

    
      <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>
    
  

Główne cechy:

1. Położenie: tag <header> może być użyty zarówno dla całego dokumentu, jak i dla pojedynczych sekcji, takich jak <article> lub <section>.
2. Zawartość: zazwyczaj zawiera nagłówki, logo, elementy nawigacyjne i inne elementy wprowadzające.

1.2 Tag <footer>

Tag <footer> używany jest do reprezentowania dolnej części treści lub sekcji. Ten element zazwyczaj zawiera informacje o autorze, linki do powiązanych dokumentów, politykę prywatności, dane kontaktowe i inne elementy związane z dolną częścią zawartości.

Przykład użycia:

    
      <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>
    
  

Główne cechy:

1. Położenie: tag <footer> może być użyty zarówno dla całego dokumentu, jak i dla pojedynczych sekcji, takich jak <article> lub <section>.
2. Zawartość: zazwyczaj zawiera informacje o autorze, informacje prawne, linki nawigacyjne i inne końcowe elementy.

1.3 Tag <article>

Tag <article> używany jest do reprezentowania niezależnego, samowystarczalnego bloku treści, który można dystrybuować i wykorzystywać ponownie. Może to być wpis na blogu, artykuł informacyjny, komentarz, post użytkownika itp.

Przykład użycia:

    
      <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>
    
  

Główne cechy:

1. Samowystarczalność: tag <article> używany jest do treści, która może być niezależnie używana i rozpowszechniana.
2. Struktura: zazwyczaj zawiera nagłówek (<header>), główną treść i część końcową (<footer>).

Zastosowanie:

• Artykuły
• Wpisy na blogu
• Wiadomości
• Komentarze

Zalety:

• Oznacza niezależne fragmenty treści
• Pomaga wyszukiwarkom i innym serwisom identyfikować i ponownie wykorzystywać treści

1.4 Tag <section>

Tag <section> używany jest do definiowania tematycznie powiązanych grup treści. Mogą to być rozdziały, sekcje lub inne większe części treści. W przeciwieństwie do <div>, który używany jest do stylizacji i grupowania bez znaczenia semantycznego, <section> ma wyraźne znaczenie semantyczne.

Przykład użycia:

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

Główne cechy:

1. Tematyczne grupowanie: tag <section> używany jest do podziału treści na tematyczne grupy.
2. Struktura: zazwyczaj zawiera nagłówek (<header>) i główną treść.

Zastosowanie:

• Sekcje w artykule
• Tematycznie powiązane grupy treści
• Części strony, które mogą być logicznie wydzielone

Zalety:

• Poprawia strukturę i czytelność dokumentu
• Pomaga wyszukiwarkom lepiej zrozumieć i indeksować treść