Co to są kotwice HTML
15 kwietnia 2022 | 2 min czytania
Jeżeli chcesz, aby użytkownik Twojej strony internetowej mógł wygodnie przemieszczać się nie tylko między stronami, ale także pomiędzy sekcjami na pojedynczej podstronie, musisz wiedzieć co to są kotwice HTML.
Załóżmy, że na jednej stronie internetowej posiadamy kilka ważnych sekcji, które zawierają równie ważne informacje i użytkownik chciałby mieć do nich szybki dostęp. Dlatego powinniśmy wrzucić link do nich w menu głównym na przykład. Ale jeżeli te sekcje są na jednej podstronie, a my dodamy link do jednej podstrony to nie ma najmniejszego sensu. Dlatego musimy dodać link do konkretnego miejsca na tej podstronie.
W pomocą przychodzą nam kotwice HTML. Tworzenie stron internetowych z nimi jest dużo praktyczniejsze i bardziej efektowne.
Zastosowanie kotwic HTML
Najczęściej kotwice stosuje się w stronach typu one-page i landing page, ale nie tylko. W tego typu stronach menu głównym są kotwice HTML, które prowadzą do poszczególnych sekcji na stronie głównej. Sekcje te na tego typu stronach są kluczowe, ponieważ zawierają konkretne informacje na dany temat.
Poza tym często kotwice HTML linkują do sekcji kontaktowych, do briefów, sekcji z opiniami, a często też faq. Czasami takie sekcje znajdują się autonomicznie na każdej podstronie, a czasami linki z kotwicami są ustawione tak, że linkują do konkretnej podstrony.
Oznaczenie elementu na stronie
Żeby utworzyć kotwicę HTML na stronie internetowej, musimy określić element, na którym ma być określony. Nie musi to być sekcja, może być dowolny, jaki tylko chcemy – paragraf, obrazek, nagłówek, blok, cokolwiek.
Następnie musimy mu nadać atrybut id. Jest to unikatowy atrybut i musimy zadbać o to, żeby przynajmniej na danej podstronie się nie powtarzał. W kodzie HTML wygląda to następująco:
<section id="id_sekcji"></section>
Dzięki temu możemy się potem odwołać do danej, w tym przypadku sekcji.
Odesłanie do kotwicy HTML
Żeby odwołać się do utworzonej kotwicy HTML musimy utworzyć odnośnik. Najprościej używając tagu <a>. Jeżeli chcemy się odwołać do kotwicy w obrębie danej podstrony tworzymy go następująco:
<a href="#id_sekcji">Kotwica HTML</a>
Natomiast jeżeli kotwica jest w innej części strony, czyli na innej podstronie, i tam ma być linkowana, musimy to dodać przed hash. Jak poniżej:
<a href="https://adresstrony.pl/podstrona#id_sekcji">Kotwica HTML</a>
Łagodne przechodzenie
Wielu może nie spodobać się to, że po kliknięciu w link sekcje tak po prostu się pojawiają. Faktycznie nie wygląda to najlepiej. Jest jednak na to sposób. Należy dodać krótki kod CSS, żeby po kliknięciu na kotwicę HTML na stronie internetowej wszystko łagodnie przechodziło, aż do sekcji, którą kliknęliśmy.
Wejdźmy w edycję pliku CSS i wklejmy ten kod:
html {
scroll-behavior: smooth;
}
Jeżeli nie do końca wiesz jak to zrobić to przeczytaj artykuł: Jak wdrożyć CSS na stronę internetową
Teraz powinno być wszystko ok!
Podobne posty:
