Aby utworzyć odnośnik w HTML, wykorzystuje się element <a> (ang. anchor), który służy do kierowania użytkownika do innych stron internetowych, plików, miejsc w obrębie tej samej strony czy nawet do otwierania klienta poczty e-mail.
Podstawowa składnia odnośnika
Odnośnik tworzy się za pomocą elementu <a> oraz atrybutu href, który określa adres docelowy. Przykład:
<a href="https://example.com">Przejdź do Example.com</a> W tym przykładzie:
<a>– rozpoczyna odnośnik;href– zawiera URL, czyli adres docelowy;Przejdź do Example.com– tekst wyświetlany jako link;</a>– kończy znacznik odnośnika.
Odnośniki do stron lokalnych i zewnętrznych
- Link do strony zewnętrznej –
<a href="https://kurshtmlcss.pl">Strona kursu HTML/CSS</a> - Link do innej strony w obrębie tego samego projektu (ścieżka względna) –
<a href="docs/instrukcja.html">Instrukcja</a> Ten odnośnik będzie prowadził do pliku instrukcja.html w folderze docs projektu.
Odnośnik otwierany w nowej karcie
Aby użytkownik po kliknięciu odnośnika został przekierowany do wybranej strony w nowej karcie, dodaj atrybut target="_blank":
<a href="https://example.com" target="_blank">Otwórz w nowej karcie</a> Link do adresu e-mail
Za pomocą protokołu mailto: można utworzyć odnośnik umożliwiający rozpoczęcie pisania wiadomości e-mail:
<a href="mailto:[email protected]">Napisz do nas</a> Po kliknięciu zostanie otwarty domyślny program pocztowy z wpisanym adresem e-mail w polu odbiorcy.
Odnośnik jako kotwica (link wewnątrz dokumentu)
Możesz umożliwić użytkownikom szybkie przemieszczanie się po różnych sekcjach tej samej strony, stosując kotwice:
- Definiowanie miejsca docelowego (kotwicy) –
<a name="kontakt"></a>
<h2>Dane kontaktowe</h2>
- Tworzenie odnośnika do kotwicy –
<a href="#kontakt">Przejdź do kontaktu</a>
Po kliknięciu, strona automatycznie przewinie się do miejsca oznaczonego kotwicą o danej nazwie.
Najlepsze praktyki przy tworzeniu odnośników
- Opisowy tekst linku – Używaj zrozumiałych i konkretnych opisów zamiast ogólnych zwrotów typu „kliknij tutaj”; ułatwia to korzystanie ze strony osobom z niepełnosprawnościami i wpływa pozytywnie na SEO.
- Unikaj zagnieżdżania odnośników – nie wolno umieszczać znacznika
<a>w innym znaczniku<a>; taki kod jest niepoprawny i niezgodny ze standardami HTML. - Nie otaczaj elementów blokowych – w klasycznym HTML nie należy otaczać elementów blokowych (np.
<div>,<section>) bezpośrednio linkiem; jednak w HTML5 można już otaczać elementami blokowymi, jeśli tego wymaga projekt, ale należy zachować ostrożność.
Dodatkowe atrybuty używane w odnośnikach
title– podpowiedź wyświetlana po najechaniu kursorem;
<a href="strona.html" title="Strona z instrukcjami">Instrukcje</a>
rel– określa relację między bieżącą stroną a stroną docelową (np.nofollow,noopener,external); przydatny dla SEO i bezpieczeństwa.
<a href="https://zewnetrzna-strona.com" target="_blank" rel="noopener noreferrer">Zewnętrzna strona</a>
Podsumowanie
Odnośniki w HTML to kluczowy element nawigacyjny stron WWW. Umieszczaj je zgodnie z powyższymi zasadami, starając się, by były czytelne, funkcjonalne i poprawne semantycznie. Dzięki poprawnemu stosowaniu odnośników Twoja strona stanie się bardziej użyteczna, przyjazna dla użytkownika i lepiej odbierana przez wyszukiwarki.
