HTML Primer Documento

Para crear un documento HTML solo se necesita un editor de texto como bloc de notas en windows o el que tengas más cercano a ti.

Algo que algunas personas no tienen por seguro es la estructura básica de un documento HTML, hay muchas respuestas a esta pregunta, esta la forma correcta y “la forma correcta”. En realidad es muy complejo explicar como crear la estructura de un documento correctamente por que involucra muchos conceptos como el doctype, las propiedades meta entre otros temas.

Para prender el lenguaje HTML no necesitas tener en un inicio una estructura de documento perfecta, considero que para empezar podrás utilizar un documento como el que se muestra a continuación.

<!doctype html>
<html>
   <head>
      <title>Título de la página.</title>
   </head>
   <body>
      Aquí va el cuerpo de tu documento.
   </body>
</html>

Como puedes ver un documento HTML esta compuesto de etiquetas con apertura y cierre. Cada etiqueta tiene una función particular y un proposito.

<!doctype html>, declara el documento actual como un documento HTML, ya que HTML no es el unico tipo de documento que contiene etiquetas, tambien estan los documentos XML por citar un ejemplo.

<html>, es la envoltura principal del documento, las siguientes etiquetas estan contenidas dentro del html de apertura <html> y el html de cierre </html>

<head> es hermano de <body>, estan al mismo nivel de profundidad respecto a <html>.

Otra forma de univamete ilustrativa de mostrar nuestras etiquetas seria:

<html>
   <head>
      <title>Título de la página.</title>
   </head>
   <body>
      <p>Aquí va el cuerpo de tu documento</p>
  </body>
</html>

Como se puede ver en las viñetas anteriores un documento HTML es un documento de jerarquias de etiquetas. Este sistema de jerarquías se conoce como DOM document object model, modelo de objetos del documento.

Es importante que se comprenda que un documento HTML es una jeraquia y que las etiquetas de apertura y cierre deben estar colocadas de forma correcta ya que de lo contrario el documento queda corrupto y el navegador lo interpretará de forma inesperada.

<head>, esa etiqueta se utiliza generalmente para contener referencias a otros archivos como librerías javascript o hojas de estilo. es una convención que se utiliza. También es utilizada para agregar etiquetas <meta>, etiquetas de metadatos que sirven para poner información sobre nuestro documento pero que no son visibles en el navegador, no forman parte del contenido sino de datos acerca del documento. De momento no tomes mucho tiempo en esta etiqueta. Antes que lo olvide y ya que es obvio, head significa cabeza y body cuerpo, a lo largo de este tutorial me encargaré de traducir todas las etiquetas a español ya que es la mejor manera de memorizarlas por su significado en español.

<body>, esta etiqueta contiene todas las etiquetas que son visibles en el navegador como ejemplo. Parrafos <p> Encabezados <h1> al <h6>, tablas <table>, listas numéricas <ol> (ordered list), formularios <form>, enlaces <a>(anchor, ancla) y así sucesivamente.

Para finalizar tu primer documento te invito a copiar este documento, guardarlo como un archivo con extensión .html o .htm ambos funcionan igual.

<!doctype html>
<html>
   <head>
      <title>Mi primer documento</title>
   </head>
   <body>
      <h1>Bienvenido a mi primer documento</h1>
      <p>Hola mundo</p>
   </body>
</html>

El resultado debería ser el siguiente.


En siguientes artículos elaboraremos documentos más complejos.

Saludos cordiales.
Mario