¿Qué es html? la estructura de la información

Definición y Especificación

HTML (HyperText Markup Language) es el componente principal de la web. Según el World Wide Web Consortium (W3C), es el lenguaje para describir la estructura de las páginas web. Provee a los autores los medios para:

• Publicar documentos con encabezados, texto, tablas, listas y multimedia.
• Conectar información mediante enlaces de hipertexto.
• Diseñar formularios para transacciones remotas, búsquedas y reservas.
• Incluir aplicaciones directamente en los documentos (hojas de cálculo, video, sonido).

Como bien define MDN Web Docs, HTML no es un lenguaje de programación; es un lenguaje de marcado que encapsula partes del contenido para que se comporten de forma determinada (poner en cursiva, agrandar fuentes, redireccionar a otras páginas).

HTML es el lenguaje para describir la estructura de las páginas web, brinda a los autores los medios para:

• Publicar documentos en línea con encabezados, texto, tablas, listas, fotos, entre otros elementos.
• Obtener información en línea a través de enlaces de hipertexto, con el clic de un botón.
• Diseñar formularios para realizar transacciones con servicios remotos, buscar información, hacer reservas, ordenar productos, entre otras tareas.
• Incluir hojas de cálculo, videoclips, clips de sonido y otras aplicaciones directamente en sus documentos.

Con HTML, los autores describen la estructura de las páginas mediante etiquetas de marcado. Los elementos del idioma etiquetan piezas de contenido como “títulos”, “párrafos”, “listas”, “tablas”, “imágenes”, entre otros elementos.

Además del W3C1, existen otros sitios web que ofrecen información de tecnologías web como MDN Web Docs2 de Mozilla; lo define de la siguiente manera:

HTML no es un lenguaje de programación; Es un lenguaje de marcado que define la estructura de un contenido. HTML consiste en una serie de elementos, usados para encapsular diferentes partes del contenido y hacer que se comporten de forma determinada. Las etiquetas que rodean el contenido pueden redireccionar palabras o imagenes a otra página web, poner en cursiva los textos, hacer que la fuente sea más grande o más pequeña, entre otras opciones.

Anatomía de un elemento HTML

El lenguaje consiste en una serie de etiquetas predeterminadas destinadas a darle jerarquía al contenido de los documentos. Antes de mostrar ejemplos de algunas de sus etiquetas básicas, es importante entender su anatomía:

• Exceptuando algunos casos, gran parte de las etiquetas están conformadas por una etiqueta de apertura <etiqueta>.

• Para completar la declaración del contenido, es necesaria una etiqueta de cierre </etiqueta>.

Por lo tanto, la forma general para declarar un contenido en HTML, sigue la siguiente regla: <h1>Este es un título</h1>. La siguiente imagen ilustra estos conceptos:

Estructura de una etiqueta html

Los elementos HTML pueden tener atributos, la imagen demuestra esta característica:

Atributo de una etiqueta html

Los atributos contienen información adicional sobre los elementos. En la imagen de arriba, class es el nombre del atributo y nota, su valor. El atributo class permite dar al elemento un identificador que se puede usar para incluir información de estilos CSS.

Las imágenes y su descripción en “Anatomía de un elemento HTML”, fueron extraídas de MDN Web Docs 3.

A su vez, es posible declarar etiquetas dentro de otras etiquetas siguiendo la misma regla, como se puede ver en la estructura de ejemplo, en donde las etiquetas <h1> y <p>, están anidadas dentro de <body>:

<body>
  <h1>Mi Primer título</h1>
  <p>Mi primer párrafo</p>
</body>

Desde el punto de vista del diseño gráfico, dichas etiquetas pueden en algunos casos delimitar “contenedores” o componentes; es importante tener en cuenta que mediante HTML no es posible darle atributos gráficos a nuestras páginas. Para este fin, se utiliza CSS.

Las etiquetas nos permiten organizar nuestros documentos de manera estructurada, es decir, podríamos pensar en HTML como el “esqueleto” de nuestra información. El siguiente código ilustra un ejemplo de la estructura de las etiquetas base que nos permitirán describir el contenido de las páginas:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
  </head>
  <body>
    <h1>Mi Primer título</h1>
    <p>Mi primer párrafo</p>
  </body>
</html>

Todo documento HTML necesita una estructura base que aporte información a los navegadores web sobre como procesar dicho documento. A continuación describiremos el propósito de las etiquetas que conforman la estructura dada:

Etiqueta	Propósito / Descripción
<!DOCTYPE html>	Indica la versión del documento (HTML5). No requiere etiqueta de cierre.
<html>	Etiqueta raíz que envuelve todo el contenido del documento HTML.
<head>	Sección que contiene metadatos del documento (título, estilos, scripts, enlaces).
<title>	Título de la página mostrado en la pestaña del navegador.
<meta>	Información sobre codificación, descripción y adaptabilidad web.
<style>	Reglas de estilo CSS embebidas para dar diseño gráfico.
<script>	Bloques de código ejecutable del lado del cliente (JavaScript).
<link>	Conexiones con recursos externos como hojas de estilo o faviconos.
<body>	Sección principal que contiene todos los elementos visibles por los visitantes.

<head>
  <title>Título de la página</title>
  <meta name="description" content="Descripción de HTML" />
  <style>
    /* Ejemplo CSS para definir el color azul de los elementos h1 */
    h1 {
      color: blue;
    }
  </style>
  <script>
    // Ejemplo JavaScript para multiplicar 2 valores dados
    function myFunction(p1, p2) {
      return p1 * p2;
    }
  </script>
</head>

_La información de <head> fue tomada de htmlquick.com 4 _

Las etiquetas descritas hasta el momento sirven para dar información general de la página e incluir otros recursos relacionados con el documento HTML. Gran parte de los elementos relacionados con los elementos visibles por los navegadores están contenidos en la etiqueta <body>.

• <body>: Es la sección de nuestro documento que contiene todo los elementos visibles. Todo el contenido que se declare dentro de esta etiqueta será “renderizado” por el navegador y, por consiguiente, visualizado por los visitantes de nuestra página web.

Referencias

• [1] W3C
• [2] MDN Web Docs
• [3] MDN Web Docs - HTML basics
• [4] htmlquick.com - The document’s head