Struktura dokumentu HTML5

Praca indywidualna – 4–6 stron A4

O czym jest to opracowanie?

📘 Struktura dokumentu HTML5

Opracowanie dotyczy prawidłowej struktury dokumentu HTML5 – fundamentu każdej strony internetowej. HTML5 wprowadził wiele semantycznych elementów (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>), które nadają znaczenie treści i poprawiają dostępność oraz SEO. Praca powinna wyjaśnić znaczenie DOCTYPE, strukturę elementów <head> i <body>, oraz pokazać praktyczne zastosowanie semantyki HTML5 w budowie nowoczesnej strony.

Dlaczego warto to znać?

Poprawna struktura HTML5 jest podstawą web developmentu:

Fundament technologii webowych – HTML to pierwszy język, którego uczy się każdy web developer
Dostępność (a11y) – semantyczne elementy pomagają czytnikom ekranu
SEO – wyszukiwarki lepiej rozumieją strukturę treści
Standardy W3C – poprawny HTML to profesjonalizm
Egzaminy zawodowe – podstawowy temat na INF.03/INF.04

Cel opracowania

Zrozumieć rolę DOCTYPE i strukturę dokumentu HTML5
Poznać elementy sekcji <head> i ich znaczenie
Opanować semantyczne elementy HTML5 i ich zastosowanie
Rozróżnić elementy blokowe od liniowych
Stworzyć kompletny, walidujący się dokument HTML5

Zakres obowiązkowy (MUST HAVE)

W pracy muszą znaleźć się następujące elementy:

Podstawowa struktura dokumentu

DOCTYPE – deklaracja <!DOCTYPE html> i jej znaczenie
Element <html> – atrybut lang dla dostępności
Element <head> – metadane dokumentu
Element <body> – widoczna treść strony

Zawartość sekcji head

<meta charset> – kodowanie znaków (UTF-8)
<meta viewport> – responsywność na urządzeniach mobilnych
<title> – tytuł strony (wymagany)
<meta description> – opis dla wyszukiwarek
<link> – arkusze stylów, favicon

Semantyczne elementy HTML5

<header> – nagłówek strony lub sekcji
<nav> – nawigacja
<main> – główna treść (tylko jeden na stronie)
<article> – samodzielna treść
<section> – sekcja tematyczna
<aside> – treść poboczna
<footer> – stopka

Wymagane przykłady kodu

<!DOCTYPE html>
<html lang="pl">
<head>
    <!-- Kodowanie znaków - ZAWSZE na początku -->
    <meta charset="UTF-8">

    <!-- Viewport dla responsywności -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Tytuł strony - WYMAGANY -->
    <title>Moja strona - Nazwa firmy</title>

    <!-- Meta description dla SEO -->
    <meta name="description" content="Opis strony dla wyszukiwarek, max 160 znaków.">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Arkusz stylów -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Nazwa strony</h1>
        <nav>
            <ul>
                <li><a href="/">Strona główna</a></li>
                <li><a href="/o-nas">O nas</a></li>
                <li><a href="/kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Tytuł artykułu</h2>
            <p>Treść główna artykułu...</p>

            <section>
                <h3>Podsekcja artykułu</h3>
                <p>Treść podsekcji...</p>
            </section>
        </article>

        <aside>
            <h3>Powiązane tematy</h3>
            <ul>
                <li><a href="#">Temat 1</a></li>
                <li><a href="#">Temat 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 Nazwa firmy. Wszelkie prawa zastrzeżone.</p>
    </footer>
</body>
</html>

<head>
    <!-- 1. Kodowanie - zawsze jako pierwszy element -->
    <meta charset="UTF-8">

    <!-- 2. Viewport - responsywność -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 3. Tytuł - jedyny WYMAGANY element w head -->
    <title>Strona główna | MojaFirma</title>

    <!-- 4. SEO meta tagi -->
    <meta name="description" content="Krótki opis strony (150-160 znaków)">
    <meta name="keywords" content="słowa, kluczowe, oddzielone, przecinkami">
    <meta name="author" content="Jan Kowalski">
    <meta name="robots" content="index, follow">

    <!-- 5. Open Graph dla social media -->
    <meta property="og:title" content="Tytuł dla Facebooka">
    <meta property="og:description" content="Opis dla social media">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/">

    <!-- 6. Favicon i ikony -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- 7. Preconnect dla wydajności -->
    <link rel="preconnect" href="https://fonts.googleapis.com">

    <!-- 8. Arkusze stylów -->
    <link rel="stylesheet" href="css/style.css">

    <!-- 9. Skrypty (opcjonalnie w head z defer) -->
    <script src="js/app.js" defer></script>
</head>

<!-- ZŁE - brak semantyki (div soup) -->
<div class="header">
    <div class="logo">Logo</div>
    <div class="menu">Menu</div>
</div>
<div class="content">
    <div class="article">
        <div class="title">Tytuł</div>
        <div class="text">Treść...</div>
    </div>
    <div class="sidebar">Sidebar</div>
</div>
<div class="footer">Stopka</div>

<!-- DOBRE - semantyczne elementy HTML5 -->
<header>
    <img src="logo.png" alt="Logo firmy">
    <nav>
        <a href="/">Start</a>
        <a href="/about">O nas</a>
    </nav>
</header>
<main>
    <article>
        <h1>Tytuł artykułu</h1>
        <p>Treść artykułu...</p>
    </article>
    <aside>
        <h2>Powiązane</h2>
    </aside>
</main>
<footer>
    <p>&copy; 2024 Firma</p>
</footer>

Zakres rozszerzony (NICE TO HAVE)

Dla osób chcących pogłębić temat:

Microdata i Schema.org – dane strukturalne dla wyszukiwarek
Open Graph Protocol – meta tagi dla social media
Twitter Cards – specjalne meta tagi dla Twittera
Walidacja HTML – W3C Validator
Outline algorithm – hierarchia nagłówków
Web Components – <template>, <slot>

Proponowana struktura pracy

Wstęp – ewolucja HTML do wersji 5
DOCTYPE – historia i znaczenie deklaracji
Sekcja head – metadane i ich rola
Sekcja body – struktura treści
Elementy semantyczne – header, main, footer, nav, article, section, aside
Porównanie – semantyka vs “div soup”
Walidacja – narzędzia do sprawdzania poprawności
Wnioski – dobre praktyki

Pytania kontrolne

Autor pracy powinien potrafić odpowiedzieć na pytania:

Czym różni się <!DOCTYPE html> w HTML5 od doctype w starszych wersjach?
Dlaczego atrybut lang w elemencie <html> jest ważny?
Po co potrzebny jest meta tag viewport?
Czym różni się <article> od <section>?
Ile elementów <main> może być na stronie?
Dlaczego warto używać semantycznych elementów zamiast <div>?
Co oznacza “div soup” i dlaczego jest to antywzorzec?
Jak hierarchia nagłówków (h1-h6) wpływa na dostępność?

Najczęstsze błędy

Zasoby do nauki

MDN: HTML5 Dokumentacja HTML5 na Mozilla Developer Network

W3C HTML Validator Oficjalny walidator W3C do sprawdzania poprawności HTML

HTML5 Doctor Artykuły o semantycznych elementach HTML5

Schema.org Dane strukturalne dla wyszukiwarek