Jak wstawić link w HTML?

Aby wstawić link w HTML, należy użyć znacznika <a> (anchor), który służy do tworzenia odsyłaczy prowadzących do innych stron internetowych, dokumentów, sekcji w obrębie tej samej strony, a nawet otwierających program pocztowy z gotowym adresem e-mail. Poniżej znajduje się szczegółowy poradnik wraz z praktycznymi przykładami zastosowań.

Podstawowa składnia linku w HTML

Podstawowy link w HTML zapisuje się w następujący sposób:

<a href="adres_docelowy">Tekst wyświetlany jako link</a>

Najważniejszym elementem jest atrybut href, w którym umieszcza się adres, do którego ma prowadzić link. Między znacznikami <a> oraz </a> umieszcza się opis — tekst lub elementy, które będą widoczne jako klikalny odsyłacz.

Praktyczne przykłady wykorzystania linków

Link do innej strony internetowej

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

Po kliknięciu użytkownik zostanie przeniesiony na stronę wpisaną w href.

Link otwierający stronę w nowej karcie

Dodanie atrybutu target="_blank" sprawi, że link otworzy się w nowej karcie:

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

Dla bezpieczeństwa i wydajności warto zawsze dodać rel="noopener" dla linków z target="_blank".

Link prowadzący do wybranej sekcji tej samej strony (kotwica)

Możesz tworzyć linki umożliwiające szybką nawigację na stronie, wykorzystując atrybut id:

<!-- Sekcja docelowa -->
<h2 id="kontakt">Kontakt</h2>
<!-- Link do sekcji -->
<a href="#kontakt">Przejdź do sekcji Kontakt</a>

Kliknięcie linku przenosi użytkownika bezpośrednio do nagłówka z id=”kontakt”.

Link do adresu e-mail

Link może otwierać domyślny program pocztowy z uzupełnionym polem adresata:

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

Po kliknięciu otworzy się program pocztowy z przygotowaną nową wiadomością na podany adres e-mail.

Link do numeru telefonu

Możesz przygotować link, który pozwoli użytkownikom na urządzeniu mobilnym od razu zadzwonić:

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

Po kliknięciu na smartfonie telefon automatycznie wybierze wskazany numer.

Link do pliku (np. PDF, dokument)

<a href="dokument.pdf">Pobierz instrukcję</a>

Link pozwoli użytkownikowi pobrać lub otworzyć plik PDF.

Dobre praktyki przy tworzeniu linków

• Opisuj cel linku w tekście – zamiast mało precyzyjnych fraz typu „kliknij tutaj”, stosuj opisy odnoszące się do celu, np. „Pobierz regulamin”;
• Unikaj zagnieżdżania interaktywnych elementów w linkach – nie umieszczaj np. <button> lub <input> wewnątrz <a>;
• Dbaj o dostępność – poprawne opisy linków pomagają użytkownikom korzystającym z czytników ekranu i ułatwiają nawigację po stronie.

Syntaktyczne warianty linków

Podsumowanie

Aby wstawić link w HTML, użyj znacznika <a> z odpowiednio skonfigurowanym atrybutem href. Dzięki różnym wariantom linków możesz prowadzić użytkownika do stron, plików, sekcji w dokumencie, wysyłania e-maili i wykonywania połączeń telefonicznych. Ważne jest zachowanie dobrych praktyk dla czytelności i dostępności całej witryny.