Linki

We wstępie do atrybutów pokazaliśmy przykład dodawania atrybutów do tagu otwierającego. W przykładzie użyto tagu <a>, ale nie omówiono ani elementu, ani konkretnych atrybutów wprowadzonych w tym przykładzie.

Tag kotwicy <a> wraz z atrybutem href tworzy hiperlink. Linki są podstawą internetu. Pierwsza strona internetowa zawierała 25 linków i tekst: „Wszystko, co jest w internecie na temat W3, jest bezpośrednio lub pośrednio połączone z tym dokumentem”. Prawdopodobnie wszystko, co jest dostępne online na temat W3, jest powiązane bezpośrednio lub pośrednio z tym dokumentem.

Od czasu, gdy Tim Berners-Lee opublikował pierwsze wyjaśnienie w sierpniu 1991 r., możliwości internetu i tagu <a> znacznie wzrosły. Linki reprezentują połączenie między 2 zasobami, z których jeden to bieżący dokument. Linki mogą być tworzone przez <a>, <area>, <form> i <link>. Poznaliśmy już <link>, a w osobnej sekcji omówimy formularze. Dostępna jest też cała sekcja poświęcona formularzom. Podczas tego szkolenia dowiesz się więcej o nieco skomplikowanym tagu <a> składającym się z jednej litery.

Atrybut href

Atrybut href nie jest wymagany, ale występuje w prawie wszystkich tagach <a>. Podanie adresu hiperlinku powoduje przekształcenie <a> w link. Atrybut href służy do tworzenia hiperlinków do lokalizacji na bieżącej stronie, innych stron w witrynie lub innych witryn. Może też być zakodowany tak, aby pobierać pliki lub wysyłać e-maile na określony adres, a nawet zawierać temat i sugerowaną treść wiadomości.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

Pierwszy link zawiera bezwzględny adres URL, którego można użyć w dowolnej witrynie na świecie, aby przejść na stronę główną MLW. Adresy URL bezwzględne zawierają protokół, w tym przypadku https://, oraz nazwę domeny. Gdy protokół jest zapisany jako //, jest to protokół domyślny, co oznacza „użyj tego samego protokołu, który jest obecnie używany”.

Względne adresy URL nie zawierają protokołu ani nazwy domeny. Są one „względne” w stosunku do bieżącego pliku. MLW to strona jednostronicowa, ale ta seria HTML ma kilka sekcji. Aby utworzyć link z tej strony do lekcji o atrybutach, używany jest względny adres URL <a href="../attributes/">Attributes</a>.

Drugi link to tylko identyfikator fragmentu linku, który prowadzi do elementu z atrybutem id="teachers", na bieżącej stronie, jeśli taki element istnieje. Przeglądarki obsługują też 2 linki „u góry strony”: kliknięcie <a href="#top">Top</a> (bez względu na wielkość liter) lub nawet samego <a href="#">Top</a> przenosi użytkownika na początek strony, chyba że istnieje element o identyfikatorze top ustawionym w tym samym przypadku liter.

MLW to dość długi dokument. Aby nie trzeba było przewijać, możesz dodać link z powrotem na górę z dołu sekcji #teachers:

<a href="#top">Go to top.</a>

Trzeci link łączy obie wartości: zawiera bezwzględny adres URL, a po nim fragment linku. Umożliwia to bezpośrednie połączenie z sekcją w zdefiniowanym adresie URL, w tym przypadku z sekcją #teachers na stronie głównej MLW. Strona MLW wczytuje się, a przeglądarka przewija do sekcji dla nauczycieli bez wysyłania fragmentu w żądaniu HTTP.

Atrybut href może zaczynać się od mailto: lub tel:, aby wysyłać e-maile lub nawiązywać połączenia. Sposób obsługi linku zależy od urządzenia, systemu operacyjnego i zainstalowanych aplikacji.

Link mailto nie musi zawierać adresu e-mail, ale może go zawierać wraz z tekstem cc, bcc, subject i body, aby wstępnie wypełnić e-maila. Domyślnie otworzy się klient poczty e-mail. Możesz wstępnie wypełnić temat i treść e-maila bez adresu e-mail, aby umożliwić użytkownikom witryny zapraszanie znajomych. W linku w stopce dokumentu podajemy adres URL rejestracji:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Znak zapytania (?) oddziela mailto: i adres e-mail (jeśli występuje) od wyszukiwanego hasła. W zapytaniu pola są rozdzielone znakami & (&), a nazwy pól są powiązane z wartościami za pomocą znaków =. Cały ciąg jest zakodowany w procentach, co jest konieczne, jeśli wartość href nie jest ujęta w cudzysłów lub jeśli wartości zawierają cudzysłów.

To, która aplikacja zostanie otwarta, gdy użytkownik kliknie, naciśnie lub wciśnie klawisz Enter w przypadku linku tel, zależy od systemu operacyjnego, zainstalowanych aplikacji i ustawień na urządzeniu użytkownika. Na iPhonie może otworzyć się FaceTime, aplikacja Telefon lub Kontakty. Na komputerze z systemem Windows może otworzyć się Skype, jeśli jest zainstalowany.

Istnieje kilka innych typów adresów URL, takich jak obiekty blob i adresy URL danych (przykłady znajdziesz w omówieniu atrybutu download). W przypadku bezpiecznych witryn (tych, które są obsługiwane przez https) można tworzyć i uruchamiać protokoły specyficzne dla aplikacji za pomocą funkcji registerProtocolHandler().

Jeśli dodajesz linki, które prawdopodobnie otworzą inne zainstalowane aplikacje, warto o tym poinformować użytkownika. Upewnij się, że tekst między tagami otwierającym i zamykającym informuje użytkownika, jaki typ linku ma zamiar aktywować. Selektory atrybutów CSS, takie jak [href^="mailto:"], [href^="tel:"] i [href$=".pdf"], mogą być używane do kierowania stylów według typu aplikacji.

Materiały do pobrania

Atrybut download należy uwzględnić, gdy atrybut href wskazuje zasób do pobrania. Wartość atrybutu download to sugerowana nazwa pliku, w którym zasób ma zostać zapisany w lokalnym systemie plików użytkownika. Optymalizator SVG SVGOMG używa atrybutu download, aby zasugerować nazwę pliku do pobrania, który tworzy optymalizator. Gdy hal.svg jest zoptymalizowany, tag otwierający link do pobierania SVGOMG wygląda podobnie do tego:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Dostępna jest też wersja demonstracyjna <canvas>, która tworzy adres URL danych PNG do pobrania.

Aby utworzyć link do zasobu do pobrania, podaj adres URL zasobu jako wartość atrybutu href i sugerowaną nazwę pliku dla użytkownika jako wartość atrybutu download.

Kontekst przeglądania

Atrybut target umożliwia określenie kontekstu przeglądania w przypadku nawigacji po linkach (i przesyłania formularzy). Cztery słowa kluczowe z prefiksem w postaci podkreślenia, w których nie jest rozróżniana wielkość liter, zostały omówione w kontekście elementu <base>. Obejmuje to m.in.:

• (Domyślnie) _self: otwórz link w bieżącym oknie.
• _blank: otwórz link w nowej karcie.
• _parent: Otwórz link w obiekcie nadrzędnym lub elemencie iframe.
• _top: otwórz link w najwyższym elemencie nadrzędnym. Jest to szczególnie przydatne, jeśli link jest głęboko zagnieżdżony.

Jeśli link nie jest zagnieżdżony, _top i _parent działają tak samo jak _self. Atrybut target nie jest ograniczony do tych 4 słów kluczowych: można użyć dowolnego terminu.

Każdy kontekst przeglądania (czyli każda karta przeglądarki) ma nazwę kontekstu przeglądania. Linki mogą otwierać linki na bieżącej karcie, nowej nienazwanej karcie lub nowej lub istniejącej nazwanej karcie. Domyślnie nazwa jest pustym ciągiem znaków.

Aby otworzyć link w nowej karcie, użytkownik może kliknąć prawym przyciskiem myszy i wybrać „Otwórz w nowej karcie”. Deweloperzy mogą to wymusić, dodając target="_blank".

Link z symbolem target="_blank" otwiera się w nowej karcie o pustej nazwie, a każde kliknięcie linku powoduje otwarcie nowej, nienazwanej karty. Może to spowodować otwarcie wielu nowych kart. Zbyt wiele kart. Jeśli na przykład użytkownik kliknie <a href="registration.html" target="_blank">Register Now</a>15 razy<a href="registration.html" target="_blank">Register Now</a>, formularz rejestracyjny otworzy się w 15 osobnych kartach. Ten problem można rozwiązać, podając nazwę kontekstu karty. Jeśli uwzględnisz targetatrybut z wartością uwzględniającą wielkość liter, np. <a href="registration.html" target="reg">Register Now</a>, pierwsze kliknięcie otworzy formularz rejestracyjny w nowej reg karcie. Kliknięcie tego linku jeszcze 15 razy spowoduje ponowne wczytanie rejestracji w reg kontekście przeglądania bez otwierania dodatkowych kart.

Atrybut rel określa, jakie rodzaje linków tworzy link, definiując relację między bieżącym dokumentem a zasobem, do którego prowadzi hiperlink. Wartość atrybutu musi być listą rozdzieloną spacjami, zawierającą co najmniej 1 element z wartości atrybutu rel obsługiwanych przez tag <a>.

Słowo kluczowe nofollow można dodać, jeśli nie chcesz, aby roboty indeksujące podążały za linkiem. Wartość external można dodać, aby wskazać, że link prowadzi do zewnętrznego adresu URL, a nie do strony w bieżącej domenie. Słowo kluczowe help oznacza, że hiperlink będzie zawierać pomoc kontekstową. Po najechaniu kursorem na link z wartością rel pojawi się kursor pomocy zamiast zwykłego wskaźnika. Nie używaj tej wartości tylko po to, aby uzyskać kursor pomocy. Zamiast tego użyj właściwości cursor CSS. Wartości prev i next można stosować w linkach prowadzących do poprzedniego i następnego dokumentu w serii.

Podobnie jak w przypadku <link rel="alternative">, znaczenie <a rel="alternative"> zależy od innych atrybutów. Alternatywne kanały RSS będą też zawierać type="application/rss+xml" lub type="application/atom+xml, alternatywne formaty będą zawierać atrybut type, a tłumaczenia będą zawierać atrybut hreflang. Jeśli treść między tagami otwierającym i zamykającym jest w języku innym niż główny język dokumentu, dodaj atrybut lang. Jeśli język dokumentu, do którego prowadzi hiperlink, jest inny, dodaj atrybut hreflang.

W tym przykładzie umieszczamy adres URL przetłumaczonej strony jako wartość atrybutu href, rel="alternate", aby wskazać, że jest to alternatywna wersja witryny. Atrybut hreflang określa język tłumaczeń:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Jeśli tłumaczenie na język francuski jest plikiem PDF, możesz podać atrybut type z typem MIME PDF połączonego zasobu. Chociaż typ MIME ma charakter wyłącznie informacyjny, zawsze warto poinformować użytkownika, że link otworzy dokument w innym formacie.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Śledzenie kliknięć linków

Jednym ze sposobów śledzenia interakcji użytkowników jest wysyłanie pinga do adresu URL po kliknięciu linku. Atrybut ping, jeśli występuje, zawiera rozdzieloną spacjami listę bezpiecznych adresów URL (które zaczynają się od https), które powinny zostać powiadomione lub pingowane, jeśli użytkownik aktywuje hiperlink. Przeglądarka wysyła POST żądania z treścią PING do adresów URL wymienionych jako wartość atrybutu ping.

Wskazówki dotyczące wrażeń użytkownika

• Podczas pisania kodu HTML zawsze pamiętaj o komforcie użytkowników. Linki powinny zawierać wystarczająco dużo informacji o zasobie, do którego prowadzą, aby użytkownik wiedział, co kliknąć.
• W bloku tekstu wygląd linków powinien wystarczająco różnić się od otaczającego tekstu, aby użytkownicy mogli łatwiej odróżnić linki od innych treści. Używaj wielu wskaźników wizualnych, takich jak kolor i podkreślenie. Sam kolor nie wystarczy.
• Zawsze uwzględniaj style fokusu. Dzięki temu użytkownicy korzystający z nawigacji za pomocą klawiatury wiedzą, gdzie się znajdują podczas przechodzenia między elementami treści.
• Treść między tagami otwierającym <a> i zamykającym </a> to domyślna nazwa dostępna linku, która powinna informować użytkownika o miejscu docelowym lub przeznaczeniu linku. Jeśli zawartością linku jest obraz, alt opis jest nazwą dostępną. Tekst linku i alt tekst powinny być bardziej opisowe niż „kliknij tutaj” lub „więcej informacji”. Zamiast tego powinien informować użytkownika, dokąd trafi po aktywowaniu linku. Jest to bardzo ważne dla użytkowników czytników ekranu i wyników wyszukiwania.
• Nie umieszczaj w linku treści interaktywnych, takich jak <button> czy <input>. Nie zagnieżdżaj linku w elementach <button> ani <label>. Strona HTML będzie nadal renderowana, ale zagnieżdżanie elementów, na których można ustawić fokus i które można kliknąć, w elementach interaktywnych pogarsza wrażenia użytkowników.
• Jeśli atrybut href jest obecny, naciśnięcie klawisza Enter, gdy fokus znajduje się na elemencie <a>, spowoduje jego aktywację.
• Linki nie są ograniczone do HTML-a. Element a może być też używany w pliku SVG, tworząc link z atrybutami „href” lub „xlink:href”.

Linki i JavaScript

Atrybut links zwraca element HTMLCollection pasujący do elementów a i area, które mają atrybut href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

W tej sekcji znajdziesz wszystkie informacje o linkach. W następnej sekcji omówimy listy, które musimy poznać, aby móc tworzyć listy linków, czyli nawigację.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o linkach.