Prawidłowym elementem HTML do tworzenia hiperłącza jest znacznik <a> (anchor). To właśnie ten znacznik służy do tworzenia odnośników na stronach internetowych, umożliwiając użytkownikom przechodzenie do innych stron, sekcji tej samej strony, wysyłanie wiadomości e-mail czy pobieranie plików.
Podstawowa składnia hiperłącza
Element <a> posiada kluczowy atrybut href, który określa, dokąd ma prowadzić kliknięcie linku.
<a href="https://www.przyklad.com">Kliknij tutaj</a> W przykładzie powyżej:
href="https://www.przyklad.com"– to adres strony docelowej, która otworzy się po kliknięciu;- Tekst „Kliknij tutaj” – to widoczny dla użytkownika fragment, w który można kliknąć.
Przykłady zastosowań hiperłączy
Hiperłącze do zewnętrznej strony
Aby odesłać użytkownika do innej strony internetowej, użyj pełnego adresu URL:
<a href="https://www.wikipedia.org">Wikipedia</a> Hiperłącze do pliku lub obrazu
Można również linkować do konkretnych plików, np. PDF czy obrazów:
<a href="dokument.pdf">Pobierz dokument PDF</a> Hiperłącze do konkretnego miejsca na tej samej stronie (kotwica)
Możesz przenieść użytkownika do danej sekcji strony, wykorzystując identyfikatory:
<!-- Docelowy element z id --> <h2 id="kontakt">Kontakt</h2> <!-- Link do tej sekcji --> <a href="#kontakt">Przejdź do sekcji Kontakt</a> Po kliknięciu użytkownik zostanie przeniesiony do nagłówka „Kontakt”.
Hiperłącze otwierające program pocztowy
Jeśli chcesz umożliwić wysłanie wiadomości e-mail, użyj protokołu mailto::
<a href="mailto:[email protected]">Wyślij e-mail</a> Po kliknięciu otworzy się domyślny program pocztowy z wypełnionym adresem odbiorcy.
Link do numeru telefonu na urządzeniach mobilnych
Możesz utworzyć link, który umożliwi szybkie wykonanie telefonu:
<a href="tel:+48123456789">Zadzwoń teraz</a> Dodatkowe atrybuty ułatwiające pracę z hiperłączami
- target – pozwala określić, gdzie ma otworzyć się kliknięty link; najczęściej używa się wartości
_blank, która otwiera stronę w nowej karcie.html <a href="https://shebang.pl" target="_blank">Otwórz Shebang w nowej karcie</a> - title – podpowiedź widoczna po najechaniu myszą na link;
html <a href="https://przyklad.com" title="Zobacz stronę">Przykład</a>
Adresy względne i bezwzględne
- Adres bezwzględny – pełny adres URL, w tym protokół (np. http, https);
- Adres względny – ścieżka odnosząca się do bieżącej lokalizacji pliku na serwerze, np.
strona2.html.
Podsumowanie najważniejszych zastosowań znacznika <a>
| Zastosowanie | Składnia/example | Opis |
|---|---|---|
| Link do strony zewnętrznej | <a href="https://domena.pl">Domena</a> |
Przenosi do innej strony internetowej |
| Link do sekcji na tej samej stronie | <a href="#sekcja1">Sekcja 1</a> |
Przenosi do oznaczonego elementu (id) |
| Link do pliku | <a href="plik.pdf">Pobierz plik</a> |
Umożliwia pobranie pliku |
| Otwieranie e-maila | <a href="mailto:[email protected]">Wyślij e-mail</a> |
Otwiera program pocztowy z adresem odbiorcy |
| Połączenie telefoniczne | <a href="tel:+48123456789">Zadzwoń</a> |
Szybkie połączenie na urządzeniach mobilnych |
Znacznik <a> stanowi podstawowe narzędzie do budowania interaktywnych, połączonych treści w internecie, umożliwiając swobodne przemieszczanie się pomiędzy różnymi zasobami, sekcjami i funkcjami stron internetowych.
