Znacznik a, czyli jak wstawić hiperłącze w HTML?

redakcja | 29.08.2021 20:34

Znacznik <a> pozwala nam wstawić w HTML hiperłącze, czyli tzw. link do innych stron internetowych, miejsce na stronie, plików, a nawet adresów e-mail czy numerów telefonów. 

Najprostsza postać hiperłącza może wyglądać: <a href="/znacznik-br.html">Znacznik br</a> gdzie z tego adresu odesłalibyśmy użytkownika to adresu https://kurs-na-html.pl/znacznik-br.html. Przeczytaj poniżej co znaczy atrybut href i jak się zachowuje i jakie jeszcze atrybuty i właściwości można użyć w hiperłączu <a>.

Mężczyzna pracuje przed komputerem, ilustracja do artykułu
Mężczyzna pracuje przed komputerem, ilustracja do artykułu | envato, autor arthurhidden

Atrybuty znacznika <a>

  • href - skrót od ang. hypertext reference  - w atrybucie tym podajemy adres, do którego link ma prowadzić.
  • target - atrybut pozwala nam zdefiniować okno, w którym zostanie otwarty kliknięty link.
  • ping  - można dodać listę adresów po przecinku, do których pójdzie zapytanie POST po kliknięciu odnośnika. Przeczytaj, co to jest atrybut ping w osobnym artykule. 
  • rel - określa relację linki z obiektem docelowym. Jednym z popularniejszych właściwości, jakimi się spotkasz będzie rel="canonical" oraz rel="author", bo są związane z SEO.
  • title - atrybut title definiuje tytuł elementu, do którego kieruje łącze. Zawartość tego atrybutu jest również pokazywana po najechaniu myszą na element. Title ma bardzo duże znaczenie w przystosowaniu strony dla osób niedowidzących, aby ułatwić dostęp. 

Atrybut href

Linki w atrybucie href dzielimy na bezwzględne np.  https://kurs-na-html.pl/html/. Taki link posiada protokół, domenę i ścieżkę oraz linki względne np. /zdjecie.jpg lub ../zdjecie.jpg, które odnoszą się do obecnej ścieżce w której się znajdujemy.

Jeżeli jesteśmy w ścieżce https://kurs-na-html.pl/html/ to link href="../zdjecie.jpg" będzie kierował do https://kurs-na-html.pl/zdjecie.jpg, tak samo jak href="/zdjecie.jpg", a link href="zdjecie.jpg" kierowałby do  https://kurs-na-html.pl/html/zdjecie.jpg

Atrybut target

Atrybut target może przyjąć następujące wartości:

  • _blank - otwiera dokument w nowym oknie lub nowej karcie.
  • _self - jest to domyślny atrybut znacznika <a>- nowy dokument otwiera się w obecnym oknie/ramce. 
  • _top - likwidowane są wszelkie ramki, a dokument otwiera się w oknie głównym. Pamiętaj, że bardzo rzadko buduje się już strony oparte o ramki.
  • _parent - okno macierzyste lub okno rodzica ramki. 
Nie przegap
Artykuły z portalu