div czy znacznik semantyczny? Zadania z poprawiania struktury strony

Strona zbudowana z samych <div> wygląda tak samo jak strona z <header>, <nav> i <main>, ale dla czytnika ekranu, wyszukiwarki i programisty ma zupełnie inną wartość: znaczniki semantyczne mówią, czym jest dany fragment. Zadanie na lekcji: znaleźć w „zupie z divów” te, które powinny być znacznikami semantycznymi, i zostawić zwykłe kontenery tam, gdzie służą tylko do układu.

Scenariusz jest przeznaczony na 45 minut dla klasy znającej podstawy HTML — na przykład po lekcji o semantycznym HTML. Strona jest wymyślona; propozycje wynikają z nazw klas, które w prawdziwej stronie bywają niejednoznaczne, więc wynik programu trzeba przejrzeć.

Przygotowanie stanowisk

Potrzebny jest Python 3 i edytor lub IDLE. Rozpakuj pakiet z sekcji materiałów do osobnego folderu i uruchamiaj skrypty z tego folderu. Program uruchomisz przez Run → Run Module albo poleceniem python start.py, python3 start.py lub py start.py.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• rozpoznać fragmenty, które mają znaczenie semantyczne (nagłówek, nawigacja, treść główna, artykuł, boczna, stopka);
• dobrać znacznik do funkcji fragmentu;
• zostawić div tam, gdzie jest tylko kontenerem do stylowania;
• uzasadnić korzyści: dostępność, SEO, czytelność kodu.

Znaczniki semantyczne

Kiedy div

<div> nie ma znaczenia semantycznego — to kontener. Jest właściwy, gdy służy tylko do grupowania dla stylów lub skryptów (np. „karta” w układzie). Jeśli fragment ma wyraźną funkcję w strukturze strony, użyj znacznika semantycznego.

Dlaczego to ważne

• Dostępność: czytniki ekranu pozwalają przeskakiwać między header, nav, main i footer.
• Wyszukiwarki lepiej rozumieją strukturę strony.
• Czytelność kodu i łatwiejsze utrzymanie.

W programie

HTMLParser zbiera klasy wszystkich elementów div, a słownik PROPOZYCJE zamienia nazwy klas na proponowane znaczniki. W wymyślonej stronie jest siedem div-ów: sześć z nazwami funkcji (nagłówek, menu, główna, artykuł, boczna, stopka) i jeden zwykły kontener („karta”).

Zadania

Zadanie 1. Zliczanie. Policz elementy div na stronie i wypisz ich klasy.

Zadanie 2. Propozycje. Dla każdej klasy wypisz proponowany znacznik albo „bez zmian”.

Zadanie 3. Podsumowanie. Podaj liczbę div-ów do zamiany, listę pozostających i użyte znaczniki semantyczne.

Dla chętnych: dopisz do strony div o klasie komentarze i zdecyduj, czy powinien być znacznikiem semantycznym.

Rozwiązanie i wyniki

from html.parser import HTMLParser

# UWAGA: strona jest wymyslona. Cel: znalezc <div>-y, ktore powinny byc znacznikami semantycznymi.
STRONA = """<div class="naglowek"><div class="menu"><a href="/">Start</a></div></div>
<div class="glowna"><div class="artykul"><h2>Wiadomosc</h2><p>Tresc.</p></div><div class="boczna">Reklama</div></div>
<div class="stopka">Kontakt</div>
<div class="karta">Zwykly kontener</div>"""
PROPOZYCJE = {"naglowek": "header", "menu": "nav", "glowna": "main", "artykul": "article", "boczna": "aside", "stopka": "footer"}


class Zbierz(HTMLParser):
    def __init__(self):
        super().__init__()
        self.divy = []

    def handle_starttag(self, tag, attrs):
        if tag == "div":
            self.divy.append(dict(attrs).get("class", ""))


zbierz = Zbierz()
zbierz.feed(STRONA)

# Zadanie 1: ile jest divow i jakie maja klasy
print("Liczba div:", len(zbierz.divy), "| klasy:", zbierz.divy)

# Zadanie 2: propozycje znacznikow
for klasa in zbierz.divy:
    print(klasa, "->", PROPOZYCJE.get(klasa, "bez zmian (zwykly kontener)"))

# Zadanie 3: podsumowanie
do_zmiany = [k for k in zbierz.divy if k in PROPOZYCJE]
print("Do zamiany na znaczniki semantyczne:", len(do_zmiany), "z", len(zbierz.divy))
print("Pozostaja jako div:", [k for k in zbierz.divy if k not in PROPOZYCJE])
print("Uzyte znaczniki:", sorted(set(PROPOZYCJE[k] for k in do_zmiany)))

Program wypisze:

Liczba div: 7 | klasy: ['naglowek', 'menu', 'glowna', 'artykul', 'boczna', 'stopka', 'karta']
naglowek -> header
menu -> nav
glowna -> main
artykul -> article
boczna -> aside
stopka -> footer
karta -> bez zmian (zwykly kontener)
Do zamiany na znaczniki semantyczne: 6 z 7
Pozostaja jako div: ['karta']
Uzyte znaczniki: ['article', 'aside', 'footer', 'header', 'main', 'nav']

Na stronie jest 7 elementów div; 6 ma klasy odpowiadające funkcjom i powinno zostać zastąpionych znacznikami (header, nav, main, article, aside, footer), a jeden („karta”) zostaje zwykłym kontenerem. Plik rozszerzenie.py liczy sześć znaczników semantycznych użytych w propozycji.

Plik rozszerzenie.py (zadanie dla chętnych) wypisze:

6

Typowe błędy

Pytania kontrolne i punktacja

1. Czym różni się <div> od <main>?
2. Kiedy div jest właściwym wyborem?
3. Jakie korzyści dają znaczniki semantyczne?

Odpowiedzi: <main> oznacza treść główną strony i ma znaczenie semantyczne, a <div> to neutralny kontener. Gdy służy tylko do grupowania w celu stylowania lub skryptów. Lepszą dostępność, zrozumienie struktury przez wyszukiwarki i czytelniejszy kod.

Proponowana punktacja (razem 10 punktów): zadanie 1 — liczba i klasy 2 pkt; zadanie 2 — siedem propozycji 3 pkt; zadanie 3 — podsumowanie 2 pkt; zasady semantyki w pytaniach 3 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet HTML: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to dostępność formularzy, nagłówki i opisy alternatywne. Ten materiał rozwija dział o strukturze stron w kursie HTML w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: MDN: semantyka oraz moduł html.parser. Zobacz też lekcję o dostępnej stronie HTML.