Link w HTML dodasz najczęściej wtedy, gdy chcesz umożliwić użytkownikowi przejście do innej podstrony, sekcji na tej samej stronie albo do zasobu (np. PDF) jednym kliknięciem.
Podstawy znacznika <a> w HTML
Link do strony w HTML tworzysz znacznikiem <a> oraz atrybutem href, który określa adres docelowy. Minimalny, działający przykład to: <a href=”https://example.com”>Odwiedź stronę</a> albo, w obrębie serwisu, krócej: <a href=”/kontakt”>Kontakt</a>. Jeśli element ma prowadzić do innej strony lub sekcji, używaj <a>, a nie <button>, bo <button> jest przeznaczony do akcji (np. wysłanie formularza). Po kliknięciu przeglądarka wysyła żądanie HTTP/HTTPS pod adres z href i ładuje dokument albo przewija do fragmentu, gdy używasz #.
Tekst zakotwiczenia (anchor text) powinien jasno opisywać cel, ponieważ użytkownik często skanuje stronę po linkach, zamiast czytać wszystko po kolei. Zamiast „kliknij tutaj” lepiej stosować konkretne etykiety, np. „Pobierz cennik PDF” albo „Zobacz ofertę usług”. Obraz również może być linkiem, jeśli umieścisz <img> wewnątrz <a>, np. <a href=”/”><img src=”logo.png” alt=”Strona główna”></a> — w takim układzie alt ma kluczowe znaczenie dla dostępności. Nie używaj <a> bez href jako „udawanego linku”, bo nie jest to link nawigacyjny i może być mylący dla czytników ekranu.
Adresy URL: linki względne i bezwzględne
Adres URL w linku może być względny albo bezwzględny, a ten wybór przesądza o tym, czy odnośnik zadziała poprawnie w różnych środowiskach i przy różnych lokalizacjach plików. Bezwzględny link zawiera protokół i domenę, np. https://pl.wikipedia.org/wiki/HTML, dlatego przydaje się zwłaszcza przy przejściach poza własną stronę albo wtedy, gdy treść ma działać identycznie w różnych środowiskach. Link względny odwołuje się do bieżącej lokalizacji pliku, np. <a href=”kontakt.html”>Kontakt</a>, co bywa wygodne w statycznych stronach po zmianie domeny. Dla linków zewnętrznych podawaj pełny adres z protokołem (https://…), bo wpisanie „www…” bez „https://” może zostać potraktowane jak ścieżka względna i zepsuć link.
- Stosuj link względny, gdy odnośnik ma działać w obrębie projektu i nie zależy od domeny (np. kontakt.html).
- Wybierz ścieżkę od katalogu głównego (np. /blog/), jeśli chcesz liczyć adres od root domeny, niezależnie od aktualnej podstrony.
- Sięgnij po link bezwzględny (np. https://example.com/…), gdy kierujesz poza serwis albo potrzebujesz identycznego działania w różnych środowiskach.
W poruszaniu się po katalogach przydają się skróty „../” (katalog wyżej) oraz „./” (bieżący katalog), np. z „/produkty/index.html” link „../kontakt.html” prowadzi do „/kontakt.html”. Warto też pamiętać, że „/oferta” i „/oferta/” mogą być odmiennie interpretowane przez serwer, więc dla stabilności dobrze jest trzymać się jednej konwencji w linkach i obsłużyć przekierowania (301) po stronie serwera. Jeżeli link zawiera spacje lub polskie znaki, URL powinien być poprawnie zakodowany (np. spacja jako %20), a w praktyce lepiej korzystać z przyjaznych adresów (slugów) typu „/oferta/cennik” zamiast „/oferta/cennik 2026”. Gdy adres zwróci 404, użytkownik zobaczy błąd, dlatego po publikacji rozsądnie jest testować linki i w razie zmian aktualizować je do finalnych URL, zamiast zostawiać łańcuchy przekierowań.
Najważniejsze atrybuty linków i ich zastosowanie
Do najważniejszych atrybutów linków w HTML należą te, które sterują sposobem otwarcia (target), bezpieczeństwem (rel), opisem użyteczności (title) oraz zachowaniem przy pobieraniu (download). Jeśli chcesz otworzyć link w nowej karcie, użyj target=”_blank”, np. <a href=”https://example.com” target=”_blank”>…</a>. Jeśli stosujesz target=”_blank”, dodaj rel=”noopener noreferrer”, aby ograniczyć ryzyko tabnabbingu i odciąć dostęp do window.opener. W praktyce target=”_blank” ma najwięcej sensu przy linkach zewnętrznych, gdy zależy Ci na tym, by użytkownik nie „zgubił” Twojej strony.
Atrybut rel pozwala także sygnalizować charakter linku: dla reklam i afiliacji stosuj rel=”sponsored”, a dla treści generowanych przez użytkowników rel=”ugc”; rel=”nofollow” informuje roboty, by nie przekazywać „mocy” SEO (traktowane jako wskazówka). Title może wyświetlić dymek po najechaniu, jednak nie powinien być jedynym nośnikiem ważnej informacji, bo bywa odczytywany niekonsekwentnie. Jeśli chcesz ograniczyć przekazywanie informacji o stronie źródłowej do witryny docelowej, możesz dodać referrerpolicy, np. <a href=”https://partner.pl” referrerpolicy=”no-referrer”>Partner</a>. Przy plikach przydaje się download (np. <a href=”/pliki/regulamin.pdf” download>Regulamin</a>) oraz opcjonalny type (MIME), np. type=”application/pdf”, aby lepiej ustawić oczekiwania co do formatu.
Linki do kontaktu: mailto, tel, SMS i mapy
Linki kontaktowe w HTML buduje się przez specjalne schematy w atrybucie href, takie jak mailto: (e-mail) oraz tel: (telefon), które po kliknięciu uruchamiają właściwą aplikację. Najprostszy wariant e-maila to np. <a href=”mailto:[email protected]”>Napisz do nas</a>, co otwiera domyślny program pocztowy, choć działanie może się różnić na desktopie i mobile. Da się też dopisać temat i treść wiadomości jako parametry, np. mailto:[email protected]?subject=Wycena&body=Poproszę%20o%20wycenę. Gdy przekazujesz temat lub treść w mailto:, pamiętaj o kodowaniu znaków w URL (np. spacja jako %20), bo bez tego parametry potrafią się „rozjechać”.
Do szybkiego wybierania numeru na urządzeniach mobilnych używaj tel:, np. <a href=”tel:+48123456789″>+48 123 456 789</a>, przy czym numer w href zapisuj bez spacji, a w treści możesz go sformatować czytelniej. W przypadku SMS możesz dodać odnośnik w stylu <a href=”sms:+48123456789″>Wyślij SMS</a>. Obsługa parametrów (np. ustawienia treści SMS) zależy od systemu, dlatego warto traktować to jako wygodny skrót, a nie funkcję krytyczną. Jeśli te linki mają działać spójnie, dobrze je przetestować na Android i iOS, bo zachowanie potrafi się różnić.
Link do map najłatwiej podać jako URL wyszukiwania w Google Maps, np. https://www.google.com/maps?q=Warszawa,+ul.+Marsza%C5%82kowska+1, dzięki czemu użytkownik od razu zobaczy wskazaną lokalizację. Alternatywnie sprawdza się link z udostępniania z Map, zwykle krótszy, ale mniej przewidywalny. Jeśli kierujesz do kontaktu w zewnętrznej aplikacji (np. WhatsApp), często stosuje się https://wa.me/48123456789 i w praktyce taki link można otwierać w nowej karcie z target=”_blank” oraz rel=”noopener”. Niezależnie od kanału, dopilnuj jednoznacznych etykiet linków, aby użytkownik od razu wiedział, czy kliknięcie otworzy e-mail, połączenie, SMS czy mapę.
Stylowanie linków dla lepszego UX
Linki pod kątem UX poprawisz przede wszystkim przez zachowanie czytelnych, „linkowych” sygnałów klikalności w każdym stanie. Przeglądarki domyślnie podkreślają odnośniki i zmieniają ich kolor (np. visited), co ułatwia użytkownikom rozpoznanie nawigacji i szybszą orientację w treści. Jeśli w CSS usuwasz podkreślenie, zadbaj o inny wyraźny wyróżnik, np. odpowiedni kontrast, ikonę albo jednoznaczny efekt hover. Najczęstszy błąd w długich artykułach to linki w kolorze zbyt podobnym do zwykłego tekstu albo opieranie się wyłącznie na hover, którego nie ma na urządzeniach dotykowych.
Link powinien być czytelny w stanach :link, :visited, :hover, :active i przede wszystkim :focus, ponieważ bezpośrednio przekłada się to na nawigację z klawiatury. Za dobrą praktykę uchodzi styl focus-visible, np. a:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }, bo pozwala szybko ustalić, gdzie znajduje się fokus, bez sięgania po mysz. Warto też dopilnować kontrastu tekstu linku (zwykle 4.5:1) oraz wygodnego obszaru klikalnego na mobile. Gdy link jest mały (np. ikona), rozszerz go paddingiem, bo praktyczna granica komfortu to ok. 44×44 px. Jeśli zależy Ci na efekcie „przycisku”, możesz ostylować jak button (np. display:inline-block, padding, tło, zaokrąglenie), nie zmieniając semantyki nawigacyjnej.
Dostępność linków i poprawne opisy
Dostępne linki to takie, których cel da się zrozumieć bez kontekstu i które zachowują się przewidywalnie dla klawiatury oraz czytników ekranu. Czytniki ekranu często pokazują listę samych odnośników, dlatego etykieta powinna brzmieć jasno sama w sobie (np. „Sprawdź warunki zwrotu” zamiast „Więcej”). Gdy link otwiera się w nowej karcie, zaznacz to w treści lub w aria-label, bo część użytkowników może odebrać to jako dezorientujące. Jeśli link jest tylko ikoną albo samym symbolem, dodaj aria-label (a nie polegaj na title), bo inaczej narzędzia a11y mogą zgłosić „link bez nazwy”.
Linki powinny być wygodne w obsłudze nie tylko myszą, więc dopilnuj widocznego focus oraz sensownej kolejności tabulacji wynikającej z kolejności HTML w DOM. Nie zastępuj linków „klikanymi divami”, bo tracisz natywną obsługę focus i użytkownicy klawiatury realnie nie są w stanie nawigować. W linkach obrazkowych tekst alternatywny powinien opisywać cel linku, a nie wygląd grafiki (np. dla logo prowadzącego na start lepiej „Strona główna” niż „Logo firmy X”). Jeśli w tekście masz bardzo dużo odnośników, nie upychaj ich w jednym zdaniu, bo pogarsza to czytelność i utrudnia nawigację.
- Stosuj jasne etykiety linków, zrozumiałe bez kontekstu akapitu.
- Dla linków-ikon dodaj aria-label i nie opieraj opisu wyłącznie na title.
- Zadbaj o widoczny focus (np. focus-visible) i logiczną kolejność tabulacji.
- Zwiększ powierzchnię aktywną linków na mobile przez padding i odstępy.
- Sprawdź problemy narzędziami: Lighthouse (Chrome DevTools) oraz axe DevTools.
SEO i semantyka linkowania
SEO i semantyka linkowania w dużej mierze zależą od tego, czy odnośniki jednoznacznie komunikują cel i prowadzą roboty oraz użytkowników do właściwych stron bez zbędnych barier. Anchor text pełni rolę sygnału tematycznego, dlatego powinien nazywać treść docelową (np. „Zasady reklamacji” zamiast ogólników), co ułatwia odczytanie kontekstu także osobom, które „skanują” stronę po samych linkach. Dobrze zaplanowane linkowanie wewnętrzne pomaga robotom dotrzeć do kluczowych podstron i skraca ścieżkę nawigacji, a w praktyce warto dążyć do 2–3 kliknięć od strony głównej. W menu nawigacyjnym trzymaj linki jako nawigację (np. w
