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 polualt
jest nazwą na potrzeby ułatwień dostępu. Niezależnie od tego, czy nazwa na potrzeby ułatwień dostępu pochodzi z atrybutualt
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
Do czego służy link nofollow?
Które linki przenoszą Cię na górę strony?
#start
#
#top