Linki HTML: kotwice, przyciski, obrazy i nowe karty
Przewodnik po linkach HTML
Linki HTML: kotwice, linki jako przyciski, linki z obrazem, nowe karty | We.Inc
Twórz linki HTML, które działają: linki do sekcji z płynnym przewijaniem pod przyklejonym nagłówkiem, nowe karty, linki wystylizowane na przyciski, linki z obrazem, linki mailto, tel i do pobrania.
Link HTML to element <a> z atrybutem href: <a href="/pricing">See pricing</a>. Skieruj href na stronę, na #id, aby przeskoczyć w obrębie strony, albo na mailto: i tel:, aby rozpocząć e-mail lub połączenie. Dodaj target="_blank", aby otworzyć nową kartę, a do akcji, które coś zmieniają, używaj elementu <button>, a nie linku.
Każdy wzorzec linku, którego potrzebuje mała strona, z kodem do edycji i wynikiem na żywo. Demo linków do sekcji pokazuje problem z przyklejonym nagłówkiem i jego jednolinijkową poprawkę, a sekcja o przyciskach rozstrzyga, kiedy link powinien wyglądać jak przycisk, a kiedy powinien nim być.
Wybierz z sekcji poniżej rodzaj linku, którego potrzebujesz.
Edytuj przykład. Ramka z wynikiem to prawdziwa strona, więc linki do sekcji przewijają, a obramowania fokusu pojawiają się po naciśnięciu Tab.
Skopiuj fragment kodu i zastąp adres oraz tekst linku własnymi.
Sprawdź, czy tekst linku jest zrozumiały sam w sobie, bo użytkownicy czytników ekranu często przeglądają listę linków bez otaczających je słów.
Pisz tekst linku, który nazywa cel, na przykład Pobierz wiosenne menu, a nie kliknij tutaj. Pomaga to osobom skanującym stronę i pomaga wyszukiwarkom zrozumieć stronę docelową.
Dla stron w obrębie własnej witryny używaj ścieżek względnych (/contact), aby linki działały na adresie podglądu lub nowej domenie.
Dodaj do linków otwierających nową kartę wskazówkę w tekście, na przykład (otwiera się w nowej karcie), aby nikogo nie zaskoczyło, że przycisk Wstecz nic nie robi.
Identyfikatory dla linków do sekcji niech będą krótkie, pisane małymi literami i stałe. Inni będą je zapisywać w zakładkach i udostępniać.
Najczęściej zadawane pytania
Czy przy target="_blank" nadal potrzebuję rel="noopener"?
Obecne przeglądarki automatycznie stosują zachowanie noopener do linków z target="_blank", więc otwarta strona nie może sięgnąć do Twojej przez window.opener. Dodanie rel="noopener" nadal nie szkodzi i chroni bardzo stare przeglądarki. Dodaj też noreferrer, jeśli nie chcesz, by druga strona widziała, która strona przysłała odwiedzającego.
Użyć linku czy przycisku?
Używaj <a href>, gdy kliknięcie przenosi kogoś pod nowy adres, który można zapisać w zakładkach lub otworzyć w nowej karcie. Używaj <button>, gdy kliknięcie robi coś na bieżącej stronie, na przykład otwiera menu, wysyła formularz albo dodaje do koszyka. Każdy z nich możesz wystylizować tak, by wyglądał jak ten drugi.
Dlaczego link do sekcji chowa nagłówek pod przyklejonym nagłówkiem strony?
Przeglądarka przewija cel na sam szczyt okna, czyli tam, gdzie znajduje się Twój stały nagłówek. Dodaj do celów scroll-margin-top równe wysokości nagłówka plus trochę zapasu, a nagłówek sekcji wyląduje tuż pod nim.
Dlaczego atrybut download nie działa dla mojego pliku?
Przeglądarki respektują download tylko dla plików z tego samego origin co strona albo dla adresów blob: i data:. Plik z innej domeny link po prostu otwiera, chyba że tamten serwer wysyła nagłówek Content-Disposition, który każe przeglądarce go zapisać.
Jak dodać temat do linku mailto?
Dodaj go jako query string: mailto:[email protected]?subject=Booking%20request&body=Hi. Spacje i znaki specjalne muszą być zakodowane procentowo, więc spacja staje się %20.
Budowa linku
Element <a> bez href to tylko element zastępczy: nie da się na nim ustawić fokusu klawiaturą i nic nie robi po kliknięciu. To href sprawia, że staje się linkiem. Tekst między znacznikami to nazwa dostępna, a w linku z obrazem tę rolę pełni tekst alt obrazu.
Inne atrybuty doprecyzowują link. target wybiera, gdzie się otworzy, rel opisuje relację ze stroną docelową (nofollow, noopener, noreferrer, sponsored), download prosi przeglądarkę o zapisanie pliku zamiast jego wyświetlenia, a hreflang lub type opisują cel.
Przyciski i linki to różne kontrolki
Użytkownicy klawiatury naciskają Enter, aby przejść za linkiem, oraz Enter lub Spację, aby nacisnąć przycisk. Czytniki ekranu ogłaszają je inaczej i tylko linki mają menu kontekstowe z opcją Otwórz w nowej karcie. Gdy link służy do akcji albo div udaje którykolwiek z nich, część tych zachowań znika.
Wygląd jest dowolny. Link Zarejestruj się w nagłówku może wyglądać jak pełny przycisk, a przycisk Usuń na liście jak zwykły podkreślony tekst. Wybierz element według tego, co się dzieje, a potem wystylizuj go tak, jak wymaga projekt.
Dostępne linki
Linki muszą być rozpoznawalne nie tylko po kolorze. W tekście głównym robi to podkreślenie; na paskach nawigacji zwykle wyjaśnia to układ. Zachowaj widoczne obramowanie fokusu, a jeśli zastępujesz domyślne obramowanie przeglądarki, upewnij się, że nowe ma wystarczający kontrast.
Unikaj kilku linków o tym samym tekście prowadzących w różne miejsca, jak rząd linków Czytaj więcej. Napisz albo różne teksty, albo dodaj wizualnie ukryty span, który uzupełnia frazę dla użytkowników czytników ekranu.
Podstawowy link
Adresy bezwzględne, względne i fragmenty
Ścieżki względne są rozwiązywane względem bieżącej strony; ścieżka zaczynająca się od / zaczyna od katalogu głównego strony.
Linki do sekcji, płynne przewijanie i przyklejone nagłówki
Nadaj celowi id i podlinkuj go przez #id. scroll-behavior: smooth animuje przeskok, a scroll-margin-top sprawia, że przyklejony nagłówek nie zasłania nagłówka sekcji.
Linki do sekcji pod przyklejonym nagłówkiem
Kliknij link na pasku. Każda sekcja ląduje tuż pod nagłówkiem dzięki scroll-margin-top. Usuń tę linię, aby zobaczyć problem, który rozwiązuje.
Otwieranie linku w nowej karcie
target="_blank" z widoczną wskazówką
Obecne przeglądarki zakładają noopener domyślnie, ale jego pozostawienie nic nie kosztuje. noreferrer dodatkowo ukrywa adres Twojej strony przed drugą witryną.
Linki wyglądające jak przyciski i prawdziwe przyciski
Który element
Kliknięcie…
Element
Przykład
Przenosi pod inny adres
<a href>
Zarejestruj się, Zobacz plany, Przeczytaj przewodnik
Wysyła formularz
<button type="submit">
Wyślij wiadomość, Zapłać teraz
Zmienia coś na tej stronie
<button type="button">
Otwórz menu, Dodaj do koszyka, Pokaż więcej
Link wystylizowany na przycisk obok prawdziwego przycisku
Oba wyglądają podobnie. Tylko link można otworzyć w nowej karcie; tylko przycisk pasuje do akcji formularza.
Linki z obrazem
Obraz jako link
Tekst alt nazywa cel, bo jest jedynym tekstem linku. Tutaj obraz to mały wbudowany SVG, aby demo działało offline.
Linki e-mail, telefoniczne i do pobrania
mailto i tel
W href zapisuj numery telefonów w formacie międzynarodowym, bez spacji. Widoczny tekst możesz sformatować, jak chcesz.
Atrybut download
Wartość, jeśli ją podasz, sugeruje nazwę pliku. Dotyczy tylko plików z Twojego własnego origin albo adresów blob: i data:.