La diferencia entre <html>
y <body>
es fácil de pasar por alto. Parece ser una de esas cosas que entra en la categoría de trivial. Es cierto que tengo la mala costumbre de aplicar todos los estilos globales a <body>
y, cuando eso se queda corto, me muevo a <html>
sin pensarlo.
Sin embargo, existen diferencias y es una buena idea estar al tanto de ellas, independientemente de si somos veteranos de CSS o novatos. Repasaremos los de esta publicación y consideraremos algunas aplicaciones prácticas en las que diseñar uno sobre el otro podría tener sentido.
Cómo se relacionan el HTML y el cuerpo
Considere esta estructura estándar para un documento HTML básico:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
La especificación define <html>
como el elemento raíz de un documento, y podemos ver claramente que en el ejemplo anterior: el <html>
element es el nivel más alto de todos los demás elementos. La pelota se detiene ahí porque no hay más niveles más allá de aquél de donde se pueden heredar los estilos.
Desde allí, <head>
y <body>
constituyen los dos únicos elementos que caen directamente dentro <html>
. De hecho, la especificación define <body>
directamente en contraste con <head>
ya que esos son los únicos dos elementos que deben distinguirse.
Entonces, la conclusión aquí es que <html>
es el elemento raíz de un documento donde <body>
es un descendiente contenido en él. De hecho, hay una :root
selector en CSS. Estos apuntan exactamente a lo mismo:
:root {
}
html {
}
Excepto :root
tiene una mayor especificidad: (0, 0, 1, 0) vs (0, 0, 0, 1).
Así que siempre deberíamos poner estilos globales <html>
, ¿derecho?
Es tentador pensar que cualquier estilo que queramos heredar en todos los ámbitos debería aplicarse directamente a <html>
porque es el elemento raíz del documento. <html>
reemplaza <body>
en jerarquía, por lo que debe contener todos los estilos globales.
Pero ese no es exactamente el caso. De hecho, los atributos en línea para lo siguiente se asignaron originalmente a <body>
en la especificación:
- antecedentes
- bgcolor
- margen inferior
- margen izquierdo
- margen derecho
- margen superior
- texto
Si bien estos atributos ahora se consideran obsoletos, la recomendación es usar CSS en su lugar con su propiedad CSS correspondiente:
Atributo en línea | Propiedad CSS |
antecedentes | antecedentes | bgcolor | antecedentes color de fondo |
margen inferior | margen inferior |
margen izquierdo | margen izquierdo |
margen derecho | margen derecho |
margen superior | margen superior |
texto | fuente |
Dado que estas propiedades CSS se originaron a partir de atributos en línea que fueron escritos para <body>
, parece apropiado que se apliquen directamente a <body>
también en el CSS, en lugar de introducirlos en el <html>
elemento.
Así que siempre deberíamos poner estilos globales <body>
, ¿derecho?
Bueno no exactamente. Puede haber situaciones en las que tenga más sentido aplicar estilos a <html>
en lugar de. Consideremos un par de esos escenarios.
Trabajando con rem
unidades
El rem
la unidad es relativa a la raíz del documento. Por ejemplo, al escribir algo como esto:
.module {
width: 40rem;
}
ese rem
la unidad es relativa a la font-size
de El <html>
elemento, que es la raíz del documento. Entonces, lo que esté configurado como predeterminado por el usuario en el nivel raíz es lo que .module
la clase escalará a.
Jonathan Snook tiene una publicación clásica que ilustra muy bien cómo establecer el font-size
sobre <html>
como porcentaje se puede utilizar como reinicio cuando se trabaja con rem
unidades.
Peculiar background-color
Hay una cosa extraña en CSS donde el background-color
sobre <body>
inunda toda la ventana gráfica incluso si las métricas del elemento en sí no cubren toda esa área. A menos que el background-color
se establece en el elemento html, luego no lo hace.
Si el objetivo es la inundación, puede ser inteligente simplemente configurarlo en el elemento html para empezar.
Terminando
Con suerte, esto arrojará algo de luz sobre las diferencias clave entre el uso de <html>
y <body>
en CSS. También hay diferencias en JavaScript. Por ejemplo, no necesita consultar ninguno, html es document.rootElement
y el cuerpo es document.body
.
Sin duda, podríamos establecer más distinciones técnicas entre los dos, pero el punto aquí es mejorar nuestro conocimiento para tomar mejores decisiones al escribir CSS.
¿Tiene otros ejemplos de dónde tiene más sentido darle estilo a uno sobre el otro? ¿O quizás tiene un conjunto diferente de criterios para saber cuándo diseñar uno? ¡Háznoslo saber en los comentarios!
Más recursos
- Referencia de MDN en
<html>
- Referencia de MDN en
<body>