HTML vs cuerpo en CSS | Programar Plus

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>
(Visited 5 times, 1 visits today)