¿Has probado alguna vez a inspeccionar el contenido de una página web? Utilizar el atajo Ctrl + Shift + I puede llevarte directo/a a una lista enorme de código que quizá te cueste un poco comprender a simple vista, pero si te explicamos que, probablemente, este se componga de un montón de etiquetas HTML organizadas y estructuradas, quizá lo veas más claro.

En el artículo de hoy vamos a explorar las claves del lenguaje de marcado HTML y cómo utilizar su sistema de etiquetas según la necesidad. Ah, y si no puedes esperar más para aprender a dominar esta materia, echa un vistazo al Curso de Programación web front end (HTML5, CSS3 y JavaScript) que impartimos en Tokio School: conviértete en samurái digital. ¡Vamos!

Introducción a HTML y su estructura básica de etiquetas

HTML o HyperText Markup Language (Lenguaje de Marcado de Hipertexto en castellano), es una herramienta clave que todos los desarrolladores web deben conocer para dar vida a sus creaciones y proyectos. Se trata de un lenguaje de marcado que, empleando etiquetas, define y da forma a los contenidos de una página web.

No se considera un lenguaje de programación en sí mismo, ya que estos permiten crear algoritmos y ecuaciones dinámicas, mientas que HTML solo organiza y presenta el contenido estático de la web.

En otras palabras, HTML utiliza etiquetas para dar instrucciones al navegador web sobre cómo debe mostrar al usuario el contenido de la web. Por lo tanto, proporciona una estructura básica sobre la que se van superponiendo estilos e interactividad.

Componentes de las etiquetas HTML: su estructura

Dentro de cada una de las etiquetas HTML hay una serie de componentes, que enumeramos a continuación:

  • Elemento: es el nombre que recibe la etiqueta. Por ejemplo, p para párrafos o img para imágenes.
  • Atributo: es la propiedad adicional que se le aplica al elemento y que proporciona información adicional, como el color o el tamaño.
  • Contenido: es el contenido de texto o de cualquier otra clase que se encuentra dentro de la etiqueta; por ejemplo, imágenes o palabras.
  • Variable: son componentes que amplían la información y añaden características específicas a la etiqueta. Por ejemplo, src (<img src="imagen.jpg">) puede usarse para ubicar la fuente de una imagen o href (<a href="https://ejemplo.com">Enlace</a>) para identificar de dónde proviene un enlace.

Cada etiqueta HTML está compuesta por un elemento, atributos opcionales, contenido y, en algunos casos, variables especiales.

Etiquetas HTML esenciales para principiantes

Podríamos decir que todas las etiquetas HTML son, en su esencia, igual de importantes. No obstante, mentiríamos si te dijésemos que todas se utilizan con la misma frecuencia. En el día a día de cualquier programador/a profesional, algunas etiquetas se emplean con más asiduidad que otras, y son las que consideramos esenciales para cualquier persona que se inicie en este campo. ¡Lee con atención!

  • <!DOCTYPE html>: esta etiqueta define la versión de HTML que estás utilizando, asegurando que el navegador interprete correctamente tu código.
  • <html>: es la etiqueta raíz que envuelve todo el contenido de la página.
  • <head>: aquí es donde se colocan los metadatos como el título de la página, enlaces a hojas de estilo y scripts, entre otros.
  • <title>: define el título de tu página web que se muestra en la pestaña del navegador.
  • <body>: contiene todo el contenido visible de la página web, como texto, imágenes y enlaces.
  • <h1> a <h6>: estas etiquetas HTML se utilizan para definir encabezados de diferentes niveles, siendo <h1> el más importante y <h6> el menos importante.
  • <p>: se utiliza para definir un párrafo de texto.
  • <a>: permite definir un hipervínculo o enlace a otra página web o recurso.
  • <img>: sirve para incrustar imágenes en una página web.
  • <ul>, <ol>, <li>: se usan para crear listas no ordenadas (viñetas) y listas ordenadas (numeradas).
  • <div> y <span>: sirven para agrupar y aplicar estilos a elementos HTML.

Organizando contenido con etiquetas HTML: listas, tablas y formularios

En el proceso de aprendizaje hasta dominar las etiquetas HTML, una de las habilidades esenciales que deben adquirirse es la de organizar y estructurar el contenido de manera efectiva. Esto no solo hace que el código sea más legible, sino que también mejora la accesibilidad y la experiencia del usuario en cualquier sitio web.

A continuación, veremos cómo puedes utilizar las etiquetas HTML para organizar diferentes tipos de contenido en listas, tablas y formularios. ¡Empezamos!

Listas

Las listas son, como ya imaginarás, una forma efectiva de presentar información de manera ordenada y jerarquizada. En el caso del lenguaje de marcado HTML, podemos encontrar tres tipos principales de listas:

  • Lista desordenada (<ul>): se usa para elementos que no tienen un orden específico y se muestran con viñetas.
  • Lista ordenada (<ol>): es recomendable para elementos que deben mostrarse en un orden secuencial, como pueden ser los pasos en un tutorial o una serie de ítems numerados.
  • Lista de definición (<dl>): este último tipo sirve para presentar términos junto con sus definiciones correspondientes, como un glosario o diccionario.

Tablas

Por su parte, las tablas son útiles cuando necesitas mostrar datos en filas y columnas. La etiqueta <table> define la tabla en sí, mientras que <tr>, <th> y <td> se utilizan para definir filas, encabezados y datos, respectivamente. ¡Tiene una estructura sencilla!

Formularios

Por último, los formularios son la forma en que los usuarios interactúan con un sitio web, ya sea para solicitar información, suscribirse a una newsletter o realizar una compra. Con etiquetas como <form>, <input>, <textarea> y <button>, se pueden crear campos para que los usuarios ingresen diferentes tipos de datos, seleccionen opciones y envíen información.

Mejores prácticas en el uso de etiquetas HTML

¡Ya tienes un dominio básico de las etiquetas HTML! Habiendo asentado estas bases, es recomendable que aprendas algunas buenas prácticas para asegurar que tu código sea legible, mantenible y compatible con los estándares web. Aquí te dejamos algunas sugerencias:

  • Mantén el código limpio y organizado: utilizando sangrías y comentarios harás que tu código sea más legible y fácil de entender para otros desarrolladores, o incluso para ti mismo/a en el futuro, si tienes que volver a tocar un proyecto.
  • Utiliza etiquetas semánticas: introduciendo etiquetas semánticas puedes ayudar a los motores de búsqueda y a los lectores a entender la estructura y el significado del contenido que se encontrarán en la web. Ejemplos de estas etiquetas son <header>, <article> o <section>.
  • Cierra siempre las etiquetas HTML: asegúrate de cerrar todas las etiquetas que abras para evitar errores de renderizado en el navegador y mantener la estructura correcta del documento. Esto se hace añadiendo al final una /. Por ejemplo,
  • Haz que las páginas sean accesibles: añadiendo atributos alt para imágenes y elementos gráficos, así como aplicando otras pautas de accesibilidad web, lograrás que la página sea accesible para usuarios con todo tipo de capacidades.

¡Conviértete en maestro/a del Front-End!

Transfórmate en samurái del código y utiliza etiquetas HTML cual experto de la programación con el Curso de Programación web front end (HTML5, CSS3 y JavaScript) que impartimos en Tokio School. Tenemos justo lo que necesitas para impulsar tu carrera en el fascinante mundo de la programación front-end.

A través de una metodología 100% online dispondrás de la flexibilidad necesaria para ir avanzando a tu ritmo por el programa: HTML5, CSS3, Desarrollar con Javascript, Diseño web... ¡Descubre todo lo que podrás aprender junto a nuestros senséis cubriendo el formulario con tus datos!

Bibliografía