Hiperłącza (odsyłacze, linki)
Hiperłącza są podstawą nawigacji w sieci. W HTML linki tworzymy za pomocą znacznika <a> (skrót od anchor, czyli kotwica). Podstawowa składnia wygląda tak:
<a href="URL">Tekst linku</a>Atrybut href (hypertext reference) określa adres, do którego prowadzi link, a pomiędzy otwierającym a zamykającym tagiem <a> umieszczamy tekst klikalny dla użytkownika.
Linki zewnętrzne
Jeśli chcemy odesłać użytkownika do innej strony lub serwisu, w href podajemy pełny adres URL, zaczynając od protokołu (np. http:// lub https://).
<a href="https://www.wikipedia.org">Wikipedia</a>Po kliknięciu przeglądarka otworzy tę stronę (domyślnie w tym samym oknie/karcie). Aby wymusić otwarcie w nowej karcie, można dodać target="_blank" — pamiętaj jednak o dodaniu rel="noopener" ze względów bezpieczeństwa.
Linki wewnętrzne
Linki nie muszą prowadzić do innej witryny — często linkujemy do innej podstrony w ramach własnego serwisu lub do miejsca w tym samym dokumencie. Gdy link prowadzi do innej strony w tej samej witrynie, możemy użyć ścieżki względnej lub bezwzględnej:
- Ścieżka względna — adres względny względem bieżącego pliku. Przykłady:
obrazek.png(plik w tym samym folderze)kontakt.html(strona w tym samym folderze)
Ścieżki względne nie zawierają domeny ani protokołu.
- Ścieżka bezwzględna (absolutna) — zawiera pełny adres do pliku, łącznie z protokołem i domeną. Przykłady:
/kurs/kontakt.html(absolutna ścieżka na tej samej domenie)https://moja-domena.pl/kurs/kontakt.html(pełny URL)
Kotwice (linki do konkretnych miejsc na stronie)
Aby link prowadził do określonego fragmentu tej samej strony, nadajemy elementowi unikalny identyfikator (id), a w linku używamy odwołania z hashem #:
<h2 id="sekcja1">Sekcja 1</h2>
<a href="#sekcja1">Przejdź do Sekcji 1</a>Kiedy użytkownik kliknie taki link, przeglądarka przewinie stronę do elementu o danym id. Kotwice są przydatne np. w spisie treści długiego dokumentu lub na stronach typu "one page".
Wskazówki dotyczące użyteczności
- Dla użytkownika dobrze jest wizualnie rozróżniać linki — przeglądarki domyślnie podkreślają tekst linków i nadają im niebieski kolor, a fioletowy dla odwiedzonych.
- W dalszych lekcjach można stylować linki za pomocą CSS, ale już teraz warto dbać o spójną i przejrzystą nawigację.
Na podstawie materiałów o semantycznym HTML
