Jak dodać link do strony w HTML?

Aby dodać link do strony w HTML, wykorzystuje się znacznik <a>, czyli tak zwany „anchor” – odsyłacz. Jest to jeden z fundamentów HTML i podstawowa metoda nawigacji w internecie. Poniżej znajdziesz szczegółowy poradnik z przykładami różnych zastosowań linków oraz wyjaśnieniem najważniejszych technik.

Podstawowa składnia linku

Najprostszy sposób utworzenia linku wygląda następująco:

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

Najważniejsze elementy –

• <a> – oznacza początek odsyłacza;
• href – atrybut określający adres docelowy (adres URL lub inne polecenie);
• Tekst pomiędzy znacznikami – to treść, którą użytkownik widzi jako klikalny link.

Przykłady zastosowań

Link do innej strony internetowej

<a href="https://kurshtmlcss.pl">Odnośnik do kursu HTML i CSS</a>

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

Link do podstrony w tej samej witrynie (ścieżka względna)

<a href="kontakt.html">Formularz kontaktowy</a>

Ten link prowadzi do pliku kontakt.html znajdującego się w tym samym folderze co obecna strona.

Możesz też użyć ścieżki do pliku w podfolderze:

<a href="blog/nowy-artykul.html">Nowy artykuł na blogu</a>

Link do adresu e-mail

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

Kliknięcie powoduje uruchomienie domyślnego klienta poczty z wypełnionym adresem odbiorcy.

Link do rozmowy telefonicznej (np. na smartfonie)

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

Po kliknięciu na urządzeniach z funkcją dzwonienia zostanie zaproponowane wykonanie połączenia.

Link do konkretnej sekcji na tej samej stronie (kotwica)

Tworzenie kotwicy –

<a name="sekcja1"></a>
<h2>Moja sekcja</h2>

Link do kotwicy –

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

Dzięki temu można szybko nawigować po długich dokumentach.

Otwieranie linku w nowej karcie (atrybut target)

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

target="_blank" powoduje otwarcie linku w nowym oknie lub karcie przeglądarki.

Link jako przycisk (z CSS)

Chociaż odsyłacz standardowo jest tekstem, można nadać mu wygląd przycisku:

<a href="dokument.pdf" class="button">Pobierz PDF</a>

Następnie, styluj klasę .button w CSS, np.:

.button {
  background: #007BFF;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

Najczęściej używane atrybuty <a>

• href – adres, pod który prowadzi link;
• title – tekst wyświetlany po najechaniu kursorem (tooltip);
• target – określa, jak otworzyć link (np. _self, _blank);
• rel – opisuje relację, przydatne np. przy otwieraniu w nowej karcie (rel="noopener noreferrer").

Dobre praktyki

• Opisuj link tekstem zrozumiałym dla użytkownika, np. „Pobierz harmonogram zajęć”, a nie „Kliknij tutaj”;
• Stosuj atrybut title dla dodatkowych podpowiedzi;
• Pamiętaj o dostępności – nie używaj samych ikon lub niejasnych sformułowań;
• Dla linków otwierających nowe okno/kartę, informuj o tym użytkownika (target="_blank").

Podsumowanie

Tworzenie linków w HTML jest bardzo proste, a odpowiednie wykorzystanie ich możliwości pozwala nie tylko połączyć różne strony, lecz także poprawić nawigację, dostępność oraz funkcjonalność witryny internetowej. Korzystaj z opisanych wariantów i dostosuj technikę do danego zastosowania, dbając o czytelność i wygodę dla użytkownika.