Lección 2: Head y Body en HTML5

Continuamos con la segunda lección sobre el lenguaje de programación HTML5. Vamos a profundizar sobre el código de ejemplo Hola Mundo! en HTML que programamos en la entrada anterior.

El lenguaje HTML es un lenguaje interpretado (a diferencia de otros lenguajes de programación compilados como C o Java). Esto quiere decir que las líneas de código que escribimos el explorador/navegador (Chrome, Internet Explorer, Firefox, etc) las lee y las interpreta de la forma que considera más adecuada. En el ejemplo anterior hemos cometido algunos errores (por falta de información) que el navegador ha “corregido” automáticamente.

Concretamente, en el ejemplo anterior no pusimos la etiqueta “Body” que marca el cuerpo de la página.

  • Body: El contenido del cuerpo de la página se escribe entre las etiquetas <body> y </body> y corresponde al código html que indica los objetos que se van a visualizar en la página web (cómo un texto o un botón).
  • Head: El contenido de la cabecera de la página se escribe entre las etiquetas <head> y </head> y corresponde al código html que información de características que va a tener la página web pero que no corresponde a objetos visuales. Por ejemplo el título, la descripción seo, el idioma, el formato, etc. Son características de toda la página pero NO son objetos visuales (cómo un texto o un botón).

Os propongo que hagamos lo siguiente:

1 Volved a hacer doble click sobre el archivo “holaMundo.html” que creamos en la entrada anterior.

2 Una vez abierto, pulsad la tecla F12. Abrirá la herramienta de desarrolladores, que es un asistente que nos ayuda a entender como el explorador está interpretando realmente el código que hemos programado, nos indica si “automáticamente” ha corregido algo, si tenemos errores, etc.

El resultado que vemos es el siguiente:

head-body-html-5-F12

Si os fijáis bien, veréis como el inspector ha añadido automáticamente las etiquetas <head></head> y <body></body>. Esto es por que son dos elementos necesarios en toda página web, pero en el primer ejemplo no las habíamos añadido (funcionaba por que el interprete, es decir, el explorador las había añadido automáticamente). Esto es algo que no ocurre en lenguajes compilados (como C o Java) dónde el resultado hubiese sido un error que posiblemente hubiese provocado que el programa no funcionase.

3 Vamos a corregirlo. Para ello añadid las siguientes líneas a vuestro archivo y volved a abrirlo.

head-body-html-5

4 Si pulsáis el F12 y volvéis a inspeccionar la página, veréis como las etiquetas <head></head> y <body></body> siguen estando, pero esta vez el navegador no a tenido que añadirlas automáticamente. Esto es importante, por que al ponerlas nosotros vamos a poder añadir contenido en el interior de estas etiquetas. Esto es lo que vamos a ir haciendo en las siguientes lecciones de este tutorial.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *