El lenguaje HTML: Codificación web

El HTML (Hypertxt Markup Language o Lenguaje de Marcado de Hipertexto) codifica los documentos que conforman las páginas web de modo que los contenidos que se muestran en el navegador presenten la apariencia y la disposición pensadas en la fase de diseño, desarrollo y programación de una web. Es decir, se trata de un lenguaje que incluye indicaciones acerca de cómo tienen que presentarse los contenidos, aunque sin ahondar demasiado en su estilo: El ejemplo más representativo, por ser muy perceptible por parte de quienes navegan por Internet, es el marcado en negrita de ciertas partes de los textos que, en las pantallas, aparecen con sus trazos regruesados. Sin embargo, es también el caso más básico pues en esta codificación se contempla absolutamente todo, como se ejemplificará más adelante.

Funcionamiento del HTLM

Este lenguaje de marcado (que es, de todos, el más extendido) hace uso de etiquetas de apertura y cierre para identificar el aspecto de la información que se ofrece: Las marcas no son más que una o varias letras entre los signos de “menor que” y “mayor que” (less-than and more-than sings). En ocasiones, la codificación se consigue haciendo uso de únicamente una de ellas como ocurre, por ejemplo, cuando se introduce una imagen (<img>). Por el contrario, para los textos son necesarias dos etiquetas: una al inicio y otra al final que se representan con la misma letra o conjunto de ellas pero se diferencian en la inclusión de una barra diagonal cuando se trata de poner fin a una indicación. Por ejemplo, todos los párrafos deben introducirse con <p> y concluirse con </p>.

Cuando se abre una etiqueta que informa al navegador de que el texto debe mostrarse de una manera determinada y no se cierra, todo el texto a partir de ella se mostrará bajo el parámetro indicado y, posiblemente, no sea lo que se había proyectado. Es por ello que la barra diagonal (no incluída en el imaginario colectivo, como la barra inversa, y, por tanto, apartada de la escrita cotidiana) ha incrementado exponencialmente su uso gracias a Internet. Cabe puntualizar que en las versiones anteriores a HTML 5, era preciso incluirla también en aquellas etiquetas que se recogían solas como <img /> ou <video /> porque todo el contenido asociado responde a ellas y, por lo tanto, no hay un inicio y un cierre. Actualmente, no incluirla ya no provoca ningún tipo de error.

El hecho de que algo tan insignificante a nivel usuario (como es que un conjunto de palabras constituyan un párrafo) requiera de marcas que lo indiquen a nivel HTML, advierte de la complejidad de estas codificaciones de los documentos. Con frecuencia, las etiquetas se anidan: Quien se encarga del desarrollo y programación de un sitio web emplea más de una para un mismo fragmento del texto. Por ejemplo, un párrafo en cursiva precisa de <p> y de <i>, así como de sus correspondientes etiquetas de cierre para indicar el fin de párrafo y de cursiva, respectivamente. Señalar que, de no indicar </i>, el navegador entenderá que todo el párrafo ha de presentarse en cursiva e, incluso, se mantendrá en los sucesivos.

Etiquetas más empleadas en HTML

Las marcas o etiquetas de HTML hacen posible que las páginas web sean visualmente atractivas y, al mismo tiempo, influyen en el posicionamiento SEO: Por tanto, por un lado mejoran la Experiencia de Usuario (UX) y, por otro, permiten que buscadores como Google pongan en valor los contenidos de webs corporativas, blogs, tiendas online… Existen multitud de etiquetas entre las que destacan las siguientes: 

  • <div> Sección en un documento
  • <a> Hipervínculo (enlace a otra web o a otra parte del documento)
  • <body> Cuerpo del documento
  • <button> Botón
  • <em> Énfasis en un texto
  • <form> Formulario html
  • <h1> a <h6> Encabezados o títulos.
  • <head> Información acerca del documento
  • <html> Raíz del documento
  • <img> Imagen
  • <input> Control de entrada de texto (En un formulario, por ejemplo)
  • <label> Rótulo para un elemento <input>
  • <ol> Lista ordenada
  • <ul> Lista desordenada
  • <li> Ítem de una lista ordenada o desordenada.
  • <nav> Link o enlace de navegación
  • <p> Párrafo
  • <select> Selector tipo “drop-down list”
  • <small> Texto pequeño
  • <strong> Texto en negrita
  • <table> Tabla
  • <tbody> Cuerpo de una tabla
  • <thead> Agrupa los encabezados de una tabla
  • <tfoot> Agrupa los footer contenidos en una tabla
  • <tr> Fila de una tabla
  • <th> Celda de encabezado de una tabla
  • <td> Celda de una tabla
  • <video> Vídeo

Control del estilo en HTML

A nivel desarrollo y programación web, cabe la posibilidad de determinar el estilo de un texto por medio del HTML añadiendo atributos a las etiquetas. Consiste en incluir indicaciones dentro de las propias marcas que recojan, por ejemplo, el color de las letras (<p style=”color: green;”>).

La posibilidad nos informa de la potencia del HTML pero, en realidad, no es recomendable influir en los estilos haciendo uso de él porque el CSS ha sido creado explícitamente para estilizar los documentos codificados por medio de archivos que definen los estilos.

Si tienes alguna duda del lenguaje HTLM o, incluso, si necesitas que un profesional haga uso de él para digitalizar alguno de tus proyectos, no dudes en contactar.

Artículos relacionados