Link w HTML dodasz jednym prostym elementem, ale diabeł tkwi w szczegółach: ścieżce do pliku, sposobie otwierania strony i treści widocznej dla użytkownika. Pokażę, jak dodać linki do strony HTML, tworzyć odnośniki do podstron, sekcji, plików i adresów e-mail oraz jak uniknąć błędów, przez które kliknięcie prowadzi donikąd.
Najważniejsze zasady tworzenia linków w HTML
Podstawowy link wymaga tylko dwóch elementów
Najprostszy odnośnik składa się ze znacznika oraz atrybutu href. Pierwszy wyznacza klikalny fragment tekstu, a drugi określa adres, który przeglądarka ma otworzyć.
Przejdź do Bitnova.plNa stronie pojawi się tekst „Przejdź do Bitnova.pl”. Po kliknięciu przeglądarka przejdzie pod adres zapisany w href. Sam tekst między znacznikami powinien być zrozumiały także bez dodatkowego kontekstu.
Co oznaczają poszczególne części kodu
-
rozpoczyna element linku. -
href="..."wskazuje miejsce docelowe. - Tekst pomiędzy znacznikami jest tekstem zakotwiczenia, czyli widocznym opisem odnośnika.
-
zamyka link.
Nie tworzę linków z samego adresu, na przykład „kliknij tutaj”, jeśli mogę opisać cel konkretniej. Formuła „zobacz dokumentację HTML” mówi użytkownikowi znacznie więcej niż ogólne „kliknij tutaj”, a przy okazji jest wygodniejsza dla osób korzystających z czytników ekranu.
Linki do podstron i sekcji tej samej witryny
W przypadku własnej strony nie musisz wpisywać pełnego adresu z protokołem. Jeżeli plik kontakt.html znajduje się w tym samym folderze co bieżąca strona, wystarczy ścieżka względna.
KontaktGdy podstrona znajduje się w folderze oferta, zapis wygląda tak:
Nasze usługiDo przejścia poziom wyżej służą dwie kropki i ukośnik:
Strona głównaŚcieżki względne są wygodne podczas pracy lokalnej i przy przenoszeniu całej witryny na inny serwer. Trzeba jednak pilnować wielkości liter w nazwach plików. Na wielu serwerach Kontakt.html i kontakt.html to dwa różne pliki.
Odnośnik do konkretnego miejsca na stronie
Możesz skierować użytkownika nie tylko do dokumentu, ale też do wybranej sekcji. Najpierw nadaj elementowi unikalny identyfikator za pomocą atrybutu id.
Cennik usług
Przejdź do cennikaZnak # informuje przeglądarkę, że chodzi o fragment bieżącego dokumentu. Taki mechanizm sprawdza się w długich poradnikach, regulaminach i stronach z rozbudowanym menu.
Linki do poczty i numeru telefonu
Specjalne schematy pozwalają uruchomić program pocztowy albo aplikację telefonu. Adres e-mail poprzedź przez mailto:, a numer telefonu przez tel:.
Napisz do nas
ZadzwońNa komputerze link telefoniczny może nie wywołać żadnej widocznej akcji, ale na smartfonie zwykle otworzy aplikację obsługującą połączenia. To drobny element, który potrafi wyraźnie poprawić wygodę korzystania z witryny mobilnej.
Nowa karta, bezpieczeństwo i dostępność
Domyślnie link otwiera stronę w bieżącej karcie. Jeśli chcesz użyć nowej, dodaj target="_blank".
Otwórz stronę w nowej karcie
Nie ustawiam nowej karty automatycznie dla każdego odnośnika. Użytkownik często chce sam zdecydować, czy otworzyć stronę w tym samym miejscu. Nowa karta ma sens głównie przy dokumentach zewnętrznych, narzędziach i stronach, do których odbiorca powinien łatwo wrócić.
Atrybut rel="noopener" ogranicza możliwość wpływania nowo otwartej strony na kartę, z której została uruchomiona. W aktualnych przeglądarkach ustawienie target="_blank" zapewnia już ochronę typu noopener, ale jawne zapisanie atrybutu poprawia czytelność kodu i nie szkodzi kompatybilności.
Jak pisać tekst linku
Tekst odnośnika powinien odpowiadać na pytanie „dokąd przejdę po kliknięciu?”. Lepsze będą poniższe przykłady:
Unikam powtarzania wielu linków o treści „więcej” albo „kliknij tutaj”. Gdy kilka takich odnośników występuje na jednej stronie, trudno rozpoznać ich cel, zwłaszcza w widoku listy linków generowanym przez czytnik ekranu.
Link do pliku, obrazu i pobierania
Odnośnik może prowadzić do dokumentu PDF, arkusza, grafiki lub innego zasobu. Wystarczy wskazać prawidłową ścieżkę w atrybucie href.
Otwórz instrukcję PDFJeśli chcesz zasugerować pobranie pliku, użyj atrybutu download.
Pobierz raportPrzeglądarka nie zawsze potraktuje taki zasób identycznie. Zachowanie zależy między innymi od ustawień użytkownika, nagłówków serwera i tego, czy plik znajduje się w tej samej domenie. Dlatego download nie jest absolutną gwarancją pobrania zewnętrznego pliku.
Przeczytaj również: Twoja strona HTML za darmo? Edytor i hosting w 5 minut!
Obraz jako link
Grafikę również możesz umieścić wewnątrz elementu . Tekst alternatywny alt powinien wtedy opisywać funkcję obrazka, a nie tylko jego wygląd.
Jeżeli obraz prowadzi do artykułu, lepiej użyć opisu w rodzaju „Przeczytaj artykuł o HTML” niż „niebieska ikona”. Dzięki temu link pozostaje zrozumiały także wtedy, gdy grafika się nie załaduje.
Najczęstsze błędy sprawdzisz w kilka minut
Większość problemów z odnośnikami nie wynika ze skomplikowanego HTML, tylko z literówki albo złej ścieżki. Przed publikacją otwieram każdy ważny link i sprawdzam go zarówno na komputerze, jak i na telefonie.
| Problem | Co zobaczy użytkownik | Jak go naprawić |
|---|---|---|
Brak atrybutu href
|
Tekst nie działa jak link | Dodaj prawidłowy adres w href
|
| Zła nazwa pliku | Błąd 404 albo pusta strona | Porównaj ścieżkę z rzeczywistą nazwą pliku |
| Brak cudzysłowu | Przeglądarka może źle odczytać kod | Zapisuj atrybuty jako href="adres"
|
| Nieprawidłowy adres zewnętrzny | Link nie otwiera strony | Sprawdź protokół https:// i literówki |
| Niezamknięty znacznik | Duży fragment tekstu staje się klikalny | Dodaj właściwe zamknięcie |
Typową pułapką jest także wpisanie adresu do elementu zamiast do . Element służy głównie do podłączania zasobów technicznych, takich jak arkusz CSS, natomiast klikalną nawigację tworzy element .
Nie dodawaj też pustych konstrukcji typu href="#", jeśli link nie ma żadnego celu. Taki zapis może przewijać stronę na górę i sprawia wrażenie niedokończonego kodu. Jeżeli element ma uruchamiać akcję, lepszym wyborem bywa przycisk HTML i odpowiednia obsługa JavaScript.
Dobry link prowadzi jasno i bez niespodzianek
Najprostszy poprawny zapis to opis linku. Potem dochodzą decyzje zależne od sytuacji: ścieżka względna dla podstron, identyfikator dla sekcji, mailto: dla poczty, download dla plików i target="_blank" tylko tam, gdzie nowa karta faktycznie pomaga.
Moim zdaniem najwięcej jakości daje nie liczba linków, lecz ich czytelność, poprawne działanie i sensowne rozmieszczenie. Gdy każdy odnośnik jasno opisuje cel, a ścieżki są sprawdzone, strona staje się łatwiejsza w obsłudze dla wszystkich użytkowników.
