Gdy chcesz połączyć stronę z innym dokumentem, plikiem albo konkretnym miejscem na tej samej stronie, potrzebujesz zaledwie jednego elementu HTML. Pokażę, jak zrobić hiperłącze w HTML, wyjaśnię działanie atrybutu href oraz omówię linki zewnętrzne, wewnętrzne, adresy e-mail, pliki i najczęstsze błędy.
Najważniejsze informacje o linkach HTML w jednym miejscu
Podstawowe hiperłącze tworzy element a
Najprostszy link w HTML składa się z elementu , atrybutu href i tekstu widocznego dla użytkownika. W praktyce wygląda to tak:
Odwiedź stronęPrzeglądarka wyświetli tekst „Odwiedź stronę” jako klikalny odnośnik. Atrybut href określa miejsce, do którego użytkownik trafi po kliknięciu, natomiast treść między znacznikami otwierającym i zamykającym jest jego etykietą.
To ważne rozróżnienie, bo sam adres zapisany w href nie musi być widoczny na stronie. Mogę więc użyć krótkiego, czytelnego tekstu zamiast długiego adresu, parametrów i znaków, których użytkownik nie potrzebuje znać.
Jak wygląda składnia linku
TEKST LINKUWarto pamiętać o obu znacznikach i . Jeśli zabraknie znacznika zamykającego albo adres trafi poza cudzysłów, przeglądarka może zinterpretować kod inaczej, niż zakładamy. W mojej praktyce właśnie takie drobne pomyłki są częstszą przyczyną niedziałających odnośników niż sam HTML.
Link zewnętrzny i wewnętrzny działają podobnie
Hiperłącze do innej domeny powinno zawierać pełny adres rozpoczynający się od https://. Przykład odnośnika zewnętrznego wygląda następująco:
Dokumentacja HTMLJeżeli odwołujesz się do podstrony w tym samym serwisie, możesz zastosować ścieżkę względną. Jest krótsza i nie uzależnia kodu od konkretnej domeny:
Poradnik HTMLW przypadku pliku znajdującego się w tym samym katalogu wystarczy podać jego nazwę:
KontaktŚcieżka /poradniki/html.html zaczyna się od katalogu głównego witryny, a kontakt.html wskazuje plik w bieżącym katalogu. Nie mieszaj przypadkowo ukośników ani wielkości liter, bo na wielu serwerach Kontakt.html i kontakt.html są różnymi nazwami plików.
| Rodzaj ścieżki | Przykład | Zastosowanie |
|---|---|---|
| Pełny adres | https://przyklad.pl |
Link do innej domeny |
| Ścieżka od katalogu głównego | /blog/wpis.html |
Podstrona w tym samym serwisie |
| Ścieżka względna | kontakt.html |
Plik w bieżącym katalogu |
| Ścieżka do katalogu nadrzędnego | ../index.html |
Plik znajdujący się poziom wyżej |
Jak utworzyć link do sekcji, pliku lub kontaktu
Element nie służy wyłącznie do przechodzenia między stronami. Można wykorzystać go także do przewijania dokumentu do wybranego fragmentu, pobierania pliku czy uruchamiania kontaktu e-mail.
Odnośnik do miejsca na tej samej stronie
Najpierw nadaję wybranemu elementowi unikalny atrybut id, a potem odwołuję się do niego za pomocą znaku #:
Przejdź do kontaktu
Kontakt
Po kliknięciu przeglądarka przewinie stronę do nagłówka z identyfikatorem kontakt. Wartość id musi być unikalna w obrębie dokumentu, dlatego nie należy przypisywać tego samego identyfikatora kilku elementom.
Link do pobrania pliku
Do dokumentu PDF, zdjęcia lub archiwum można prowadzić zwykłym odnośnikiem. Atrybut download sugeruje przeglądarce pobranie pliku zamiast otwierania go w nowej karcie:
Pobierz instrukcję PDFNie każda przeglądarka i konfiguracja serwera potraktuje ten atrybut identycznie, szczególnie gdy plik znajduje się na innej domenie. Z tego powodu download jest wskazówką, a nie absolutną gwarancją pobrania.
Przeczytaj również: Jak zmienić kolor czcionki w HTML? CSS to klucz do profesjonalizmu!
Adres e-mail i numer telefonu
Do rozpoczęcia wiadomości e-mail służy schemat mailto:, a do połączenia telefonicznego tel::
Napisz do nas
Zadzwoń pod numer 123 456 789Na komputerze pierwszy link zwykle otworzy domyślny program pocztowy, a na smartfonie drugi może uruchomić aplikację telefonu. Nie umieszczaj w adresie e-mail poufnych danych, ponieważ zawartość takich odnośników bywa widoczna w kodzie strony i może zostać odczytana przez automaty.
Kiedy otwierać link w nowej karcie
Do otwarcia odnośnika w nowej karcie służy target="_blank":
Otwórz stronę w nowej karcie
Stosuję ten wariant głównie wtedy, gdy użytkownik powinien zachować aktualny formularz, koszyk albo niedokończony proces. Przy zwykłej nawigacji wewnątrz serwisu lepiej pozostawić domyślne otwieranie w tej samej karcie, bo jest bardziej przewidywalne.
Atrybut rel="noopener noreferrer" ogranicza dostęp nowo otwartej stronie do kontekstu strony źródłowej. Współczesne przeglądarki zapewniają część tego zabezpieczenia automatycznie, ale jawne zapisanie rel nadal poprawia czytelność kodu i zgodność ze starszymi środowiskami.
Nie dodawaj target="_blank" do każdego linku. Nowa karta może dezorientować użytkownika, zwłaszcza gdy nie wie, że kliknięcie zmieniło kontekst. Jeśli odnośnik otwiera się poza bieżącym serwisem, dobrze zaznaczyć to w tekście lub etykiecie, na przykład „Dokumentacja HTML, nowa karta”.
Najczęstsze błędy przy tworzeniu hiperłączy
Sam zapis linku jest prosty, ale kilka błędów regularnie powoduje problemy z nawigacją. Najpierw sprawdzam adres, potem tekst odnośnika, a dopiero na końcu jego wygląd w CSS.
-
Brak
https://przy linku zewnętrznym, przez co adres może zostać potraktowany jako ścieżka lokalna. -
Pusty atrybut
href, który nie prowadzi do konkretnego miejsca. - Niepoprawna ścieżka, na przykład literówka w nazwie katalogu lub pliku.
- Tekst „kliknij tutaj”, który nie wyjaśnia, co znajduje się po drugiej stronie.
-
Powtarzający się atrybut
idprzy linkach do sekcji. - Usuwanie podkreślenia bez alternatywy wizualnej, przez co link przestaje wyróżniać się na tle zwykłego tekstu.
Tekst odnośnika powinien być zrozumiały nawet po wyrwaniu go z akapitu. Zamiast „Kliknij tutaj”, lepiej napisać „Zobacz instrukcję instalacji HTML”, ponieważ taki opis pomaga także osobom korzystającym z czytników ekranowych i użytkownikom skanującym stronę wzrokiem.
Nie należy też stylować linku wyłącznie kolorem. Kolor powinien być wsparty podkreśleniem, zmianą wyglądu po najechaniu albo innym wyraźnym sygnałem, aby odnośnik pozostał czytelny dla osób z zaburzeniami widzenia kolorów.
Krótki test poprawności gotowego linku
Po dodaniu hiperłącza nie zakładam, że wszystko działa tylko dlatego, że kod wygląda poprawnie. Klikam odnośnik w przeglądarce, sprawdzam adres docelowy i testuję go także na telefonie, jeśli strona ma być używana mobilnie.
- Sprawdź, czy element ma zapis
oraz zamknięcie. - Skopiuj adres z
hrefi upewnij się, że prowadzi do właściwej strony lub pliku. - Przetestuj link po opublikowaniu witryny, bo ścieżki lokalne mogą zachowywać się inaczej niż na serwerze.
- Sprawdź, czy tekst linku jasno opisuje jego cel.
- Jeśli używasz nowej karty, zweryfikuj działanie
target="_blank"irel.
W prostym projekcie taki ręczny test zwykle wystarcza. Przy większej stronie dodatkowo przydają się narzędzia wykrywające błędy 404, czyli odnośniki prowadzące do nieistniejących zasobów. Jeden zepsuty link nie przekreśla witryny, ale większa liczba takich błędów szybko obniża jej użyteczność.
Dobry link to mały element z dużym znaczeniem
Do większości zastosowań wystarczy konstrukcja opis. Różnicę robią szczegóły: poprawna ścieżka, konkretny tekst, sensowne użycie nowej karty oraz sprawdzenie, czy odnośnik działa po publikacji.
Ja zaczynam od pytania, dokąd użytkownik ma trafić i czego powinien się spodziewać po kliknięciu. Dopiero później dobieram atrybuty i styl. Takie podejście prowadzi do prostych, dostępnych i przewidywalnych hiperłączy, które spełniają swoją funkcję bez zbędnych dodatków.
