Jak zrobić link (hiperłącze) w HTML?

Aby utworzyć link (hiperłącze) w HTML, używa się znacznika <a>, który pozwala łączyć różne strony, dokumenty oraz miejsca na tej samej stronie. Znacznik ten jest podstawą nawigacji w serwisach internetowych.

1. Podstawowa składnia linku w html

Najprostszy link składa się z:

<a href="adres_URL">Tekst lub zawartość linku</a>

• href – wskazuje adres URL, do którego prowadzi link;
• Tekst lub zawartość linku – to element widoczny i klikalny dla użytkownika.

Przykład –

<a href="https://www.przyklad.com">Kliknij tutaj</a>

Po kliknięciu w tekst „Kliknij tutaj”, użytkownik zostanie przeniesiony pod wskazany adres.

2. Link do strony zewnętrznej

Aby przekierować użytkownika na inną, zewnętrzną stronę, wystarczy wstawić pełny adres:

<a href="https://www.google.com">Przejdź do Google</a>

3. Link do strony wewnętrznej

Możesz linkować również do innych podstron w obrębie własnego serwisu:

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

4. Link do konkretnego miejsca na tej samej stronie (odnośnik do sekcji)

Aby utworzyć hiperłącze przenoszące do określonej sekcji, użyj atrybutu id:

• Nadaj unikalne id elementowi docelowemu;

<h2 id="sekcja1">Sekcja 1</h2>

• Utwórz link odwołujący się do tego identyfikatora.

<a href="#sekcja1">Przejdź do Sekcji 1</a>

Po kliknięciu użytkownik zostanie automatycznie przeniesiony do nagłówka z identyfikatorem „sekcja1”.

5. Otwieranie linku w nowej karcie

Możesz sprawić, by odnośnik otwierał stronę w nowym oknie lub karcie dzięki atrybutowi target:

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

6. Atrybuty rozszerzające funkcjonalność linków

• title – wyświetla dymek po najechaniu myszą;

<a href="https://www.example.com" title="Więcej informacji">Szczegóły</a>

• rel – np. nofollow, stosowany w linkowaniu zewnętrznym dla SEO;

<a href="https://www.example.com" rel="nofollow">Zewnętrzny link</a>

• dofollow (domyślne) – nie trzeba podawać, link jest domyślnie „dofollow”.

7. Link jako obraz

Zamiast tekstu, jako zawartość znacznika <a> można wstawić obraz:

<a href="https://www.przyklad.com">
    <img src="logo.png" alt="Logo firmy">
</a>

Kliknięcie w grafikę przeniesie użytkownika pod określony adres.

8. Najczęstsze błędy podczas tworzenia hiperłączy

• Błędna składnia (np. brak cudzysłowu przy href),
• użycie nieistniejących adresów lub niewłaściwego formatu URL,
• powielone identyfikatory id na stronie – każdy identyfikator musi być unikalny.

9. Znaczenie linków w pozycjonowaniu (seo)

• Linki do wartościowych stron pomagają w pozycjonowaniu, zwiększając autorytet witryny,
• odpowiedni anchor (czyli tekst, na który można kliknąć) opisuje temat odsyłacza,
• unikaj nieczytelnych, długich adresów w linkach. Dobrze opisany link jest przyjazny zarówno użytkownikom, jak i wyszukiwarkom.

10. Przykłady zastosowań linków

• Menu nawigacyjne –;

<nav>
    <a href="index.html">Strona główna</a>
    <a href="kontakt.html">Kontakt</a>
    <a href="#sekcja1">O nas</a>
</nav>

• Odnośnik do pliku PDF –;

<a href="oferta.pdf" target="_blank">Pobierz ofertę</a>

• Link rozwiązujący problem ux (przewijanie do góry) –.

<a href="#top">Wróć na początek strony</a>

Stosując powyższe zasady, możesz tworzyć zarówno proste odsyłacze, jak i zaawansowane hiperłącza o dodatkowych funkcjach, dostosowane do różnych potrzeb twojego serwisu internetowego.