Kotwice HTML i odnośniki z #

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Kotwice HTML i odnośniki z #

Kotwica w HTML pozwala przenieść użytkownika do konkretnego miejsca na tej samej stronie. W odnośniku używa się znaku # oraz identyfikatora elementu, do którego ma nastąpić przewinięcie strony.

Składnia

<a href="#dane">Przejdź do danych</a>

<section id="dane">
  <h2>Dane</h2>
  <p>Treść sekcji...</p>
</section>

Po kliknięciu linku href="#dane" przeglądarka przewinie stronę do elementu, który ma atrybut id="dane".

Ważne zasady

  • znak # oznacza odwołanie do fragmentu dokumentu,
  • tekst po # musi odpowiadać wartości atrybutu id,
  • identyfikator id powinien być unikalny w dokumencie HTML,
  • link z samym href="#" zwykle przenosi na początek strony lub zmienia adres bez wskazania konkretnego elementu.

Przykład błędny

<a href="#dane">Przejdź</a>
<div id="informacje">Treść</div>

W tym przypadku przeglądarka nie znajdzie elementu o id="dane", więc nie przewinie strony do oczekiwanego miejsca.

Zastosowanie

Kotwice stosuje się m.in. w spisach treści, dokumentacji, stronach typu one-page oraz przy linkach „wróć na górę”.