Povezave v HTML

Z oznako <a> in atributom href lahko besedilo ali sliko spremenimo v povezavo. Ko uporabnik klikne na povezavo, se odpre druga spletna stran, datoteka ali drug del istega dokumenta.

Povezava lahko vodi do druge spletne strani, slike, dokumenta PDF, e-poštnega naslova, telefonske številke ali do določenega mesta v istem dokumentu. Element <a> je eden najpomembnejših elementov v HTML, saj omogoča povezovanje posameznih dokumentov in virov.

Osnovna pravila

• Za povezavo uporabljamo element <a>.
• Atribut href določa cilj povezave.
• Povezava lahko vodi do druge datoteke, druge strani, drugega dela iste strani ali do posebnega cilja, kot sta e-pošta in telefon.
• Besedilo ali slika znotraj elementa <a> postane aktivni del strani.
• Za povezave v nov zavihek lahko uporabimo atribut target="_blank".

Aktivno besedilo

Besedilo naredimo aktivno z elementom <a>. Atribut href določa cilj povezave.

Povezave so v brskalnikih običajno privzeto podčrtane in obarvane, njihov videz pa lahko spremenimo s CSS.

Določitev cilja povezave

Povezave so lahko relativne ali absolutne. Vodijo lahko do druge datoteke, do korenske mape strežnika ali do določenega elementa v istem dokumentu.

Relativni način povezave

Relativna povezava opisuje pot do ciljne datoteke glede na trenutno datoteko. Če je ciljna datoteka v isti mapi, je dovolj, da napišemo samo njeno ime.

Za prehod v podmapo uporabimo ime mape in znak /, za prehod v mapo na višjem nivoju pa uporabimo ...

V relativnih poteh lahko uporabimo tudi . ali ./. Znak . pomeni trenutno mapo. Zato sta zapisa index.html in ./index.html praviloma enakovredna. Zapis z ./ pogosto uporabimo, kadar želimo posebej poudariti, da se datoteka nahaja v trenutni mapi.

Primer relativnih povezav:

Povezava na datoteko <a href="index.html">v isti mapi</a>.
Povezava na datoteko <a href="./index.html">v isti mapi z zapisom ./</a>.
Povezava na datoteko <a href="podmapa/index.html">v podmapi</a>.
Povezava na datoteko <a href="./podmapa/index.html">v podmapi z zapisom ./</a>.
Povezava na datoteko <a href="podmapa1/podmapa2/index.html">dva nivoja nižje</a>.
Povezava na datoteko <a href="../../index.html">dva nivoja višje</a>.
Povezava na datoteko <a href="../podmapa/index.html">v sosednji mapi</a>.

Absolutni način povezave

Absolutna povezava vsebuje celoten naslov datoteke. Običajno se začne s https://, nato sledi ime strežnika in pot do datoteke.

Datoteka <a href="https://www.streznik.si/datoteka.html">v korenski mapi</a> strežnika.
Datoteka <a href="https://www.streznik.si/podmapa/datoteka.html">v podmapi</a> strežnika.

Če je ciljna datoteka na istem strežniku, lahko izpustimo https:// in ime strežnika. V takem primeru se pot začne z znakom /, kar pomeni, da pot opisujemo od korenske mape strežnika.

Datoteka <a href="/datoteka.html">v korenski mapi</a> na tem strežniku.
Datoteka <a href="/podmapa/datoteka.html">v podmapi</a> na tem strežniku.

Kadar je v mapi določena privzeta datoteka, lahko ime datoteke pogosto izpustimo.

Privzeta datoteka <a href="https://www.streznik.si">v korenski mapi</a> strežnika.
Privzeta datoteka <a href="https://www.streznik.si/podmapa">v podmapi</a> strežnika.
Privzeta datoteka <a href="/">v korenski mapi</a> na tem strežniku.
Privzeta datoteka <a href="/podmapa">v podmapi</a> na tem strežniku.

Posebne povezave

Povezava na element v istem dokumentu

Povezavo lahko naredimo tudi na posamezen element na spletni strani. Elementu določimo atribut id, nato pa v povezavi uporabimo znak # in ime tega identifikatorja. MDN navaja, da lahko element <a> povezuje tudi na lokacije v isti strani.

<h2 id="podnaslov">Podnaslov</h2>

<a href="datoteka.html#podnaslov">Podnaslov</a>

Če je cilj v isti datoteki, ime datoteke lahko izpustimo.

<a href="#podnaslov">Podnaslov</a>

Povezava za e-pošto

Povezavo do elektronske pošte naredimo z zapisom mailto:. Element <a> lahko ustvarja tudi povezave do e-poštnih naslovov.

<a href="mailto:ime@mail.com">Pošlji e-pošto</a>
<a href="mailto:ime@mail.com?subject=Test">Pošlji e-pošto</a>

Povezava za telefon

Povezavo do telefonske številke naredimo z zapisom tel:.

<a href="tel:+38640123456">Pokliči nas</a>
<a href="tel:014001234">Pokliči v pisarno</a>

Atribut target

Atribut target določa, kje se odpre povezava. Če atribut ni določen, se povezava odpre v istem zavihku. Za odpiranje v novem zavihku uporabimo target="_blank".

Pri takih povezavah pogosto dodamo tudi atribut rel. Vrednost noopener pomeni, da novo odprta stran ne dobi dostopa do okna ali zavihka, iz katerega je bila odprta. To je pomembno predvsem z varnostnega vidika, saj nova stran ne more uporabljati lastnosti window.opener za vplivanje na izvorno stran.

Vrednost noreferrer pomeni, da brskalnik ciljni strani ne pošlje podatka o tem, s katere strani je uporabnik prišel. Pri tem velja tudi, da se povezava obnaša enako, kot če bi bil določen tudi noopener. To pomeni, da noreferrer hkrati omeji posredovanje podatkov o izvorni strani in prepreči dostop prek window.opener.

V sodobnih brskalnikih se povezava z target="_blank" pogosto že sama obnaša podobno kot pri rel="noopener", vendar je zaradi jasnosti in dobre prakse še vedno smiselno to izrecno zapisati. Kadar želimo dodatno preprečiti pošiljanje podatka o izvorni strani, uporabimo rel="noreferrer".

<a href="https://www.primer.si" target="_blank" rel="noopener">Odpri stran v novem zavihku</a>

Priporočila

• Za povezave v okviru istega spletišča uporabljaj pregledne relativne poti.
• Za povezave na zunanja spletna mesta uporabljaj jasne in popolne naslove.
• Pri povezavah na del iste strani dosledno uporabljaj atribute id.
• Pri odpiranju povezave v novem zavihku dodaj tudi rel="noopener".
• Besedilo povezave zapiši tako, da jasno pove, kam povezava vodi.

Pogoste napake

• Atribut href manjka ali vsebuje napačno pot.
• Relativna pot je zapisana, kot da bi bila absolutna, ali obratno.
• Povezava na del iste strani uporablja #, vendar ciljni element nima ustreznega atributa id.
• Povezava v nov zavihek se uporablja brez razumevanja, kam in kako se bo odprla.
• Besedilo povezave je nejasno in ne pove, kaj se odpre po kliku.