Elementy blokowe w HTML

1. Czym są elementy blokowe?

• Element blokowy to taki, który:
  • zajmuje całą szerokość rodzica (domyślnie display: block),
  • zaczyna się od nowej linii,
  • może zawierać w sobie inne elementy blokowe i liniowe,
  • buduje strukturę strony.

2. Uniwersalny kontener – <div>

Opis:

• <div> to uniwersalny blokowy pojemnik.
• Sam nie ma znaczenia semantycznego → używany do grupowania treści.
• Często stosowany z CSS i JavaScriptem.

Przykład:

3. Semantyczne elementy blokowe HTML5

W HTML5 wprowadzono semantyczne znaczniki, które zastępują nadmierne używanie <div>. Pomagają one SEO, dostępności i czytelności kodu.

3.1. <header>

• Definiuje nagłówek strony lub sekcji.
• Zawiera zazwyczaj logo, tytuł, menu.

3.2. <nav>

• Sekcja nawigacyjna strony.
• Zawiera odnośniki do innych części witryny.

3.3. <main>

• Główna zawartość strony.
• Powinna być tylko jedna na stronę.

3.4. <section>

• Określa logiczną sekcję treści (np. dział artykułów, część strony).

3.5. <article>

• Niezależna, samodzielna część treści (np. wpis blogowy, artykuł prasowy).

3.6. <aside>

• Dodatkowa treść powiązana z główną zawartością (np. reklamy, panel boczny, ciekawostki).

3.7. <footer>

• Dolna część strony lub sekcji.
• Zawiera prawa autorskie, linki do polityki prywatności, kontakt.

4. Struktura strony z semantycznymi blokami

Przykład użycia wszystkich kluczowych elementów: