Semantyczny HTML

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się tworzyć formularze i zbierać dane od użytkowników.

Teraz poznajemy semantyczny HTML.

Tutaj HTML staje się czymś więcej niż tagami.

Staje się znaczeniem.

Bo tak, możesz zbudować wszystko za pomocą div.

Ale możesz też jeść zupę śrubokrętem.

Możliwe?

Może.

Dobry pomysł?

Absolutnie nie.

Czego Się Nauczysz

W tej lekcji nauczysz się:

czym jest semantyczny HTML;
dlaczego elementy semantyczne są ważne;
jak używać header;
jak używać nav;
jak używać main;
jak używać section;
jak używać article;
jak używać aside;
jak używać footer;
jak unikać “div soup”;
jak budować jasną strukturę strony.

Czym Jest Semantyczny HTML?

Semantyczny HTML oznacza używanie elementów, które opisują znaczenie treści.

Na przykład:

<header>
  <h1>Moja Strona</h1>
</header>

To mówi przeglądarce:

To jest obszar nagłówka strony.

Porównaj to z:

<div>
  <h1>Moja Strona</h1>
</div>

div działa.

Ale niczego nie wyjaśnia.

To tylko ogólne pudełko.

Tajemnicze pudełko.

Pudełko bez paszportu.

Dlaczego Semantyczny HTML Ma Znaczenie

Semantyczny HTML pomaga:

przeglądarkom rozumieć stronę;
czytnikom ekranu wyjaśniać stronę;
wyszukiwarkom rozumieć treść;
developerom czytać kod;
przyszłemu tobie nie płakać do kawy.

Dobry HTML nie dotyczy tylko tego, co widać na ekranie.

Dotyczy też struktury.

Strona nie powinna tylko wyglądać poprawnie.

Powinna mieć sens.

Element header

Element header reprezentuje treść wprowadzającą.

Zwykle zawiera:

tytuł strony;
logo;
główny nagłówek;
nawigację;
krótkie wprowadzenie.

Przykład:

<header>
  <h1>InnoMarts Learning Hub</h1>
  <p>Zabawne kursy dla poważnych umiejętności.</p>
</header>

Strona może mieć główny header.

Sekcje i artykuły mogą też mieć własne headery.

HTML jest elastyczny.

Ale nie losowy.

Elastyczny jak joga.

Nie losowy jak błąd drukarki.

Element nav

Element nav reprezentuje linki nawigacyjne.

Przykład:

<nav>
  <a href="index.html">Start</a>
  <a href="courses.html">Kursy</a>
  <a href="contact.html">Kontakt</a>
</nav>

Używaj nav dla ważnych obszarów nawigacji.

Na przykład:

główne menu;
menu kursu;
spis treści;
nawigacja w stopce.

Nie wkładaj każdego pojedynczego linku do nav.

Link w akapicie nie potrzebuje nav.

Semantyczny HTML oznacza ostrożne wybieranie znaczenia.

Nie zakładaj korony każdemu ziemniakowi.

Element main

Element main zawiera główną treść strony.

Przykład:

<main>
  <h1>Kurs HTML</h1>
  <p>Ten kurs uczy HTML krok po kroku.</p>
</main>

Każda strona zwykle powinna mieć tylko jeden main.

Treść w main powinna być unikalna dla tej strony.

Nie powtarzana nawigacja.

Nie stopka.

Nie baner cookies, który pojawia się jak mały legalny duch.

Główna treść to powód, dla którego strona istnieje.

Element section

section grupuje powiązaną treść.

Przykład:

<section>
  <h2>Czego Się Nauczysz</h2>
  <p>Nauczysz się struktury HTML, tekstu, linków, obrazów, formularzy i elementów semantycznych.</p>
</section>

Używaj section, gdy treść ma jasny temat.

Dobra section zwykle ma nagłówek.

Jeśli nie możesz dać jej znaczącego nagłówka, może nie potrzebujesz section.

Może potrzebujesz tylko div.

I to jest w porządku.

Nie każde pudełko potrzebuje filozoficznego celu.

Element article

article reprezentuje niezależną treść.

Przykład:

<article>
  <h2>Dlaczego Uczyć Się HTML?</h2>
  <p>HTML jest fundamentem internetu.</p>
</article>

Używaj article dla treści, która może istnieć samodzielnie.

Przykłady:

posty blogowe;
artykuły newsowe;
lekcje kursu;
komentarze;
karty produktów;
posty forum.

Jeśli treść ma sens sama w sobie, article może być dobrym wyborem.

Article jest jak mały niezależny obywatel twojej strony.

Miejmy nadzieję, że płaci podatki.

Element aside

Element aside jest dla powiązanej treści bocznej.

Przykład:

<aside>
  <h2>Wskazówka</h2>
  <p>Używaj elementów semantycznych, aby HTML był łatwiejszy do zrozumienia.</p>
</aside>

Używaj aside dla:

wskazówek;
notatek bocznych;
powiązanych linków;
bio autora;
dodatkowych informacji;
małych ramek informacyjnych.

Treść w aside jest powiązana.

Ale nie jest główną treścią.

Jak przyjaciel komentujący z boku.

Przydatny.

Czasem zbyt szczery.

Element footer

Element footer reprezentuje końcową część strony lub sekcji.

Przykład:

<footer>
  <p>&copy; 2026 InnoMarts</p>
</footer>

Footer może zawierać:

copyright;
linki kontaktowe;
linki społecznościowe;
dodatkową nawigację;
informacje prawne.

Footer strony zwykle pojawia się na dole.

Ale artykuły i sekcje też mogą mieć footery.

HTML ma warstwy.

Jak lazania.

Ale mniej smaczne.

div Nie Jest Zły

Element div nadal jest przydatny.

div to ogólny kontener.

Przykład:

<div class="card">
  <h2>Podstawy HTML</h2>
  <p>Naucz się fundamentów stron internetowych.</p>
</div>

Używaj div, gdy nie ma lepszego elementu semantycznego.

Nie używaj elementów semantycznych tylko po to, żeby brzmieć profesjonalnie.

Używaj znaczenia, gdy istnieje znaczenie.

Używaj div, gdy potrzebujesz neutralnego kontenera.

div nie jest zły.

Ale zbyt wiele div bez znaczenia tworzy div soup.

A nikt nie zamawiał tej zupy.

Zła Struktura: Div Soup

To działa, ale nie ma znaczenia:

<div>
  <div>
    <h1>Moja Strona</h1>
  </div>

  <div>
    <div>Start</div>
    <div>Kursy</div>
    <div>Kontakt</div>
  </div>

  <div>
    <h2>Witaj</h2>
    <p>To jest moja strona.</p>
  </div>

  <div>
    <p>Copyright 2026</p>
  </div>
</div>

Przeglądarka może to pokazać.

Ale struktura jest niejasna.

Wszystko jest tylko div.

Jak podpisywanie każdego narzędzia w skrzynce jako “rzecz”.

Technicznie prawda.

Całkowicie bezużyteczne.

Lepsza Struktura Semantyczna

Oto lepsza wersja:

<header>
  <h1>Moja Strona</h1>

  <nav>
    <a href="index.html">Start</a>
    <a href="courses.html">Kursy</a>
    <a href="contact.html">Kontakt</a>
  </nav>
</header>

<main>
  <section>
    <h2>Witaj</h2>
    <p>To jest moja strona.</p>
  </section>
</main>

<footer>
  <p>Copyright 2026</p>
</footer>

To jest dużo jaśniejsze.

Przeglądarka rozumie to lepiej.

Developerzy rozumieją to lepiej.

Przyszły ty rozumie to lepiej.

Przyszły ty dziękuje.

Prawdopodobnie zmęczonym wzrokiem.

Stwórz Semantyczną Stronę

Stwórz plik:

touch semantic.html

Dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ćwiczenie Semantycznego HTML</title>
</head>
<body>
  <header>
    <h1>Moja Strona do Nauki</h1>

    <nav>
      <a href="index.html">Start</a>
      <a href="courses.html">Kursy</a>
      <a href="contact.html">Kontakt</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>O Tej Stronie</h2>
      <p>Ta strona pomaga mi ćwiczyć HTML i budować lepsze strony.</p>
    </section>

    <section>
      <h2>Najnowsze Lekcje</h2>

      <article>
        <h3>Podstawy HTML</h3>
        <p>Naucz się podstawowej struktury dokumentu HTML.</p>
      </article>

      <article>
        <h3>Formularze</h3>
        <p>Naucz się, jak użytkownicy mogą wysyłać informacje przez formularze.</p>
      </article>
    </section>

    <aside>
      <h2>Wskazówka</h2>
      <p>Używaj elementów semantycznych, gdy opisują cel treści.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Moja Strona do Nauki</p>
  </footer>
</body>
</html>

Otwórz ją w przeglądarce.

Może wyglądać prosto.

To dobrze.

Semantyczny HTML najpierw dotyczy struktury.

Piękno przyjdzie później z CSS.

Najpierw szkielet.

Potem kurtka.

Częste Błędy

Używanie section do wszystkiego

Nie każdy kontener potrzebuje section.

Źle:

<section>
  <section>
    <section>
      <p>Cześć</p>
    </section>
  </section>
</section>

Używaj section, gdy treść ma jasny temat.

Używanie article dla losowych bloków

Nie każda karta jest article.

Używaj article, gdy treść może istnieć samodzielnie.

Post blogowy?

Tak.

Losowy wrapper layoutu?

Nie.

Zapominanie main

Strona zwykle powinna mieć jeden main.

Źle:

<header>...</header>
<section>...</section>
<footer>...</footer>

Lepiej:

<header>...</header>
<main>
  <section>...</section>
</main>
<footer>...</footer>

Element main pomaga wskazać centralną treść.

Praktyka

Stwórz stronę:

homepage.html

Powinna zawierać:

header;
nav;
main;
co najmniej dwa elementy section;
co najmniej jeden article;
jeden aside;
footer;
nagłówki w poprawnej kolejności;
znaczącą treść.

Bez CSS.

Bez JavaScriptu.

Tylko semantyczny HTML.

Mini Wyzwanie

Stwórz strukturę strony kursu.

Powinna zawierać:

header strony;
menu nawigacyjne;
główne wprowadzenie kursu;
section dla listy lekcji;
article dla podglądu każdej lekcji;
aside ze wskazówką do nauki;
footer z copyright.

Używaj elementów semantycznych ostrożnie.

Bez div soup.

Szanujemy zupę.

Ale nie w HTML.

Podsumowanie

Dzisiaj nauczyłeś się, że:

semantyczny HTML nadaje znaczenie strukturze strony;
header reprezentuje treść wprowadzającą;
nav reprezentuje nawigację;
main zawiera główną treść strony;
section grupuje powiązaną treść;
article reprezentuje niezależną treść;
aside zawiera powiązane informacje boczne;
footer reprezentuje treść końcową;
div jest przydatny, gdy żaden semantyczny element nie pasuje;
struktura semantyczna pomaga dostępności, SEO i utrzymaniu kodu.

Semantyczny HTML sprawia, że strona jest łatwiejsza do zrozumienia.

Dla przeglądarek.

Dla użytkowników.

Dla developerów.

I dla przyszłego ciebie, który ma już wystarczająco problemów.

Następna Lekcja

W następnej lekcji zbudujemy finalny projekt HTML.

Bez paniki.

Po prostu wszystko, czego się nauczyłeś, razem jak mała webowa orkiestra.