La diferencia entre <html> y <body> es fácil de pasar por alto. Parece ser una de esas cosas que cae 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, paso a <html> sin pensar en ello.
Sin embargo, existen diferencias y es una buena idea tenerlas en cuenta.

Cómo se Relacionan

<!DOCTYPE html>
<html lang="es"><!-- Inicio de HTML -->
  <head>
    <!-- Metadata, title y otros -->
  </head>
  <body>
    <!-- Lo que vemos en un sitio web -->
  </body>
</html><!-- Fin de HTML -->

La especificación define <html> como el elemento raíz de un documento, y podemos ver claramente que en el ejemplo anterior: El elemento <html> es el nivel superior, pues contiene a todos los demás. La pelota se detiene ahí porque no hay niveles más allá de los que se pueda heredar.

El elemento <body> contiene todo lo visual e importante de un documento HTML, como encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc.

:root {
}
html {
}

Si, eres de los que aun te preguntas que onda con estos selectores, pues simbolizan los mismo, ambos se refieren al tag HTML.

Los estilos globales en <html>, ¿verdad?

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 a <body> en la jerarquía, por lo que se deduce que debe contener todos los estilos globales.

Pero ese no es exactamente el caso. De hecho, los siguientes atributos inline se asignaron por especificación, original y exclusivamente a <body> : background, bgcolor, marginbottom, marginleft, marginright, margintop y text.

Actualmente estos atributos se consideran obsoletos por lo cual la recomendación es usar su propiedad CSS equivalente asignada, mas ya sabiendo que estas se originaron a partir de atributos inline escritos para <body>, parece apropiado que también se apliquen directamente a <body> vía CSS, en lugar de aplicarlos en el elemento <html>.

Entonces todo en el <body>

Bueno no exactamente. Puede haber situaciones en las que tenga más sentido aplicar estilos a <html> en su lugar. Un par de esos escenarios serian cuando nos toca Trabajar con unidades rem o color y redimensionado de fondo.

Lo que si es definitivo: CSS siempre dentro del </head>.

¿Y Javascript?

Es una buena idea colocar etiquetas <script> JavaScript justo antes de la etiqueta de cierre </body> por sobre la sección <head> del HTML.

La razón de esto es que HTML se carga de arriba a abajo. Primero se carga la cabeza, luego el cuerpo y luego todo lo que hay dentro del cuerpo.

Siguiendo la gráfica, si colocamos nuestro JavaScript en la sección de cabecera, este se cargará antes de cualquier parte del HTML, y no habiendo ningún elemento al cual afectar, parecerá que el código no funciona, pudiendo así también ralentizar visiblemente la carga de tu página, pues incluso se cargará antes que el HTML critico.

Cuando colocas tu JavaScript en la parte inferior de tu Body, le das tiempo al HTML para que se cargue antes, evitando así errores y acelerando el tiempo de respuesta del sitio web.

Una cosa más: si bien es mejor incluir el Javascript al final del <body> HTML, poner tu Javascript en el <head> del HTML NO SIEMPRE causa errores. Al usar jQuery, es común poner todo su código dentro de una función "documento listo (Document ready)":

Concluyendo

:/ . También hay equivalencias en JavaScript. Por ejemplo: html es document.rootElement y body es document.body.
Seguro hay muchas mas situaciones donde pueden usarse estos conceptos o mejores practicas.
¿Recuerdas alguno?. Compártelo en los comentarios.

Mantente Conectado

Dale poder al boletin semanal suscribiendote