Atrybuty linków (target, title)

Lekcja 5.2: Atrybuty linków (target, title)

Strona główna > Rozdział 5: Linki > Atrybuty linków (target, title)

Rozszerzanie funkcjonalności linków

Oprócz podstawowego atrybutu href, znacznik <a> może przyjmować inne atrybuty, które modyfikują jego zachowanie i dostarczają dodatkowych informacji. Dwa z najważniejszych i najczęściej używanych to target i title.

Atrybut `target`

Atrybut target określa, gdzie (w jakim oknie lub karcie przeglądarki) ma zostać otwarty dokument, do którego prowadzi link. Domyślnie (bez atrybutu target) linki otwierają się w tym samym oknie/karcie.

Najczęściej używane wartości atrybutu target:

_self (domyślna): Otwiera dokument w tym samym oknie/karcie, w którym kliknięto link.

<a href="strona2.php" target="_self">Otwórz w tej samej karcie</a>
<!-- To samo co: -->
<a href="strona2.php">Otwórz w tej samej karcie</a>

_blank: Otwiera dokument w nowym oknie lub karcie przeglądarki. Jest to bardzo często używane przy linkowaniu do stron zewnętrznych, aby użytkownik nie opuszczał naszej witryny.
```
<a href="https://www.example.com" target="_blank">Otwórz w nowej karcie</a>
```
Otwórz w nowej karcie (Kliknięcie otworzy example.com w nowej karcie)

Ważna uwaga dotycząca bezpieczeństwa: Przy używaniu target="_blank" zaleca się dodanie atrybutu rel="noopener noreferrer". Zapobiega to potencjalnym atakom phishingowym (noopener) i nie przekazuje informacji o stronie odsyłającej (noreferrer).
```
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Bezpieczny link w nowej karcie</a>
```
_parent: Otwiera dokument w nadrzędnym oknie ramki (używane głównie przy pracy z ramkami <iframe>).
_top: Otwiera dokument w pełnym oknie przeglądarki, eliminując wszystkie ramki (również używane przy pracy z ramkami).
nazwa_ramki: Otwiera dokument w ramce <iframe> o podanej nazwie.

Atrybut `title`

Atrybut title pozwala na dodanie dodatkowej informacji o linku, która zazwyczaj pojawia się jako podpowiedź (tooltip) po najechaniu kursorem myszy na link. Może to być przydatne do wyjaśnienia celu linku lub podania dodatkowego kontekstu.

<a href="https://developer.mozilla.org/" title="Dokumentacja webowa od Mozilli">MDN Web Docs</a>

MDN Web Docs (Najedź myszką, aby zobaczyć podpowiedź)

Użycie atrybutu title może poprawić użyteczność strony, ale nie należy polegać na nim jako jedynym źródle ważnych informacji, ponieważ:

Nie jest on łatwo dostępny na urządzeniach dotykowych (bez myszki).
Czytniki ekranu mogą go ignorować lub wymagać specjalnej konfiguracji do odczytania.

Lepszym podejściem jest zapewnienie, że sama treść linku jest wystarczająco opisowa.

Inne atrybuty (rzadziej używane)

download: Sugeruje przeglądarce, aby pobrała plik wskazany przez href zamiast do niego nawigować. Można podać nazwę pliku jako wartość atrybutu.

<a href="dokument.pdf" download>Pobierz PDF</a>
<a href="obraz.jpg" download="moj_obrazek.jpg">Pobierz obrazek</a>

hreflang: Określa język dokumentu docelowego.
type: Określa typ MIME dokumentu docelowego (np. type="application/pdf").

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz link do strony W3C (https://www.w3.org/), który otworzy się w nowej karcie i będzie miał podpowiedź "Konsorcjum World Wide Web". Pamiętaj o dodaniu atrybutów bezpieczeństwa dla target="_blank".

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Link do W3C</title>
</head>
<body>
    <h1>Odwiedź W3C</h1>
    
    <p>Kliknij tutaj, aby przejść na stronę 
        <a href="https://www.w3.org/" 
           target="_blank" 
           rel="noopener noreferrer" 
           title="Konsorcjum World Wide Web">W3C</a>.
    </p>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz link do dowolnej strony zewnętrznej, który otworzy się w nowej karcie.
Dodaj atrybut title do kilku linków na stworzonej wcześniej stronie.
Stwórz link umożliwiający pobranie pliku (możesz stworzyć pusty plik tekstowy np. plik.txt i do niego linkować).
Przetestuj działanie target="_blank" z i bez rel="noopener noreferrer" (choć różnica w działaniu może nie być od razu widoczna, warto pamiętać o dobrych praktykach).

Najczęściej zadawane pytania

Jak otworzyć link w nowej karcie?

Aby otworzyć link w nowej karcie przeglądarki, należy dodać atrybut target="_blank" do znacznika <a>. Zaleca się również dodanie rel="noopener noreferrer" ze względów bezpieczeństwa.

Do czego służy atrybut title w linku?

Atrybut title dodaje dodatkową informację do linku, która zazwyczaj pojawia się jako mała podpowiedź (tooltip) po najechaniu na link kursorem myszy. Może służyć do wyjaśnienia celu linku.

Czy atrybut title jest ważny dla SEO?

Atrybut title ma niewielkie lub żadne bezpośrednie znaczenie dla SEO. Wyszukiwarki skupiają się głównie na treści linku (anchor text) i kontekście. Jest on bardziej elementem poprawiającym użyteczność dla użytkowników korzystających z myszki.

Dlaczego warto używać rel="noopener noreferrer" z target="_blank"?

Atrybut rel="noopener noreferrer" zwiększa bezpieczeństwo. noopener zapobiega dostępowi nowo otwartej strony do obiektu window.opener strony otwierającej, chroniąc przed phishingiem. noreferrer zapobiega wysyłaniu nagłówka Referer do nowej strony.

Jak stworzyć link do pobierania pliku?

Aby zasugerować przeglądarce pobranie pliku zamiast jego wyświetlania, należy dodać atrybut download do znacznika <a>. Można opcjonalnie podać nazwę pliku jako wartość tego atrybutu, np. download="raport.pdf".