Si bien es cierto que en muchas plataformas de publicación de artículos, como serían WordPress, Blogspot o Tumblr se incorporan los elementos HTML de forma automática a través de un selector (para títulos, párrafos, imágenes, etc), también lo es que a veces necesitamos editar el código HTML. Por ello, es imprescindible conocer algunas de las etiquetas HTML más importantes.

Pero antes que nada, hagamos una pequeña descripción sobre el HTML. Sus siglas provienen del inglés "Hyper Text Markup Language" y significa lenguaje de marcado de hipertexto. A menudo, se dice de forma equivocada que HTML es un lenguaje de programación, pero no lo es. Su principal intención es insertar contenido en la web marcando cada tipo de contenido; así de simple. Si introducimos una imagen lo haremos usando el elemento de imagen y su introducimos un párrafo usaremos el elemento que le corresponde. ¿De acuerdo?

Muchos de los elementos del HTML están formados por dos etiquetas de inicio y fin, y el contenido debe ir entre las dos etiquetas. Este sería el caso de los párrafos, cuyas etiquetas son `<p>` y `</p>`. El párrafo irá encerrado entre estas dos etiquetas, ¿vale? Lo mismo ocurriría con un título de primer nivel (H1), pues irá encerrado entre las etiquetas `<h1>` y `</h1>`.

No todos los elementos están formados por dos etiquetas. Por ejemplo, los saltos de línea o las líneas horizontales sólo tienen una etiqueta de apertura. De este modo, un salto de línea quedaría así: `<br>`. ¿Ves que fácil? Bueno, al principio no lo parece tanto pero en el fondo es más fácil de lo que parece ;-)

La descripción completa de los elementos HTML se encuentra disponible en la web de Recursivos. Es recomendable hacer una lectura de sus artículos sobre HTML, ya que describen todos los elementos y los atributos que pueden usar en cada uno de ellos. Además, obtendrás un conocimiento general sobre este lenguaje tan usado en la red.

Pues bien, vamos allá. Sin más preámbulos... Estos son los 10 elementos HTML más importantes que debes conocer en el mundo de la programación web.

1. Los títulos

Los títulos son aquellos que permiten introducir los encabezados de un texto. Sí, en plural, porque hay varios niveles de subtítulos. El encabezado o título principal se introduce con el elemento `<h1>`. Si durante el artículo tienes que introducir subtítulos, usarás los elementos `<h2>`, `<h3>`, `<h4>`, `<h5>` y `<h6>`. Como es de esperar, el elemento `<h1>` debe ser el primero que aparezca en el artículo; no vayas a empezar un artículo con el título `<h4>`.

Los elementos de títulos tienen dos etiquetas para abrir y cerrar.

2. Los párrafos

Los párrafos de texto se introducen con el elemento `<p>`, que también tiene dos etiquetas para abrir y cerrar. Todo el texto que esté entre las dos etiquetas formará un párrafo, y un párrafo es un bloque de texto que ocupa el ancho completo de línea. Eso significa que el próximo elemento quedará por debajo del párrafo.

3. Los enlaces

Los enlaces son importantísimos y son la esencia del HTML: recordad lo de hipervínculo. De hecho, el nombre original de los enlaces es hipervínculo o hiperenlace. Los enlaces tienen dos etiquetas para abrir y cerrar. Dentro de ellas escribiremos el texto áncora. ¿Y cómo indicamos la URL? Esto se hace con el atributo href, mira: `<a href="/contacto.html">Página de contacto</a>`. ¿Se entiende, verdad? La URL será una ruta relativa o absoluta.

4. Las imágenes

¿Qué sería de la web sin las imágenes? Pues seguramente mucho más rápida. Y más sosa. ¿Te lo imaginas? Mejor que no, así podrás hacer uso del elemento `<img src="13b93e4336bc51ea4a72d35d8d1e0cd9">`. Tal y como puedes observar, este elemento sólo tiene una etiqueta para introducir la imagen, y es que no tiene etiqueta de cierre. La ruta de la imagen se introduce en el atributo 'src', y al igual que sucede con los enlaces, puede ser relativa o absoluta.

Los elementos están formados por etiquetas. Algunos tienen etiqueta de apertura y de cierre, mientras que otros son elementos vacíos y sólo tienen etiqueta de apertura

5. La negrita

Pero vamos a darle un poco de vidilla a este texto. ¿Qué pasa cuando queremos remarcar algunas palabras o frases? Pues ahora caigo en que no he marcado ninguna en este artículo... Bueno pues ahí va un ejemplo de negrita. ¿Lo ves? Es tan fácil como usar las etiquetas `<strong>` y `</strong>`, poniendo el texto que queremos que se vea en negrita dentro de ellas.

6. La cursiva

En ocasiones, la cursiva es una necesidad de uso. Podría ser cuando queremos marcar que una palabra se ha escrito en otro idioma. Muchas guías de estilo contemplan ese uso para las cursivas. Por ejemplo: la traducción de <i>hello, world</i> es «Hola, mundo». Queda mejor, ¿cierto? Se hace con las etiquetas `<i>` e `</i>`. Y sí, lo adivinaste: el texto va entre estas dos etiquetas.

7. Subíndices y superíndices

¿Creías que ahora era el turno del subrayado? Cada vez está más en desuso gracias a que la negrita y la cursiva cumplen muy bien su función y ya no hace falta un tercer elemento. Es mucho más práctico conocer los subíndices y superíndices para poder escribir acerca de metros cuadrados (m²) o de compuestos químicos como el agua (H₂O), dos casos útiles para todo tipo de artículos.

- Etiquetas para los subíndices: `<sub>` y `</sub>`.

- Etiquetas para los superíndices: `<sup>` y `</sup>`.

8. Las listas

¿Cómo se hace una lista como la anterior en la que listé las etiquetas para subíndices y superíndices? Existen dos elementos principales y otro menos importante para crear listas. Los dos básicos son las listas ordenadas y las listas no ordenadas.

8.1 Listas ordenadas

Las listas ordenadas se introducen mediante el elemento `<ol>` y su respectiva etiqueta de cierre `</ol>`. Dentro de estas etiquetas se introduce otro elemento llamado `<li>`, también con su etiqueta de cierre `</li>`. Se pueden poner tantos `<li>` como sea necesario.

Una forma fácil de recordar estos dos elementos es mediante sus iniciales. OL proviene del inglés <i>ordered list</i> (lista ordenada), mientras que LI también proviene del inglés <i>list item</i> (elemento de lista). ¿Verdad que tiene mucho sentido?

8.2 Listas no ordenadas

Lo mismo ocurre con las listas no ordenadas, cuyo elemento es `<ul>`, que también tiene su elemento de cierre `</ul>`. Tal y como puedes deducir, UL proviene del inglés <i>unordered list</i> (lista no ordenada).

9. Los saltos de línea

En ocasiones —más de lo que quisiéramos— es necesario añadir varios saltos de línea. Es común añadir muchos Return pero el resultado sigue siendo el mismo. La solución es el elemento `<br>`, que no tiene etiqueta de cierre. Cada `<br>` representa un salto de línea y puedes introducir tantos como sea necesario.

10. Las líneas horizontales

Con HTML también es posible añadir un separador horizontal mediante el elemento `<hr>`. Con este elemento se introducirá una barra horizontal que ocupa todo el ancho posible, sin permitir que ningún otro objeto quepa a sus lados. Es muy útil cuando nos interesa dividir partes de texto cuando hay un cambio significativo del tema que se está tratando.

Para saber si el código HTML que has escrito es correcto, es una buena práctica validarlo usando el validador del consorcio W3: validador HTML.