Cuando hablamos sobre la arquitectura REST, una de las características que mencionamos sobre esta arquitectura es que usaba hipermedios para representar la información. Estos elementos podían ser por ejemplo HTML, XML o JSON.

El objetivo es crear varios artículos donde se tratará sobre los lenguajes de marcas más utilizados. En este artículo nos vamos a basar en HTML, donde vamos a definirlo y detallar sus características.

¿Qué es HTML?

HTML es un lenguaje de marcas que se utiliza para la elaboración de páginas web. Sus siglas corresponden a HyperText Markup Language (“Lenguaje de Marcas de HiperTexto”). Desarrollado por W3C, HTML es un estándar que presenta una estructura de etiquetas que definirán el contenido, como puede ser texto, imágenes, audio, entre otros.

Decimos que es un estándar porque una página web escrita en cualquier versión de HTML puede ser interpretada de la misma forma por cualquier navegador web, siempre que el navegador se encuentre actualizado para poder interpretar todas sus versiones.

Además, este lenguaje puede ser escrito y editado utilizando un editor de texto básico, por ejemplo el Bloc de notas de Windows o Gedit de Linux. También existen muchos editores en el mercado, como por ejemplo el que yo utilizo que es Sublime Text.

Código HTML: etiquetas y estructura básica

HTML es un lenguaje que se escribe utilizando etiquetas. Las etiquetas están compuestas por elementos y sus atributos, encerradas en ‘<‘ y ‘>’.

Elementos

Los elementos forman la estructura básica de un documento HTML. Generalmente, una línea de código se estructura colocando una etiqueta inicial con el nombre del elemento y sus atributos, seguido del contenido y una etiqueta final formada por el mismo nombre del elemento. Un ejemplo podría ser el siguiente:

<strong>Este texto aparece en negrita</strong>

La etiqueta <strong> produce que el texto se pong en negrita. En ese ejemplo se puede ver perfectamente como se encuentra estructurada una línea de código en HTML.

También existen casos en los que no se coloca etiqueta final, como puede ser la etiqueta <br> que provoca un salto de línea.

Atributos

Los atributos son pares nombre-valor que se colocan en la etiqueta inicial del elemento.

<a href="mienlace">Este texto es un enlace</a>

Como podéis observar en este ejemplo, el nombre del atributo es ‘href’ que se coloca justo después del nombre del elemento en la etiqueta inicial. El valor se le asigna con el operador ‘=’, y este valor irá entre comillas dobles o simples.

Etiquetas básicas

En este apartado vamos a ver algunas de las etiquetas básicas que nos ofrece este lenguaje:

  • <html>: Etiqueta que envuelve todo el documento HTML. El navegador entenderá el texto como código HTML.

  • <head>: Etiqueta que define la cabecera del documento HTML. Recoge información sobre el documento, como el título, la descripción o el autor. Este contenido no se visualiza de forma directa en el navegador

  • <body>: Etiqueta que encierra todo el contenido del documento. Dentro de ella se colocará el contenido que queremos mostrar en el navegador.

  • <title>: Etiqueta que define el título del documento. Se coloca dentro de la cabecera(<head>).

  • <p>: Etiqueta que identifica el contenido de la misma como un párrafo. Se coloca dentro del cuerpo(<body>).

  • <div>: Etiqueta que funciona como divisor de la página.

  • <a>: Etiqueta que crea un hipervínculo o enlace. La URL se le asignará con el atributo ‘href’.

  • <img>: Etiqueta que muestra una imagen. La URL de la imagen se le asignará con el atributo ‘src’.

  • <h1> – <h6>: Etiquetas que define encabezados. Sigue un orden lógico para indicar una jerarquía de mayor (1) a menor (6) relevancia.

Existen muchas más etiquetas que podéis encontrar aquí.

Estructura básica HTML

La estructura básica de un documento HTML es la siguiente:


  <html>
      <head>
          <title>Mi Página</title>
      </head>
      <body>
      </body>
  </html>

Conclusión

Me hubiese gustado hablar un poco sobre HTML5, quinta revisión de HTML, pero el artículo se extendería demasiado. Lo dejaré como tarea pendiente: crear un artículo sobre HTML5 y sus elementos.

Espero que cuando terminéis de leer este artículo os hayáis quedado un poco con la copla y obtengáis nuevos conocimientos sobre qué es HTML y sus características más importantes.