Otwieranie odnośników w nowych kartach i atrybut download
Używać atrybutów target i download do określania działania odnośników.
Otwieranie odnośników w nowych kartach i atrybut download to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Otwieranie w nowej karcie
Atrybut target określa, gdzie zostanie otwarty powiązany dokument:
<a href="https://example.com" target="_blank">Open in new tab</a>
<!-- target values:
_blank → new tab (or window)
_self → same tab (default)
_parent → parent frame
_top → full window (exits frames)
-->Zagrożenie bezpieczeństwa związane z _blank
target="_blank" bez odpowiednich zabezpieczeń tworzy lukę w zabezpieczeniach:
- Nowa strona może uzyskać dostęp do strony otwierającej za pomocą
window.opener - Złośliwa strona może przekierować oryginalną kartę
- Ten atak nazywa się reverse tabnapping
rel=noopener noreferrer
Podczas używania target="_blank" zawsze dodawaj rel="noopener noreferrer":
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->Kiedy otwierać nowe karty
Wskazówki UX dotyczące target="_blank":
- Używaj go w przypadku zewnętrznych witryn, gdy użytkownicy nie spodziewają się opuszczenia aplikacji
- Używaj go w przypadku dokumentów referencyjnych, takich jak pliki PDF i poradniki
- Nie używaj go do wewnętrznej nawigacji między stronami
- Zawsze ostrzegaj użytkowników — dodaj ikonę lub tytuł z informacją „otwiera się w nowej karcie”
Informowanie użytkowników o nowej karcie
Poinformuj użytkowników, że odnośnik otwiera się w nowej karcie:
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit Example (opens in new tab)">
Visit Example
<span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
The arrow icon gives visual users a hint -->Atrybut download
Atrybut download informuje przeglądarkę, aby pobrała wskazany plik zamiast przechodzić do niego:
<a href="/reports/q4-report.pdf" download>
Download Q4 Report
</a>
<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
Export CSV
</a>Ograniczenia atrybutu download
Atrybut download ma następujące ograniczenia:
- Działa wyłącznie dla adresów URL tego samego źródła
- Pobieranie z innych źródeł wymaga, aby serwer wysłał
Content-Disposition: attachment - Nazwa pliku w atrybucie
downloadjest tylko sugestią — nagłówki serwera mogą ją zastąpić
Pobieranie za pomocą data URI
Można pobierać wygenerowaną treść za pomocą data URI:
<a href="data:text/plain;charset=utf-8,Hello%20World!"
download="hello.txt">
Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->JavaScript i cele odnośników
Gdy JavaScript obsługuje nawigację, należy unikać niewłaściwego używania target="_blank":
// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.openAtrybut ping
Atrybut ping wysyła żądanie POST po kliknięciu odnośnika (na potrzeby analityki):
<a href="/destination" ping="/analytics/track">
Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->Atrybut type w odnośnikach
Atrybut type podpowiada typ MIME powiązanego zasobu:
<a href="/report.pdf" type="application/pdf">
Download PDF Report
</a>
<a href="/data.json" type="application/json">
JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->Szybkie sprawdzenie
Jaki atrybut bezpieczeństwa należy zawsze stosować razem z target="_blank"?
Podsumowanie: target i download
Atrybuty sterujące zachowaniem odnośników:
target="_blank"— otwiera odnośnik w nowej karcie- Zawsze dodawaj
rel="noopener noreferrer"razem z_blank - Wizualnie ostrzegaj użytkowników, gdy odnośnik otwiera się w nowej karcie
download— rozpoczyna pobieranie pliku zamiast nawigacjidownload="filename"— sugeruje nazwę pobieranego pliku
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Otwieranie odnośników w nowych kartach i atrybut download” jest bezpłatna?
Tak — pełny tekst „Otwieranie odnośników w nowych kartach i atrybut download” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Otwieranie odnośników w nowych kartach i atrybut download”?
Używać atrybutów target i download do określania działania odnośników. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Otwieranie odnośników w nowych kartach i atrybut download”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Element anchor i atrybut href
- Adresy URL bezwzględne a względne
- Otwieranie odnośników w nowych kartach i atrybut download
- Odnośniki do sekcji i identyfikatory fragmentów