Estructura básica de un documento HTML

Anterior
Avanzar

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:  Etiqueta div y span en 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:  Formularios en HTML - Cómo crear y personalizar
lecciones HTML
Anterior
Avanzar
0 0 votar
Calificación
guest
3 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Daniel Monroy Garnica
Daniel Monroy Garnica
3 meses atrás

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

José Canal
José Canal
3 meses atrás

¿Porque existe el “head”?
¿Se podría poner el “title” solo, no?

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML