Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!

Jak działa klasyczny link wie prawie każdy, kto tworzył choćby najprostszą stronę. Wstawiamy odpowiedni kod HTML i jako parametr „href” podaje adres URL, do którego link (odnośnik) ma prowadzić. Oczywiście są też mniej typowe odnośniki, jak choćby te, o których pisałem na początku roku, czyli mailto, callto, tel, skype, sms i fax. Ale popularność stron typu One Page (Single Page) i Landing Page (Sales Page) sprawia, że warto przyjrzeć się jeszcze jednemu typowi odnośników…

Etykiety, kotwice (anchor) i zakładki (odsyłacze)

One Page (Single Page) i Landing Page (Sales Page) to specjalny typ stron, które składając się z… jednej strony, na której zawarta jest cała treść, którą chcemy przekazać. I choć między One Page a Landing Page są pewne różnice (pierwsza to właściwie standardowa strona, tyle, że wszystko znajduje się na jednej stronie, przewijanej czy poziomo czy pionowo, druga, to specjalnie przygotowana strona, która ma na celu pokazać i ew. sprzedać produkt/usługę, bez zbytnych rozpraszaczy), to w obu przypadkach zazwyczaj warto dodać menu nawigacyjne.

W przypadku standardowych stron wielostronicowych wystarczy kod HTML typu:

<a href="https://webinsider.pl/kontakt">Kontakt</a>

Po kliknięciu w który zostaniemy przekierowani na stronę:

https://webinsider.pl/kontakt

Jednak w przypadku stron typu One Page (Single Page) i Landing Page nie mamy podstron, na które możemy skierować użytkownika, bo wszystkie informacje są na jednej stronie. I tu do gry wkraczają etykiety i kotwice (anchor), czyli różne nazwy na odnośnik wewnętrzny, działający w ramach jednej strony.

Link (odsyłacz/zakładka)w takim przypadku może wyglądać tak:

<a href="#kontakt">Kontakt</a>

Lub gdybyśmy chcieli odesłać do konkretnego fragmentu jakiejś innej strony:

<a href="https://webinsider.pl/#kontakt">Kontakt</a>

Ale by on zadziałał, to musimy zdefiniować miejsce docelowe, czyli właśnie kotwicę (anchor/anchor link), czy też inaczej etykietę.

Jeszcze relatywnie niedawno (HTML4), dość popularnym sposobem było skorzystanie ze atrybutu „name”, który umieszczało się w miejscu, do którego miał prowadzić odnośnik. Np.:

<a name="kontakt"></a>

Wraz z nadejściem HTML5 trochę się to zmieniło, i choć przeglądarki cały czas wspierają „name” w tym kontekście, to zdecydowanie lepiej skorzystać z atrybutu „id”, który – jeśli dobrze kojarzę – ma też pierwszeństwo nad „name” (wyższy priorytet). Np.:

<div id="kontakt">...</>

W obu przypadkach, tworząc nazwę („name” lub „id”) warto swoją fantazję ograniczyć do standardowych liter (a-z, najlepiej małe litery, bez polskich znaków), cyfr (0-9) oraz myślnika (-) i podkreślnika (_).

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Monika ćwiczy przed kongresem ko..., ale jej też należy się zniżka 80% na skięgowość wFirma dla oglądających WebInsider.pl
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Roztańczona Karolina skorzystała z promocji dla czytelników WebInsider.pl i zapłaciła 80% mniej za księgowość internetową wFirma