Estructura básica de un documento HTML

Ahora aprenderemos cómo se debe hacer la estructura de un documento html para que funcione correctamente, se trata de utilizar ciertas etiquetas que indicarán información al navegador y que este lo interprete sin problemas.

Cómo es la estructura básica de un documento HTML

Un documento HTML tiene una estructura básica compuesta por diversas etiquetas que determinan la configuración de la página resultante. Estas etiquetas deben estar correctamente organizadas para que la página opere sin inconvenientes.

¡Excelente! Recordemos que las etiquetas indican al navegador cómo debe ser la estructura de una página web. Ahora que entendemos qué es una etiqueta y su función, es el momento de crear nuestra estructura básica de HTML empleando las etiquetas apropiadas para ello.

Etiqueta <html>

La etiqueta <html> indica que el documento es un documento HTML y será interpretado así por el navegador. Todo el contenido de la página debe estar contenido ordenadamente dentro de la etiqueta <html>, y de hecho, es lo primero que se debe escribir en el documento.

<html> 
  ...contenido... 
</html>

Etiqueta <head>

<head> es la etiqueta en la que ira la cabecera de nuestra página y va justo después de la etiqueta de apertura <html>, esta etiqueta contiene elementos que ayudarán a que nuestra página funcione correctamente y generalmente dentro de esta etiqueta van elementos que no se visualizan en el navegador.

<html> 
  <head> 
    ...elementos de la cabecera... 
  </head> 
</html>

Etiqueta <title>

La etiqueta <title> va dentro de la etiqueta <head> en la cabecera, <title> contiene el título de la página y esta se muestra en la pestaña de los navegadores, más no se ve en el cuerpo de la página.

Te recomendamos leer:  ¿Qué es HTML Para qué sirve y cómo funciona?

A continuación veamos un ejemplo:

<html>
<head>
<title> Mi primer titulo </title>
</head>
</html>

Resultado del codigo anterior:

etiqueta title en estructura html
Imgen de cómo se muestra tÍtulo en pestaña

Como ves, el contenido de la etiqueta <title> se ve reflejado en la pestaña del navegador.

Etiqueta <body>

Después de la cabecera sigue el cuerpo de la página y se indica mediante la etiqueta<body>, el cuerpo o body contiene prácticamente los elementos visuales de nuestra página, aquí irán los textos de encabezado o títulos, subtítulos, párrafos, listas, tablas, formularios, multimedia, etc. Es decir el contenido de la página, todo lo que queremos que se vea en el navegador.

<body>
...cuerpo de la página...
</body>

Estructura básica final del documento HTML

Entonces finalmente la estructura básica HTML quedará de la siguiente manera.

<html>

<head>
<title> Mi primer titulo </title>
</head>

<body>
...Cuerpo de la página, todo lo que va dentro de la etiqueta BODY será visible en la ventana del navegasor...
</body>

</html>

Resultado del código anterior:

imagen de resultado de estructura de documento html
Este es el reultado de una estructura básica html.

Conclusión sobre la estructura de página html

Como podemos observar, tenemos que indicar al navegador que nuestro documento es un documento HTML <html>, también tenemos que indicarle cuál es la cabecera<head>, dentro de la cabecera va el titulo <title> y también debemos indicar cuál es el cuerpo de nuestra página <body>.

Ahora seguramente ya creaste la estructura básica en tu documento HTML, si guardas el documento sin escribir nada entre las etiquetas <body> y por otro lado actualizas el navegador, seguramente sigue en blanco; si colocas algún texto como se ve en el ejemplo entonces aparecerá ella.

De ahora en adelante aprenderemos a utilizar las etiquetas que permiten crear los contenidos propiamente dichos. ¡Así pues, vayamos por ello! a crear contenido.

Te recomendamos leer:  Atributo id y class en HTML

4.5/5 - (10 votos)

3 comentarios en «Estructura básica de un documento HTML»

  1. la estructura básica de un documento html es algo que yo ya e visto y que es muy facil de usar ya que cada una de las etiquetas se entiende muy bien su funcionalidad

    Responder
    • La etiqueta HEAD tiene bastante importancia, además contiene Metadatos para que las páginas puedan funcionar correctamente, TITLE es una etiqueta donde va un título descriptivo del contenido de la página.

      Responder

Deja un comentario

Desarrolladores web