Znacznik HTML (ang. HTML tag, elementy HTML) to podstawowy budulec struktury każdej strony internetowej. Informuje przeglądarkę o tym, jak ma zinterpretować i wyświetlić konkretny fragment tekstu, obrazu czy multimediów.
Dane zawarte w tagach są ważne są zarówno dla użytkowników, jak i dla robotów wyszukiwarek (takich jak Googlebot), które pobierają zawartość witryny, by poprawnie dopasować ją do intencji użytkownika w wynikach wyszukiwania.
Budowa znacznika HTML
Znaczniki HTML składają się ze specjalnego słowa kluczowego umieszczonego między nawiasami ostrymi (< oraz >).
W języku HTML wyróżniamy dwa główne typy znaczników pod kątem konstrukcji.
- Znaczniki podwójne – składają się ze znacznika otwierającego i zamykającego. Znacznik zamykający posiada dodatkowy ukośnik
/zaraz po znaku mniejszości (np.<strong>tekst</strong>). - Znaczniki pojedyncze (samozamykające się) – nie potrzebują znacznika zamykającego, ponieważ nie otaczają tekstu, lecz bezpośrednio osadzają element lub metadane (np.
<img>czy<meta>). W starszych wersjach (XHTML) wymagały ukośnika na końcu (<img />), w HTML5 nie jest on konieczny.
Wielkość liter w nazwach tagów nie ma znaczenia dla przeglądarki (<BODY> zadziała tak samo jak <body>), jednak standardem i dobrą praktyką programistyczną jest stosowanie wyłącznie małych liter.
Atrybuty znaczników
Znaczniki (zarówno pojedyncze, jak i otwierające w parach) mogą zawierać atrybuty, czyli dodatkowe informacje o elemencie. Atrybut składa się z nazwy oraz wartości umieszczonej po znaku równości w cudzysłowie:
<a href="https://daniel-jedrysik.pl/" target="_blank">Kliknij tutaj</a>
<p class="bg-color-rose-800">To jest tekst</p>
<h2 id="header1">A to jest nagłówek</h2>
W powyższych przykładach href, target, class oraz id to atrybuty, a to co jest po znaku równości to ich wartości.
Podział znaczników HTML
Znaczniki obecne w kodzie dokumentu możemy sklasyfikować na kilka sposobów.
Według lokalizacji
- Sekcja
<head>– niewidoczna bezpośrednio dla użytkownika, zawiera metadane, skrypty i style. - Sekcja
<body>– widoczna część strony, zawiera właściwą treść witryny.
Według znaczenia:
- Semantyczne – informują roboty i przeglądarki o funkcji tekstu (np.
<article>,<strong>,<header>). - Niesemantyczne – służą wyłącznie jako kontenery do stylowania, nie niosąc żadnego znaczenia (np.
<div>,<span>).
Według zachowania w układzie strony
- Blokowe – zajmują całą dostępną szerokość ekranu i zaczynają się od nowej linii (np.
<div>,<p>,<h1>). - Liniowe (inline) – zajmują tylko tyle miejsca, ile ich zawartość i nie przerywają linii tekstu (np.
<span>,<strong>,<a>).
Zachowanie w układzie danego elementu można zmienić za pomocą atrybutu style (style="display: block;") lub klasy opisanej w kaskadowych arkuszach styli (CSS).
Podstawowe znaczniki HTML
Oto zestawienie najważniejszych znaczników, z jakich buduje się dokumenty HTML.
<!doctype html>– informuje przeglądarkę, że ma do czynienia z dokumentem w standardzie HTML5.<html>...</html>– główny kontener spinający całą strukturę dokumentu.<head>...</head>– nagłówek dokumentu zawierający metadane, tytuł oraz linki do zewnętrznych zasobów.<body>...</body>– sekcja zawierająca całą zawartość widoczną dla użytkownika na stronie.<title>...</title>– tytuł strony wyświetlany na karcie przeglądarki oraz jako nagłówek w wynikach wyszukiwania<meta>– znacznik opisujący zawartość strony. Może zawierać m.in. description (opis widoczny w Google pod tytułem), kodowanie znaków czy ustawienia responsywności (viewport).<link>– określa relacje z zewnętrznymi plikami, np. podłącza arkusze stylów CSS.<script>...</script>– pozwala na zagnieżdżenie skryptów JavaScript (np. kodów śledzących Google Analytics).<style>...</style>– służy do dopisywania wewnętrznych reguł stylów CSS.<h1>do<h6>– nagłówki strukturalne na stronie.<p>...</p>– standardowy paragraf tekstu.<a>...</a>– hiperłącze (link) kierujące do zasobów wewnętrznych lub zewnętrznych.<img>– osadzenie elementu graficznego na stronie.<strong>...</strong>– semantyczne pogrubienie ważnego fragmentu tekstu.<em>...</em>– semantyczne wyróżnienie tekstu (pochylenie/emfaza).<!-- ... -->– komentarz w kodzie, całkowicie niewidoczny dla użytkownika na ekranie.<div>...</div>– uniwersalny kontener blokowy używany do budowania makiet i układów stron.<span>...</span>– uniwersalny kontener liniowy do manipulacji fragmentem tekstu.<ul>,<ol>,<li>– znaczniki list nieuporządkowanych, uporządkowanych oraz samych elementów listy.<table>,<tr>,<td>,<th>– komplet tagów do budowania tabeli (kolejno: tabela, wiersz, zwykła komórka, komórka nagłówkowa).<form>...</form>– formularz zbierający dane od użytkownika (np. formularz kontaktowy).