Masz przed sobą stronę z tekstem, nagłówkiem i przyciskiem, ale nie wiesz, co opisuje jej kod? HTML porządkuje treść strony, choć sam nie odpowiada za cały jej wygląd ani wszystkie reakcje na kliknięcia. Ta różnica szybko staje się praktyczna, gdy zaczynasz poprawiać interfejs albo rozumieć kod frontendu.
HTML nadaje treści strony strukturę i znaczenie
- HTML opisuje elementy, takie jak nagłówki, akapity, linki i formularze.
- CSS ustawia wygląd, a JavaScript dodaje zachowania i interakcje.
- Znaczniki semantyczne pomagają przeglądarkom i technologiom asystującym rozpoznać rolę treści.
- HTML5 to potoczna nazwa; współczesny standard rozwija się jako HTML Living Standard.
HTML opisuje, czym są elementy strony
Wyobraź sobie artykuł, w którym wszystkie słowa mają ten sam wygląd i nie wiadomo, co jest tytułem, linkiem ani zwykłym akapitem. HTML rozwiązuje ten problem, oznaczając role fragmentów treści za pomocą elementów i znaczników. Przeglądarka odczytuje tę strukturę i na jej podstawie buduje stronę.
Znacznik to zapis w nawiasach ostrych, na przykład Tekst akapitu. Element obejmuje zwykle znacznik otwierający, treść i znacznik zamykający:
HTML rozwija skrót HyperText Markup Language, czyli język znaczników hipertekstowych. Jak wyjaśnia MDN, tworzy podstawową strukturę treści, a inne technologie zwykle odpowiadają za jej prezentację i zachowanie. Uważam, że najlepiej myśleć o HTML jak o planie pomieszczeń: nie wybiera koloru ścian, ale mówi, gdzie jest wejście i które drzwi prowadzą dalej.
HTML, CSS i JavaScript rozwiązują różne problemy
Przycisk może wyglądać atrakcyjnie, a mimo to nie działać poprawnie. Dzieje się tak, gdy warstwa wizualna przesłania rolę elementu albo brakuje kodu obsługującego działanie. Rozdzielenie zadań tych trzech technologii ułatwia znalezienie przyczyny.
| Technologia | Za co odpowiada | Przykład |
|---|---|---|
| HTML | Struktura i znaczenie treści | Nagłówek, formularz, przycisk wysyłający dane |
| CSS | Wygląd i układ | Kolor przycisku, odstępy, rozmieszczenie kolumn |
| JavaScript | Zmiany i reakcje interfejsu | Pokazanie komunikatu po kliknięciu |
W typowym formularzu HTML określa pola i przycisk, CSS nadaje im styl, a JavaScript może sprawdzić wpisane dane i wyświetlić informację bez przeładowania strony. Sam HTML potrafi jednak obsłużyć część podstawowych zachowań formularza, więc nie każda interakcja wymaga skryptu.
Znaczniki semantyczne pomagają ludziom i narzędziom
Możesz zbudować stronę z samych elementów Różnica jest widoczna w prostym przykładzie: nawigację zapisaną jako Dla dostępności liczy się też język dokumentu. Atrybut Nazwa „HTML5” wciąż pojawia się w kursach i opisach ofert, ale może sugerować coś mylącego: że istnieje zestaw umiejętności ograniczony do jednej, zamrożonej wersji. Współczesna specyfikacja jest rozwijana jako HTML Living Standard, czyli standard aktualizowany w miarę rozwoju platformy internetowej. WHATWG HTML Living Standard wyjaśnia, że „HTML5” bywa używane jako potoczna nazwa nowoczesnych technologii internetowych, choć nie wszystkie z nich należą do samego HTML. W praktyce ogłoszenie o znajomości HTML5 zwykle oznacza znajomość współczesnego HTML, a nie osobnego języka, który trzeba odróżnić od aktualnej specyfikacji. Gdy coś na stronie nie działa, zacznij od ustalenia, czy problem dotyczy struktury, wyglądu czy zachowania. Ta szybka diagnoza ogranicza błądzenie po plikach i wskazuje, której warstwy szukać. Jeśli tekst jest obecny, ale ma niewłaściwy kolor, zmiana HTML raczej nie pomoże. Jeśli natomiast zamiast przycisku pojawia się niezrozumiały fragment albo nagłówki tworzą przypadkową hierarchię, zacznij od struktury dokumentu. HTML to język znaczników, który porządkuje treść i opisuje funkcje elementów strony. CSS odpowiada za prezentację, a JavaScript za wiele dodatkowych interakcji, choć przeglądarka potrafi też wykonać część działań opisanych bezpośrednio w HTML. Przy nauce frontendu zacznij od rozpoznawania elementów i ich znaczenia, zamiast zapamiętywać same nazwy tagów. Gdy kod jasno opisuje strukturę, łatwiej go rozwijać, stylować i udostępniać osobom korzystającym z różnych urządzeń oraz technologii asystujących., , i opisują funkcję części strony. Tę informację mogą wykorzystać przeglądarki, czytniki ekranu i narzędzia analizujące dokument.
łatwiej odróżnić od przypadkowego zestawu linków w kontenerze lang w elemencie pomaga technologiom asystującym dobrać wymowę, a widoczny tekst linku powinien mówić, dokąd prowadzi. Samo „kliknij tutaj” nie daje takiej wskazówki, gdy link jest odczytywany poza otaczającym akapitem.HTML5 nie oznacza już osobnej, zamkniętej wersji
Po czym poznać, czy problem leży w HTML
Sytuacja Prawdopodobny obszar Co sprawdzić Nie ma nagłówka albo linku HTML lub źródło treści Czy element znajduje się w dokumencie i ma poprawny zapis Element jest widoczny, ale źle wygląda CSS Reguły stylów, klasy i układ Przycisk wygląda poprawnie, lecz kliknięcie nic nie robi JavaScript albo logika formularza Czy element ma właściwe działanie i czy skrypt obsługuje zdarzenie Czytnik ekranu nie rozpoznaje roli fragmentu Semantyka HTML Czy użyto elementu odpowiadającego funkcji treści Dobrze napisany HTML jest czytelny także poza ekranem
