Znacznik <a> w HTML (z ang. anchor, czyli „kotwica”) służy do tworzenia hiperłączy — odnośników umożliwiających przechodzenie użytkownika pomiędzy różnymi częściami tej samej strony, innymi podstronami lub zewnętrznymi witrynami internetowymi. Jest to jeden z najważniejszych i najczęściej używanych znaczników w budowie internetu.
Podstawowa składnia
Znacznik <a> to znacznik parzysty — występuje w postaci otwierającej <a> oraz zamykającej </a>. Najważniejszym atrybutem jest href, który określa adres docelowy odnośnika.
<a href="https://przyklad.pl">Odwiedź naszą stronę!</a>Widoczny na stronie tekst „Odwiedź naszą stronę!” jest klikalnym linkiem prowadzącym do wskazanego adresu.
Najważniejsze atrybuty znacznika <a>
- href – adres, pod który zostanie przekierowany użytkownik po kliknięciu;
- title – dodatkowy opis odnośnika, pokazywany jako dymek po najechaniu kursorem;
- target – określa, gdzie ma się otworzyć docelowy dokument (np.
_blank– nowe okno/karta,_self– w tym samym oknie); - rel – definiuje relację pomiędzy bieżącym dokumentem a linkowanym zasobem (np.
nofollow,noopener,external); - download – pozwala pobrać plik zamiast otwierać go w przeglądarce.
Przykłady użycia atrybutów:
<a href="plakat.pdf" download>Pobierz nasz plakat</a>
<a href="https://witryna.pl" target="_blank" rel="noopener noreferrer">Otwórz w nowej karcie</a>Przykłady zastosowań znacznika <a>
- Link do innej strony – przykład najbardziej podstawowego zastosowania odnośnika;
<a href="https://uniwersytet.pl">Strona uczelni</a>- Link do innej sekcji tej samej strony (kotwica) – umożliwia szybkie przemieszczanie się po stronie;
<a href="#kontakt">Przejdź do kontaktu</a>
...
<h2 id="kontakt">Dane kontaktowe</h2>- Odnośnik do adresu e-mail – pozwala wysłać wiadomość e-mail przez kliknięcie;
<a href="mailto:[email protected]">Napisz do nas</a>- Odnośnik telefoniczny (dla urządzeń mobilnych) – umożliwia szybkie nawiązanie połączenia telefonicznego;
<a href="tel:+48123456789">Zadzwoń do nas</a>- Pobieranie pliku po kliknięciu – pozwala użytkownikom szybko pobrać plik;
<a href="oferta.pdf" download>Pobierz ofertę</a>- Link wywołujący JavaScript (ostrożnie!) – do realizacji akcji niestandardowych przy kliknięciu;
<a href="#" onclick="alert('Witaj!')">Kliknij mnie</a>Znaczenie semantyczne i praktyczne
- Nawigacja –
<a>buduje sieć połączeń między stronami oraz wewnątrz jednej strony, ułatwiając użytkownikom odnajdywanie informacji; - SEO – poprawnie używane linki (ze zrozumiałą treścią i odpowiednimi atrybutami, np.
rel) pozytywnie wpływają na widoczność stron w wyszukiwarkach; - Dostępność – linki powinny zawierać jasny, zrozumiały opis celu, a nie ogólne komunikaty typu „kliknij tutaj”.
Częste błędy przy stosowaniu <a>
- Umieszczanie pustego znacznika
<a>, np.<a href="#"></a>, bez treści — traci sens użytkowy i dostępnościowy, - Używanie linków do nawigacji JavaScript bez alternatywy dostępnej dla osób korzystających z technologii wspomagających.
Podsumowanie
Znacznik <a> jest kluczowy dla funkcjonowania sieci WWW. Jego prawidłowe wykorzystywanie pozwala na budowanie intuicyjnych, dostępnych i bezpiecznych systemów nawigacji na stronach internetowych. Zapamiętaj, by każdemu linkowi nadawać czytelną treść i korzystać z atrybutów zgodnie z przeznaczeniem, dzięki czemu Twoja strona będzie użyteczna zarówno dla ludzi, jak i wyszukiwarek.
