Aby stworzyć odsyłacz w HTML, wykorzystuje się znacznik <a>, który nazywany jest także hiperłączem lub linkiem. Odsyłacze umożliwiają nawigację pomiędzy stronami internetowymi, podstronami, a nawet pozycjami w ramach tej samej strony.
Budowa odsyłacza HTML
Podstawowa składnia odsyłacza to:
<a href="adres_docelowy">Tekst widoczny jako link</a>
<a>– znacznik rozpoczynający i kończący odsyłacz;href– najważniejszy atrybut, określający adres, do którego prowadzi odsyłacz;- Tekst widoczny jako link – treść, która pojawi się użytkownikowi; po kliknięciu nastąpi przejście pod adres wskazany w
href.
Przykład podstawowy – odsyłacz do zewnętrznej strony
<a href="https://example.com">Przejdź do Example.com</a>
Po kliknięciu użytkownik zostanie przeniesiony na wskazaną stronę.
Odsyłacz do podstrony w serwisie
Aby prowadzić użytkownika do podstrony w tej samej witrynie, wystarczy podać nazwę pliku lub relatywną ścieżkę:
<a href="kontakt.html">Kontakt</a>
Taki odsyłacz jest często stosowany w menu nawigacyjnym lub w stopkach serwisów internetowych.
Odsyłacz do konkretnej sekcji na tej samej stronie
Możesz przenieść użytkownika do określonego fragmentu na bieżącej stronie za pomocą identyfikatora (id):
<!-- Gdzieś wyżej na stronie -->
<a href="#mapa">Idź do mapy dojazdu</a>
<!-- Sekcja docelowa -->
<h2 id="mapa">Mapa dojazdu</h2>
Otwieranie odsyłacza w nowej karcie
Atrybut target="_blank" sprawia, że link otwiera się w nowym oknie lub karcie przeglądarki:
<a href="https://example.com" target="_blank">Zewnętrzne źródło</a>
Warto dodać atrybut rel="noopener noreferrer" ze względów bezpieczeństwa:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Zewnętrzne źródło</a>
Dodanie dymku narzędziowego (podpowiedzi)
Atrybut title umożliwia wyświetlenie krótkiej podpowiedzi po najechaniu kursorem:
<a href="kontakt.html" title="Przejdź do formularza kontaktowego">Kontakt</a>
Odsyłacz mailowy lub telefoniczny
Możesz umożliwić użytkownikowi natychmiastowe napisanie maila lub połączenie telefoniczne:
<!-- Odsyłacz do e-maila -->
<a href="mailto:[email protected]">Napisz do nas</a>
<!-- Odsyłacz telefoniczny -->
<a href="tel:+48123456789">Zadzwoń: 123 456 789</a>
Najważniejsze atrybuty znacznika <a>
| Atrybut | Opis | Przykład wartości |
|---|---|---|
| href | Adres URL, do którego prowadzi odsyłacz | https://example.com |
| target | Określa, gdzie zostanie otwarty odsyłacz (_blank = nowa karta) |
_blank, _self |
| rel | Określa relację z dokumentem docelowym | noopener noreferrer |
| title | Krótka podpowiedź wyświetlana po najechaniu kursorem | Dowolny tekst |
Odsyłacz w formularzu
Odsyłacz może być używany także w obrębie formularzy, np. jako ścieżka do rejestracji:
<form action="submit.php" method="post">
<input type="text" name="email" placeholder="Twój email">
<input type="submit" value="Wyślij">
<a href="rejestracja.html">Zarejestruj się</a>
</form>
Taki link zwiększa wygodę użytkownika podczas wypełniania formularza.
Najczęstsze zastosowania odsyłaczy HTML
- Nawigacja między podstronami serwisu
- Odsyłacz do sekcji (kotwica) na tej samej stronie
- Otwieranie stron w nowej karcie
- Odsyłacze do adresów e-mail lub telefonów
- Podpowiedzi przy linkach przez
title - Linki w menu, stopce, treści artykułów i formularzach
Tworzenie odsyłaczy jest podstawą każdej strony internetowej i niezbędnym elementem do budowania logicznej oraz intuicyjnej nawigacji dla użytkowników. Poprawne i czytelne stosowanie znacznika <a> sprawia, że serwis jest bardziej funkcjonalny i przyjazny w użytkowaniu.
