DEV Community

Etiquetas HTML que todo programador principiante debería conocer 💻✨

¡Hey, tú! 👋

Sí. Tú.

El que está metiéndose por primera vez en este mundo del desarrollo web. 💻

¿Sabías que HTML es la base de todo lo que ves en una página web? 🕸️

Si no, ahora lo sabes.
Y si ya lo sabías, aquí vengo a contarte sobre las etiquetas HTML que te van a salvar la vida (o al menos te evitarán quedar como un novato total en tu primer proyecto).

<html> y <body>

Por algún lado hay que empezar, ¿no? 🚀

Estas etiquetas son la estructura básica. 🏗️

  • <html>: Es la etiqueta madre. Todo tu código HTML vive dentro de ella. Si no la usas, ¿de qué se supone que está hecha tu página?
  • <body>: Aquí va TODO lo que ves en la pantalla. El contenido, las imágenes, los botones, los memes que subes en tus pruebas de portafolio. Todo.

<head>

Esto no se ve directamente en la página, pero es crucial. 🧠

Aquí metes cosas importantes como:

  • El título de la pestaña (<title>).
  • Enlaces a tus archivos CSS o JS.
  • Metadatos que no entiendes ahora pero que Google ama (y deberías aprender pronto).

<h1> a <h6>

Image description
Los títulos.

Hazte un favor y no uses h1 para todo. 🙅‍♂️

Cada etiqueta tiene un tamaño y un nivel de jerarquía:

  • <h1>: Súper importante. Ideal para el título principal.
  • <h2> a <h6>: Para subtítulos y otros niveles de importancia.

💡 Pro tip: Usar bien estos niveles te ayuda con el SEO (o sea, que Google te encuentre más fácil).

<p>

Image description

Tus textos de relleno. ✍️

Aquí metes todo el choro mareador que acompaña tus títulos. Si no sabes qué poner, usa el clásico "Lorem ipsum" para fingir que sabes de qué hablas.

<a>

Image description

¿Quieres enlaces? Aquí los tienes. 🔗

  • Ejemplo: <a href="https://tupaginamamada.com">Haz clic aquí</a>.
  • 💡 Pro tip: Usa target="_blank" para que el enlace se abra en otra pestaña. Así no secuestras al usuario en tu página.

<img>

Image description

Las imágenes son el alma de Internet. 🖼️

Pero no seas tonto, pon siempre el atributo alt. Ejemplo:

<img src="gatito.png" alt="Un lindo gatito que te hace feliz">
Enter fullscreen mode Exit fullscreen mode

Esto es por accesibilidad y porque los motores de búsqueda también leen eso. 🔍

<ul>, <ol> y <li>

Image description

Listas para organizar cosas:

  • <ul>: Lista desordenada (con puntos).
  • <ol>: Lista ordenada (con números).
  • <li>: Cada elemento de la lista. Ejemplo:
<ul>
  <li>Aprender HTML</li>
  <li>Quejarte de CSS</li>
  <li>Enamorarme de JavaScript (o no)</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

<button>

Image description

Un botón que puedes programar para hacer de todo (o nada):

<button onclick="alert('Hola mundo')">Dale clic</button>
Enter fullscreen mode Exit fullscreen mode

El onclick es JavaScript, pero aquí estamos para ver HTML, así que no me quemen por eso. 🔥

<form>

Image description

Si quieres recolectar datos (como emails o comentarios de odio):

<form action="/enviar-datos" method="POST">
  <input type="text" name="nombre" placeholder="Tu nombre aquí">
  <input type="email" name="correo" placeholder="Tu correo">
  <button type="submit">Enviar</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Con esto puedes crear formularios para lo que quieras. Bueno, para lo que el backend soporte. 📨

<div> y <span>

Image description

  • <div>: El contenedor universal. Si no sabes qué usar, mete todo en un div (pero no abuses).
  • <span>: Es como un div, pero para texto o cosas pequeñas.

¿Y ahora qué?

Estas etiquetas son el pan de cada día para cualquier desarrollador web.
No necesitas memorizar todo ahorita, pero sí jugar con ellas y entender para qué sirven.
Y si llegaste hasta aquí, te dejo un consejo final: rompe cosas.
Sí.
Rompe tu código.
Experimenta
Prueba.
¡Así se aprende! 💥

Ahora ve y construye esa página que promete cambiar el mundo 🌎 (o al menos impresionar a tu primo en la cena). 🍽️

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay