Una de les etiquetes que aprendreu a principis de l'educació del disseny web és un parell d'etiquetes conegudes com "etiquetes d'èmfasi". Fem un cop d'ull al que són aquestes etiquetes i com s'utilitzen avui en el disseny web.
Tornar a XHTML
Si heu après HTML fa anys, molt abans de l'augment de l'HTML5, probablement usés etiquetes en negreta i en cursiva. Com era d'esperar, aquestes etiquetes convertiren els elements en text en negreta o text en cursiva, respectivament. El problema amb aquestes etiquetes, i per què van ser allunyades a favor de nous elements (que veurem en breu), és que no són elements semàntics. Això es deu a que defineixen com hauria de buscar el text en lloc d'informació sobre el text. Recordeu que HTML (que és on s'escrivien aquestes etiquetes) té a veure amb l'estructura, no amb l'estil visual. Els visuals són gestionats per CSS i les millors pràctiques de disseny web han mantingut durant molt de temps que hauria de tenir una clara separació de l'estil i l'estructura en les seves pàgines web. Això vol dir que no s'utilitzen elements que no són semàntics i quins detalls es veuen més que no pas estructures. Per aquest motiu, les etiquetes en negreta i cursiva han estat generalment substituïdes per fortes (per negreta) i per èmfasi (per cursiva).
& lt; fort & gt; i & lt; em & gt;
Els elements forts i d'èmfasi agreguen informació al vostre text, que detalla el contingut que s'ha de tractar de manera diferent i que es fa èmfasi quan es parla d'aquest contingut. Utilitzeu aquests elements pràcticament de la mateixa manera que hauria utilitzat en negreta i cursiva en el passat. Simplement envolteu el text amb les etiquetes d'obertura i tancament ( i per fer èmfasi i i per fer èmfasi fort) i es farà èmfasi en el text adjunt.
Podeu niar aquestes etiquetes i no importa quina és l'etiqueta externa. Aquests són alguns exemples.
Aquest text es ressalta i la majoria dels navegadors el mostrarien com a cursiva. Aquest text està fortament subratllat i la majoria dels navegadors el mostrarien com a tipus en negreta.En aquests dos exemples, no estem dictant aspecte visual amb l'HTML. Sí, l'aspecte predeterminat de l'etiqueta seria cursiva i el seria en negreta, però aquestes es podrien canviar fàcilment a CSS. Aquest és el millor dels dos mons. Podeu aprofitar els estils de navegador predeterminats per obtenir text en cursiva o en negreta al document sense creuar la línia i barrejar-ne l'estructura i l'estil. Digueu que voleu que el text no només sigui en negreta, sinó que també sigui de color vermell, podeu afegir això al CSS
fort {
color: vermell;
}
En aquest exemple, no cal afegir una propietat per al tipus de lletra en negreta ja que és el valor predeterminat. Si no voleu deixar això a l'atzar, però, sempre podeu afegir-lo a:
fort {
font-weight: bold;
color: vermell;
}
Ara, estaria tot segur que tingués una pàgina amb text en negreta (i vermell) sempre que s'utilitzi l'etiqueta .
Doble a l'èmfasi
Una cosa que he observat durant l'any és el que passa si intentes duplicar l'èmfasi. Per exemple:
Aquest text hauria de tenir text en negreta i en cursiva al seu interior.Es podria pensar que aquesta línia produiria una àrea que tingui text en negreta i cursiva. De vegades això succeeix, però he vist que alguns navegadors només honoren el segon dels dos estils d'èmfasi, el més proper al text actual en qüestió, i només ho mostren com a cursiva. Aquesta és una de les raons per les quals no estic duplicant les etiquetes d'èmfasi.
Un altre motiu per evitar que aquest "doble" sigui per a propòsits estilístics. Una forma d'èmfasi si generalment és suficient per transmetre el to que desitgeu establir. No necessiteu en negreta, en cursiva, color, ampliar i subratllar el text per tal que es destaqui. Aquest text, tindrà tots els diferents tipus d'èmfasi, es convertiria en boig. Així que aneu amb compte quan utilitzeu etiquetes d'èmfasi o estils CSS per proporcionar èmfasis i no superar-lo.
Una nota sobre negreta i cursiva
Un pensament final: mentre que les etiquetes en negreta () i cursiva () ja no es recomana que s'utilitzin com a elements d'èmfasi, hi ha alguns dissenyadors web que utilitzen aquestes etiquetes per introduir àrees de text en l'estil. Bàsicament, l'utilitzen com un element . Això és bo perquè les etiquetes són molt curtes, però no es recomana utilitzar aquests elements d'aquesta manera. He esmentat en cas que la vegeu en alguns llocs que s'utilitzen per no crear text en negreta o en cursiva, sinó per crear un enllaç CSS per a un altre tipus d'estil visual.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 16/12/16.