Linkuri si Navigare

Link-urile (sau hyperlink-urile ) sunt fundamentul web-ului. Fara ele, fiecare pagina web ar fi o insula izolata - nu ai putea naviga de la o pagina la alta. Tag-ul <a> (de la "anchor" - ancora) este cel care creeaza link-uri in HTML, iar atributul href contine adresa destinatiei.

Structura unui link este simpla: <a href="destinatie">Text vizibil</a> . Textul dintre tag-ul de deschidere si cel de inchidere este ceea ce vede si pe ce da click utilizatorul. Atributul href (Hypertext REFerence) contine adresa URL sau calea catre pagina destinatie.

<a href="pagina2.html">Mergi la Pagina 2</a>
<a href="https://google.com">Viziteaza Google</a>

Gandeste-te la un link ca la o usa cu o eticheta. Textul vizibil ("Mergi la Pagina 2") este eticheta de pe usa, iar atributul href ("pagina2.html") este incaperea in care duce usa. Utilizatorul vede eticheta, da click pe ea si ajunge in incaperea indicata de href.

Implicit, browserul afiseaza link-urile cu text albastru si subliniat . Dupa ce ai vizitat un link, acesta devine violet . Aceste culori implicite se pot schimba cu CSS, dar este important sa pastrezi o indicatie vizuala clara ca textul este un link (fie prin culoare, fie prin subliniere), altfel utilizatorul nu stie ca poate da click pe el.

O regula importanta de accesibilitate: textul link-ului trebuie sa fie descriptiv . Evita texte generice precum "click aici" sau "citeste mai mult". In schimb, scrie texte care descriu destinatia: "citeste articolul despre robotica" sau "descarca ghidul PDF". Aceasta ajuta atat utilizatorii, cat si motoarele de cautare sa inteleaga unde duce link-ul.

Inventatorul web-ului, Tim Berners-Lee , a creat tag-ul <a> in 1991. Ideea sa revolutionara a fost ca orice document poate fi conectat cu orice alt document prin link-uri, creand o "panza" (web) globala de informatii interconectate. De aici vine si numele "World Wide Web" - o retea mondiala de pagini legate intre ele prin hyperlink-uri.

Astazi, pe internet exista miliarde de link-uri care conecteaza pagini din intreaga lume. Motoarele de cautare precum Google folosesc aceste link-uri pentru a descoperi si indexa pagini noi - cu cat o pagina are mai multe link-uri de calitate catre ea, cu atat este considerata mai relevanta si apare mai sus in rezultatele cautarii.

Implicit, cand un utilizator da click pe un link, pagina destinatie se deschide in acelasi tab , inlocuind pagina curenta. Uneori insa vrei ca link-ul sa se deschida intr-un tab nou , pastrand pagina curenta deschisa. Pentru aceasta, adaugi atributul target="_blank" .

<!-- Se deschide in acelasi tab (comportament implicit) -->
<a href="despre.html">Despre noi</a>

<!-- Se deschide intr-un tab NOU -->
<a href="https://google.com" target="_blank">
  Viziteaza Google (se deschide in tab nou)
</a>

Cand sa folosesti target="_blank" ? Regula generala este: foloseste-l pentru link-uri externe (catre alte site-uri) si nu-l folosi pentru link-uri interne (catre alte pagini ale site-ului tau). Logica este simpla: daca utilizatorul pleaca pe alt site, vrei sa ramana si pagina ta deschisa. Dar daca navigheaza in cadrul site-ului tau, deschiderea in acelasi tab este mai naturala.

Din motive de securitate , cand folosesti target="_blank" , este recomandat sa adaugi si atributul rel="noopener noreferrer" . Aceasta previne un tip de atac (numit "tabnapping") in care pagina destinatie ar putea modifica pagina ta originala. In browserele moderne aceasta protectie este adaugata automat, dar este o practica buna sa o scrii explicit.

<!-- Best practice: target="_blank" cu rel="noopener" -->
<a href="https://exemplu.com"
   target="_blank"
   rel="noopener noreferrer">
  Viziteaza Exemplu.com
</a>

Atributul target poate avea si alte valori: _self (acelasi tab - comportamentul implicit), _parent (fereastra parinte, util pentru iframe-uri) si _top (fereastra principala completa). In practica, vei folosi aproape exclusiv _blank si _self (implicit).

Un sfat de UX (User Experience): cand un link se deschide in tab nou, este bine sa il informezi pe utilizator. Poti adauga un mic text sau o iconita: "Viziteaza Google (se deschide in tab nou)" sau o iconita de fereastra externa. Aceasta transparenta imbunatateste experienta utilizatorului, care nu este surprins de comportamentul neasteptat. Multe site-uri profesionale folosesc o iconita mica de sageata diagonala langa link-urile externe pentru a semnala vizual deschiderea in tab nou.

Nu abuza de target="_blank" . Deschiderea fiecarui link in tab nou poate fi deranjanta - utilizatorul se trezeste cu zeci de tab-uri deschise. Foloseste-l doar cand chiar are sens: link-uri externe, documente de referinta pe care utilizatorul ar vrea sa le consulte in paralel, sau link-uri din formulare (pentru a nu pierde datele completate).

Ca si la imagini, link-urile pot folosi cai absolute (URL complet) sau cai relative (cale fata de fisierul curent). Intelegerea diferentei este esentiala pentru a crea un site cu navigare functionala.

Link-uri absolute contin URL-ul complet, inclusiv protocolul ( https:// ) si numele domeniului. Se folosesc pentru link-uri catre alte site-uri (site-uri externe). Exemplu: href="https://wikipedia.org" .

<!-- Link ABSOLUT - catre un alt site -->
<a href="https://wikipedia.org">Wikipedia</a>
<a href="https://google.com/search?q=html">Cauta HTML pe Google</a>

<!-- Link RELATIV - catre o pagina din acelasi site -->
<a href="despre.html">Despre noi</a>
<a href="pagini/contact.html">Contact</a>
<a href="../index.html">Inapoi la pagina principala</a>

Link-uri relative contin doar calea fata de fisierul HTML curent. Se folosesc pentru link-uri catre paginile propriului site . Avantajul este ca functioneaza indiferent unde este gazduit site-ul - fie pe calculatorul tau, fie pe un server web, fie pe alt server. Nu depind de un domeniu specific.

Regulile pentru cai relative la link-uri sunt identice cu cele pentru imagini: fisier in acelasi folder = doar numele ( pagina.html ), fisier intr-un subfolder = folder/pagina.html , fisier in folderul parinte = ../pagina.html . Aceste reguli se aplica uniform in HTML pentru toate atributele care contin cai ( href , src , etc.).

O regula simpla: daca link-ul duce catre alt site , foloseste cale absoluta (cu https://). Daca link-ul duce catre o pagina din site-ul tau , foloseste cale relativa. Aceasta conventie este urmata de toti dezvoltatorii web profesionisti si face site-ul mai usor de mutat pe alt server sau domeniu. Este una dintre cele mai importante bune practici in dezvoltarea web moderna.

O greseala frecventa este sa folosesti cai absolute pentru paginile proprii, de exemplu href="https://siteul-meu.ro/despre.html" in loc de href="despre.html" . Problema apare cand testezi local pe calculator (adresa va fi file:///C:/proiect/... , nu https://siteul-meu.ro/... ) sau cand muti site-ul pe alt domeniu - toate link-urile absolute se strica, pe cand cele relative continua sa functioneze perfect.

Link-urile interne (numite si anchor links sau link-uri de ancorare ) te duc la o sectiune specifica din aceeasi pagina , fara a incarca o pagina noua. Se creeaza folosind simbolul # (hash) urmat de id-ul elementului destinatie.

<!-- Meniu de navigare cu link-uri interne -->
<nav>
  <a href="#despre">Despre noi</a>
  <a href="#servicii">Servicii</a>
  <a href="#contact">Contact</a>
</nav>

<!-- Sectiunile destinatie (TREBUIE sa aiba id!) -->
<section id="despre">
  <h2>Despre noi</h2>
  <p>Informatii despre companie...</p>
</section>

<section id="servicii">
  <h2>Serviciile noastre</h2>
  <p>Lista de servicii...</p>
</section>

<section id="contact">
  <h2>Contacteaza-ne</h2>
  <p>Informatii de contact...</p>
</section>

Pentru ca un link intern sa functioneze, elementul destinatie trebuie sa aiba un atribut id care corespunde cu valoarea din href (fara simbolul #). De exemplu, href="#contact" duce la elementul cu id="contact" . Daca id-ul nu exista pe pagina, link-ul nu va face nimic vizibil.

Link-urile interne sunt foarte utile pe pagini lungi (single-page websites). Gandeste-te la un site de prezentare care are toate informatiile pe o singura pagina lunga: meniul de sus contine link-uri interne care te duc direct la sectiunea dorita, fara sa astepti incarcarea unei pagini noi. Aceasta experienta este rapida si fluida.

Un truc util: link-ul href="#" (doar hash, fara id) te duce la inceputul paginii (top). Este frecvent folosit pentru butoane de tip "Inapoi sus" (Back to top) care apar pe paginile lungi. Alternativ, poti folosi href="#top" daca ai un element cu id="top" la inceputul paginii.

Regulile pentru id-uri: un id trebuie sa fie unic pe pagina (doua elemente nu pot avea acelasi id), sa inceapa cu o litera (nu cu un numar), si sa nu contina spatii. Bune practici: foloseste litere mici si cratime: id="sectiunea-principala" in loc de id="Sectiunea Principala" .

Poti combina link-uri interne cu link-uri catre alte pagini. De exemplu, href="despre.html#echipa" duce utilizatorul la pagina "despre.html" si automat deruleaza la sectiunea cu id="echipa" . Aceasta tehnica este foarte utila cand vrei sa trimiti pe cineva direct la o informatie specifica de pe alta pagina a site-ului tau.

In CSS, poti stiliza tranzitia de derulare catre o ancora folosind proprietatea scroll-behavior: smooth; pe elementul html . In loc de un salt brusc la sectiune, pagina va derula lin si animat, oferind o experienta vizuala mult mai placuta pentru utilizator.

HTML permite crearea unor link-uri speciale care nu duc la pagini web, ci deschid aplicatii de pe dispozitivul utilizatorului. Cele mai comune sunt mailto: (pentru email) si tel: (pentru apeluri telefonice).

Link-ul mailto: deschide aplicatia de email a utilizatorului (Outlook, Gmail, Apple Mail, etc.) cu adresa destinatarului deja completata. Este foarte util pe paginile de contact, unde vrei sa facilitezi trimiterea unui email.

<!-- Link de email simplu -->
<a href="mailto:contact@exemplu.ro">Trimite-ne un email</a>

<!-- Link de email cu subiect predefinit -->
<a href="mailto:contact@exemplu.ro?subject=Intrebare">
  Trimite intrebare
</a>

<!-- Link de telefon -->
<a href="tel:+40712345678">Suna-ne: 0712 345 678</a>

Poti adauga si parametri suplimentari la link-ul mailto: ?subject= pentru subiect predefinit, &body= pentru textul mesajului si &cc= pentru destinatari in copie. Exemplu complet: mailto:email@site.ro?subject=Salut&body=Mesajul%20meu (spatiile se codifica ca %20 in URL-uri).

Link-ul tel: este esential pentru site-urile mobile . Pe un telefon, cand utilizatorul da click pe un link tel:, se deschide automat aplicatia de apeluri cu numarul deja introdus. Pe un desktop, browserul poate deschide Skype sau alta aplicatie de apeluri. Numarul trebuie scris in format international, cu prefixul tarii (ex: +40 pentru Romania).

Aceste tipuri de link-uri sunt esentiale pe paginile de contact ale oricarui site profesional. Un link mailto: este mult mai util decat a scrie pur si simplu adresa de email ca text - utilizatorul poate da click si trimite email direct, fara sa copieze manual adresa. La fel, un link tel: pe un site vizitat de pe telefon permite apelarea instantanee.

Exista si alte prefixe speciale, mai putin folosite: sms: pentru trimitere de mesaje SMS, skype: pentru apeluri Skype si viber:// pentru Viber. Acestea depind de aplicatiile instalate pe dispozitivul utilizatorului si nu functioneaza universal, deci foloseste-le cu precautie si ofera mereu o alternativa.

Un sfat practic pentru paginile de contact: combina link-urile mailto: si tel: cu iconite vizuale (de exemplu un plic pentru email si un telefon pentru apel). Aceasta face sectiunea de contact mai intuitiva si mai atractiva vizual. Multe site-uri profesionale folosesc aceasta abordare impreuna cu un formular de contact, oferind utilizatorului mai multe optiuni de comunicare.

Un link nu trebuie sa contina neaparat text. Poti pune orice element HTML in interiorul tag-ului <a> , iar acel element devine clickabil. Cea mai frecventa utilizare este transformarea unei imagini in link - de exemplu, logo-ul site-ului care te duce la pagina principala.

<!-- Imagine ca link -->
<a href="index.html">
  <img src="logo.png" alt="Logo site - inapoi la pagina principala">
</a>

<!-- Card intreg ca link -->
<a href="articol.html">
  <div class="card">
    <img src="poza.jpg" alt="Titlul articolului">
    <h3>Titlul articolului</h3>
    <p>Scurta descriere...</p>
  </div>
</a>

Aceasta tehnica este folosita pe toate site-urile web. Pe YouTube, fiecare miniatura de video este o imagine in interiorul unui link. Pe eMAG, fiecare card de produs (cu imagine, titlu si pret) este un link catre pagina produsului. Pe Instagram, fiecare fotografie din grila de profil este o imagine-link.

Cand transformi o imagine in link, atributul alt al imaginii devine si mai important. Acesta trebuie sa descrie atat imaginea, cat si destinatia link-ului. De exemplu, pentru logo-ul site-ului: alt="Logo LearningHub - pagina principala" nu doar alt="logo" . Cititorii de ecran vor citi textul alt ca descriere a link-ului, deci un alt bun ajuta utilizatorii cu dizabilitati vizuale sa inteleaga unde duce link-ul.

In HTML5 modern, poti pune aproape orice in interiorul unui link: div-uri, paragrafe, titluri, imagini, chiar si carduri intregi. Singura restrictie importanta este ca nu poti pune un link in interiorul altui link (link-uri imbricate). Browserul nu stie pe care link sa il activeze cand utilizatorul da click, deci aceasta constructie este invalida.

Cand intregul card este un link, utilizatorul poate da click oriunde pe card, nu doar pe text sau pe imagine. Aceasta imbunatateste experienta pe dispozitive mobile, unde zona clickabila trebuie sa fie cat mai mare pentru a fi usor de atins cu degetul (regula generala: minim 44x44 pixeli).

O tehnica avansata este sa stilizezi link-urile sa arate ca butoane folosind CSS. Adaugi un fundal colorat, padding, border-radius si elimini sublinierea. Rezultatul este un buton care este de fapt un link HTML simplu. Aceasta tehnica este foarte populara pentru butoane de tip "Cumpara acum", "Inscrie-te" sau "Descarca" pe site-urile comerciale.

Diferenta dintre un link stilizat ca buton ( <a> ) si un buton real ( <button> ) este semantica: link-ul navigheaza catre o alta pagina sau resursa, pe cand butonul executa o actiune (trimite un formular, deschide un meniu). Alege elementul potrivit in functie de scopul sau: daca duce undeva, foloseste <a> ; daca face ceva, foloseste <button> .

Meniul de navigare este una dintre cele mai importante componente ale unui site web. HTML5 ofera tag-ul semantic <nav> special pentru aceasta. In interiorul lui, plasezi o lista de link-uri care permit utilizatorului sa navigheze intre paginile principale ale site-ului.

<nav>
  <ul>
    <li><a href="index.html">Acasa</a></li>
    <li><a href="despre.html">Despre</a></li>
    <li><a href="servicii.html">Servicii</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

De ce sa folosesti <nav> in loc de un simplu <div> ? Din cauza semanticii . Tag-ul <nav> ii spune browserului, motoarelor de cautare si cititorelor de ecran ca acea sectiune contine navigarea principala a site-ului. Cititorii de ecran ofera comanda "sari la navigare", care functioneaza doar daca meniul este in <nav> .

Structura standard a unui meniu de navigare este: <nav> contine un <ul> (lista neordonata), care contine mai multe <li> (elemente de lista), fiecare continand un <a> (link). Cu CSS, elimini bulinele listei si aranjezi elementele pe orizontala - rezultatul arata ca un meniu profesional.

O pagina poate avea mai multe elemente <nav> : unul pentru meniul principal (de obicei in header), altul pentru navigarea din footer, si eventual unul pentru un meniu lateral (sidebar). Fiecare <nav> poate avea un atribut aria-label pentru a le diferentia: <nav aria-label="Meniu principal"> .

Meniurile de navigare sunt prezente pe fiecare pagina a unui site. De aceea, cand creezi un site cu mai multe pagini, meniul trebuie copiat pe fiecare pagina. Link-urile din meniu sunt relative, deci functioneaza corect indiferent pe ce pagina te afli. Pagina curenta poate fi evidentiata vizual cu o clasa CSS speciala (de exemplu class="activ" ).

Un meniu de navigare bun trebuie sa fie consistent pe tot site-ul: aceleasi link-uri, in aceeasi ordine, in aceeasi pozitie pe pagina. Utilizatorul invata rapid unde sa gaseasca meniul si ce link-uri contine. Schimbarea ordinii sau a pozitiei meniurilor de la o pagina la alta creeaza confuzie si frustrare. Consistenta este unul dintre cele mai importante principii de design web.

Pe site-urile mari, meniurile pot avea si submeniuri (dropdown menus) care apar cand tii mouse-ul deasupra unui element din meniu. Acestea se creeaza cu liste imbricate ( <ul> in interiorul unui <li> ) si se stilizeaza cu CSS. Vei invata aceasta tehnica in lectiile avansate de CSS.

Pe dispozitivele mobile, meniurile de navigare se transforma adesea intr-un meniu hamburger (trei linii orizontale) care se deschide la atingere. Aceasta adaptare este necesara deoarece ecranele mici nu au suficient spatiu pentru a afisa toate link-urile pe orizontala. Implementarea unui meniu responsiv necesita CSS si uneori JavaScript.

Uneori vrei ca un link sa descarce un fisier in loc sa il deschida in browser. HTML5 ofera atributul download tocmai pentru aceasta situatie. Cand adaugi acest atribut pe un tag <a> , browserul descarca fisierul indicat in href in loc sa navigheze catre el.

<!-- Descarca fisierul cu numele original -->
<a href="documente/referat.pdf" download>
  Descarca referatul (PDF)
</a>

<!-- Descarca fisierul cu un nume personalizat -->
<a href="img/foto_001.jpg" download="fotografie-excursie.jpg">
  Descarca fotografia
</a>

Atributul download poate fi folosit fara valoare (browserul pastreaza numele original al fisierului) sau cu o valoare care specifica numele sub care se salveaza fisierul. De exemplu, download="referat-informatica.pdf" va salva fisierul cu acest nume, indiferent cum se numeste pe server.

Aceasta tehnica este utila pentru: documente PDF (referate, formulare, ghiduri), imagini la rezolutie mare (care altfel s-ar deschide in browser), arhive ZIP cu materiale de curs si fisiere de cod . Practic, orice fisier pe care vrei sa il oferi utilizatorului pentru descarcare, nu pentru vizualizare in browser.

O limitare importanta: atributul download functioneaza doar pentru fisiere de pe acelasi domeniu (same-origin). Daca incerci sa descarci un fisier de pe alt site (de exemplu href="https://alt-site.com/fisier.pdf" download ), browserul va ignora atributul download din motive de securitate si va deschide fisierul normal.

Un sfat practic: cand oferi fisiere pentru descarcare, include in textul link-ului informatii despre fisier: tipul (PDF, ZIP, DOCX), dimensiunea aproximativa si continutul. De exemplu: "Descarca ghidul complet (PDF, 2.4 MB)" este mult mai util decat simplu "Descarca".

Pe site-urile educationale, link-urile de descarcare sunt folosite frecvent pentru materiale de curs: fise de lucru, prezentari, teste si proiecte. Profesorii pot pune toate materialele pe site si elevii le pot descarca oricand, de oriunde. Aceasta este una dintre cele mai practice utilizari ale link-urilor cu atributul download .

Pentru o experienta si mai buna, poti grupa link-urile de descarcare intr-o sectiune dedicata, stilizata cu CSS ca o lista de fisiere. Fiecare link poate avea o iconita corespunzatoare tipului de fisier (PDF, ZIP, DOCX) si informatii despre dimensiune. Aceasta organizare clara ajuta utilizatorul sa gaseasca rapid fisierul dorit, mai ales cand sunt multe materiale disponibile pentru descarcare.

Atributul title adauga un tooltip (un mic text informativ) care apare cand utilizatorul tine cursorul mouse-ului deasupra unui link. Este util pentru a oferi informatii suplimentare despre destinatia link-ului sau despre ce se va intampla cand utilizatorul da click.

<a href="https://wikipedia.org"
   title="Deschide Wikipedia in tab nou"
   target="_blank">
  Viziteaza Wikipedia
</a>

<a href="referat.pdf"
   title="Fisier PDF, 1.5 MB - se descarca automat"
   download>
  Descarca referatul
</a>

Nu confunda title cu alt : alt este specific tag-ului <img> si apare cand imaginea nu se incarca. title poate fi adaugat pe orice element HTML (link-uri, imagini, paragrafe, div-uri) si apare ca tooltip la hover. Cele doua au roluri diferite si nu se inlocuiesc reciproc.

Atributul title nu este un inlocuitor pentru textul descriptiv al link-ului. Motivul este ca tooltip-ul nu apare pe dispozitivele mobile (nu exista hover pe touchscreen) si nu este mereu citit de cititorii de ecran. De aceea, informatiile importante trebuie sa fie in textul vizibil al link-ului, nu ascunse in title.

Un exemplu bun de utilizare a atributului title : pe un link prescurtat sau cu text scurt, title poate oferi context suplimentar. De exemplu, intr-un meniu unde scrie doar "Servicii", tooltip-ul ar putea spune "Vezi lista completa de servicii oferite". Pe link-uri cu text deja descriptiv, title nu este necesar si poate fi chiar redundant.

Atributul title este util si pe abrevieri (tag-ul <abbr> ). De exemplu: <abbr title="Hypertext Markup Language">HTML</abbr> va afisa "HTML" pe pagina, iar cand utilizatorul tine cursorul deasupra, va vedea tooltip-ul "Hypertext Markup Language". Este o modalitate eleganta de a explica acronimele fara a intrerupe fluxul textului.

Din punct de vedere al SEO (Search Engine Optimization), atributul title pe link-uri nu mai are un impact semnificativ asupra pozitionarii in motoarele de cautare. Google si alte motoare de cautare se bazeaza mai mult pe textul vizibil al link-ului (anchor text) si pe contextul din jurul acestuia. Totusi, title ramane util din perspectiva experientei utilizatorului , oferind informatii suplimentare fara a aglomera interfata vizuala.

Pentru a intelege pe deplin cum functioneaza link-urile, trebuie sa intelegi structura unui URL (Uniform Resource Locator). Un URL este "adresa" completa a unei resurse pe internet, la fel cum o adresa postala identifica o casa intr-un oras.

https://www.exemplu.ro/pagini/contact.html#formular
|___|   |____________| |___________________| |______|
  |          |                  |                |
protocol   domeniu            cale           ancora (#)

Componentele unui URL sunt: Protocolul ( https:// sau http:// ) - metoda de comunicare. HTTPS inseamna comunicare securizata (criptata), iar HTTP este varianta nesecurizata. Astazi, toate site-urile serioase folosesc HTTPS.

Domeniul ( www.exemplu.ro ) este "adresa" site-ului pe internet. Este unic - nu pot exista doua site-uri cu acelasi domeniu. Domeniul se inregistreaza la un registrar (o companie autorizata) si se plateste anual. Extensia (.ro, .com, .org) indica tara sau tipul organizatiei.

Calea ( /pagini/contact.html ) indica fisierul sau pagina specifica de pe acel site. Functioneaza la fel ca structura de foldere de pe calculator: slash-urile separa folderele. Ancora ( #formular ) este optionala si indica o sectiune specifica din pagina (link intern).

Intelegerea structurii URL-ului te ajuta sa depanezi probleme: daca un link nu functioneaza, verifica fiecare componenta. Protocolul este corect? Domeniul este scris corect? Calea catre fisier exista? Aceasta analiza sistematica te ajuta sa gasesti rapid eroarea, in loc sa ghicesti la intamplare.

De asemenea, intelegerea URL-urilor te ajuta sa recunosti link-uri suspecte sau de phishing (care incearca sa imite site-uri legitime). De exemplu, un link care pare sa duca la "facebook.com" dar are de fapt domeniul "faceb00k-login.xyz" este un site fals. Verifica mereu domeniul inainte de a introduce date personale pe un site.

URL-urile pot fi si prietenoase (user-friendly) sau criptice . Un URL precum /produse/pantofi-sport-nike este mult mai usor de inteles decat /p?id=38291&cat=7 . Site-urile profesionale folosesc URL-uri curate si descriptive, care ajuta atat utilizatorii sa inteleaga unde se afla, cat si motoarele de cautare sa indexeze corect continutul paginii.

Un URL poate contine si parametri de interogare (query parameters) dupa semnul ? . De exemplu: https://google.com/search?q=html&lang=ro . Parametrii sunt perechi cheie=valoare separate prin & . Acestia transmit informatii suplimentare serverului - in exemplul de mai sus, termenul de cautare ("html") si limba preferata ("ro").