Jak zrobić odsyłacz w HTML?

Aby zrobić odsyłacz w HTML, użyj znacznika <a>, czyli anchor, z kluczowym atrybutem href, który wskazuje miejsce docelowe linku. To absolutna podstawa tworzenia nawigacji między stronami w internecie.

Podstawowa składnia odsyłacza –

<a href="adres_docelowy">Tekst odsyłacza</a>

• <a> – element rozpoczynający odsyłacz;
• href – atrybut definiujący adres docelowy (np. strona www, e-mail, fragment strony);
• Tekst odsyłacza – treść wyświetlana użytkownikowi jako link.

Przykłady zastosowań

Odsyłacz do zewnętrznej strony internetowej

<a href="https://www.wikipedia.org">Encyklopedia Wikipedia</a>

Po kliknięciu użytkownik zostanie przeniesiony na podaną stronę WWW.

Odsyłacz do podstrony w tym samym serwisie

Jeśli tworzysz link do podstrony, która znajduje się w tym samym katalogu:

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

To przekieruje na podstronę kontakt.html.

Odsyłacz do sekcji (fragmentu) na tej samej stronie

Możesz przenieść użytkownika do określonej sekcji, stosując odsyłacz z # oraz znacznik z atrybutem id.

<a href="#sekcja">Przejdź do sekcji</a>
...
<section id="sekcja">
  <h2>Sekcja docelowa</h2>
  <p>Treść sekcji...</p>
</section>

Odsyłacz otwierający się w nowej karcie

Atrybut target="_blank" określa, że link otworzy się w nowym oknie lub karcie:

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

Odsyłacz e-mail

Aby po kliknięciu otworzyć domyślny program pocztowy z wypełnionym adresem odbiorcy:

<a href="mailto:[email protected]">Napisz do nas</a>

Odsyłacz telefoniczny (dla urządzeń mobilnych)

Możesz umożliwić szybkie dzwonienie poprzez kliknięcie numeru:

<a href="tel:123456789">Zadzwoń: 123 456 789</a>

Odsyłacz w formularzu HTML

Odsyłacze mogą być umieszczane także wewnątrz formularzy:

<form>
  <input type="text" name="user" placeholder="Twój login">
  <input type="submit" value="Wyślij">
  <a href="rejestracja.html">Zarejestruj się</a>
</form>

Najważniejsze atrybuty odsyłacza

• href – adres docelowy;
• target – gdzie ma się otworzyć link (_blank, _self, _parent, _top);
• rel – określa relację między bieżącą a docelową stroną (np. noopener, nofollow);
• title – tekst podpowiedzi wyświetlany po najechaniu kursorem.

Praktyczne wskazówki

• Tekst odsyłacza powinien być zrozumiały – zamiast „kliknij tutaj”, lepiej napisać „Przeczytaj regulamin serwisu”,
• wewnętrzne odsyłacze pomagają w nawigacji w obrębie długich stron i wpływają na dostępność,
• stosując target="_blank", warto dodać rel="noopener noreferrer" w celach bezpieczeństwa.

Dzięki znajomości powyższych zasad, możesz tworzyć odsyłacze HTML o różnych funkcjonalnościach, zarówno do stron zewnętrznych, jak i wewnętrznych, do sekcji na stronie, skrzynek mailowych czy numerów telefonów. To kluczowa umiejętność przy realizacji każdego serwisu internetowego.