Spis treści
Czytasz teraz:
Jak dodać link w HTML? Instrukcja dla początkujących
Zamknij
Chcesz przekierować użytkownika do innej podstrony, zewnętrznego serwisu albo pliku PDF? A może dopiero zaczynasz naukę kodowania i zastanawiasz się, jak dodać link w HTML?
Tworzenie linków w kodzie to jedna z absolutnych podstaw budowania stron internetowych.
W tym poradniku krok po kroku wyjaśniamy, czym jest znacznik <a> w HTML, jak działa atrybut href i jak poprawnie tworzyć hiperłącze w HTML, unikając błędów, które mogą zaszkodzić SEO i użyteczności strony.
Jak dodać link w HTML? Składnia linku HTML w praktyce
Podstawą każdego odnośnika w HTML jest znacznik <a> (od angielskiego „anchor”). To właśnie on odpowiada za tworzenie hiperłączy w dokumencie.
(Dalszą część artykułu znajdziesz pod formularzem)
Wypełnij formularz i odbierz wycenę
Zapoznamy się z Twoim biznesem i przygotujemy indywidualną ofertę cenową na optymalny dla Ciebie mix marketingowy. Zupełnie za darmo.
Administratorem Twoich danych osobowych jest Verseo spółka z ograniczoną odpowiedzialnością z siedzibą w Poznaniu, przy ul. Węglowej 1/3.
O Verseo
Siedziba Spółki znajduje się w Poznaniu. Spółka jest wpisana do rejestru przedsiębiorców prowadzonego przez Sąd Rejonowy Poznań – Nowe Miasto i Wilda w Poznaniu, Wydział VIII Gospodarczy Krajowego Rejestru Sądowego pod numerem KRS: 0000910174, NIP: 7773257986. Możesz skontaktować się z nami listownie na podany wyżej adres lub e-mailem na adres: ochronadanych@verseo.pl
Masz prawo do:
- dostępu do swoich danych,
- sprostowania swoich danych,
- żądania usunięcia danych,
- ograniczenia przetwarzania,
- wniesienia sprzeciwu co do przetwarzania danych osobowych,
- przenoszenia danych osobowych,
- cofnięcia zgody.
Jeśli uważasz, że przetwarzamy Twoje dane niezgodnie z wymogami prawnymi masz prawo wnieść skargę do organu nadzorczego – Prezesa Urzędu Ochrony Danych Osobowych.
Twoje dane przetwarzamy w celu:
- obsługi Twojego zapytania, na podstawie art. 6 ust. 1 lit. b ogólnego rozporządzenia o ochronie danych osobowych (RODO);
- marketingowym polegającym na promocji naszych towarów i usług oraz nas samych w związku z udzieloną przez Ciebie zgodą, na podstawie art. 6 ust. 1 lit. a RODO;
- zabezpieczenia lub dochodzenia ewentualnych roszczeń w związku z naszym uzasadnionym interesem, na podstawie art. 6 ust. 1 lit. f. RODO.
Podanie przez Ciebie danych jest dobrowolne. Przy czym, bez ich podania nie będziesz mógł wysłać wiadomości do nas, a my nie będziemy mogli Tobie udzielić odpowiedzieć.
Twoje dane możemy przekazywać zaufanym odbiorcom:
- dostawcom narzędzi do: analityki ruchu na stronie, wysyłki informacji marketingowych.
- podmiotom zajmującym się hostingiem (przechowywaniem) strony oraz danych osobowych.
Twoje dane będziemy przetwarzać przez czas:
- niezbędny do zrealizowania określonego celu, w którym zostały zebrane, a po jego upływie przez okres niezbędny do zabezpieczenia lub dochodzenia ewentualnych roszczeń
- w przypadku przetwarzanie danych na podstawie zgody do czasu jej odwołania. Odwołanie przez Ciebie zgody nie wpływa na zgodność z prawem przetwarzania przed wycofaniem zgody.
Nie przetwarzamy danych osobowych w sposób, który wiązałby się z podejmowaniem wyłącznie zautomatyzowanych decyzji co do Twojej osoby. Więcej informacji dotyczących przetwarzania danych osobowych zawarliśmy w Polityce prywatności.
Składnia linku HTML jest prosta i opiera się na konstrukcji:
<a href="adres-strony">Tekst linku</a>Najważniejszym elementem jest tutaj atrybut href, który określa adres, do którego ma prowadzić link. Może to być pełny adres URL (np. https://adresstrony.pl/) albo ścieżka względna w obrębie serwisu (np. /blog).
Tekst znajdujący się między znacznikiem otwierającym i zamykającym to odnośnik tekstowy (anchor) – widoczny i klikalny dla użytkownika.
Tworzenie linków w kodzie – linki wewnętrzne i linki zewnętrzne
Tworzenie linków w kodzie może dotyczyć różnych typów odnośników. Najczęściej spotykamy linki wewnętrzne oraz linki zewnętrzne.
Linki wewnętrzne prowadzą do innych podstron w obrębie tej samej domeny i wspierają nawigację oraz SEO. Przykładowo:
<a href="/kontakt">Skontaktuj się z nami</a>Z kolei linki zewnętrzne kierują użytkownika do innej witryny:
<a href="https://przykładowyadres.pl">Sprawdź źródło</a>W przypadku linków zewnętrznych często stosuje się dodatkowe atrybuty, np. target=”_blank”, aby otworzyć stronę w nowej karcie. Warto jednak pamiętać o bezpieczeństwie i dodawać także rel=”noopener noreferrer”.
<a href="https://przykładowyadres.pl" target="_blank" rel="noopener noreferrer">Sprawdź źródło</a>Hiperłącze w HTML jako odnośnik tekstowy i link graficzny (link w obrazku)
Hiperłącze w HTML nie musi być wyłącznie tekstem. Najczęściej stosowany jest odnośnik tekstowy (anchor), ale równie dobrze możesz stworzyć link graficzny, czyli link w obrazku. Wystarczy umieścić znacznik <img> wewnątrz znacznika <a>:
<a href="https://adresstrony.pl"><img src="baner.jpg" alt="Nasza oferta"></a>W tym przypadku kliknięcie grafiki doprowadzi do przeniesienia użytkownika pod wskazany adres. Kluczowe jest zastosowanie atrybutu alt, który opisuje zawartość obrazu – to ważne zarówno dla dostępności, jak i SEO.
Niezależnie od formy linku warto zadbać o czytelny i naturalny anchor. Zamiast ogólnego „kliknij tutaj” lepiej używać opisowych sformułowań, które informują użytkownika i roboty Google, dokąd prowadzi odnośnik.
Linki dofollow i linki nofollow – jak wpływają na SEO?
W kontekście pozycjonowania znaczenie mają także linki dofollow i linki nofollow. Domyślnie linki nie mają atrybutu nofollow, więc mogą przekazywać sygnały rankingowe (w branży mówi się na to potocznie dofollow).
Link dofollow może przekazywać sygnały rankingowe do strony docelowej. Jeśli chcesz ograniczyć ten efekt, możesz dodać atrybut rel=”nofollow”. W praktyce wygląda to tak:
<a href="https://przykładowyadres.pl" rel="nofollow">Link sponsorowany</a>Atrybut nofollow informuje wyszukiwarkę, że nie powinna traktować odnośnika jako rekomendacji. Obecnie Google traktuje go jako wskazówkę, a nie bezwzględną dyrektywę.
Dla linków reklamowych i afiliacyjnych stosuje się również atrybut rel=”sponsored”, a w przypadku treści tworzonych przez użytkowników (np. komentarzy) – rel=”ugc”.
Najczęstsze błędy przy tworzeniu linków w HTML
Choć składnia linku HTML jest prosta, początkujący często popełniają błędy. Najczęstsze z nich to brak protokołu „https://” w linkach zewnętrznych, literówki w atrybucie href czy prowadzenie do nieistniejącej podstrony (błąd 404).
Problemem bywa także nadużywanie ogólnych anchorów oraz masowe otwieranie wszystkich linków w nowych kartach bez uzasadnienia.
Jeśli wiesz już, jak dodać link w HTML, pamiętaj, że dobre linkowanie to nie tylko kwestia techniczna. To również element strategii UX i SEO. Poprawnie zbudowane hiperłącze w HTML ułatwia nawigację, wspiera indeksowanie i pomaga użytkownikowi szybciej dotrzeć do potrzebnych informacji.
Podsumowanie
W powyższym artykule poruszone zostały tematy:
- Poradnik wyjaśnia, jak poprawnie tworzyć linki w HTML za pomocą znacznika <a> oraz atrybutu href.
- Linki wewnętrzne prowadzą do podstron w tej samej domenie, natomiast linki zewnętrzne kierują do innych witryn i wymagają dodatkowych atrybutów dla bezpieczeństwa i wygody użytkownika.
- Hiperłącze w HTML może być tekstem lub grafiką, przy czym kluczowe jest stosowanie opisowych treści oraz atrybutów alt w celu poprawy SEO i dostępności.
- Atrybuty takie jak nofollow, sponsored czy ugc pozwalają kontrolować przekazywanie sygnałów rankingowych do stron docelowych, co jest kluczowe dla strategii SEO i właściwego oznaczania linków zewnętrznych.
- Unikanie błędów technicznych, takich jak literówki w adresach czy brak protokołu HTTPS, w połączeniu z przemyślaną strategią UX i SEO, jest niezbędne do stworzenia poprawnie działającego i skutecznego linkowania.
