Ce sunt legăturile HTML pentru Placeholder?
idUp până la HTML5, o etichetă a solicitat un atribut: href. Dar HTML5 face chiar atributul opțional. Când scrieți o etichetă fără atribute, se numește un link cu substituent.
Un link placeholder arată astfel:
anterioarăFolosirea legăturilor de substituire în timpul dezvoltării
Aproape fiecare designer de web a creat legături cu substituent la un moment dat sau altul în timp ce proiectarea și construirea unui site web. Înainte de HTML5, am scrie:
link textca substituent. Și am trimis site-uri de tip "mockup" clienților cu acei locatori numai pentru a-mi cere clientului "de ce nu funcționează legăturile din text?"
Problema cu utilizarea unui hashtag (#) ca legătură substituent este că link-ul este clickabil, iar acest lucru poate provoca confuzie pentru clienții dvs. Și dacă cineva uită să le actualizeze cu adresele URL corecte, acele linkuri pot apărea rupte pe site-ul live, deoarece nu leagă nimic.
În schimb, ar trebui să începeți să utilizați o etichetă fără atribute. Poți să le faci stil ca să arăți ca orice alt link de pe pagina ta, dar nu vor putea face clic, pentru că sunt doar substituenți.
Utilizarea legăturilor cu locurile de substituire pe site-urile Live
Dar legăturile cu substituent au un loc în designul web pentru mai mult decât dezvoltarea. Un loc pe care o legătură de tip placeholder poate străluci este în navigație. În multe cazuri, listele de navigare de pe site-ul Web au o anumită modalitate de a indica care este pagina pe care vă aflați. Acestea sunt adesea numite indicatori "sunteți aici".
Majoritatea site-urilor se bazează pe atributele id pe elementul care are nevoie de marcatorul "sunteți aici", dar unii utilizează și atributul de clasă. Cu toate acestea, indiferent de atributul pe care îl utilizați, trebuie să faceți o grămadă de muncă pentru fiecare pagină care are navigarea pe ea, adăugând și eliminând atributul din elementele corecte.
Cu un link placeholder, puteți să vă scrieți navigația oricum doriți și apoi să eliminați atributul href din link-ul corespunzător atunci când adăugați navigația la o pagină. Îmi păstrez întreaga listă de navigare ca un fragment în editorul meu, deci este doar o copiere rapidă și apoi ștergeți href-ul. De asemenea, puteți obține CMS dvs. pentru a face același lucru.
Și, pe lângă adăugarea unui stil special (vă voi arăta cât de jos) la un link placeholder, link-ul nu poate fi făcut clic. Deci, clienții nu se confundă gândindu-se că ar putea să obțină altceva dacă fac clic pe link-ul de navigație unde aceștia sunt în prezent.
Styling Placeholder Links
Dispozitivul "link-uri" este ușor de stil și de stil diferit față de celelalte linkuri de pe pagina dvs. web. Pur și simplu asigurați-vă că ați stil atât tag-ul a, cât și eticheta a: link. De exemplu:
a {culoare: roșu; font-weight: bold; text-decoration: nici unul; } a: link {culoare: albastru; font-weight: normal; text-decorare: subliniere; }Acest CSS va face link-uri placeholder bold și roșu, fără subliniere. În timp ce legăturile regulate vor avea o greutate normală, albastră și subliniată.
Nu uitați să resetați toate stilurile pe care nu doriți să le transferați din etichetă. De exemplu, am setat greutatea font-ului la bold pentru legăturile substituentului, așa că a trebuit să-l configurez la:
font-weight: normal;pentru legăturile standard. Același lucru este valabil și pentru decorarea textului, prin eliminarea acestuia cu selectorul a, ar fi fost eliminat pentru selectorul de link-uri a: dacă nu l-aș pune înapoi.