Pierwsza własna strona często zaczyna się od kilku linijek kodu, ale szybko pojawiają się pytania: które znaczniki wybrać, gdzie umieścić tekst i dlaczego jedna konstrukcja jest lepsza od innej? W tym materiale porządkuję podstawy HTML, pokazuję budowę dokumentu, najważniejsze elementy, zasady semantyki, formularze oraz błędy, które potrafią utrudnić dalszą naukę frontendu.
Solidne podstawy HTML pozwalają budować czytelne i dostępne strony
- HTML opisuje strukturę dokumentu, a nie jego wygląd.
- Elementy semantyczne pomagają przeglądarkom, wyszukiwarkom i technologiom asystującym zrozumieć treść.
- Poprawne zagnieżdżanie znaczników ogranicza błędy i ułatwia pracę z CSS oraz JavaScriptem.
- Atrybuty dostarczają dodatkowych informacji, na przykład adresu odnośnika, tekstu alternatywnego lub typu pola formularza.
- Najlepsza nauka polega na budowaniu małych stron i regularnym sprawdzaniu kodu.
Od czego zacząć naukę podstaw HTML
HTML, czyli HyperText Markup Language, jest językiem znaczników służącym do opisywania zawartości strony. Nie programuje zachowania aplikacji tak jak JavaScript i nie odpowiada bezpośrednio za wygląd tak jak CSS. Jego zadaniem jest określenie, czym jest dany fragment treści: nagłówkiem, akapitem, listą, obrazem, formularzem albo nawigacją.
Najłatwiej wyobrazić sobie stronę jak dokument z logiczną strukturą. HTML tworzy szkielet, CSS nadaje mu wygląd, a JavaScript dodaje interakcje. Ten podział nie jest sztywny w każdym projekcie, ale na początku nauki bardzo pomaga uniknąć chaosu.
W praktyce kod HTML zapisuje się w plikach z rozszerzeniem .html. Do rozpoczęcia ćwiczeń wystarczy edytor tekstu i przeglądarka. Nie potrzebujesz płatnego programu ani rozbudowanego środowiska, choć edytor z podpowiedziami, na przykład Visual Studio Code, przyspiesza pracę.
Element, znacznik i atrybut
Podstawową jednostką HTML jest element. Zwykle składa się ze znacznika otwierającego, treści i znacznika zamykającego. W zapisie Tekst i
Atrybut rozszerza działanie elementu. Przykładowo odnośnik potrzebuje informacji, dokąd prowadzi, a obraz powinien mieć opis alternatywny. Atrybuty zapisuje się wewnątrz znacznika otwierającego, na przykład alt="Opis zdjęcia".
Jak zbudowany jest element HTML
W HTML bardzo ważna jest hierarchia. Element może znajdować się wewnątrz innego elementu, ale znaczniki muszą być zamykane w odpowiedniej kolejności. Błędne zagnieżdżenie czasem nadal wyświetli się w przeglądarce, jednak później może powodować trudne do znalezienia problemy z układem.
Nauka HTML
Pierwszy akapit artykułu.
W tym przykładzie element i element są dziećmi elementu . Taki zapis jest czytelny zarówno dla człowieka, jak i narzędzi analizujących dokument. Sam przyzwyczaiłem się do wcięć od pierwszych ćwiczeń, bo czytelny kod szybciej się poprawia.
Elementy z treścią i elementy puste
Większość znaczników obejmuje treść, ale istnieją też elementy bez znacznika zamykającego. Należą do nich między innymi . Nie zawierają one tekstu między otwarciem a zamknięciem, ponieważ ich działanie wynika z atrybutów.
Nie warto dodawać ukośnika na końcu każdego znacznika tylko z przyzwyczajenia do XHTML. W nowoczesnym HTML ważniejsze jest poprawne użycie elementu i jego atrybutów niż mechaniczne zapisywanie konstrukcji w stylu
Najważniejsze atrybuty
| Atrybut | Zastosowanie | Przykład |
|---|---|---|
class |
Łączy element ze stylami CSS lub skryptem. | class="menu" |
id |
Oznacza konkretny, unikalny element. | id="kontakt" |
href |
Określa cel odnośnika. | href="kontakt.html" |
src |
Wskazuje źródło obrazu, skryptu lub innego zasobu. | src="logo.png" |
alt |
Opisuje obraz, gdy nie można go zobaczyć. | alt="Logo firmy" |
Najczęstszy błąd początkujących polega na traktowaniu class i id jako dwóch nazw dla tego samego. Klasa może wystąpić wiele razy, natomiast identyfikator powinien być unikalny w obrębie dokumentu. To rozróżnienie ma znaczenie przy stylowaniu i obsłudze elementów przez JavaScript.
Semantyczna struktura strony robi różnicę
Semantyczny HTML mówi nie tylko, jak coś wygląda, lecz także jaką pełni funkcję. Dlatego nagłówka nie powinno się tworzyć za pomocą dużego tekstu w elemencie Przeglądarki, wyszukiwarki i czytniki ekranu korzystają z tej struktury. Według aktualnego standardu HTML rozwijanego przez WHATWG elementy takie jak Nie każdy fragment trzeba opakować w Dokument powinien mieć logiczną hierarchię nagłówków. Najczęściej jeden Do list używaj Każdy początkujący powinien rozumieć podstawowy szablon dokumentu, nawet jeśli później korzysta z generatorów lub frameworków. Poniższy przykład pokazuje elementy potrzebne do poprawnego rozpoczęcia pracy. Uczę się tworzyć strony internetowe. Deklaracja Element Obraz dodaje się za pomocą elementu Nie wpisuj do Formularz łączy element Atrybut Przeczytaj również: Semantyczny HTML - Jak pisać kod, który ma sens? Tabela ma sens, gdy przedstawiasz relacje między danymi, na przykład porównanie parametrów lub harmonogram. Do budowania kolumn strony używa się CSS, a nie tabel. W prostej tabeli warto rozróżnić komórki nagłówkowe Najlepsze efekty daje budowanie małych, zamkniętych projektów. Zamiast kopiować długie przykłady, przygotuj stronę wizytówkę, artykuł z obrazem, prosty formularz kontaktowy i tabelę z danymi. Każdy projekt powinien mieć konkretny cel i kilka elementów do samodzielnego napisania. Nie przywiązuj zbyt dużej wagi do zapamiętania wszystkich znaczników. Ważniejsze jest rozumienie różnicy między treścią, strukturą, wyglądem i zachowaniem. Gdy nie masz pewności, wybierz element, który najlepiej opisuje znaczenie treści, a potem sprawdź dokument w walidatorze HTML. Podstawy HTML nie kończą się na znajomości kilkunastu tagów. Realną przewagę daje umiejętność budowania dokumentu, który jest czytelny, dostępny, responsywny i łatwy do rozwijania. To właśnie ten fundament sprawia, że późniejsza nauka CSS, JavaScriptu oraz frameworków frontendowych staje się znacznie prostsza., lub kolejnego poziomu.
, , i opisują role poszczególnych fragmentów dokumentu.Elementy, które warto znać od początku
grupuje główne odnośniki nawigacyjne. zawiera najważniejszą treść dokumentu. wydziela tematyczny fragment strony. oznacza samodzielną treść, na przykład wpis blogowy. przeznaczony jest na treści poboczne. zamyka stronę albo wybraną sekcję.. Jeżeli element nie ma własnego tematu ani nagłówka, zwykły Nagłówki, listy i odnośniki
opisuje główny temat strony, a niższe poziomy porządkują kolejne części. Nie wybieraj nagłówka ze względu na jego rozmiar, ponieważ wygląd można zmienić w CSS., a nie jako zwykły tekst udający przycisk. To poprawia obsługę klawiaturą i ułatwia nawigację osobom korzystającym z technologii asystujących.Minimalny dokument, który warto umieć napisać
Moja pierwsza strona
</code> informuje przeglądarkę, że dokument korzysta z nowoczesnego trybu HTML. Atrybut lang="pl" określa język strony, a meta charset zabezpiecza między innymi polskie znaki. Z kolei ustawienie viewport jest potrzebne, aby strona poprawnie skalowała się na telefonach.Formularze, obrazy i tabele bez typowych wpadek
Obrazy potrzebują kontekstu
alt. Opis powinien wyjaśniać znaczenie grafiki, a nie tylko powtarzać nazwę pliku. Dla obrazu dekoracyjnego pusty atrybut alt="" jest zwykle lepszy niż przypadkowy opis.
alt tekstu typu „obrazek przedstawiający”, ponieważ czytnik ekranu sam informuje użytkownika, że ma do czynienia z grafiką. Liczy się informacja potrzebna do zrozumienia treści.Formularze powinny być zrozumiałe
z polami takimi jak , i . Każde pole powinno mieć opisany cel. Najprościej osiągnąć to przez połączenie z atrybutem id pola.type="email" pozwala przeglądarce zastosować odpowiedni rodzaj walidacji i klawiatury na urządzeniach mobilnych. required oznacza pole obowiązkowe, ale nie zastępuje walidacji po stronie serwera. To ważne ograniczenie: dane z przeglądarki zawsze trzeba traktować jako niepewne.Tabele służą do danych, nie do układu
od zwykłych komórek .
Co ćwiczyć, żeby szybko przejść od znaczników do stron
