Si estás dando tus primeros pasos en el mundo del desarrollo web, seguro te encontraste con palabras raras como <h1>, <p> o <a>. ¡No te preocupes! En este artículo vas a aprender de forma clara qué son las etiquetas HTML, cómo se usan y cuáles son las más importantes para empezar a crear tus propias páginas.
🧱 ¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje que se usa para estructurar el contenido de una página web. No es un lenguaje de programación como JavaScript o Python, sino un lenguaje de marcado que le dice al navegador cómo mostrar el contenido.
En otras palabras, HTML es el esqueleto de toda página web.
🔖 ¿Qué son las etiquetas?
Las etiquetas HTML son comandos que indican al navegador cómo debe comportarse un bloque de contenido. Siempre se escriben entre signos de menor y mayor (< >) y normalmente tienen una etiqueta de apertura y una de cierre:
html
<p>Este es un párrafo de texto.</p>
- <p> es la etiqueta de apertura.
- </p> es la etiqueta de cierre (nota el /).
- Entre ambas va el contenido que se mostrará.
🏷️ Las etiquetas HTML más comunes (y cómo usarlas)
🔠 <h1> hasta <h6> – Títulos y subtítulos
Sirven para marcar títulos, siendo <h1> el más importante y grande, y <h6> el más pequeño.
html<h1>Este es un título principal</h1> <h2>Este es un subtítulo</h2>
✅ Usá un solo <h1> por página para el título principal (muy importante para SEO).
📝 <p> – Párrafos de texto
Representa un bloque de texto. Es ideal para contenido, descripciones o explicaciones.
html
<p>Este es un párrafo. Podés escribir todo lo que quieras aquí.</p>
🔗 <a> – Enlaces (links)
Sirve para crear un enlace hacia otra página o sitio.
html
<a href="https://tusitio.com">Visitar mi sitio web</a>
- href es el atributo que indica a dónde lleva el link.
🖼️ <img> – Imágenes
Permite insertar una imagen en la página.
html
<img src="imagen.jpg" alt="Descripción de la imagen" />
- src es la URL o nombre del archivo de la imagen.
- alt es una descripción para accesibilidad y SEO.
⚠️ Esta etiqueta no tiene cierre, se escribe sola con / >.
📦 <div> – Contenedor genérico
No tiene significado visual por sí mismo, pero se usa para agrupar otros elementos y aplicar estilos.
html
<div> <h2>Título</h2> <p>Texto dentro del div</p> </div>
Muy usado para maquetar y aplicar CSS.
📜 <span> – Contenedor en línea
Como <div>, pero para contenido dentro de una línea. Útil para aplicar estilos a una palabra específica.
html
<p>Este es un <span style="color:red;">texto en rojo</span>.</p>
| Etiqueta | Significado | Ejemplo visual |
|---|---|---|
| <h1> a <h6> | Títulos | <h1>Hola mundo</h1> |
| <p> | Párrafos | <p>Texto informativo</p> |
| <a> | Enlaces | <a href="#">Ver más</a> |
| <img> | Imagen | <img src="foto.jpg" alt="Mi imagen" /> |
| <div> | Contenedor | Agrupa bloques |
| <span> | Texto en línea | Estilo a una palabra |
👨💻 Consejos para empezar a practicar
- Usá un editor como Visual Studio Code para escribir tu código HTML.
- Guardá el archivo con extensión .html (por ejemplo, index.html).
- Abrilo en un navegador y verás tu primera web.
- Jugá combinando etiquetas, cambiando textos, colores, imágenes.
✍️ Conclusión
Aprender HTML es como aprender el abecedario del diseño web. Estas etiquetas son las piezas básicas que vas a usar una y otra vez. A medida que avances, podrás combinar HTML con CSS (estilos) y JavaScript (funcionalidad), pero entender bien estas bases te va a permitir construir cualquier página.
👉 ¿Querés que te ayude a crear tu primera página o a mejorar tu web?
Soy desarrollador especializado en WordPress y diseño web profesional. Podés contactarme para armar tu sitio desde cero, actualizar el que ya tenés o simplemente resolver tus dudas técnicas.
📩 Contacto directo: [email protected]
