Etiquetas de énfase HTML

Unha das etiquetas que vai aprender no inicio da súa educación en deseño web é un par de etiquetas coñecidas como "etiquetas de énfase". Vexamos o que son estas etiquetas e como se usan actualmente no deseño web.

Volver a XHTML

Se souberas fai anos HTML, ben antes do ascenso de HTML5, seguramente usaches as etiquetas en negra e en cursiva. Como sería de esperar, estas etiquetas converteron elementos en texto en negra ou texto en cursiva respectivamente. O problema con estas etiquetas, e por que foron retiradas a favor de novos elementos (que veremos en breve), é que non son elementos semánticos. Isto débese a que definen como debería buscar o texto en vez de información sobre o texto. Lembre, o HTML (que é onde se escriben estas etiquetas) ten que ver coa estrutura, sen o estilo visual. Os visuais son tratados por CSS e as mellores prácticas de deseño web mantiveron que debes ter unha clara separación de estilo e estrutura nas túas páxinas web. Isto significa non usar elementos que non son semánticos e que buscan detalles máis que estruturas. É por iso que as etiquetas en negra e cursiva foron substituídas por fortes (en negriña) e énfasis (en cursiva).

& lt; forte & gt; e & lt; em & gt;

Os elementos fortes e acentuados engaden información ao seu texto, detallan o contido que debe tratarse de forma diferente e salientan cando se fala ese contido. Utiliza estes elementos case mesmo da mesma maneira que terías usado en negra e cursiva no pasado. Simplemente coloque o seu texto coas etiquetas de apertura e de peche ( e para facer énfase e e para facer un énfasis forte) e o texto encerado será destacado.

Pode anidar estas etiquetas e non importa cal é a etiqueta externa. Aquí tes algúns exemplos.

Este texto está enfatizado ea maioría dos navegadores mostraríano como cursiva. Este texto está fortemente enfatizado ea maioría dos navegadores mostraríano en negra.

En ambos exemplos, non estamos dicindo aspecto visual co HTML. Si, a aparencia predeterminada da etiqueta sería cursiva e o sería en negra, pero esas miradas poderían cambiarse fácilmente en CSS. Este é o mellor dos dous mundos. Pode aproveitar os estilos de navegación predeterminados para obter texto en cursiva ou en negra no documento sen atravesar a liña e mesturar a estrutura e o estilo. Diga que quería que o texto non só sexa en negriña, senón tamén para ser vermello, podería agregar isto ao CSS

forte {
cor: vermello;
}

Neste exemplo, non é preciso engadir unha propiedade para o tipo de letra en negra xa que é o predeterminado. Se non queres deixar isto ao azar, con todo, sempre podes engadilo en:

forte {
fonte-peso: negra;
cor: vermello;
}

Agora estaría todo menos garantido para ter unha páxina con texto en negra (e vermello) sempre que se use a etiqueta .

Dobre cara arriba en énfasis

Unha cousa que teño notado durante o ano é o que ocorre se tentas dobrar en énfasis. Por exemplo:

Este texto debería ter tanto o texto en negriña e en cursiva dentro del.

Pensas que esta liña produciría unha área que teña texto en negra e cursiva. Ás veces isto ocorre, pero vin algúns navegadores que só honran o segundo dos dous estilos de énfase, o máis próximo ao texto actual en cuestión, e só mostrar isto como cursiva. Esta é unha das razóns polas que non duplico as etiquetas de énfase.

Outro motivo para evitar que este "dobran" sexa para fins estilísticos. Unha forma de énfasis se adoita ser o suficiente para transmitir o ton que desexa configurar. Non é preciso en negra, en cursiva, cor, ampliar e subliñar texto para que destaque. Ese texto, fará que todos eses tipos de énfasis se volvan desgarrados. Polo tanto, teña coidado ao usar etiquetas de énfase ou estilos CSS para proporcionar énfase e non esaxere.

Unha nota sobre Negrita e Cursiva

Un pensamento final: mentres que as etiquetas en negra () e cursiva () xa non se recomenda que sexan utilizados como elementos de énfase, hai algúns diseñadores web que usan estas etiquetas para estilo en áreas de texto. Basicamente, úsano como un elemento . Isto é bo porque as etiquetas son moi curtas, pero non se recomenda usar estes elementos deste xeito. Menciono no caso de que o vexas en algúns sitios que se usan para non crear texto en negra ou en cursiva, senón para crear un gancho CSS para outro tipo de estilo visual.

Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 12/2/16.