Nawigacja: Odnośniki do etykiet
Odnośnik do etykiety
Odnośniki do etykiet (zakładka, kotwica, (ang.) anchor), są linkami przenoszącymi nas w odpowiednie miejsce treści strony. Zastosować je można zarówno dla podstrony na której się aktualnie znajdujemy, innej podstrony tego samego serwisu, jak i dowolnej witryny internetowej.
Aby stworzyć taki odnośnik, wykorzystujemy znacznik HTML a, z atrybutem href, którego wartością będzie nazwa etykiety zapisana po symbolu # (krzyżyka).
<a href="#nazwaetykiety">dowolny tekst</a>
Etykieta
Stworzyliśmy w ten sposób odnośnik do etykiety, którą stworzymy nadając wartość atrybutu id dowolnego elementu strony ( poza: HTML, HEAD, BODY, META, TITLE, STYLE, SCRIPT, BASE) o takiej samej nazwie, jak nazwa etykiety.
<a id="nazwaetykiety"></a>
Dodatkowo przykład innego znacznika niż a, do tworzenia docelowej etykiety, znacznik paragrafu:
<p id="nazwaetykiety"></p>
Uwaga: nazwa etykiety powinna się składać wyłącznie z małych liter, z pominięciem polskich znaków.
Reasumując dotychczasową wiedzę, odnośnik do etykiety tworzymy za pomocą znacznika a z atrybutem href zawierającym nazwę etykiety poprzedzoną symbolem #. Natomiast sama etykieta jest wartością pola id prawie każdego elementu znajdującego się wewnątrz ciała strony.
Przejdźmy zatem do przykładu. Najpierw w kodzie:
<!DOCTYPE html> <html lang="pl"> <head> <title>Nawigacja: odnośniki do etykiet</title> </head> <body> <p><a href="#kotw">kliknij mnie</a></p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p id="kotw">Tu prowadzi etykieta</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </body> </html>
Następnie w działaniu:
…
…
…
…
…
…
…
…
Tu prowadzi etykieta
…
…
…
…
…
…
…
…
…
…
…
Odnośnik do etykiety w zewnętrznym serwisie
Kotwicę wykorzystać możemy również odnosząc się do etykiety zewnętrznego serwisu, oczywiście pod warunkiem, że się ona tam znajduje.
Wówczas nazwę etykiety i symbol# poprzedzamy adresem serwisu:
<a href="https://adresserwisu#nazwaetykiety">dowolny tekst</a>