SandboxOne

~/nauka programowania od podstaw

Piaskownica

~/podstawy/html-od-zera.md

HTML od zera: semantyczna struktura Twojej pierwszej strony

Marta KowalczykMarta Kowalczyk 6 min czytania akt.
8,8/10274 ocen
Ekran z kodem HTML i CSS w ciemnym motywie edytora
Ekran z kodem HTML i CSS w ciemnym motywie edytora.

HTML nie jest językiem programowania, ale bez niego nie powstanie żadna strona. To szkielet, na którym CSS rozwiesza wygląd, a JavaScript dokleja zachowanie. W tym przewodniku zbudujesz od zera poprawny, semantyczny dokument i zrozumiesz, dlaczego wybór znacznika ma znaczenie.

Czym właściwie jest HTML

HTML, czyli HyperText Markup Language, to język znaczników. Nie wydaje komputerowi poleceń, tylko opisuje, czym jest dany fragment treści: nagłówkiem, akapitem, listą, linkiem czy obrazem. Przeglądarka czyta ten opis i na jego podstawie buduje drzewo dokumentu, tak zwany DOM.

Każdy znacznik ma zwykle część otwierającą i zamykającą, na przykład <p> i </p>. Między nimi znajduje się treść. Znaczniki mogą mieć atrybuty, które doprecyzowują ich działanie – link potrzebuje atrybutu href, obraz atrybutów src i alt.

Najważniejsza zmiana w myśleniu: HTML nie służy do tego, żeby coś wyglądało na duże albo pogrubione. Od wyglądu jest CSS. HTML mówi, jakie znaczenie ma treść, i to właśnie nazywamy semantyką.

Warto też wiedzieć, że HTML stale się rozwija, ale bardzo ostrożnie. Znaczniki, których nauczysz się dziś, będą działać także za dziesięć lat, bo przeglądarki dbają o zgodność wsteczną. To jedna z niewielu dziedzin programowania, w której wiedza praktycznie się nie starzeje. Dlatego czas poświęcony na solidne podstawy HTML zwraca się przez całą karierę – niezależnie od tego, czy później wybierzesz React, Vue, czy zupełnie inną technologię.

Najlepszym źródłem wiedzy o znacznikach jest dokumentacja MDN Web Docs, dostępna częściowo także po polsku. Przy każdym elemencie znajdziesz tam opis, listę atrybutów i przykłady, które możesz od razu przetestować.

Szkielet dokumentu krok po kroku

Każda strona zaczyna się od tego samego szkieletu. Utwórz plik index.html, wklej poniższy kod i otwórz go w przeglądarce:

index.htmlHTML
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moja pierwsza strona</title>
</head>
<body>
  <header>
    <h1>Cześć, jestem Ola</h1>
  </header>
  <main>
    <p>Uczę się tworzyć strony internetowe.</p>
  </main>
</body>
</html>

Deklaracja <!DOCTYPE html> informuje przeglądarkę, że ma do czynienia z nowoczesnym HTML. Atrybut lang="pl" pomaga czytnikom ekranu wybrać polską wymowę, a wyszukiwarkom – rozpoznać język. Znacznik meta charset gwarantuje poprawne wyświetlanie polskich znaków, a meta viewport sprawia, że strona nie będzie pomniejszona na telefonie.

Sekcja <head> zawiera informacje o dokumencie, których nie widać na stronie: tytuł karty, opis, odnośniki do stylów. Wszystko, co ma zobaczyć użytkownik, trafia do <body>.

Laptop z kolorowym kodem w edytorze w ciemnym pomieszczeniu
Dobrze sformatowany HTML czyta się jak spis treści strony.

Znaczniki semantyczne, które warto znać

Zamiast budować całą stronę z anonimowych bloków <div>, użyj znaczników, które opisują rolę fragmentu. Czytnik ekranu pozwala wtedy osobie niewidomej przeskoczyć od razu do nawigacji albo treści głównej.

ZnacznikDo czego służyIle razy na stronie
<header>nagłówek strony lub sekcji, zwykle z logowiele
<nav>główne bloki nawigacjikilka
<main>unikalna, główna treść stronyjeden
<article>samodzielna treść, np. wpis lub karta produktuwiele
<section>tematyczna część dokumentu z nagłówkiemwiele
<footer>stopka strony lub sekcjiwiele

Równie ważna jest hierarchia nagłówków. Na stronie powinien być jeden <h1> z głównym tematem, pod nim <h2> dla rozdziałów i <h3> dla podrozdziałów. Nie przeskakuj poziomów tylko dlatego, że mniejszy nagłówek „lepiej wygląda” – rozmiar ustawisz w CSS.

Linki, obrazy i listy w praktyce

Treść strony składa się głównie z akapitów, list, linków i obrazów. Oto fragment sekcji „O mnie”, który łączy wszystkie te elementy:

o-mnie.htmlHTML
<section id="o-mnie">
  <h2>O mnie</h2>
  <img src="ola.jpg" alt="Ola przy biurku z laptopem"
       width="480" height="320">
  <p>Mieszkam w Krakowie i uczę się front-endu.</p>
  <ul>
    <li>HTML i CSS</li>
    <li>Podstawy JavaScriptu</li>
  </ul>
  <a href="https://github.com/">Zobacz moje projekty</a>
</section>

Atrybut alt opisuje obraz osobom, które go nie widzą, oraz wyświetla się, gdy plik się nie wczyta. Pisz go tak, jakbyś opisywał zdjęcie przez telefon: krótko i konkretnie. Jeśli obraz jest czysto dekoracyjny, zostaw pusty atrybut alt="". Atrybuty width i height rezerwują miejsce, dzięki czemu strona nie „skacze” podczas ładowania.

Tekst linku powinien mówić, dokąd prowadzi. „Kliknij tutaj” nic nie znaczy dla osoby przeglądającej listę linków czytnikiem ekranu; „zobacz moje projekty na GitHubie” – już tak.

Dłonie piszące na czarnej klawiaturze
Znaczniki warto wpisywać ręcznie, zanim zaczniesz korzystać z podpowiedzi edytora.

Formularze: pierwszy kontakt z użytkownikiem

Formularz to miejsce, w którym strona przestaje być tylko do czytania. Nawet prosty formularz kontaktowy wymaga kilku przemyślanych elementów. Każde pole powinno mieć etykietę <label> połączoną z nim atrybutem for. Kliknięcie etykiety przenosi wtedy kursor do pola, a czytnik ekranu odczytuje jego nazwę.

Wybieraj właściwe typy pól. type="email" na telefonie wyświetla klawiaturę z małpą, a type="tel" – klawiaturę numeryczną. Atrybut required uruchamia wbudowaną walidację przeglądarki, zanim napiszesz choćby linijkę JavaScriptu. Pamiętaj tylko, że walidacja w przeglądarce to wygoda dla użytkownika, a nie zabezpieczenie – dane i tak trzeba sprawdzić po stronie serwera.

Na koniec zadbaj o przycisk. Zamiast napisu „Wyślij” użyj konkretnego „Wyślij wiadomość” albo „Zapisz się na listę”. Taki drobiazg zmniejsza niepewność i zwiększa liczbę osób, które kończą wypełnianie formularza.

Sprawdzanie poprawności i typowe błędy

Przeglądarki są bardzo wyrozumiałe i wyświetlą nawet mocno uszkodzony HTML. To wygodne, ale zdradliwe: błąd, którego nie widać dziś, wyjdzie przy stylowaniu albo w czytniku ekranu. Dlatego po każdej większej zmianie sprawdź dokument w walidatorze W3C.

  • Każdy otwarty znacznik jest zamknięty, a zagnieżdżenia się nie krzyżują.
  • Na stronie jest dokładnie jeden <h1> i jeden <main>.
  • Każdy obraz ma atrybut alt, a każdy formularz – etykiety <label>.
  • Identyfikatory id nie powtarzają się w dokumencie.
  • Linki mają opisowy tekst, a przyciski są znacznikami <button>, nie <div>.

Ostatni punkt jest częstym grzechem. Element <button> za darmo obsługuje klawiaturę, fokus i czytniki ekranu. Klikalny <div> wymaga dopisania tego wszystkiego ręcznie – i zwykle ktoś o tym zapomina.

Najczęstsze pytania

Czy HTML to język programowania?

Nie. HTML to język znaczników, który opisuje strukturę treści. Nie ma w nim zmiennych, warunków ani pętli. Mimo to jego dobra znajomość jest fundamentem pracy każdego front-end developera.

Czy muszę uczyć się HTML, skoro istnieją kreatory stron?

Jeśli chcesz programować, tak. Kreatory generują HTML za Ciebie, ale gdy coś nie działa albo trzeba poprawić dostępność, bez zrozumienia kodu jesteś bezradny.

Jaki edytor wybrać do pisania HTML?

Wystarczy darmowy edytor kodu, na przykład VS Code. Ma podświetlanie składni, podpowiedzi znaczników i podgląd na żywo po zainstalowaniu rozszerzenia. Możesz też ćwiczyć w naszej piaskownicy online.

htmlsemantykadostępnośćstart
Wróć do archiwum

// czytaj dalej