Linki (hiperłącza) są fundamentem World Wide Web i stanowią kluczowy element każdej strony internetowej. Pozwalają użytkownikom na nawigację pomiędzy stronami, ułatwiają znalezienie dodatkowych informacji oraz poprawiają doświadczenie użytkownika. W tym artykule dowiesz się, jak tworzyć linki w HTML oraz jak sprawić, by otwierały się w nowej karcie przeglądarki.
Podstawy tworzenia linków w HTML
Znacznik <a> – element służący do tworzenia linków
Do tworzenia linków w HTML służy znacznik <a>, który jest skrótem od angielskiego słowa „anchor” (kotwica). To element uniwersalny, wykorzystywany niemal na każdej stronie.
Podstawowa składnia linku wygląda następująco:
<a href="https://adres-strony.pl">Tekst linku</a>
W tym kodzie warto zapamiętać, co oznaczają poszczególne elementy:
- znacznik
<a>– rozpoczyna hiperłącze, - atrybut
href– określa adres URL strony docelowej, - tekst linku – to widoczna część, w którą klika użytkownik,
- znacznik zamykający
</a>– kończy hiperłącze.
Atrybuty znacznika <a>
Znacznik <a> posiada kilka ważnych atrybutów, które warto znać:
- href – określa adres docelowy odsyłacza;
- target – definiuje, gdzie otworzy się odsyłacz (np. w tej samej lub nowej karcie);
- rel – opisuje relację między bieżącą stroną a stroną docelową.
Tworzenie linku krok po kroku
Krok 1 – wybierz adres docelowy
Zanim utworzysz link, zdecyduj, na jaki adres ma on prowadzić. Może to być pełny adres internetowy, np. https://www.google.pl, lub lokalna ścieżka do pliku HTML w Twoim projekcie, np. inne-strony/moja-strona.html.
Krok 2 – przygotuj tekst linku
Tekst linku powinien być opisowy i jasno komunikować, dokąd prowadzi. Zamiast ogólnego „kliknij tutaj” użyj np. „przeczytaj artykuł o HTML”.
Krok 3 – napisz kod HTML
Podstawowy link do strony zewnętrznej może wyglądać tak:
<a href="https://kurshtmlcss.pl">Odnośnik do strony głównej kursu</a>
Po dodaniu tego kodu do HTML użytkownik zobaczy tekst „Odnośnik do strony głównej kursu”, a po kliknięciu zostanie przeniesiony na wskazaną stronę.
Otwieranie linku w nowej karcie
Atrybut target="_blank"
Aby link otwierał się w nowej karcie przeglądarki zamiast w bieżącej, dodaj do znacznika <a> atrybut target="_blank":
<a href="https://www.example.com" target="_blank">Otwórz w nowej karcie</a>
Bezpieczeństwo i wydajność: atrybut rel przy _blank
Przy linkach z target="_blank" dodaj rel="noopener noreferrer", aby zwiększyć bezpieczeństwo i zapobiec potencjalnym nadużyciom (m.in. przejęciu dostępu do okna źródłowego):
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Otwórz w nowej karcie (bezpiecznie)</a>
Praktyczne przykłady
Oto kilka praktycznych przykładów linków otwierających się w nowej karcie:
<a href="https://www.google.pl" target="_blank" rel="noopener noreferrer">Otwórz Google w nowej karcie</a>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Kliknij tutaj</a>
<a href="https://how2html.pl" target="_blank" rel="noopener noreferrer">Kurs HTML</a>
Inne wartości atrybutu target
Najczęściej używane wartości to: _blank – otwiera link w nowej, nieużywanej karcie; oraz _self – otwiera link w tej samej karcie (to zachowanie domyślne, dlatego atrybut można pominąć).
Tworzenie linków do stron lokalnych
Jeśli chcesz utworzyć link do innego pliku HTML w swoim projekcie, użyj ścieżki względnej:
<a href="inne-strony/moja-strona.html">Moja strona</a>
W tym przykładzie zakładamy, że plik moja-strona.html znajduje się w folderze inne-strony w tym samym katalogu co bieżący plik.
Zaawansowane techniki tworzenia linków
Tworzenie linków do sekcji na stronie
Możesz tworzyć linki prowadzące bezpośrednio do konkretnej sekcji na stronie, korzystając z kotwic (anchors). Najpierw zdefiniuj kotwicę w HTML:
<h2 id="sekcja2">Sekcja 2</h2>
<p>Tutaj znajduje się treść sekcji 2.</p>
Następnie utwórz link prowadzący do tej sekcji:
<a href="#sekcja2">Przejdź do sekcji 2</a>
Po kliknięciu tego linku użytkownik zostanie automatycznie przewinięty do sekcji z identyfikatorem sekcja2.
Tworzenie linków graficznych
Zamiast tekstu możesz użyć obrazka jako linku:
<a href="https://www.example.com">
<img src="moja-ikona.png" alt="Ikona linku">
</a>
W tym przykładzie obrazek moja-ikona.png będzie działał jako klikalny link prowadzący do strony docelowej.
Stylizacja linków za pomocą CSS
Domyślnie linki są niebieskie i podkreślone. Wygląd możesz łatwo zmienić za pomocą CSS:
<style>
a {
color: blue; /* Kolor tekstu */
text-decoration: none; /* Usunięcie domyślnego podkreślenia */
}
a:hover {
color: red; /* Zmiana koloru po najechaniu */
text-decoration: underline; /* Podkreślenie po najechaniu */
}
</style>
<a href="https://www.example.com">Stylizowany link</a>
Dobre praktyki podczas tworzenia linków
Zanim opublikujesz stronę, pamiętaj o poniższych zasadach, które poprawiają użyteczność i SEO:
- używaj opisowych tekstów – unikaj ogólników typu „kliknij tutaj”; stosuj jasne, kontekstowe frazy, które informują, dokąd prowadzi link;
- nie nadużywaj nowych kart –
target="_blank"stosuj tam, gdzie to uzasadnione (np. dokumenty, materiały uzupełniające), aby nie frustrować użytkowników; - dbaj o aktualność – regularnie weryfikuj, czy linki działają i prowadzą do właściwych, aktywnych stron;
- zachowuj spójność kontekstu – link powinien kierować do treści tematycznie powiązanej z anchor textem i otoczeniem na stronie;
- preferuj bezpieczne protokoły – stosuj adresy z
https://oraz przy_blankdodawajrel="noopener noreferrer"dla bezpieczeństwa.
