Co to jest HTML?
Autor: Redakcja Domeny.ForSale Opublikowano
W skrócie: HTML to język znaczników, który opisuje strukturę i znaczenie treści strony internetowej. Informuje przeglądarkę, które fragmenty są nagłówkami, akapitami, odnośnikami, obrazami czy formularzami. Nie jest językiem programowania: do określania wyglądu strony służy przede wszystkim CSS, a do dodawania zachowań i interakcji często używa się JavaScriptu.
Do czego służy HTML na stronie internetowej?
Skrót HTML pochodzi od angielskiego HyperText Markup Language, czyli hipertekstowego języka znaczników. „Hipertekst” oznacza tekst połączony odnośnikami z innymi dokumentami lub fragmentami treści. „Znaczniki” to zapisane w kodzie oznaczenia, które nadają poszczególnym częściom dokumentu określoną rolę.
Gdy otwierasz stronę, przeglądarka odczytuje HTML i tworzy na jego podstawie strukturę dokumentu. Następnie przedstawia treść na ekranie, uwzględniając również style i działanie skryptów, jeśli zostały dołączone. Użytkownik zwykle widzi wynik tego procesu, a nie sam kod.
Przykładowo strona kawiarni może zawierać nazwę lokalu jako główny nagłówek, opis jako akapit, menu jako listę oraz odnośnik do rezerwacji. HTML określa, czym są te elementy, ale nie musi rozstrzygać, jaki mają kolor ani ile miejsca zajmują na ekranie.
Znaczniki, elementy i atrybuty — jak czytać HTML?
Znacznik to oznaczenie zapisane w nawiasach ostrych, na przykład <p>. Wiele elementów ma znacznik otwierający i zamykający: w zapisie <p>Godziny otwarcia</p> oznaczenia otaczają treść akapitu. Całość, czyli znaczniki wraz z zawartością, tworzy element HTML.
Nie każdy element otacza tekst. Element img, służący do osadzania obrazu, nie ma znacznika zamykającego. Potrzebne informacje, takie jak adres pliku, przekazuje się w jego atrybutach.
Atrybut to dodatkowa informacja umieszczona w znaczniku otwierającym. Atrybut href określa cel odnośnika, src wskazuje źródło obrazu, a lang pozwala zadeklarować język dokumentu lub jego fragmentu. Atrybut alt w obrazie dostarcza tekst alternatywny; jego zawartość zależy od roli grafiki, a dla obrazu wyłącznie dekoracyjnego zwykle pozostaje pusta.
Na początek przydaje się znajomość kilku elementów:
h1–h6— nagłówki kolejnych poziomów;p— akapit tekstu;a— odnośnik, gdy ma atrybuthref;ulili— lista nieuporządkowana i jej pozycje;img— obraz;button— przycisk.
Elementy można umieszczać wewnątrz innych elementów, ale obowiązują przy tym reguły. Lista zawiera pozycje listy, a odnośnik może być częścią akapitu. Przeglądarki próbują naprawiać błędny zapis, dlatego samo poprawne wyświetlenie strony nie dowodzi, że jej HTML jest prawidłowy.
Czym HTML różni się od CSS i JavaScriptu?
Te trzy technologie często współpracują, lecz odpowiadają za różne zadania. CSS, czyli kaskadowe arkusze stylów, opisuje prezentację dokumentu. JavaScript jest językiem programowania, który pozwala między innymi reagować na działania użytkownika i zmieniać zawartość strony.
| Technologia | Główna rola | Przykład w formularzu |
|---|---|---|
| HTML | Struktura i znaczenie | Pole adresu e-mail, etykieta i przycisk |
| CSS | Wygląd i układ | Kolory, odstępy i szerokość pól |
| JavaScript | Logika i zachowanie | Aktualizacja komunikatu bez przeładowania strony |
HTML nie służy do zapisywania algorytmów, pętli ani własnych obliczeń, dlatego nie zalicza się go do języków programowania. Nie oznacza to jednak, że strona bez JavaScriptu musi być nieinteraktywna. Odnośniki działają samodzielnie, a przeglądarka może obsłużyć wysłanie formularza czy podstawowe sprawdzenie wymaganego pola dzięki funkcjom HTML.
Prosta wizytówka może powstać wyłącznie w HTML. CSS pozwoli dopracować jej wygląd, a JavaScript będzie potrzebny dopiero wtedy, gdy planowane zachowanie wykracza poza możliwości samego dokumentu i przeglądarki.
Dlaczego znaczenie elementów jest ważniejsze niż ich wygląd?
Semantyczny HTML oznacza wybieranie elementów zgodnie z ich znaczeniem. Nagłówek powinien być nagłówkiem w kodzie, a nie tylko tekstem powiększonym za pomocą stylów. Podobnie do przejścia na inną stronę służy odnośnik, a do wykonania działania — zwykle przycisk.
To rozróżnienie pomaga technologiom wspomagającym, takim jak czytniki ekranu, poprawnie przedstawiać treść. Osoba korzystająca z takiego narzędzia może na przykład poruszać się między nagłówkami. Jeśli autor jedynie powiększy zwykłe akapity, taka nawigacja nie odzwierciedli widocznego układu strony.
Przycisk utworzony właściwym elementem ma także wbudowaną obsługę klawiatury. Odtworzenie tej samej funkcji na przypadkowym fragmencie tekstu wymaga dodatkowej pracy. Poprawny HTML jest podstawą dostępności, choć sam nie gwarantuje dostępności całej witryny.
Jak zacząć poznawać HTML w praktyce?
Do pierwszych prób wystarczą edytor tekstu i przeglądarka. Dokument HTML zwykle zawiera deklarację typu dokumentu, główny element html, część head z metadanymi oraz body z treścią strony. Metadane opisują dokument: należą do nich między innymi kodowanie znaków i tytuł widoczny na karcie przeglądarki.
Najprostsze ćwiczenie to lokalna strona z krótką wizytówką:
- Utwórz w edytorze plik tekstowy i zapisz go jako
index.html, pilnując, aby nie otrzymał dodatkowego rozszerzenia.txt. - Zbuduj podstawową strukturę dokumentu, a w części
bodydodaj nagłówek, akapit i listę usług. - Otwórz plik w przeglądarce. Po każdej zmianie zapisz go i odśwież widok.
- Użyj opcji „Zbadaj” lub „Zbadaj element”, aby zobaczyć, jak przeglądarka interpretuje strukturę.
Lokalnego pliku nie trzeba publikować ani kupować dla niego domeny. Zacznij od uporządkowania treści bez kolorów i ozdobników — wtedy łatwiej sprawdzisz, czy rozumiesz role elementów, zanim przejdziesz do stylowania.
Zobacz też: Co to jest 2FA?
Przeczytaj także
