Guia d'iniciació als enllaços de marcador d'espais HTML5

Què són els enllaços de marcador de posició HTML5?

idUp fins a HTML5, l'etiqueta ha requerit un atribut: href. Però HTML5 fa que aquest atribut sigui opcional. Quan escriviu una etiqueta sense cap atribut, s'anomena enllaç d'espai reservat.

Un enllaç de marcador de posició es veu així:

Anterior

Ús de vincles de marcador de posició durant el desenvolupament

Gairebé tots els dissenyadors web han creat enllaços de llocs reservats en un moment o altre mentre dissenyen i construeixen un lloc web. Abans d'HTML5, escrivim:

text de l'enllaç

com a marcador de posició. I he enviat llocs de maquetes als clients amb aquests marcadors només perquè el client em pregunti "per què no funcionen els enllaços al text?"

El problema d'utilitzar un hashtag (#) com a enllaç de marcador de posició és que es pot fer clic a l'enllaç i això pot causar confusió als vostres clients. I, si algú s'oblida d'actualitzar-los amb els URL correctes, aquests enllaços poden aparèixer trencats al lloc web perquè no enllacen amb res.

En el seu lloc, haureu de començar a utilitzar etiquetes sense cap atribut. Podeu fer que aquests es vegin com qualsevol altre enllaç a la vostra pàgina, però no es podran fer clic perquè són només marcadors de posició.

Ús dels enllaços de llocs reservats en llocs en directe

Però els enllaços de marcador de posició tenen un lloc en el disseny web per més que només un desenvolupament. Un lloc on es pot brillar un marcador de posició en navegació. En molts casos, les llistes de navegació del lloc web tenen alguna manera d'indicar quina pàgina esteu fent. Sovint s'anomenen indicadors "tu ets aquí".

La majoria dels llocs depenen dels atributs de l'identificador de l'element que necessita el marcador "you are here", però alguns també utilitzen l'atribut class. Tanmateix, qualsevol atribut que utilitzeu, heu de fer un munt de feina a cada pàgina que tingui la navegació en ell, afegint i eliminant l'atribut dels elements correctes.

Amb un enllaç d'espai reservat, podeu escriure la vostra navegació però vulgueu, i simplement elimineu l'atribut href de l'enllaç corresponent quan afegiu la navegació a una pàgina. Emmagatzema tota la meva llista de navegació com a fragment en el meu editor, de manera que és només un copiat ràpid i, a continuació, esborreu l'href. També podeu obtenir el vostre CMS per fer el mateix.

A més d'afegir un estil especial (us mostraré com a continuació) a un enllaç de marcador de posició, no es pot fer clic a l'enllaç. Així, els clients no es confonguin pensant que podrien obtenir una altra cosa si fan clic a l'enllaç de navegació on actualment estan.

Col·locació d'enllaços amb marcador de posició

Els enllaços de llocs reservats són fàcils d'estil i d'estil diferents dels altres enllaços de la vostra pàgina web. Simplement assegureu-vos d'etiquetar tant l'etiqueta com l'etiqueta a:. Per exemple:

un {color: vermell; font-weight: bold; text-decoració: cap; } a: link {color: blue; font-weight: normal; text-decoration: underline; }

Aquest CSS farà que els enllaços de lloc reservats siguin en negreta i en vermell, sense cap subratllat. Tot i que els vincles regulars seran de pes normal, blau i subratllat.

Recordeu restablir tots els estils que no vulgueu transferir de l'etiqueta. Per exemple, he establert el tipus de lletra en negreta per als enllaços de posició reservada, així que he hagut de configurar-lo per:

font-weight: normal;

per als enllaços estàndard. El mateix passa amb la decoració de text, eliminant-lo amb el selector, s'hauria eliminat per al selector d'enllaç a: si no l'heu tornat a col·locar.