Solía tener este jefe que ser querido, ser querido, ser querido, ser querido para enfatizar palabras. Esto fue mucho antes de que usáramos editores WYSIWYG y tuviera que codificar a mano esa basura.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>(No entremos en los colores que usó incluso para MORO énfasis.)
Escribir todo ese marcado nunca se sintió bien. El esfuerzo que tomó, claro, lo que sea. Pero, ¿es una buena idea agregar contenido de sobrecarga con el doble o más? - énfasis?
Diferentes etiquetas transmiten un énfasis diferente
Para empezar, la <strong> y <em> Las etiquetas están diseñadas para diferentes usos. Los recuperamos en HTML5, donde:
¿Entonces <strong> da más peso al contenido en el sentido de que sugiere que el contenido es importante o urgente. Piensa en una advertencia:
Advertencia: El siguiente contenido ha sido marcado por ser increíble.
Puede ser tentador alcanzar <em> para hacer lo mismo. Después de todo, el texto en cursiva puede llamar la atención. Pero en realidad es una sugerencia para usar más énfasis al leer el contenido. Por ejemplo, aquí hay dos versiones de la misma oración con el énfasis en diferentes lugares:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>Ambos ejemplos enfatizan el énfasis, pero en diferentes palabras. Y sonarían diferentes si los leyeras en voz alta. Lo que hace <em> una gran manera de expresar el tono en su escritura. Cambia el significado de la oración de una manera que <strong> no.
Énfasis visual versus énfasis semántico
Esas son dos cosas que debes sopesar al enfatizar el contenido. Por ejemplo, hay muchos casos en los que es posible que deba poner en cursiva el contenido sin afectar el significado de la oración. Pero eso se puede manejar con otras etiquetas que se muestran en cursiva:
<i>: ¡Este es el clásico! Antes de HTML5, esto se usaba para enfatizar el énfasis con cursiva por todas partes. Ahora, se usa puramente para poner en cursiva el contenido visualmente sin cambiar el significado semántico.<cite>: Indicar la fuente de un hecho o cifra. ("Fuente: Trucos CSS")<address>: se utiliza para marcar información de contacto, no solo direcciones físicas, sino también direcciones de correo electrónico y números de teléfono. (
GME@dhr-rgv.com)
Va a ser lo mismo con <strong>. En lugar de usarlo para dar estilo al texto que desea que se vea más pesado, es una mejor idea usar el clásico <b> etiqueta en negrita para evitar dar más importancia al contenido que no lo necesita. Y recuerda, algunos elementos como los encabezados ya están en negrita, gracias a los estilos predeterminados del navegador. No hay necesidad de agregar un énfasis aún más fuerte.
Usar cursiva en contenido enfatizado (y viceversa)
Hay casos legítimos en los que puede necesitar poner en cursiva parte de una línea que ya está enfatizada. O tal vez agregar énfasis a un fragmento de texto que ya está en cursiva.
Una cita en bloque podría ser un buen ejemplo. He visto muchas veces que están en cursiva por estilo, aunque los estilos de navegador predeterminados no lo hacen:
blockquote { font-style: italic;
}¿Qué pasa si necesitamos mencionar el título de una película en esa cita en bloque? Eso debería estar en cursiva. No se necesita énfasis en el estrés, por lo que un <i> la etiqueta servirá. Pero sigue siendo extraño poner algo en cursiva cuando ya está representado de esa manera:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>En una situación en la que estamos poniendo en cursiva algo dentro de contenido en cursiva como este, se supone que debemos eliminar las cursivas del elemento anidado… <i> en este caso.
blockquote i { font-style: normal;
}Consultas de estilo de contenedor será súper útil para atrapar todas estas instancias si las conseguimos:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}Este pequeño fragmento evalúa la cita en bloque para ver si es font-style se establece a italic. Si es así, entonces se asegurará de que el <em>, <i>, <cite>y <address> los elementos se representan como texto normal, conservando el significado semántico, si lo hay.
Pero volvamos al énfasis dentro del énfasis.
yo no anidaría <strong> dentro <em> Me gusta esto:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>…o nido <em> dentro <strong> en lugar:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>¡La representación está bien! Y no importa en qué orden estén… al menos en los navegadores modernos. Jennifer Kyrnin menciona que algunos navegadores solo representan la etiqueta más cercana al texto, pero no me encontré con eso en ninguna parte de mis pruebas limitadas. ¡Pero algo a tener en cuenta!
La razón por la que no anidaría una forma de énfasis en otra es porque simplemente no es necesaria. No hay ninguna regla gramatical que lo requiera. Al igual que los signos de exclamación, una forma de énfasis es suficiente y debe usar la que coincida con lo que busca, ya sea visual, de peso o énfasis anunciado.
Y aunque algunos lectores de pantalla son capaces de anunciar contenido enfatizado, no leerán el marcado con ninguna importancia o énfasis adicional. Por lo tanto, tampoco hay ventajas adicionales de accesibilidad, por lo que puedo decir.
¡Pero realmente quiero todo el énfasis!
Si estás en la posición en la que tu jefe es como el mío y quiere TODAS las énfasis, buscaría la etiqueta HTML correcta para el tipo de énfasis, luego aplicaría el resto de los estilos con una combinación de etiquetas que no afectan la semántica con CSS para ayudar a explicar cualquier cosa que los estilos del navegador no puedan manejar.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>Incluso podría hacerlo con el <strong> etiquetar también como medida defensiva:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}Siempre que estemos jugando a la defensiva, podemos identificar errores en los que los énfasis están anidados dentro de otros énfasis al resaltarlos en rojo o algo así:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}Entonces, probablemente usaría ese fragmento de código de la última sección que elimina el estilo en cursiva predeterminado de un elemento cuando está anidado en otro elemento en cursiva.
¿Algo más?
Mayyyyybe:
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
- Fuente: https://css-tricks.com/the-double-emphasis-thing/
