Aby dodać kotwicę w HTML (nazywaną też anchor lub etykietą), należy umieścić w kodzie specjalny znacznik lub atrybut, który pozwala linkować do konkretnego miejsca w dokumencie. Dzięki temu użytkownicy mogą szybko przeskakiwać do wybranych sekcji strony – jest to szczególnie przydatne w długich artykułach, spisach treści czy FAQ.
Czym jest kotwica w HTML?
Kotwica to oznaczone miejsce (punkt odniesienia) na stronie HTML, do którego można odesłać użytkownika poprzez kliknięcie w link. Taka nawigacja działa zarówno w obrębie jednej strony, jak i przy przekierowywaniu z innych podstron tej samej witryny.
Sposoby dodawania kotwic w HTML
Tworzenie kotwicy za pomocą atrybutu id
Jest to najczęściej stosowana i zalecana metoda. Polega na przypisaniu wybranemu elementowi (np. nagłówkowi, sekcji lub dowolnemu innemu znacznikowi) unikalnego atrybutu id.
Przykład –
<!-- Definiujemy kotwicę -->
<h2 id="sekcja-kontakt">Kontakt</h2>
<!-- Odnośnik do kotwicy -->
<a href="#sekcja-kontakt">Przejdź do sekcji Kontakt</a>
Kliknięcie w link „Przejdź do sekcji Kontakt” spowoduje przeskok do elementu <h2 id="sekcja-kontakt"> na tej samej stronie.
Zasady –
- Każda kotwica (wartość
id) musi być unikalna na stronie; - Kotwicę można przypisać do dowolnego elementu HTML.
Stara metoda – atrybut name w znaczniku <a>
Ten sposób był stosowany w starszych wersjach HTML, jednak dziś zaleca się stosowanie id. Jeśli musisz obsłużyć bardzo stare przeglądarki, możesz napotkać:
<!-- Definicja kotwicy -->
<a name="sekcja-oferta"></a>
<!-- Link do kotwicy -->
<a href="#sekcja-oferta">Przejdź do sekcji Oferta</a>
W nowoczesnych stronach korzystaj z atrybutu id.
Przykłady zastosowań kotwic
Spis treści z szybkim dostępem do rozdziałów
<nav>
<ul>
<li><a href="#wstep">Wstęp</a></li>
<li><a href="#przyklady">Przykłady</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<h2 id="wstep">Wstęp</h2>
<p>...</p>
<h2 id="przyklady">Przykłady</h2>
<p>...</p>
<h2 id="kontakt">Kontakt</h2>
<p>...</p>
Link „Powrót do góry strony”
<!-- Na górze strony -->
<a id="top"></a>
<!-- W treści artykułu -->
<a href="#top">Powrót do góry strony</a>
FAQ – skoki do odpowiedzi
<ul>
<li><a href="#pytanie-1">Jak dodać kotwicę?</a></li>
<li><a href="#pytanie-2">Jak linkować do kotwicy?</a></li>
</ul>
<h3 id="pytanie-1">Jak dodać kotwicę?</h3>
<p>Odpowiedź...</p>
<h3 id="pytanie-2">Jak linkować do kotwicy?</h3>
<p>Odpowiedź...</p>
Najczęstsze błędy i dobre praktyki
- Nie powtarzaj tej samej nazwy kotwicy (
id) na jednej stronie – każda wartośćidpowinna być unikalna; - Kotwica powinna być opisana jasno – najlepiej używać czytelnych nazw składających się z małych liter i łączników (np.
sekcja-kontakt); - Możesz linkować do kotwic także z zewnętrznych stron, wykorzystując pełny adres URL, np.
http://example.com/artykul.html#sekcja-kontakt.
Wskazówki praktyczne
- W nowoczesnych CMS (takich jak WordPress) wiele motywów i edytorów blokowych pozwala ustawić kotwicę bezpośrednio w interfejsie edycji, poprzez pole na identyfikator HTML (kotwicę),
- Kotwic możesz używać zarówno do usprawnienia nawigacji na stronach docelowych, jak i do budowania linków w spisach treści, FAQ, instrukcjach czy rozbudowanych artykułach,
- Kotwice są także wykorzystywane przez wyszukiwarki, które mogą wyświetlać drobne linki do poszczególnych sekcji strony w wynikach wyszukiwania.
Dzięki kotwicom poprawisz użyteczność i czytelność swoich stron – warto korzystać z nich zawsze tam, gdzie można ułatwić użytkownikowi szybkie przechodzenie do najważniejszych fragmentów treści.
