Las etiquetas HTML <head> y <body> son las dos etiquetas más utilizadas en HTML. Es muy raro encontrar un sitio web de nivel industrial que no use las etiquetas <head> y <body> en sus páginas. En este artículo, vamos a aprender el significado de estas dos etiquetas en un documento HTML.
Importancia de la etiqueta HTML <head>: La etiqueta head en HTML se utiliza para contener los metadatos o la información relacionada con el documento. Contiene algunas de las etiquetas más importantes como <title> , <meta> y <link> .
Desde la perspectiva del navegador:
- En HTML 5 no es obligatorio incluir una etiqueta <head> dentro del documento HTML pero en versiones anteriores (4.0.1) era obligatorio incluirla.
- Las etiquetas como <title>, <meta> o <link> que generalmente se encuentran dentro de head también funcionarán bien sin la etiqueta <head> o fuera de la etiqueta <head>.
Desde una perspectiva de desarrollo:
- Desde la perspectiva del desarrollador, es bueno incluir la etiqueta <head> dentro del documento porque esta sintaxis es muy utilizada y también le da una buena estructura al documento. Posteriormente esto nos ayudará a interactuar con los elementos del DOM de forma estructurada.
Importancia de la etiqueta HTML <body>: La etiqueta HTML body es el último elemento secundario de la etiqueta <html>. Se utiliza para contener el contenido principal del documento HTML. Contiene todo, desde el encabezado, los párrafos hasta los contenedores div únicos que residen dentro de la etiqueta <body>.
Desde la perspectiva del navegador:
- En HTML 5 no es obligatorio incluir una etiqueta <body> dentro del documento HTML pero en versiones anteriores (4.0.1) era obligatorio incluirla.
- Las etiquetas como <div>, <p> o <a> que generalmente se encuentran dentro del cuerpo también funcionarán bien sin la etiqueta <body> o fuera de la etiqueta <body>.
- A pesar de no ser obligatoria, la etiqueta <body> tiene algunos atributos como ‘background’, ‘bgcolor’, ‘a’, ‘link’, etc.
Desde una perspectiva de desarrollo: desde la perspectiva del desarrollador, es bueno incluir la etiqueta <body> dentro del documento. Esta sintaxis es muy utilizada y también da una buena estructura al documento. Posteriormente esto nos ayudará a interactuar con los elementos del DOM de forma estructurada.
Ejemplo 1: el siguiente código no tiene las etiquetas <head> y <body>.
HTML
<!DOCTYPE html> <html> <p> Significance of 'head' and 'body' tag in HTML : Geeksforgeeks </p> <title>Tutorial</title> </html>
Producción:
Sin etiquetas de cabeza y cuerpo
Ejemplo 2: el código siguiente agrega las etiquetas <head> y <body> al documento. La salida en el último será la misma incluso si se incluyen las etiquetas <head> y <body> pero le da una mejor estructura al código y una mejor perspectiva de comprensión.
HTML
<!DOCTYPE html> <html> <head> <title>Tutorial</title> </head> <body> <p> Significance of 'head' and 'body' tag in HTML : Geeksforgeeks </p> </body> </html>
Producción:
Con las etiquetas <head> y <body>
Como podemos ver claramente que la salida no ha cambiado. Pero el código se volvió fácilmente comprensible para nosotros ya que la convención se siguió correctamente.
Ejemplo 3: el código siguiente utiliza los atributos de la etiqueta <body>. En este ejemplo, vamos a utilizar el atributo ‘ bgcolor ‘ de la etiqueta <body>. Cambiará el color de fondo de todo el documento. Sin la etiqueta <body>, vamos a perder más atributos como <alink> , <link>, etc.
HTML
<!DOCTYPE html> <html> <head> <title>Tutorial</title> <link rel="stylesheet" href="styles.css"> </head> <body bgcolor="black"> <h1> Significance of 'head' and 'body' tag in HTML : Geeksforgeeks </h1> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA