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 posee una estructura básica que contiene una variedad de etiquetas que definen la estructura de la pagina resultante, dichas etiquetas deben estar adecuadamente estructuradas para que la pagina funcione sin problemas.

¡Fantástico! recordemos que las etiquetas son quienes le dirán al navegador, qué y cómo será la estructura de una página web.

Ahora que ya sabemos que es una etiqueta y para que sirve, es momento de construir nuestra estructura básica de HTML utilizando las etiquetas destinadas para este fin.

Etiqueta <html>

La etiqueta <html> sirve para indicar que el documento es un documento HTML y el navegador lo interpretara como tal. Todo el contenido de nuestra página irá ordenadamente  dentro de la etiqueta <html> y de hecho, es lo primero que debemos escribir en nuestro 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:  Etiquetas para texto HTML y formatos HTML

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:  Etiquetas HTML tipos y ejemplos
lecciones HTML
4.8/5 - (5 votos)

6 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

    1. 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.

Deja una respuesta

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