Linki

We wprowadzeniu do sekcji atrybutów znajdziesz przykład dodawania atrybutów do tagu otwierającego. W przykładzie użyto tagu <a>, ale nie omówiono ani elementu, ani zawartych w nim atrybutów:

Tag kotwicy <a> i atrybut href tworzą hiperlink. Linki to podstawa internetu. Pierwsza strona internetowa zawierała 25 linków: „Wszystko, co jest online na temat W3, jest bezpośrednio lub pośrednio połączone z tym dokumentem”. Wszystko to, co można znaleźć w internecie na temat W3, można znaleźć bezpośrednio lub pośrednio w tym dokumencie.

Potęga internetu i tag <a> znacznie wzrosły od czasu, gdy Tim Berners-Lee opublikował to pierwsze wyjaśnienie w sierpniu 1991 roku. Linki reprezentują połączenie między 2 zasobami, z których 1 to bieżący dokument. Linki mogą być tworzone za pomocą usług <a>, <area>, <form> i <link>. Wiesz już, czym jest <link>, a formularze znajdziesz w osobnej sekcji. Do dyspozycji gości jest też cała sekcja z informacjami o formularzu. W tej sesji omówimy, czym jest jednoliterowy, niezbyt prosty tag <a>.

Atrybut href

Atrybut href nie jest wymagany, ale znajduje się prawie we wszystkich tagach <a>. Podanie adresu hiperlinku spowoduje przekształcenie elementu <a> w link. Atrybut href służy do tworzenia hiperlinków do lokalizacji na bieżącej stronie, innych stron w witrynie lub do wszystkich stron. Może też być zakodowany w celu pobierania plików lub wysyłania e-maili na określony adres, łącznie z tematem i sugerowaną treścią e-maila.

<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ść do strony głównej MLW. Bezwzględne adresy URL obejmują protokół, w tym przypadku https://, oraz nazwę domeny. Protokół zapisany po prostu jako // jest to protokół niejawny, czyli „użyj tego samego protokołu, który jest obecnie używany”.

Względne adresy URL nie zawierają protokołu ani nazwy domeny. Mają one charakter względny w stosunku do bieżącego pliku. MLW to witryna jednostronicowa, ale seria HTML ma kilka sekcji. Aby dodać na tej stronie link do lekcji o atrybutach, używany jest względny adres URL <a href="../attributes/">Attributes</a>.

Drugi link to po prostu identyfikator fragmentu linku, który będzie łączyć się z elementem na bieżącej stronie z wartością id="teachers",, jeśli taki istnieje. Przeglądarki obsługują też 2 linki „u góry strony”: kliknięcie <a href="#top">Top</a> (wielkość liter nie jest rozróżniana) lub po prostu <a href="#">Top</a> spowoduje przewinięcie użytkownika do góry strony, chyba że element o identyfikatorze top ma taką samą wielkość liter.

MLW to dość długi dokument. Aby zapisać przewijanie, możesz z powrotem dodać link u dołu sekcji #teachers:

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

Trzeci link łączy te dwie wartości: zawiera bezwzględny adres URL, po którym następuje fragment linku. Umożliwia to bezpośrednie połączenie z sekcją w zdefiniowanym adresie URL, w tym przypadku do sekcji #teachers strony głównej MLW. Zostanie wczytana strona MLW. Następnie przeglądarka przewinie się do sekcji nauczycieli bez wysyłania fragmentu w żądaniu HTTP.

W przypadku e-maili i połączeń atrybut href może zaczynać się od mailto: lub tel:. Obsługiwany jest ten link w zależności od urządzenia, systemu operacyjnego i zainstalowanych aplikacji.

Link mailto nie musi zawierać adresu e-mail, ale umożliwia wstępne wypełnienie e-maila razem z tekstami cc, bcc, subject i body. Domyślnie zostanie otwarty klient poczty e-mail. Możesz wstępnie wypełnić temat i treść e-maila bez adresu e-mail, aby użytkownicy witryny mogli zapraszać własnych znajomych. W stopce dokumentu w linku umieszczamy adres URL strony 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 ampersandy (&) rozdzielają pola, a znaki równości (=) oznaczają każdą nazwę pola z jej wartością. Cały ciąg znaków jest zakodowany procentowo, co jest zdecydowanie konieczne, jeśli wartość href nie jest ujęta w cudzysłów lub jeśli wartości zawierają cudzysłowy.

To, która aplikacja jest otwierana, gdy użytkownik klika, klika lub naciska Enter na linku tel, zależy od systemu operacyjnego, zainstalowanych aplikacji i ustawień użytkownika na urządzeniu. iPhone może otworzyć FaceTime, aplikację Telefon lub kontakty. Na pulpicie systemu Windows może zostać otwarty Skype (jeśli jest zainstalowany).

Jest kilka innych typów adresów URL, np. obiekty blob i adresy URL danych (przykłady znajdziesz w opisie atrybutów download). W przypadku bezpiecznych witryn (wyświetlanych przez https) można tworzyć i uruchamiać protokoły dotyczące aplikacji za pomocą metody registerProtocolHandler().

Dodając linki, które mogą otwierać inne zainstalowane aplikacje, warto poinformować o tym użytkownika. Tekst między otwierającym i zamykającym tagiem powinien informować użytkownika, jakiego typu link ma uruchomić. Selektorów atrybutów CSS, np. [href^="mailto:"], [href^="tel:"] i [href$=".pdf"], można używać do kierowania stylów według typu aplikacji.

Zasoby do pobrania

Atrybut download powinien być uwzględniany, gdy href wskazuje zasób do pobrania. Wartość atrybutu download to sugerowana nazwa pliku zasobu, który ma zostać zapisany w lokalnym systemie plików użytkownika. SVGOMG, optymalizator SVG korzysta z atrybutu download, aby zaproponować nazwę pliku tworzonego przez optymalizatora obiektu blob do pobrania. Po zoptymalizowaniu hal.svg tag otwierający link pobierania SVGOMG jest podobny do:

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

Możesz też skorzystać z wersji demonstracyjnej <canvas>, która tworzy adres URL danych PNG do pobrania.

Aby podać link do zasobu do pobrania, podaj adres URL zasobu jako wartość atrybutu href i sugerowaną nazwę pliku, którą można użyć w systemie plików użytkownika jako wartość atrybutu download.

Kontekst przeglądania

Atrybut target umożliwia definiowanie kontekstu przeglądania na potrzeby nawigacji po linkach (oraz przesyłania formularzy). W elemencie <base> omówiono 4 słowa kluczowe z podkreśleniem, bez rozróżniania wielkości liter. Zawierają one domyślne _self (bieżące okno) _blank, które otwiera link w nowej karcie, _parent, który jest nadrzędnym, jeśli bieżący link jest umieszczony w obiekcie lub elemencie iframe, oraz _top, który jest najwyższym elementem nadrzędnym, szczególnie przydatnym, gdy bieżący link jest głęboko zagnieżdżony. Jeśli link nie jest zagnieżdżony, wartości _top i _parent są takie same jak _self. Atrybut target nie jest ograniczony do tych 4 kluczowych terminów – można używać dowolnych haseł.

Każdy kontekst przeglądania – zasadniczo każda karta przeglądarki – ma nazwę kontekstu przeglądania. Linki mogą otwierać linki w bieżącej karcie, nowej karcie bez nazwy lub nowej bądź dotychczasowej karcie nazwanej. Domyślnie jest to pusty ciąg 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 tag target="_blank".

Link z usługą target="_blank" zostanie otwarty w nowej karcie z pustą nazwą. Po każdym kliknięciu linku będzie otwierana nowa, nienazwana karta. Może to spowodować utworzenie 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, formularz rejestracyjny otworzy się na 15 oddzielnych kartach. Ten problem można rozwiązać, podając nazwę kontekstu karty. Dzięki dodaniu atrybutu target z wartością (np. <a href="registration.html" target="reg">Register Now</a>) z uwzględnieniem wielkości liter, pierwsze kliknięcie tego linku spowoduje otwarcie formularza rejestracji w nowej karcie reg. Kliknięcie tego linku jeszcze 15 razy spowoduje ponowne załadowanie rejestracji w kontekście przeglądania witryny reg bez otwierania dodatkowych kart.

Atrybut rel określa rodzaje linków tworzonych przez link, definiując relację między bieżącym dokumentem a zasobem, do którego link jest w hiperlinku. Wartość atrybutu musi być listą rozdzielonych spacjami, która znajduje się na co najmniej 1 wyniku wartości atrybutu rel obsługiwanej przez tag <a>.

Jeśli nie chcesz, aby roboty podążały za linkiem, możesz uwzględnić słowo kluczowe nofollow. Wartość external można dodać, aby wskazać, że link kieruje do zewnętrznego adresu URL, a nie do strony w bieżącej domenie. Słowo kluczowe help wskazuje, że hiperlink udostępnia pomoc zależną od kontekstu. Najechanie kursorem na link o tej wartości rel spowoduje wyświetlenie kursora pomocy zamiast zwykłego kursora. Nie używaj tej wartości tylko po to, aby uzyskać kursor pomocy. Użyj właściwości cursor CSS. Wartości prev i next można używać w przypadku linków wskazujących poprzedni i następny dokument w serii.

Podobnie jak <link rel="alternative">, znaczenie właściwości <a rel="alternative"> zależy od innych atrybutów. Alternatywne kanały RSS także będą zawierać atrybut 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 tagiem otwierającym a zamykającym jest w języku innym niż główny język dokumentu, dodaj atrybut lang. Jeśli dokument, do którego prowadzi hiperlink, jest w innym języku, dodaj atrybut hreflang.

W tym przykładzie URL przetłumaczonej strony jest wartością atrybutu href, rel="alternate", aby wskazać, że jest to alternatywna wersja witryny. Atrybut hreflang wskazuje 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 typu z typem MIME powiązanego zasobu PDF. Typ MIME ma charakter czysto zalecany, ale informowanie użytkownika, że link otwiera dokument w innym formacie, jest zawsze dobrym pomysłem.

<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 pingowanie adresu URL po kliknięciu linku. Atrybut ping (jeśli występuje) zawiera listę rozdzielonych spacjami listy bezpiecznych adresów URL (zaczynających się od https), które należy powiadomić lub wysłać ping, jeśli użytkownik aktywuje hiperlink. Przeglądarka wysyła żądania POST z treścią PING do adresów URL wymienionych jako wartość atrybutu ping.

Wskazówki dotyczące wygody użytkowników

• Pisząc kod HTML, zawsze bierz pod uwagę wygodę użytkownika. Linki powinny zawierać wystarczającą ilość informacji o linku, aby użytkownik wiedział, co klika.
• Upewnij się, że linki w bloku tekstu różnią się na tyle od otaczającego tekstu, aby użytkownicy mogli je łatwo rozpoznać.
• Zawsze uwzględniaj style zaznaczenia. Dzięki temu osoby korzystające z klawiatury będą mogły sprawdzić, gdzie się znajdują podczas przechodzenia między treściami za pomocą klawisza Tab.
• Treść między otwierającym <a> a zamykającym tagiem </a> jest domyślną nazwą dostępną linku, która powinna informować użytkownika o miejscu docelowym lub przeznaczeniu linku. Jeśli treścią linku jest obraz, opis w polu alt jest nazwą na potrzeby ułatwień dostępu. Niezależnie od tego, czy nazwa na potrzeby ułatwień dostępu pochodzi z atrybutu alt czy z podzbioru słów w bloku tekstu, upewnij się, że zawiera ona informacje o miejscu docelowym linku. Tekst linku powinien być bardziej opisowy niż „Kliknij tutaj” czy „Więcej informacji”. Jest to istotne dla użytkowników czytników ekranu i wyników wyszukiwarki.
• Nie umieszczaj w linkach treści interaktywnych, takich jak <button> czy <input>. Nie zagnieżdżaj linków w elementach <button> ani <label>. Strona HTML będzie się nadal renderować, ale zagnieżdżenie elementów możliwych do zaznaczenia i klikalnych wewnątrz elementów interaktywnych pogarsza wrażenia użytkowników.
• Jeśli atrybut href jest obecny, naciśnij klawisz Enter i zaznacz element <a>, aby go aktywować.
• Linki nie ograniczają się do kodu HTML. Elementu a można też użyć w obrazie SVG, tworząc link z atrybutami „href” lub „xlink:href”.

Linki i JavaScript

Atrybut links zwraca wartości HTMLCollection pasujące 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 omówiliśmy wszystkie zagadnienia związane z linkami. W następnej sekcji znajdziesz listy, których musimy się nauczyć, by móc je grupować i tworzyć listy linków (nazywane też opcjami nawigacji).

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat linków