Etiquetas esenciales de HTML que debes manejar

Última actualización: 01 - 11 - 2023

¿Qué es una etiqueta HTML y para qué sirve?

Como su nombre lo indica, una etiqueta en HTML es el nombre de una estructura que va a ser parte de un documento HTML. Todos los sitios web poseen este documento o archivo (generalmente llamado index.html) para poder construir la base de un sitio web. Vas a encontrar en muchos lados la siguiente analogía: Las páginas web son como el cuerpo humano donde el HTML son los huesos, el CSS cómo se va a ver ese ser humano y JavaScript el sistema nervioso.

Sí, esta definición puede dejarlo claro pero te ofrezco esta otra analogía: Una página web es un edificio donde el HTML es la estructura que lo forma, como las columnas, paredes, techos, iluminación, planta baja, ventanas o el techo; el CSS va a definir el color de las paredes, qué pintura se va a utilizar, el tipo de cuero de los muebles e incluso si el bombillo es de LEDs; JavaScript va a determinar el comportamiento de la electricidad del edificio, el correcto funcionamiento de los ascensores, el sistema hidráulico o las puertas automáticas.

El condominio del edificio es el hosting. 😆

Ahora ve cada elemento de la estructura del edificio como una etiqueta. Tenemos la etiqueta de puerta, la etiqueta de ventana, la etiqueta de piso... Y así. Con un documento HTML pasa exactamente lo mismo, ahora, ¿por qué se hace la analogía con el cuerpo humano en muchos casos? 🤔 porque las etiquetas de HTML utilizan una sintaxis idéntica a la forma de identificar un cuerpo: Cabecera (header), cuerpo (body), pie de página (footer). Pero solo sucede con la estructura base, el resto de las etiquetas de HTML no hace analogía con el cuerpo humano y tiene funciones casi específicas.

Entonces... ¿Cuántas etiquetas de HTML existen?

Más de 100 etiquetas y no te las voy a nombrar todas. 😂 Es mentira que para construir un sitio web las requieres en su totalidad, si usas unas 20 ya te bastan. Algunas etiquetas simplemente ya no se usan gracias a la etiqueta genérica div (que la veremos más adelante) o porque ya están obsoletas. Tampoco te preocupes en aprendértelas todas, a medida que vayas desarrollando tus proyectos irás descubriendo cuáles necesitas.

Lista de las etiquetas HTML más utilizadas en el desarrollo web

A continuación te dejo un listado de las etiquetas HTML más importantes, literalmente vas a respirar estas etiquetas, serán tus eternas acompañantes durante toda tu carrera... ¡Y de la mía también! Toma nota:

Etiquetas HTML para la estructura base del documento

📢Nota: Si te das cuenta las etiquetas están escritas en minúscula; es buena practica hacerlo de esta manera y el IDE que utilices te va a ayudar a autocompletar su apertura y cierre. También se pueden escribir en mayúsculas pero te generaría ciertos inconvenientes. La única excepción es la etiqueta DOCTYPE.

Etiquetas HTML para la escritura de texto

Estas etiquetas son las más fáciles de recordar ya que utiliza la primera letra de lo que están diseñadas a hacer (en inglés).

Etiquetas HTML para contenido multimedia

Etiquetas HTML para estructura de contenido

Etiquetas HTML para crear formularios

¿Qué son los atributos de una etiqueta HTML?

¡Por fin! ¿Qué rayos son los atributos?🙆🏻‍♂️

Son propiedades que poseen algunas etiquetas HTML que permiten cierto comportamiento de la etiqueta, por ejemplo, en una etiqueta img por si sola no puede insertar una imagen, para ello necesita de su atributo src para poder buscar la ubicación del contenido que debe mostrar esa etiqueta.

Algunas etiquetas poseen atributos que son exclusivos para ellas, como el button con su atributo type que indica qué tipo de comportamiento va a tener ese botón.

Por otra parte todas las etiquetas pueden tener el atributo class que le asigna una clase que es utilizada para dar estilos a una etiqueta HTML.

Para que toda esta escritura de hierba quede clara veamos la sintaxis de una etiqueta HTML en el siguiente punto.

Estructura de una etiqueta HTML

Una etiqueta está conformada por los siguientes elementos:

  1. Paréntesis angulares de apertura ( <> ) y cierre ( < / > )

  2. El nombre de la etiqueta. (h1, p, nav, etc)

  3. Un atributo, si es requerido, y su valor

  4. El contenido dentro de la etiqueta

Ahora todo esto en código HTML. 👇🏻

<!-- Como pseudo código -->
<nombre-de-la-etiqueta atributo="Valor del atributo">Contenido de la etiqueta, incluso pueden ser otras etiquetas</nombre-de-la-etiqueta>

<!-- Como código HTML -->
<h1 class="text-center">Ejemplo de etiqueta h1</h1>

📢Nota: No todas las etiquetas HTML tienen apertura y cierre.

Ahora un ejemplo de englobamiento de etiquetas.

<body>

  <header>
  </header>

  <section>
  </section>

  <div>
    <footer>  </footer>
  </div>

</body>

En el código de arriba podemos apreciar que tenemos 5 etiquetas (body, header, section, div y footer). La etiqueta body es la contenedora principal del resto de las etiquetas y en un documento HTML va a ser así. Luego están el header, section y div y esta última tiene como contenido una etiqueta footer.

Puedes ver que cada etiqueta tiene un margen hacia la izquierda y esto es un indicador visual para saber cuáles etiquetas está conteniendo otras; por lo general la etiquetas que se encuentren con menos margen o que engloben a otras etiquetas se les llama "etiqueta padre".

Para que se te haga más fácil visualizarlo imagina que cada etiqueta HTML es una caja, donde el body de este ejemplo es la caja más grande que va a contener las cajas (etiquetas) más pequeñas y el div contiene una caja más pequeña dentro de si que la caja footer. Por algo similar a esto nace el "modelo de cajas" pero es un tema que se ve en CSS. 😆

La importancia de la semántica en las etiquetas HTML para la estructura de un sitio web y los motores de búsqueda

En este punto explicaré la importancia de utilizar las etiquetas correctamente lo más breve posible.

Existen muchas etiquetas para crear la estructura de un sitio web, las más utilizadas fueron nombradas arriba pero por desconocimiento o mera flojera se cae en el divismo o Div Hell y esto no es más que utilizar la etiqueta div para armar toda la estructura de un sitio web.

Un código escrito de esa forma se hace ilegible.

<div>

  <div>
  </div>

  <div>
  </div>

  <div>
    <div>  </div>
  </div>

</div>

Y este es un ejemplo sencillo. ☝🏻 Las identaciones (márgenes) ayudan a leerlo pero ninguna web tiene tan pocas etiquetas

Una solución podría ser utilizando los atributos de class o id para identificarlos mejor.

<div id="body">

  <div class="header">
  </div>

<div class="section">
</div>

  <div class="footer-container">
    <div class="footer">  </div>
  </div>

</div>

Funcionará 🤷🏻‍♂️ pero tendrás problemas de especificidad con el CSS, que es lo de menos realmente. Si trabajas en equipo un código así es complicado de interpretar y por último y más importante es que tus etiquetas son leídas por el navegador y los crawlers de los motores de búsqueda interpretaran todo como cajas genéricas con poco contexto.

Volver