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 ver:  Atributo id y class 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 ver:  Etiquetas para texto HTML y formatos HTML
lecciones HTML
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
9 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
8 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

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

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

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5