Etiquetas esenciales de HTML que debes manejar

< etiquetas />

Fecha de publicación: 31-01-2022

¿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

  • DOCTYPE

  • Indica la versión de HTML que vamos a utilizar. Actualmente se trabaja con la versión 5 del lenguaje.

  • html

  • Es la etiqueta raíz de todo el archivo, esta etiqueta va a englobar el resto de las etiquetas de la página web.

  • head

  • Es utilizada para declarar los metadatos que vayas a usar para tu proyecto. Un ejemplo puede ser si la página sea indexable o no. En este punto existen ejemplos más específicos que veremos luego.

  • title

  • Determina el título de la pestaña en el navegador. También es útil para optimizaciones SEO.

  • link

  • Permite enlazar a otros archivos (como el de CSS). Los atributos de esta etiqueta también posee funcionalidades interesantes. !Calma! 🖐🏻 Más abajo explico el atributo de una etiqueta HTML.

  • style

  • Escribe código css dentro del documento HTML.

  • script

  • Enlaza un archivo de JavaScript al documento HTML.

  • body

  • Es la etiqueta principal que engloba todos los elementos que son visibles en una página.

📢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).

  • h1, h2, h3, h4, h5 y h6

  • H de Heading para los títulos y subtítulos de los textos. Tienen una jerarquía del 1 al 6 donde el 1 es el más importante y el que más relevancia tiene al momento de escribir títulos.

  • p

  • P de Paragraph. Simple, es la etiqueta que va a contener los párrafos.

  • b

  • B de Bold.Transforma el texto en negrillas.

  • i

  • I de Italic. Transforma el texto en cursiva

  • u

  • U de Underline. Subraya el texto.

  • a

  • A de Anchor. Agrega un vinculo hacia otra parte de una web o a otro sitio web.

  • strong

  • Strong de... ¿Super Sajajin? 😆 Esta etiqueta se ve visualmente igual a un bold pero es utilizada para resaltar texto importante en una página. Mientras bold es de uso estético, la etiqueta HTML strong es de uso SEO. 😉

  • blockquote

  • Etiqueta que se utiliza para citar.

    "HTML no es un lenguaje de programación."
  • br

  • Br de Break. Esta etiqueta crea un salto de línea.

Etiquetas HTML para contenido multimedia

  • img

  • Inserta una imagen al documento HTML, para ello utiliza su atributo src (source).

  • video

  • Inserta un video en el documento HTML, también usa el atributo src.

  • iframe

  • Inserta contenido multimedia de otras páginas web. Como el GIF de arriba. ☝🏻

  • audio

  • Inserta un archivo de audio a la página. A través de sus atributos se pueden agregar los controladores y otros parámetros.

Etiquetas HTML para estructura de contenido

  • ul

  • Unordered List. Crea una lista sin orden, como la que se muestra en este artículo y se caracteriza por tener "bullet points".

  • ol

  • Ordered List. La contraparte de la etiqueta ul. Crea una lista ordenada de varios elementos y estas se caracterizan por llevar una jerarquía numérica.

  • li

  • List. Crea los elementos de las listas, los li deben estar dentro de la etiqueta ol o ul

  • div

  • La más común de todas las etiquetas y el contenedor por excelencia. Es una etiqueta genérica que encierra otros elementos HTML. Div puede reemplazar cualquier otra etiqueta de estructura como un header, nav o section. Estéticamente no hará cambios a una página web pero por motivos de lectura, semántica y SEO, no es recomendable usarlo para todo.

  • nav

  • Contiene el menú de navegación de un sitio web.

  • header

  • Define la cabecera del documento HTML.

  • section

  • Secciona y marca un contenido nuevo en el sitio web.

  • footer

  • Define el pie de página de una página web.

Etiquetas HTML para crear formularios

  • form

  • Es la etiqueta HTML que engloba el contenido de un formulario.

  • input

  • Etiqueta que se utiliza para rellenar campos y obtener datos de un usuario.

  • label

  • Es utilizada para darle un título o especificación a un input, por ejemplo: "Indique su nombre".

  • textarea

  • Es el campo para introducir un texto más extenso si es requerido por el formulario.

  • button

  • Es una etiqueta que inserta un botón a una página, puede ser de uso genérico como para indicar la navegación a otra parte del sitio web o, en este caso para formularios, como un botón de tipo "enviar".

¿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.