Textový element

<a>

Odkaz. Element, díky kterému je web webem: propojuje stránky mezi sebou.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Odkaz a jeho cíl

Odkaz je párový tag. Atribut href říká, kam vede, a text mezi tagy je to, na co se kliká.

Odkazy v náhledu nikam nevedou, aby se lekce nerozbila. Na skutečné stránce by vás odvedly pryč.

Cíle

Kam všude může odkaz vést

Podle začátku href pozná prohlížeč, o jaký odkaz jde.

Odkaz na stránku na vlastním webu je relativní: cesta se počítá od aktuálního souboru.

Atributy

Nový tab a stahování

target="_blank" otevře odkaz v novém tabu. Vždy k němu přidejte rel="noopener", aby cizí stránka nemohla ovládat tu vaši.

download soubor stáhne místo toho, aby ho otevřel. Funguje jen pro soubory z vlastního webu.

Text odkazu

Žádné „klikněte zde“

Text odkazu má říct, kam odkaz vede. Lidé se screen readerem si často nechají vypsat jen seznam odkazů, a dvacet odkazů „zde“ jim nic neřekne.

Styl

Klidnější podtržení

Podtržení je pro odkazy důležité: podle něj je poznáte i bez barev. Můžeme ho ale zjemnit a odsadit od písmen.

Styl

Stavy odkazu

Odkaz reaguje na kurzor (:hover) i na klávesnici (:focus-visible). Když na něj uživatel přejde klávesou Tab, musí být vidět, kde je.

Outline kolem odkazu s focusem nikdy neodstraňujte bez náhrady. Lidé ovládající web klávesnicí by se ztratili.

Responzivita

Odkazy pro prsty

Na telefonu se kliká prstem, ne kurzorem. Odkazy v seznamu proto zvětšíme na celou šířku a aspoň 44 pixelů na výšku, aby se do nich dalo pohodlně trefit.

44 × 44 pixelů je doporučená nejmenší plocha pro ťuknutí prstem.

Shrnutí

Jak psát odkazy

Ano

• text, který říká, kam odkaz vede
• rel="noopener" vždy s target="_blank"
• viditelný stav :focus-visible
• na telefonu dost velká plocha pro prst

Ne

• „klikněte zde“
• odkaz bez podtržení, který se pozná jen podle barvy

Další: <strong> →