Acerca de este problema HTML
El elemento <big> era un elemento HTML puramente presentacional que aumentaba el tamaño del texto en un nivel (similar a pasar de small a medium, o de medium a large). HTML5 lo eliminó de la especificación porque viola el principio de separar la estructura del contenido de la presentación visual. HTML debe describir el significado del contenido, mientras que CSS debe manejar cómo se ve.
Usar elementos obsoletos causa varios problemas. Primero, la validación W3C fallará, lo que puede impactar los estándares de calidad del código y las auditorías SEO. Segundo, aunque los navegadores actuales aún soportan <big> por compatibilidad hacia atrás, no hay garantía de que los navegadores futuros continúen haciéndolo. Tercero, el elemento <big> no tiene significado semántico — no le dice a las tecnologías de asistencia por qué el texto es más grande, solo que debe mostrarse de manera diferente. CSS te da un control más preciso sobre el tamaño de la fuente mientras mantiene tu HTML limpio y compatible con los estándares.
Para solucionar este problema, reemplaza cada elemento <big> con un <span> (u otro elemento semánticamente apropiado) y aplica CSS para controlar el tamaño de la fuente. Puedes usar estilos en línea, un bloque <style>, o una hoja de estilos externa.
Si el texto más grande tiene un significado específico — como enfatizar importancia — considera usar un elemento semántico como <strong> o <em> en su lugar, y aplicarle estilos con CSS según sea necesario.
Ejemplos
❌ Obsoleto: usando el elemento <big>
<p>Este es <big>texto importante</big> en un párrafo.</p>
✅ Corregido: usando un <span> con CSS en línea
Esta es una sustitución directa que imita el comportamiento original de <big>, que renderizaba texto con font-size: larger:
<p>Este es <span style="font-size: larger;">texto importante</span> en un párrafo.</p>
✅ Corregido: usando una clase CSS
Para mejor mantenibilidad, usa una clase en lugar de estilos en línea:
<style>
.text-big {
font-size: larger;
}
</style>
<p>Este es <span class="text-big">texto importante</span> en un párrafo.</p>
✅ Corregido: usando un elemento semántico con CSS
Si el texto es más grande porque es importante o enfatizado, usa un elemento semántico y aplícale estilos:
<style>
.highlight {
font-size: 1.25em;
}
</style>
<p>Este es <strong class="highlight">texto importante</strong> en un párrafo.</p>
Elegir un valor de font-size
El elemento <big> históricamente correspondía a font-size: larger, pero con CSS tienes total flexibilidad:
-
font-size: larger— aumento relativo, más parecido al comportamiento original de<big> -
font-size: 1.2em— escala al 120% del tamaño de fuente del elemento padre -
font-size: 1.25rem— escala relativo al tamaño de fuente raíz -
font-size: 20px— valor absoluto en píxeles (menos flexible, generalmente evitar)
Usar unidades relativas como em, rem, o la palabra clave larger es preferible porque escalan bien en diferentes tamaños de pantalla y respetan las preferencias de tamaño de fuente del usuario.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: