html link how to – kompletny przewodnik po tworzeniu linków w HTML

IT/Komputery/Gry Komputerowe

html link how to – kompletny przewodnik po tworzeniu linków w HTML

Fraza html link how to jest często wpisywana przez osoby, które zaczynają naukę tworzenia stron internetowych i chcą dowiedzieć się, jak poprawnie dodać odnośnik w kodzie HTML. Linki, nazywane również hiperłączami, odsyłaczami lub odnośnikami, należą do najważniejszych elementów internetu. To właśnie dzięki nim użytkownicy mogą przechodzić między podstronami, otwierać zewnętrzne serwisy, pobierać pliki, wysyłać wiadomości e-mail, wykonywać połączenia telefoniczne oraz przeskakiwać do wybranego fragmentu dokumentu.

Utworzenie prostego linku w HTML nie jest trudne. W podstawowej wersji wystarczy wykorzystać znacznik <a> oraz atrybut href, który wskazuje adres docelowy. W praktyce poprawne projektowanie linków wymaga jednak znajomości większej liczby zagadnień. Trzeba rozumieć różnicę między adresem bezwzględnym i względnym, wiedzieć, kiedy otwierać stronę w nowej karcie, jak budować linki do sekcji, jak tworzyć odnośniki do plików oraz w jaki sposób zadbać o dostępność, bezpieczeństwo i optymalizację pod kątem wyszukiwarek.

Czym jest link w HTML?

Link w HTML jest elementem umożliwiającym przejście z jednego miejsca do innego. Miejscem docelowym może być inna strona internetowa, podstrona w obrębie tej samej witryny, plik, adres e-mail, numer telefonu albo konkretna sekcja bieżącego dokumentu.

Podstawowym elementem służącym do tworzenia linków jest znacznik kotwicy:

<a href=\"https://example.com\">Przejdź do strony</a>

W tym przykładzie:

  • <a> rozpoczyna element linku,
  • href określa adres docelowy,
  • https://example.com jest adresem strony,
  • „Przejdź do strony” jest widocznym tekstem odnośnika,
  • </a> zamyka element.

Użytkownik widzi tekst „Przejdź do strony”, natomiast przeglądarka wie, że po kliknięciu ma otworzyć adres zapisany w atrybucie href.

Dlaczego linki są podstawą internetu?

Sieć WWW opiera się na połączonych dokumentach. Każda strona może prowadzić do kolejnych zasobów, a linki tworzą między nimi strukturę. Bez odnośników witryny składałyby się z odizolowanych dokumentów, do których użytkownik musiałby każdorazowo wpisywać pełny adres.

Linki umożliwiają:

  • budowanie menu nawigacyjnego,
  • łączenie powiązanych artykułów,
  • kierowanie do produktów i usług,
  • wskazywanie źródeł,
  • udostępnianie plików,
  • tworzenie przycisków wezwania do działania,
  • przechodzenie do formularzy kontaktowych,
  • budowanie struktury całej witryny.

Poprawnie zaprojektowane hiperłącza wpływają zarówno na wygodę użytkownika, jak i na widoczność strony w wyszukiwarkach.

Podstawowa składnia html link how to

Najprostszy link HTML składa się ze znacznika <a>, atrybutu href i tekstu kotwicy.

<a href=\"https://example.com\">Odwiedź stronę Example</a>

Atrybut href jest najważniejszym elementem linku. Jego nazwa pochodzi od określenia „hypertext reference”, czyli odwołania hipertekstowego.

Bez atrybutu href element <a> może nadal występować w dokumencie, ale nie będzie pełnił funkcji standardowego hiperłącza.

<a>Tekst bez aktywnego odnośnika</a>

Taki element nie przeniesie użytkownika do innego miejsca.

Tekst kotwicy

Tekst znajdujący się między znacznikiem otwierającym i zamykającym nazywany jest tekstem kotwicy, z angielskiego anchor text.

<a href=\"/kontakt\">Skontaktuj się z nami</a>

Tekst kotwicy powinien informować użytkownika, dokąd prowadzi link. Lepszym rozwiązaniem jest użycie opisu „Sprawdź ofertę projektowania stron” niż ogólnego zwrotu „Kliknij tutaj”.

Przykład mniej czytelnego linku:

<a href=\"/oferta\">Kliknij tutaj</a>

Przykład bardziej opisowego linku:

<a href=\"/oferta\">Zobacz ofertę tworzenia stron internetowych</a>

Opisowy tekst kotwicy jest korzystniejszy dla użytkowników, osób korzystających z czytników ekranu oraz dla wyszukiwarek analizujących znaczenie połączonych stron.

Jak utworzyć link do zewnętrznej strony?

Link zewnętrzny prowadzi do witryny znajdującej się w innej domenie. Najbezpieczniej podać pełny adres URL wraz z protokołem https://.

<a href=\"https://www.example.com\">Otwórz zewnętrzną stronę</a>

Adres bezwzględny powinien zawierać pełną ścieżkę:

<a href=\"https://www.example.com/blog/poradnik.html\">
    Przeczytaj poradnik
</a>

Jeżeli pominięty zostanie protokół, przeglądarka może potraktować adres jako ścieżkę względną.

Niepoprawny lub potencjalnie problematyczny zapis:

<a href=\"www.example.com\">Przejdź do strony</a>

Przeglądarka może spróbować otworzyć adres jako podstronę bieżącej domeny, na przykład:

https://twojastrona.pl/www.example.com

Dlatego przy linkach zewnętrznych należy stosować pełne adresy:

<a href=\"https://www.example.com\">Przejdź do strony</a>

Protokół HTTP i HTTPS

Współczesne strony internetowe powinny korzystać z protokołu HTTPS, który szyfruje połączenie między przeglądarką a serwerem.

Link HTTPS:

<a href=\"https://example.com\">Bezpieczna strona</a>

Link HTTP:

<a href=\"http://example.com\">Strona bez szyfrowania</a>

Jeżeli strona docelowa obsługuje HTTPS, warto użyć właśnie tego wariantu. Pomaga to unikać ostrzeżeń bezpieczeństwa i niepotrzebnych przekierowań.

Jak utworzyć link do podstrony?

W obrębie jednej witryny można stosować adresy względne. Nie trzeba wtedy wpisywać pełnej domeny.

Przykład:

<a href=\"/kontakt\">Kontakt</a>

Link prowadzi do ścieżki /kontakt w bieżącej domenie. Jeśli strona znajduje się pod adresem:

https://example.com

odnośnik otworzy:

https://example.com/kontakt

Adresy względne są wygodne, ponieważ można przenosić stronę między domenami bez konieczności zmiany każdego linku wewnętrznego.

Link do pliku HTML w tym samym folderze

Jeżeli dwa dokumenty znajdują się w tym samym katalogu, można użyć samej nazwy pliku:

<a href=\"kontakt.html\">Kontakt</a>

Przykładowa struktura:

projekt/
├── index.html
├── kontakt.html
└── oferta.html

W pliku index.html link do strony kontaktowej może wyglądać tak:

<a href=\"kontakt.html\">Przejdź do kontaktu</a>

Link do podfolderu

Jeżeli plik znajduje się w podkatalogu, należy uwzględnić nazwę folderu:

<a href=\"blog/pierwszy-artykul.html\">Przeczytaj artykuł</a>

Przykładowa struktura:

projekt/
├── index.html
└── blog/
    └── pierwszy-artykul.html

Link do folderu nadrzędnego

Dwie kropki .. oznaczają przejście o jeden poziom wyżej.

<a href=\"../index.html\">Wróć na stronę główną</a>

Jeśli dokument znajduje się w folderze blog, link ../index.html prowadzi do pliku index.html znajdującego się poziom wyżej.

Przy większej liczbie poziomów można zastosować:

<a href=\"../../index.html\">Strona główna</a>

Adres bezwzględny i względny

Jednym z podstawowych zagadnień związanych z frazą html link how to jest różnica między adresem bezwzględnym a względnym.

Adres bezwzględny

Adres bezwzględny zawiera pełny URL:

<a href=\"https://example.com/oferta\">Oferta</a>

Taki link będzie prowadził do tej samej strony bez względu na miejsce, w którym zostanie użyty.

Adresy bezwzględne są najczęściej stosowane dla:

  • stron zewnętrznych,
  • linków w wiadomościach e-mail,
  • kanałów RSS,
  • dokumentów udostępnianych poza witryną,
  • treści osadzanych w różnych systemach.

Adres względny

Adres względny określa lokalizację względem bieżącego dokumentu lub głównego katalogu domeny.

<a href=\"/oferta\">Oferta</a>

lub:

<a href=\"oferta.html\">Oferta</a>

Adresy względne są wygodne w linkowaniu wewnętrznym, ale wymagają zrozumienia struktury katalogów.

Ścieżka względem katalogu głównego

Ścieżka rozpoczynająca się ukośnikiem / jest liczona od katalogu głównego domeny.

<a href=\"/blog/poradnik\">Poradnik</a>

Taki zapis jest często bardziej odporny na błędy niż ścieżka zależna od aktualnego folderu.

Ścieżka względem bieżącego dokumentu

Ścieżka bez początkowego ukośnika jest liczona względem lokalizacji aktualnego pliku.

<a href=\"blog/poradnik.html\">Poradnik</a>

Jeżeli dokument zostanie przeniesiony do innego folderu, taki link może przestać działać.

Jak otworzyć link w nowej karcie?

Aby otworzyć stronę w nowej karcie lub oknie, można użyć atrybutu target=\"_blank\".

<a href=\"https://example.com\" target=\"_blank\">
    Otwórz stronę w nowej karcie
</a>

W praktyce przeglądarki najczęściej otwierają taki odnośnik w nowej karcie, chociaż ostateczne zachowanie zależy od ustawień użytkownika.

Znaczenie rel=\”noopener\”

Przy linkach otwieranych przez target=\"_blank\" warto dodać:

rel=\"noopener\"

Pełny zapis:

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener\">
    Otwórz stronę
</a>

Atrybut noopener ogranicza możliwość uzyskania przez nową stronę dostępu do obiektu window.opener strony źródłowej. Jest to dobra praktyka bezpieczeństwa.

Często można spotkać również:

rel=\"noopener noreferrer\"

Przykład:

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener noreferrer\">
    Zewnętrzna witryna
</a>

noreferrer dodatkowo ogranicza przekazywanie informacji o stronie odsyłającej. Należy jednak pamiętać, że może to wpływać na dane analityczne strony docelowej.

Czy każdy link powinien otwierać się w nowej karcie?

Nie. Nadmierne stosowanie target=\"_blank\" może pogarszać wygodę użytkownika. Użytkownik powinien mieć możliwość samodzielnego zdecydowania, czy chce otworzyć link w nowej karcie.

Nowa karta bywa uzasadniona, gdy:

  • link prowadzi do zewnętrznej dokumentacji,
  • użytkownik wypełnia formularz i nie powinien utracić danych,
  • otwierany jest dokument pomocniczy,
  • przejście ma charakter dodatkowy, a nie główny.

W menu nawigacyjnym tej samej witryny linki zazwyczaj powinny otwierać się w tej samej karcie.

Jak utworzyć link do sekcji na stronie?

HTML pozwala tworzyć linki prowadzące do konkretnego fragmentu dokumentu. W tym celu należy nadać elementowi docelowemu atrybut id.

Przykład nagłówka:

<h2 id=\"kontakt\">Kontakt</h2>

Link prowadzący do tej sekcji:

<a href=\"#kontakt\">Przejdź do kontaktu</a>

Po kliknięciu przeglądarka przewinie dokument do elementu z identyfikatorem kontakt.

Link do sekcji na innej podstronie

Można połączyć adres podstrony z identyfikatorem:

<a href=\"/oferta#cennik\">Zobacz cennik</a>

Link prowadzi do sekcji cennik na stronie /oferta.

Element docelowy powinien wyglądać tak:

<h2 id=\"cennik\">Cennik usług</h2>

Zasady tworzenia identyfikatorów

Warto stosować krótkie, czytelne i unikalne identyfikatory:

<h2 id=\"warunki-wspolpracy\">Warunki współpracy</h2>

Należy unikać spacji:

<h2 id=\"warunki współpracy\">Warunki współpracy</h2>

Lepszy zapis:

<h2 id=\"warunki-wspolpracy\">Warunki współpracy</h2>

Każdy identyfikator id powinien być unikalny w obrębie jednego dokumentu.

Link powrotu na górę strony

Na początku dokumentu można umieścić element z identyfikatorem:

<body id=\"top\">

Na dole strony można dodać:

<a href=\"#top\">Wróć na górę</a>

Można również wykorzystać identyfikator przypisany do nagłówka lub głównego kontenera.

Jak utworzyć link do wiadomości e-mail?

Link rozpoczynający się od mailto: otwiera domyślny program pocztowy użytkownika.

<a href=\"mailto:kontakt@example.com\">
    Napisz do nas
</a>

Po kliknięciu przeglądarka spróbuje uruchomić aplikację obsługującą pocztę.

Wstępnie ustawiony temat wiadomości

Można dodać parametr subject:

<a href=\"mailto:kontakt@example.com?subject=Zapytanie%20ofertowe\">
    Wyślij zapytanie
</a>

W adresach URL spacje są często zapisywane jako %20.

Wstępnie ustawiona treść

Można również zastosować parametr body:

<a href=\"mailto:kontakt@example.com?subject=Zapytanie&body=Dzień%20dobry\">
    Napisz wiadomość
</a>

Kilka parametrów łączy się za pomocą znaku &.

<a href=\"mailto:kontakt@example.com?subject=Oferta&body=Proszę%20o%20kontakt\">
    Zapytaj o ofertę
</a>

W kodzie HTML znak & można zapisywać jako encję &amp;:

<a href=\"mailto:kontakt@example.com?subject=Oferta&amp;body=Proszę%20o%20kontakt\">
    Zapytaj o ofertę
</a>

Ograniczenia linków mailto

Link mailto: nie wysyła wiadomości automatycznie. Otwiera jedynie aplikację pocztową. Jeśli użytkownik nie ma skonfigurowanego programu, odnośnik może nie zadziałać zgodnie z oczekiwaniami.

Do obsługi ważnych zapytań biznesowych lepszym rozwiązaniem bywa formularz kontaktowy.

Jak utworzyć link do numeru telefonu?

Link telefoniczny wykorzystuje schemat tel:.

<a href=\"tel:+48123456789\">
    Zadzwoń: 123 456 789
</a>

Na smartfonie kliknięcie może otworzyć aplikację telefoniczną z przygotowanym numerem.

Warto zapisywać numer w atrybucie bez spacji:

href=\"tel:+48123456789\"

Widoczny tekst można natomiast sformatować czytelnie:

<a href=\"tel:+48123456789\">+48 123 456 789</a>

Międzynarodowy format numeru

Dobrą praktyką jest stosowanie prefiksu kraju:

<a href=\"tel:+48123456789\">Zadzwoń do nas</a>

Dzięki temu numer jest bardziej jednoznaczny również dla użytkowników znajdujących się za granicą.

Jak utworzyć link do SMS-a?

Można również użyć schematu sms::

<a href=\"sms:+48123456789\">
    Wyślij SMS
</a>

Obsługa tego rodzaju linku zależy od urządzenia i systemu operacyjnego.

Na urządzeniach mobilnych odnośnik może uruchomić aplikację do obsługi wiadomości tekstowych.

Jak utworzyć link do pliku?

Link może prowadzić bezpośrednio do pliku PDF, obrazu, archiwum ZIP, dokumentu tekstowego lub innego zasobu.

<a href=\"/pliki/poradnik.pdf\">
    Otwórz poradnik PDF
</a>

To, czy plik zostanie otwarty w przeglądarce, czy pobrany, zależy od jego typu, nagłówków serwera oraz ustawień przeglądarki.

Atrybut download

Atrybut download sugeruje przeglądarce pobranie pliku.

<a href=\"/pliki/poradnik.pdf\" download>
    Pobierz poradnik PDF
</a>

Można również zaproponować nazwę pliku:

<a href=\"/pliki/poradnik.pdf\"
   download=\"poradnik-html.pdf\">
    Pobierz plik
</a>

Nie każda przeglądarka i nie każdy zasób zewnętrzny musi respektować ten atrybut. Najpewniej działa on dla plików dostępnych w tej samej domenie.

Informowanie o typie i rozmiarze pliku

Dobrą praktyką jest podanie użytkownikowi informacji o formacie i rozmiarze:

<a href=\"/pliki/katalog.pdf\" download>
    Pobierz katalog produktów
</a>
<span>PDF, 4,2 MB</span>

Użytkownik wie wtedy, czego się spodziewać przed kliknięciem.

Jak zamienić obraz w link?

Wewnątrz znacznika <a> można umieścić obraz.

<a href=\"https://example.com\">
    <img src=\"logo.png\" alt=\"Strona Example\">
</a>

Kliknięcie obrazu otworzy wskazany adres.

Znaczenie tekstu alternatywnego

Jeśli obraz pełni funkcję linku, atrybut alt powinien opisywać cel odnośnika.

<a href=\"/\">
    <img src=\"logo.svg\" alt=\"Strona główna firmy Example\">
</a>

Nie należy ograniczać tekstu alternatywnego do opisu wyglądu, jeśli ważniejsza jest funkcja.

Mniej użyteczny zapis:

<img src=\"logo.svg\" alt=\"Niebieskie logo\">

Lepszy zapis:

<img src=\"logo.svg\" alt=\"Przejdź na stronę główną\">

Link obejmujący zdjęcie i tekst

Znacznik <a> może obejmować kilka elementów:

<a href=\"/produkt\">
    <img src=\"produkt.jpg\" alt=\"\">
    <h3>Nazwa produktu</h3>
    <p>Zobacz szczegóły produktu</p>
</a>

Pusty atrybut alt=\"\" może być odpowiedni, jeśli ten sam cel jest już jasno opisany tekstem znajdującym się w linku. Dzięki temu czytnik ekranu nie powtarza niepotrzebnie tej samej informacji.

Jak stworzyć link wyglądający jak przycisk?

Link można ostylować za pomocą CSS, aby przypominał przycisk.

HTML:

<a href=\"/oferta\" class=\"button\">
    Zobacz ofertę
</a>

CSS:

.button {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 6px;
}

Ważne jest zachowanie właściwego znaczenia elementu. Jeżeli kliknięcie prowadzi do innej strony lub zasobu, należy użyć linku <a>. Jeżeli wykonuje działanie w bieżącej aplikacji, właściwszy jest element <button>.

Link czy button?

Link służy do nawigacji:

<a href=\"/rejestracja\">Przejdź do rejestracji</a>

Przycisk służy do wykonania akcji:

<button type=\"submit\">Wyślij formularz</button>

Nie należy tworzyć przycisku nawigacyjnego wyłącznie przez obsługę JavaScript, jeśli zwykły link rozwiązuje problem.

Nieoptymalny przykład:

<button onclick=\"window.location.href=\'/oferta\'\">
    Oferta
</button>

Lepszy przykład:

<a href=\"/oferta\" class=\"button\">
    Oferta
</a>

Atrybut title w linkach

Atrybut title może zawierać dodatkową informację:

<a href=\"/kontakt\" title=\"Przejdź do formularza kontaktowego\">
    Kontakt
</a>

Po najechaniu kursorem niektóre przeglądarki wyświetlają treść jako podpowiedź.

Nie należy jednak umieszczać w title informacji niezbędnych do zrozumienia linku. Podpowiedź nie zawsze jest dostępna dla użytkowników urządzeń dotykowych i osób korzystających z technologii wspomagających.

Tekst linku powinien być czytelny samodzielnie:

<a href=\"/formularz\">Otwórz formularz kontaktowy</a>

Atrybut title powinien być traktowany jako dodatek, a nie podstawowe źródło informacji.

Atrybut rel w linkach

Atrybut rel opisuje relację między bieżącym dokumentem a stroną docelową.

<a href=\"https://example.com\" rel=\"nofollow\">
    Strona zewnętrzna
</a>

Można podać kilka wartości oddzielonych spacjami:

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener nofollow\">
    Link zewnętrzny
</a>

rel=\”noopener\”

Zabezpiecza stronę otwierającą link w nowej karcie przed określonymi formami dostępu przez stronę docelową.

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener\">
    Otwórz stronę
</a>

rel=\”noreferrer\”

Ogranicza przesyłanie informacji o stronie odsyłającej.

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noreferrer\">
    Otwórz stronę
</a>

rel=\”nofollow\”

Informuje roboty wyszukiwarek, że właściciel strony nie chce przekazywać standardowego sygnału rekomendacji dla danego linku.

<a href=\"https://example.com\" rel=\"nofollow\">
    Link zewnętrzny
</a>

Nie należy automatycznie oznaczać wszystkich linków zewnętrznych jako nofollow. Naturalne odwołania do wartościowych źródeł mogą pozostać standardowymi linkami.

rel=\”sponsored\”

Wartość sponsored stosuje się przy linkach reklamowych, sponsorowanych i afiliacyjnych.

<a href=\"https://example.com/oferta\"
   rel=\"sponsored\">
    Oferta partnera
</a>

rel=\”ugc\”

Wartość ugc oznacza treści generowane przez użytkowników, na przykład linki w komentarzach lub wpisach forum.

<a href=\"https://example.com\"
   rel=\"ugc\">
    Link dodany przez użytkownika
</a>

Możliwe jest łączenie wartości:

<a href=\"https://example.com\"
   rel=\"ugc nofollow\">
    Link w komentarzu
</a>

Linki a dostępność strony

Dostępność oznacza projektowanie stron w taki sposób, aby mogły z nich korzystać osoby o różnych potrzebach i sposobach obsługi urządzeń.

Link powinien być możliwy do rozpoznania, zrozumienia i obsłużenia za pomocą klawiatury oraz technologii wspomagających.

Opisowy tekst linku

Nie należy budować całej strony z odnośników „więcej”, „tutaj” i „kliknij”.

Mało czytelny przykład:

<p>
    Więcej informacji o naszej ofercie znajdziesz
    <a href=\"/oferta\">tutaj</a>.
</p>

Lepszy przykład:

<p>
    <a href=\"/oferta\">
        Poznaj pełną ofertę projektowania stron
    </a>.
</p>

Osoba korzystająca z czytnika ekranu może przeglądać samą listę linków. Seria odnośników o treści „kliknij tutaj” nie informuje jej o celu.

Widoczny stan fokusu

Użytkownik obsługujący stronę klawiaturą powinien widzieć, który link jest aktualnie aktywny.

Przykład CSS:

a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

Nie należy usuwać obramowania fokusu bez zapewnienia czytelnej alternatywy.

Problematyczny zapis:

a:focus {
    outline: none;
}

Takie rozwiązanie może znacząco utrudnić nawigację osobom, które nie korzystają z myszy.

Kolor nie powinien być jedynym wyróżnikiem

Linki w tekście warto podkreślać lub odróżniać również w inny sposób niż sam kolor.

article a {
    text-decoration: underline;
}

Użytkownik z zaburzeniami rozpoznawania kolorów może nie zauważyć odnośnika, jeśli różni się on od tekstu tylko subtelnym odcieniem.

Informowanie o otwieraniu nowej karty

Jeżeli link otwiera nową kartę, warto poinformować o tym użytkownika w widoczny lub dostępny sposób.

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener\">
    Dokumentacja produktu
    <span class=\"visually-hidden\">(otwiera nową kartę)</span>
</a>

Przykładowa klasa CSS:

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

Stylowanie linków w CSS

Domyślnie przeglądarka zwykle wyświetla link jako niebieski i podkreślony. Odwiedzony link może mieć kolor fioletowy. Wygląd można zmienić za pomocą CSS.

a {
    color: inherit;
    text-decoration: underline;
}

Pseudoklasy linków

Najczęściej używane pseudoklasy to:

a:link {
    text-decoration: underline;
}

a:visited {
    opacity: 0.9;
}

a:hover {
    text-decoration-thickness: 2px;
}

a:active {
    transform: translateY(1px);
}

a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

Pseudoklasy odpowiadają różnym stanom:

  • :link – link nieodwiedzony,
  • :visited – link odwiedzony,
  • :hover – wskaźnik znajduje się nad linkiem,
  • :active – link jest w trakcie aktywacji,
  • :focus – element ma fokus,
  • :focus-visible – fokus powinien być wyraźnie pokazany.

Usuwanie podkreślenia

Podkreślenie można usunąć:

a {
    text-decoration: none;
}

Nie zawsze jest to jednak dobre rozwiązanie. W dłuższych tekstach podkreślenie pomaga szybko odróżnić link od zwykłej treści.

W menu nawigacyjnym brak podkreślenia może być akceptowalny, ponieważ kontekst jasno wskazuje, że elementy są klikalne.

Płynna zmiana wyglądu

Można zastosować przejście:

a {
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness 0.2s ease;
}

a:hover {
    text-decoration-thickness: 3px;
}

Efekty nie powinny jednak utrudniać odczytu ani powodować przesuwania układu.

Linki w menu nawigacyjnym

Menu jest jednym z najczęstszych zastosowań linków.

<nav aria-label=\"Główna nawigacja\">
    <ul>
        <li><a href=\"/\">Strona główna</a></li>
        <li><a href=\"/oferta\">Oferta</a></li>
        <li><a href=\"/blog\">Blog</a></li>
        <li><a href=\"/kontakt\">Kontakt</a></li>
    </ul>
</nav>

Element <nav> informuje o sekcji nawigacyjnej. Lista <ul> grupuje powiązane odnośniki.

Oznaczenie aktywnej podstrony

Aktualną stronę można oznaczyć atrybutem aria-current=\"page\":

<a href=\"/oferta\" aria-current=\"page\">
    Oferta
</a>

Pozwala to technologiom wspomagającym rozpoznać, że użytkownik znajduje się już na tej stronie.

Można również ostylować aktywny link:

a[aria-current=\"page\"] {
    font-weight: bold;
    text-decoration-thickness: 3px;
}

Czy logo powinno być linkiem?

Logo w nagłówku zwykle prowadzi na stronę główną:

<a href=\"/\" aria-label=\"Strona główna\">
    <img src=\"/images/logo.svg\" alt=\"\">
</a>

Można także umieścić opis w atrybucie alt:

<a href=\"/\">
    <img src=\"/images/logo.svg\" alt=\"Nazwa firmy – strona główna\">
</a>

Ważne, aby czytnik ekranu otrzymał jednoznaczną informację, a nie dwa powtarzające się opisy.

Linki w artykułach i treściach blogowych

Linki w treści pomagają rozwijać temat, kierować do źródeł oraz prowadzić użytkownika przez strukturę witryny.

Linkowanie wewnętrzne

Link wewnętrzny prowadzi do strony w tej samej domenie.

<a href=\"/blog/podstawy-css\">
    Poznaj podstawy CSS
</a>

Linkowanie wewnętrzne pomaga:

  • użytkownikom znaleźć powiązane treści,
  • robotom wyszukiwarek odkrywać podstrony,
  • budować hierarchię informacji,
  • rozprowadzać autorytet między podstronami,
  • zwiększać liczbę odwiedzanych stron.

Linki powinny wynikać z kontekstu i prowadzić do wartościowych materiałów.

Linkowanie zewnętrzne

Linki zewnętrzne mogą prowadzić do dokumentacji, badań, narzędzi i źródeł.

<a href=\"https://example.com/dokumentacja\">
    Oficjalna dokumentacja
</a>

Nie należy unikać wartościowych linków zewnętrznych tylko dlatego, że użytkownik opuszcza stronę. Dobrze dobrane źródła zwiększają użyteczność treści.

Naturalny anchor text

Tekst kotwicy powinien pasować do zdania i opisywać stronę docelową.

Przykład:

<p>
    W kolejnym materiale opisujemy
    <a href=\"/blog/formularze-html\">
        tworzenie formularzy w HTML
    </a>.
</p>

Nie należy przesadnie powtarzać identycznej frazy kluczowej w każdym linku. Może to wyglądać nienaturalnie i utrudniać czytanie.

Linki i SEO

Linki odgrywają dużą rolę w optymalizacji strony pod kątem wyszukiwarek. Pomagają robotom odnajdywać dokumenty i rozumieć relacje między nimi.

Znaczenie linków wewnętrznych

Strona bez żadnych linków wewnętrznych może być trudna do znalezienia zarówno dla użytkowników, jak i robotów indeksujących.

Ważne podstrony powinny być dostępne przez logiczną nawigację. Nie należy polegać wyłącznie na formularzu wyszukiwania lub skryptach JavaScript.

Standardowy link:

<a href=\"/wazna-podstrona\">Ważna podstrona</a>

jest łatwy do rozpoznania i obsługi.

Anchor text a znaczenie strony

Tekst linku pomaga opisać treść strony docelowej.

Ogólny tekst:

<a href=\"/html\">Więcej</a>

Opisowy tekst:

<a href=\"/html\">Kompletny kurs języka HTML</a>

Druga wersja przekazuje więcej informacji użytkownikowi i wyszukiwarce.

Nie przesadzaj z liczbą linków

Każdy odnośnik powinien mieć uzasadnienie. Umieszczanie wielu linków w każdym zdaniu może rozpraszać i osłabiać czytelność.

Najlepsza liczba zależy od długości i charakteru treści. Ważniejsza od samej liczby jest jakość oraz kontekst.

Uszkodzone linki

Link prowadzący do nieistniejącej strony powoduje błąd, najczęściej oznaczany kodem 404.

Uszkodzone odnośniki:

  • pogarszają doświadczenie użytkownika,
  • obniżają wiarygodność strony,
  • utrudniają nawigację,
  • mogą marnować czas robotów indeksujących.

Warto regularnie sprawdzać linki wewnętrzne i zewnętrzne.

Linki zawierające parametry URL

Adres może zawierać parametry po znaku zapytania.

<a href=\"/wyszukiwanie?q=html\">
    Wyniki dla HTML
</a>

Pierwszy parametr rozpoczyna się po ?, a kolejne są oddzielane znakiem &.

<a href=\"/produkty?kategoria=ksiazki&amp;sortowanie=cena\">
    Książki według ceny
</a>

W kodzie HTML znak & warto zapisywać jako &amp;.

Fragment po znaku

Po parametrach może wystąpić identyfikator sekcji:

<a href=\"/oferta?wariant=standard#cennik\">
    Cennik wariantu standardowego
</a>

Kolejność elementów adresu jest następująca:

ścieżka?parametry#fragment

Linki z kodowanymi znakami

Adresy URL mogą zawierać znaki wymagające kodowania. Na przykład spacja może być przedstawiona jako %20.

<a href=\"/wyszukiwarka?q=kurs%20html\">
    Szukaj kursu HTML
</a>

Wartości dynamiczne powinny być kodowane przez odpowiednie funkcje języka programowania, a nie ręcznie składane z niesprawdzonych danych użytkownika.

Kodowanie chroni przed błędami i zmniejsza ryzyko niepoprawnej interpretacji znaków specjalnych.

Link do mapy i lokalizacji

Link może kierować do zewnętrznej mapy lub konkretnej lokalizacji.

<a href=\"https://example.com/mapa\"
   target=\"_blank\"
   rel=\"noopener\">
    Zobacz lokalizację na mapie
</a>

Jeśli odnośnik otwiera zewnętrzny serwis, tekst powinien jasno informować o celu.

Można również stworzyć link z adresem tekstowym:

<address>
    <a href=\"https://example.com/mapa\">
        ul. Przykładowa 10, Warszawa
    </a>
</address>

Link do komunikatora lub aplikacji

Niektóre aplikacje obsługują własne schematy adresów. Przykładem mogą być linki do komunikatorów, map lub kalendarzy.

Składnia zależy od konkretnej usługi. Przed zastosowaniem trzeba sprawdzić jej dokumentację i przygotować rozwiązanie awaryjne dla użytkowników, którzy nie mają zainstalowanej aplikacji.

Nie każdy niestandardowy protokół zadziała na każdym urządzeniu. Dlatego ważne działania biznesowe nie powinny być dostępne wyłącznie przez jeden typ odnośnika.

Bezpieczeństwo linków w HTML

Linki mogą prowadzić do niebezpiecznych stron lub wykorzystywać mechanizmy przeglądarki w niepożądany sposób.

Nieufne dane użytkownika

Jeżeli adres linku pochodzi od użytkownika, powinien zostać sprawdzony. Nie można automatycznie uznawać każdego tekstu za bezpieczny URL.

Przykładowo protokół javascript: może uruchomić kod:

<a href=\"javascript:alert(\'test\')\">Kliknij</a>

Tego rodzaju rozwiązania nie powinny być stosowane do zwykłej nawigacji. W systemach publikujących dane użytkowników trzeba blokować niedozwolone schematy.

Linki otwierane w nowej karcie

Przy target=\"_blank\" warto używać rel=\"noopener\":

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener\">
    Otwórz witrynę
</a>

Widoczny adres a rzeczywisty cel

Tekst linku nie powinien sugerować innej domeny niż ta, do której rzeczywiście prowadzi.

Mylący przykład:

<a href=\"https://inna-domena.example\">
    https://bezpieczna-domena.example
</a>

Takie rozwiązanie może przypominać techniki phishingowe i narusza zaufanie użytkownika.

Najczęstsze błędy przy tworzeniu linków

Mimo prostej składni odnośniki często zawierają błędy.

Brak protokołu w zewnętrznym adresie

Niepoprawny zapis:

<a href=\"example.com\">Strona</a>

Poprawny zapis:

<a href=\"https://example.com\">Strona</a>

Niezamknięty znacznik

Błąd:

<a href=\"/oferta\">Oferta

Poprawnie:

<a href=\"/oferta\">Oferta</a>

Niezamknięty element może powodować, że znacznie większa część strony stanie się klikalna.

Błędny cudzysłów

Błąd:

<a href=\"/oferta>Oferta</a>

Poprawnie:

<a href=\"/oferta\">Oferta</a>

Nieistniejąca ścieżka

Link może być poprawny składniowo, ale prowadzić do nieistniejącej strony:

<a href=\"/ofrta\">Oferta</a>

Literówka w adresie spowoduje błąd.

Zduplikowane identyfikatory

Jeśli kilka elementów ma ten sam id, link do sekcji może działać nieprzewidywalnie.

Niepoprawnie:

<h2 id=\"oferta\">Oferta podstawowa</h2>
<h2 id=\"oferta\">Oferta rozszerzona</h2>

Poprawnie:

<h2 id=\"oferta-podstawowa\">Oferta podstawowa</h2>
<h2 id=\"oferta-rozszerzona\">Oferta rozszerzona</h2>

Pusty href

Kod:

<a href=\"\">Link</a>

może przeładować bieżącą stronę.

Kod:

<a href=\"#\">Link</a>

może przenieść użytkownika na górę dokumentu i zmienić adres w pasku przeglądarki.

Jeśli element wykonuje akcję, a nie prowadzi do innego zasobu, należy rozważyć użycie przycisku:

<button type=\"button\">Otwórz panel</button>

Linki i JavaScript

JavaScript może reagować na kliknięcie linku, ale nie powinien bez potrzeby zastępować natywnej nawigacji.

Przykład nasłuchiwania zdarzenia:

<a href=\"/oferta\" id=\"offer-link\">Oferta</a>

<script>
    const link = document.querySelector(\'#offer-link\');

    link.addEventListener(\'click\', function () {
        console.log(\'Użytkownik otworzył ofertę\');
    });
</script>

W tym przykładzie link nadal działa bez JavaScriptu.

Zapobieganie domyślnej nawigacji

Metoda preventDefault() zatrzymuje standardowe działanie linku:

link.addEventListener(\'click\', function (event) {
    event.preventDefault();
    console.log(\'Nawigacja została zatrzymana\');
});

Należy stosować ją ostrożnie. Zablokowanie linku może zepsuć możliwość otwierania go w nowej karcie, kopiowania adresu i używania standardowych funkcji przeglądarki.

Dynamiczna zmiana adresu

Atrybut można zmienić w JavaScript:

const link = document.querySelector(\'#offer-link\');
link.href = \'/nowa-oferta\';

Dla zwykłych statycznych odnośników lepiej jednak zapisać właściwy adres bezpośrednio w HTML.

Pełny przykład strony z różnymi linkami

Poniższy dokument pokazuje kilka najczęstszych zastosowań.

<!DOCTYPE html>
<html lang=\"pl\">
<head>
    <meta charset=\"UTF-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Przykłady linków HTML</title>
</head>
<body id=\"top\">

    <header>
        <nav aria-label=\"Główna nawigacja\">
            <ul>
                <li><a href=\"/\">Strona główna</a></li>
                <li><a href=\"/oferta\">Oferta</a></li>
                <li><a href=\"/kontakt\">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Przykłady linków w HTML</h1>

        <p>
            <a href=\"#kontakt\">
                Przejdź do sekcji kontaktowej
            </a>
        </p>

        <h2>Link zewnętrzny</h2>

        <p>
            <a href=\"https://example.com\"
               target=\"_blank\"
               rel=\"noopener\">
                Otwórz zewnętrzną stronę
            </a>
        </p>

        <h2>Dokument do pobrania</h2>

        <p>
            <a href=\"/pliki/oferta.pdf\" download>
                Pobierz ofertę w formacie PDF
            </a>
        </p>

        <h2 id=\"kontakt\">Kontakt</h2>

        <p>
            <a href=\"mailto:kontakt@example.com\">
                Wyślij wiadomość e-mail
            </a>
        </p>

        <p>
            <a href=\"tel:+48123456789\">
                Zadzwoń: +48 123 456 789
            </a>
        </p>

        <p>
            <a href=\"#top\">Wróć na górę strony</a>
        </p>
    </main>

</body>
</html>

Jak testować linki?

Każdy link powinien zostać sprawdzony przed publikacją strony.

Warto zweryfikować:

  • czy prowadzi do właściwego adresu,
  • czy nie zwraca błędu 404,
  • czy działa na urządzeniu mobilnym,
  • czy można aktywować go klawiaturą,
  • czy fokus jest widoczny,
  • czy link zewnętrzny ma właściwe zabezpieczenia,
  • czy tekst jasno opisuje cel,
  • czy plik do pobrania rzeczywiście istnieje,
  • czy identyfikator sekcji jest unikalny.

Testowanie klawiaturą

Należy przejść przez stronę za pomocą klawisza Tab. Każdy link powinien otrzymać widoczny fokus.

Aktywacja zwykle odbywa się klawiszem Enter.

Testowanie na urządzeniach mobilnych

Obszar kliknięcia powinien być wystarczająco duży. Linki umieszczone bardzo blisko siebie mogą być trudne do wybrania palcem.

W menu mobilnym warto zapewnić odpowiedni odstęp i wysokość elementów.

Walidacja kodu HTML

Walidator HTML może wykryć błędy składniowe, brakujące znaczniki, nieprawidłowe zagnieżdżenia i problemy z atrybutami.

Walidacja nie zastępuje testów manualnych, ale pomaga szybko znaleźć błędy kodu.

Linki w nowoczesnych aplikacjach internetowych

W aplikacjach typu single-page application nawigacja może być obsługiwana przez bibliotekę JavaScript. Mimo to użytkownik powinien otrzymać zachowanie zbliżone do zwykłego linku.

Powinny działać:

  • otwieranie w nowej karcie,
  • kopiowanie adresu,
  • przyciski wstecz i dalej,
  • odświeżenie strony,
  • bezpośrednie wejście pod konkretny URL.

Frameworki często udostępniają własne komponenty linków, ale pod spodem powinny one generować semantyczny element <a>.

Link kanoniczny a zwykły link

Warto odróżnić zwykły odnośnik w treści od znacznika link w sekcji <head>.

Zwykły link:

<a href=\"/oferta\">Oferta</a>

Element kanoniczny:

<link rel=\"canonical\" href=\"https://example.com/oferta\">

Element <link> nie tworzy klikalnego odnośnika dla użytkownika. Przekazuje przeglądarce lub wyszukiwarce informacje o relacji dokumentu z innym zasobem.

Podobnie arkusz stylów jest dołączany przez:

<link rel=\"stylesheet\" href=\"/css/style.css\">

Znaczniki <a> i <link> pełnią więc różne funkcje.

Różnica między href i src

Początkujący często mylą href z src.

href wskazuje zasób, do którego prowadzi odwołanie:

<a href=\"/kontakt\">Kontakt</a>

src wskazuje zasób osadzany bezpośrednio w dokumencie:

<img src=\"/images/zdjecie.jpg\" alt=\"Opis zdjęcia\">

Inne przykłady src:

<script src=\"/js/app.js\"></script>
<iframe src=\"https://example.com\"></iframe>

href zwykle tworzy relację lub nawigację, natomiast src pobiera i osadza zasób.

Dobre praktyki html link how to

Poprawny technicznie link nie zawsze jest dobrym linkiem. Warto zwrócić uwagę na cały kontekst.

Dobry odnośnik:

  • prowadzi do istniejącego zasobu,
  • ma opisowy tekst,
  • jest widoczny w treści,
  • można go obsłużyć klawiaturą,
  • ma czytelny stan fokusu,
  • nie otwiera niepotrzebnie nowej karty,
  • ma odpowiednie atrybuty bezpieczeństwa,
  • pasuje do celu strony,
  • nie wprowadza użytkownika w błąd.

Przykład dobrze przygotowanego linku zewnętrznego:

<a href=\"https://example.com/dokumentacja\"
   target=\"_blank\"
   rel=\"noopener\">
    Przeczytaj dokumentację techniczną
</a>

Przykład dobrego linku wewnętrznego:

<a href=\"/blog/podstawy-css\">
    Dowiedz się, jak stylować dokument HTML za pomocą CSS
</a>

Jak pisać czytelne teksty linków?

Tekst linku powinien być krótki, ale konkretny. Nie musi zawierać całego zdania, lecz powinien jasno opisywać działanie lub cel.

Dobre przykłady:

<a href=\"/cennik\">Sprawdź aktualny cennik</a>
<a href=\"/konto/reset-hasla\">Zresetuj hasło</a>
<a href=\"/raport.pdf\">Pobierz raport roczny</a>

Mniej użyteczne przykłady:

<a href=\"/cennik\">Tutaj</a>
<a href=\"/konto/reset-hasla\">Kliknij</a>
<a href=\"/raport.pdf\">Więcej</a>

Tekst powinien odpowiadać temu, co wydarzy się po kliknięciu. Jeśli link pobiera plik, warto użyć słowa „Pobierz”. Jeśli prowadzi do formularza, można zastosować „Przejdź do formularza”.

Linki w stopce strony

Stopka często zawiera odnośniki do informacji prawnych, kontaktu, mediów społecznościowych i ważnych podstron.

<footer>
    <nav aria-label=\"Nawigacja w stopce\">
        <ul>
            <li><a href=\"/polityka-prywatnosci\">Polityka prywatności</a></li>
            <li><a href=\"/regulamin\">Regulamin</a></li>
            <li><a href=\"/kontakt\">Kontakt</a></li>
        </ul>
    </nav>
</footer>

Nie warto powtarzać w stopce dziesiątek przypadkowych odnośników wyłącznie z powodów SEO. Nawigacja powinna przede wszystkim pomagać użytkownikowi.

Linki do mediów społecznościowych

Odnośniki do profili społecznościowych powinny jasno wskazywać platformę i właściciela profilu.

<a href=\"https://example.com/profil\"
   target=\"_blank\"
   rel=\"noopener\">
    Profil firmy w serwisie społecznościowym
</a>

Jeżeli używana jest sama ikona, trzeba dodać dostępną nazwę:

<a href=\"https://example.com/profil\"
   aria-label=\"Profil firmy w serwisie społecznościowym\"
   target=\"_blank\"
   rel=\"noopener\">
    <svg aria-hidden=\"true\">
        <!-- ikona -->
    </svg>
</a>

Ikona może być ukryta przed czytnikiem ekranu za pomocą aria-hidden=\"true\", ponieważ nazwę przekazuje już atrybut aria-label.

Czy można zagnieżdżać linki?

Nie należy umieszczać jednego elementu <a> wewnątrz drugiego.

Niepoprawnie:

<a href=\"/produkt\">
    Zobacz produkt
    <a href=\"/producent\">Producent</a>
</a>

Taka struktura jest nieprawidłowa i może powodować nieprzewidywalne zachowanie.

Należy rozdzielić linki:

<p>
    <a href=\"/produkt\">Zobacz produkt</a>
</p>

<p>
    <a href=\"/producent\">Poznaj producenta</a>
</p>

Jeśli cały kafelek ma być klikalny, trzeba zaprojektować jego strukturę tak, aby nie zawierał kolejnych interaktywnych elementów wewnątrz głównego linku.

Kiedy nie używać linku?

Link nie jest właściwym elementem dla każdej interakcji.

Nie należy używać <a> do:

  • wysyłania formularza,
  • otwierania menu bez zmiany adresu,
  • włączania lub wyłączania ustawienia,
  • uruchamiania odtwarzania,
  • zamykania okna modalnego,
  • usuwania elementu.

W takich sytuacjach należy użyć przycisku:

<button type=\"button\">Otwórz menu</button>
<button type=\"submit\">Wyślij formularz</button>

Elementy powinny zachowywać się zgodnie z oczekiwaniami użytkowników. Link nawiguje, a przycisk wykonuje akcję.

Praktyczny szablon poprawnego linku zewnętrznego

W wielu przypadkach można wykorzystać następujący wzorzec:

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener\">
    Opis strony docelowej
</a>

W przypadku linku sponsorowanego:

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"sponsored noopener\">
    Oferta partnera
</a>

W przypadku treści użytkownika:

<a href=\"https://example.com\"
   rel=\"ugc nofollow\">
    Link dodany przez użytkownika
</a>

Nie trzeba jednak automatycznie dodawać wszystkich atrybutów do każdego odnośnika. Powinny odpowiadać rzeczywistej funkcji linku.

Praktyczny szablon linku wewnętrznego

Najprostszy link do podstrony:

<a href=\"/oferta\">
    Zobacz ofertę
</a>

Link do konkretnej sekcji:

<a href=\"/oferta#pakiet-premium\">
    Sprawdź pakiet premium
</a>

Link do sekcji na bieżącej stronie:

<a href=\"#formularz\">
    Przejdź do formularza
</a>

Link do pobrania dokumentu:

<a href=\"/pliki/cennik.pdf\" download>
    Pobierz cennik PDF
</a>

html link how to w codziennej pracy nad stroną

Tworzenie linków jest jedną z pierwszych umiejętności poznawanych podczas nauki HTML, ale pozostaje istotne również w pracy profesjonalnego programisty. Odnośniki pojawiają się w menu, kartach produktów, artykułach, panelach użytkownika, wiadomościach systemowych, dokumentacji i aplikacjach internetowych.

Dobrze zaprojektowany link powinien łączyć poprawną składnię z czytelnym komunikatem. Sam atrybut href to dopiero początek. Znaczenie mają również dostępność, bezpieczeństwo, kontekst, zachowanie na urządzeniach mobilnych oraz sposób prezentacji.

Podstawowy kod:

<a href=\"https://example.com\">Przejdź do strony</a>

można rozbudować zależnie od sytuacji:

<a href=\"https://example.com\"
   target=\"_blank\"
   rel=\"noopener\">
    Przeczytaj zewnętrzny poradnik
</a>

Najważniejsze jest zachowanie semantyki. Jeśli element prowadzi do innego adresu, powinien być linkiem. Jeśli wykonuje działanie, powinien być przyciskiem. Tekst powinien informować o celu, a wygląd odnośnika musi pozwalać łatwo go zauważyć.

Fraza html link how to obejmuje zatem znacznie więcej niż pojedynczy znacznik. To wiedza o budowaniu nawigacji, łączeniu dokumentów, prowadzeniu użytkownika, zapewnianiu dostępności oraz tworzeniu logicznej struktury całej witryny. Opanowanie tych zasad pozwala tworzyć strony, które są nie tylko poprawne technicznie, ale również wygodne, bezpieczne i zrozumiałe.

Powiązane artykuły

Opublikuj komentarz