Łapka LogoŁapka Infa
🌐
INF.03

Struktura pliku i Semantyka

Zrozum szkielet HTML. Dlaczego header to nie to samo co head i po co nam semantyka na egzaminie.

Podstawy HTML5: Struktura i Semantyka

Na egzaminie INF.03 wszystko zaczyna się od pliku .html. Nawet jeśli masz napisać niesamowity skrypt w PHP albo JS, musisz to gdzieś wyświetlić. CKE bardzo rygorystycznie podchodzi do tzw. znaczników semantycznych.

Co to znaczy "semantyczny"?

Semantyczny to taki, który "niesie ze sobą znaczenie". Zamiast budować całą stronę z nijakich bloków <div>, HTML5 wprowadził tagi, które z góry mówią przeglądarce (i egzaminatorowi!), do czego służą.

  • <header> – Nagłówek strony lub sekcji (nie mylić z <head>!).
  • <nav> – Nawigacja (menu).
  • <main> – Główna treść strony.
  • <section> – Tematyczna sekcja.
  • <article> – Niezależny artykuł (np. wpis na blogu).
  • <footer> – Stopka strony.
  • <aside> – Panel boczny (często z reklamami lub dodatkowymi linkami).

Ciekawostka: Wyszukiwarki takie jak Google oraz czytniki ekranu dla osób niewidomych używają tagów semantycznych, aby "zrozumieć" Twoją stronę. Użycie <nav> zamiast <div id="menu"> sprawia, że strona jest dostępna i profesjonalna. Właśnie dlatego punktują to na egzaminie zawodowym.

Typowy szkielet HTML5 na egzamin

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Egzamin INF.03</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Witaj na mojej stronie</h1>
    </header>
    
    <nav>
        <a href="index.html">Strona główna</a>
        <a href="kontakt.html">Kontakt</a>
    </nav>
    
    <main>
        <section>
            <h2>O nas</h2>
            <p>Jesteśmy firmą tworzącą strony WWW.</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2026 Egzaminowany</p>
    </footer>
</body>
</html>

Pułapki egzaminacyjne 🪤

  1. Brak <!DOCTYPE html> – to podstawa. Bez tego przeglądarka wejdzie w tzw. tryb quirks mode i strona może wyglądać na zepsutą (co grozi utratą punktów za CSS).
  2. Mylenie <head> z <header> – <head> to mózg strony (tam podpinasz CSS, JS, ustawiasz kodowanie). Użytkownik nie widzi zawartości <head>. Z kolei <header> to widoczny baner z logo i tytułem na górze strony.
  3. Brak polskiego języka – autor arkusza często wprost pisze: Zadeklaruj język polski dla witryny. Robisz to atrybutem <html lang="pl">.

Zrozumienie tej struktury to jak wylanie solidnych fundamentów. Dopiero na tym oprzemy CSS i logikę!