HTML ma opinię „prostego” języka, ale od lat rośnie w nim liczba sprytnych, mało znanych rozwiązań, które realnie ułatwiają pracę – zwłaszcza gdy myślisz o dostępności, SEO i utrzymaniu kodu. W tym artykule przyjrzymy się trzem z nich: atrybutowi translate, znacznikowi <base> oraz atrybutowi ping w linkach.
1. translate – kiedy tekst nie powinien być tłumaczony
Atrybut translate to globalny atrybut HTML – możesz go dodać praktycznie do każdego elementu, a także do tagu <html>. Przyjmuje dwie wartości: translate="no" – nie tłumacz tego fragmentu, oraz translate="yes" – fragment może być tłumaczony (zwykle domyślne zachowanie).
Co robi translate?
Oto prosty przykład zablokowania tłumaczenia całego dokumentu:
…
To jest dokument, którego treść nie powinna być tłumaczona automatycznie.
Możesz też precyzyjnie chronić tylko wybrane fragmenty, np. nazwy produktów:
Kup nowego Apple iPhone 16 Pro już dziś!
W tym przykładzie cała strona może zostać przetłumaczona, ale nazwa produktu pozostanie w oryginale.
Typowe przypadki użycia
Najczęstsze scenariusze, w których translate="no" naprawdę pomaga:
- Nazwy marek i produktów – utrzymanie spójnego nazewnictwa jest kluczowe dla identyfikacji marki; automatyczne tłumaczenia potrafią „spolszczać” lub odmieniać nazwy w sposób komiczny i nieprofesjonalny;
- Fragmenty interfejsu technicznego – komendy CLI, nazwy klas, fragmenty kodu, parametry URL; tłumaczenie ich zwykle szkodzi zrozumieniu, np.
git commit --amend; - Treści wielojęzyczne w obrębie jednego dokumentu – cytaty w oryginalnym języku, slogany reklamowe, hasła po łacinie itp.;
- Dane użytkownika lub dynamiczne – nazwiska, nazwy użytkowników, identyfikatory, kody zamówień powinny pozostać bez zmian.
Jak to pomaga dostępności?
Spójność doświadczenia użytkownika: osoby korzystające z wbudowanych tłumaczeń widzą poprawnie pozostawione w oryginale nazwy marek, symbole i kody – to ułatwia np. kontakt z pomocą techniczną.
Lepsza współpraca z narzędziami tłumaczeniowymi: wiele narzędzi respektuje translate="no" i omija te fragmenty, co zmniejsza ryzyko błędów semantycznych.
W połączeniu z atrybutem lang możesz precyzyjnie kontrolować język poszczególnych fragmentów treści, co jest ważne dla czytników ekranu i zgodności z WCAG.
Przykład poprawnie oznaczonego cytatu obcojęzycznego:
Jak powiedział Steve Jobs:
Stay hungry, stay foolish.
lang="en" informuje czytniki ekranu o języku cytatu, a translate="no" zapobiega „spolszczeniu” kultowego zdania.
Dobre praktyki użycia translate
- domyślnie pozwalaj tłumaczyć (atrybut pomijaj lub ustawiaj na
yes), - używaj
translate="no"oszczędnie i tylko tam, gdzie ma to realny sens, - dokumentację dla tłumaczy uzupełniaj informacją: „fragmenty oznaczone
translate="no"pozostają bez zmian”, - nie stosuj
translate="no"jako „blokady” dla całego serwisu wielojęzycznego – do tego służy struktura językowa i atrybutlang, a nie blokowanie tłumaczeń.
2. <base> – jedno miejsce, które zmienia wszystkie linki
Znacznik <base> istnieje od dawna, ale bywa niedoceniany. Działa „po cichu” w <head> i wpływa na interpretację wszystkich relatywnych adresów URL w dokumencie oraz na domyślny sposób otwierania linków.
Składnia i podstawowe zastosowania
<base> obsługuje dwa główne atrybuty: href – bazowy adres URL dla wszystkich relatywnych odwołań w dokumencie, oraz target – domyślny cel otwierania odnośników (_self, _blank itp.).
Przykład konfiguracji bazowego URL:
Efekt: link href="artykul-1.html" zostanie zinterpretowany jako /blog/artykul-1.html, a obrazek src="images/cover.jpg" jako /blog/images/cover.jpg. Zauważ, że <base> działa nie tylko na <a>, ale również na img, script i link.
Globalne otwieranie linków w nowych kartach
Zamiast dopisywać target="_blank" do każdej kotwicy, możesz ustawić domyślne zachowanie raz w <head>:
Otworzy się w nowej karcie
Ten otworzy się w tej samej karcie
Wszystkie linki bez własnego target dziedziczą wartość z <base>, a pojedyncze odnośniki wciąż możesz nadpisać.
Uwaga: <base> jest „mocne” – i potrafi napsuć krwi
- zmienia sposób interpretacji wszystkich relatywnych adresów, co ułatwia pomyłki ścieżek przy zagnieżdżonych katalogach,
- możesz mieć tylko jedno
<base>na dokument (przeglądarka bierze pod uwagę pierwszy taki element), - w aplikacjach SPA i przy zaawansowanym routingu często lepiej skonfigurować serwer lub framework niż polegać na
<base>.
<base> a dostępność i doświadczenie użytkownika
Masowe otwieranie linków w nowych kartach (target="_blank") bywa problematyczne: łamie zasadę WCAG „przewidywalność działania” i może utrudnić orientację osobom korzystającym z czytników ekranu.
Jeśli już ustawiasz globalne _blank, wyraźnie to komunikuj (np. ikoną i tekstem „otwiera się w nowej karcie”) lub dodaj treść tylko dla czytników ekranu:
Dokument (otwiera się w nowej karcie)
, link otwiera się w nowej karcie
Nawigacja powinna być przewidywalna i nie zaskakiwać użytkownika.
Dobre praktyki użycia <base>
- rozważ użycie
hrefprzy statycznych stronach w głębokiej strukturze katalogów, - korzystaj z
hrefw plikach generowanych przez narzędzia do eksportu dokumentów (np. generatory dokumentacji), - używaj
targetostrożnie – zwłaszcza_blank– i zawsze w parze z jasną komunikacją dla użytkownika, - dokumentuj w projekcie, że używasz
<base>, bo łatwo je przeoczyć podczas debugowania „dziwnie” działających ścieżek.
3. ping – lekkie śledzenie kliknięć bez całej machiny JS
Wiele serwisów śledzi kliknięcia rozbudowanymi skryptami, co obciąża stronę i bywa kłopotliwe dla dostępności. HTML oferuje prostsze narzędzie: atrybut ping w linkach.
Co robi ping?
Atrybut ping dodasz m.in. do <a>. Zawiera on jeden lub kilka adresów, na które przeglądarka wyśle żądanie (HTTP POST) w momencie kliknięcia i przejścia pod główny adres href.
Przykład użycia w linku produktowym:
Efekt: użytkownik trafia pod https://sklep.example/produkt-123, a przeglądarka równolegle wysyła dodatkowe żądanie pod https://moja-analiza.example/click-tracking z informacjami o kliknięciu (np. docelowy URL, referer). W atrybucie ping możesz podać kilka adresów, rozdzielając je spacją.
Po co to wszystko, skoro mamy JS i analitykę?
Najważniejsze korzyści z użycia ping to:
- Mniej skomplikowanego JavaScriptu – redukujesz liczbę handlerów i zależności w kliencie;
- Mniejsze ryzyko kolizji z dostępnością – linki zachowują się naturalnie, bez
event.preventDefault()i ręcznego nawigowania; - Mniej opóźnień – nawigacja idzie bezpośrednio pod
href, a śledzenie dzieje się równolegle; - Łatwiejsze wdrożenie w treściach generowanych – atrybut
pingmożesz doklejać po stronie serwera w artykułach, newsletterach czy listingach produktów.
ping a prywatność i bezpieczeństwo
- dane o kliknięciach są wysyłane automatycznie na wskazane adresy, co stanowi formę zintegrowanego śledzenia,
- część przeglądarek i narzędzi prywatności blokuje
pinglub pozwala użytkownikowi go wyłączyć, - w kontekście RODO/GDPR traktuj to jak inne techniki śledzenia: informuj o śledzeniu, uwzględnij adresy
pingw polityce prywatności i – zależnie od zakresu danych – rozważ uzyskanie zgody.
ping a dostępność
- pozwala zachować czyste, semantyczne linki bez komplikowania ich zachowania przez JS,
- nie zmienia działania klawiatury, czytników ekranu i nawigacji fokusowej – link pozostaje zwykłym odnośnikiem,
- zmniejsza liczbę dodatkowych skryptów, które często przechwytują zdarzenia i utrudniają debugowanie.
Przykładowe użycie w menu nawigacyjnym:
Menu zachowuje się standardowo (ważne dla czytników ekranu i klawiatury), a jednocześnie rejestrujesz podstawowe statystyki kliknięć.
Dobre praktyki użycia ping
- używaj
pingjako uzupełnienia, a nie jedynego źródła kluczowych danych, - zapewnij jasną politykę prywatności oraz zgodność z przepisami dotyczącymi danych,
- umożliwiaj rezygnację użytkownikom z tego typu śledzenia (np. ustawienie w preferencjach),
- nie nadużywaj
ping– traktuj go jako narzędzie do prostych statystyk kliknięć, a nie pełnego profilowania.
