Znaczniki HTML: co to jest?
Znaczniki HTML, nazywane też tagami, to podstawowe elementy języka HTML, które nadają fragmentom treści określone znaczenie i strukturę. Każdy znacznik ujęty jest w nawiasy kątowe, na przykład <p> albo <h1>, i informuje przeglądarkę, jak wyświetlić dany fragment strony: jako nagłówek, akapit, obraz, link czy listę.
Przeglądarka interpretuje kod HTML właśnie na podstawie znaczników, dlatego ich poprawne stosowanie wpływa nie tylko na wygląd strony, ale też na jej czytelność dla robotów wyszukiwarek i dostępność dla użytkowników korzystających z czytników ekranu.
Jak zbudowany jest znacznik HTML?
Większość znaczników HTML występuje w parze: znacznik otwierający, na przykład <p>, oraz znacznik zamykający z ukośnikiem, na przykład </p>. Wszystko, co znajduje się pomiędzy nimi, stanowi zawartość danego elementu i jest przez przeglądarkę traktowane jako jedna, spójna całość.
Niektóre znaczniki są samodomykające i nie wymagają osobnego zamknięcia, na przykład <img> czy <br>. Znaczniki mogą też przyjmować atrybuty, czyli dodatkowe informacje zapisane wewnątrz nawiasu otwierającego, jak href w znaczniku <a> czy src w znaczniku <img>. Jeden znacznik może mieć kilka atrybutów jednocześnie, oddzielonych spacją.
Znaczniki HTML zagnieżdżaj w kolejności ich otwarcia. Element otwarty jako ostatni powinien zostać zamknięty jako pierwszy, inaczej struktura dokumentu przestaje być poprawna i przeglądarka może wyświetlić stronę niezgodnie z zamierzeniem.
Podstawowe znaczniki HTML
Poniższa tabela zawiera najczęściej wykorzystywane podstawowe znaczniki HTML i ich zastosowanie przy budowie strony internetowej. To zestaw, od którego zwykle zaczyna się naukę tego języka.
| Znacznik | Zastosowanie |
|---|---|
| <html> | Element główny, obejmuje całą zawartość dokumentu |
| <head> | Sekcja z metadanymi strony, tytułem i odnośnikami do stylów |
| <body> | Główna, widoczna treść strony |
| <h1> do <h6> | Nagłówki tworzące hierarchię treści |
| <p> | Akapit tekstu |
| <a> | Link do innej strony lub sekcji |
| <img> | Obraz osadzony na stronie |
| <ul> / <li> | Lista wypunktowana i jej elementy |
Znajomość podstawowych znaczników HTML przydaje się nie tylko programistom, ale też każdemu, kto zleca budowę profesjonalnej strony internetowej i chce rozumieć, z czego składa się kod jego witryny. Ułatwia to lepszą komunikację z zespołem odpowiedzialnym za stronę internetową firmy, na przykład przy zgłaszaniu poprawek czy ustalaniu zakresu prac.
Znaczniki blokowe a liniowe
Znaczniki HTML dzielą się też na blokowe i liniowe, w zależności od tego, jak zajmują przestrzeń na stronie. Ten podział wpływa bezpośrednio na sposób, w jaki elementy układają się względem siebie w kodzie.
Znaczniki blokowe, na przykład <div> czy <p>, zajmują całą dostępną szerokość i zaczynają się od nowej linii. Znaczniki liniowe, na przykład <span> czy <a>, zajmują tylko tyle miejsca, ile potrzebuje ich zawartość, i nie przerywają wiersza.
Znaczniki semantyczne HTML5
Znaczniki semantyczne to grupa tagów wprowadzona wraz z HTML5, które opisują znaczenie fragmentu treści, a nie tylko jego wygląd. Dzięki nim przeglądarka, wyszukiwarka i technologie wspomagające lepiej rozumieją, czym jest dana część strony, zamiast domyślać się tego wyłącznie z kontekstu.
- <header> oznacza nagłówek strony lub sekcji, zwykle z logo i nawigacją.
- <nav> grupuje główne linki nawigacyjne witryny.
- <main> wskazuje główną, unikalną treść dokumentu.
- <article> opisuje samodzielny fragment treści, na przykład wpis blogowy.
- <section> grupuje tematycznie powiązane elementy wewnątrz dokumentu.
- <footer> oznacza stopkę strony lub sekcji.
Stosowanie znaczników semantycznych zamiast uniwersalnego <div> do wszystkiego ułatwia zrozumienie struktury strony przez roboty wyszukiwarek, co ma znaczenie zarówno dla klasycznego SEO, jak i dla widoczności treści w odpowiedziach generowanych przez AI.
Ile jest znaczników HTML?
Specyfikacja HTML definiuje kilkadziesiąt znaczników, część to elementy strukturalne, część semantyczne, a część uznano za przestarzałe. Pełną, aktualną listę prowadzi dokumentacja MDN.
Czym różnią się znaczniki od atrybutów?
Znacznik określa typ elementu, na przykład akapit czy obraz, a atrybut dopisuje mu dodatkową informację, na przykład adres linku albo źródło obrazu. Atrybuty zapisuje się wewnątrz znacznika otwierającego.
Czy w HTML można zapisywać znaki specjalne?
Tak, do zapisu znaków, które mają specjalne znaczenie w kodzie, na przykład nawiasu kątowego, służą encje HTML, czyli krótkie sekwencje zaczynające się od znaku ampersand.
Czy znaczniki HTML trzeba pisać wielkimi literami?
Nie, standard HTML5 nie wymaga wielkich liter. Przyjętą praktyką jest zapis małymi literami, co ułatwia spójność kodu w większych projektach.
Czym różnią się znaczniki semantyczne od zwykłych?
Zwykły znacznik, na przykład <div>, nie mówi nic o zawartości. Znacznik semantyczny, na przykład <article> czy <nav>, dodatkowo opisuje rolę danego fragmentu treści.