¿Necesito saber programar para usar HTML?
No. HTML no es un lenguaje de programación, sino de marcado. Solo necesitas entender cómo funcionan las etiquetas y su estructura básica para editar o crear contenido web.
Mucha gente ve una línea de código HTML y se imagina a un hacker en una habitación a oscuras tecleando a toda velocidad. La realidad es mucho más aburrida... y más fácil.
El HTML (HyperText Markup Language) no es un lenguaje de programación; es el esqueleto de tu página web. Es un sistema de etiquetas que le dice al navegador (como Chrome o Safari): "Oye, esto es un título, esto es un párrafo y esto de aquí es una imagen".
Si trabajas en marketing, escribes contenido, haces SEO o simplemente tienes una web propia, conocer el "esqueleto" te ahorrará horas de peleas con WordPress o Shopify. Vamos a repasar las etiquetas esenciales desde que se abre la persiana de la web hasta que se cierra.
La estructura obligatoria: El armazón de la web
Cualquier página web del mundo, desde un blog humilde hasta la mismísima web de Google, empieza y termina con las mismas etiquetas. Es el contenedor de todo.
1. <!DOCTYPE html> y <html>
Es el pistoletazo de salida. Con <!DOCTYPE html> le avisas al navegador de que la web está escrita en la versión moderna de HTML (HTML5). Justo debajo abrimos la etiqueta principal:
<html>
<!-- Aquí va absolutamente todo el contenido de la web -->
</html>
Nota de supervivencia: Casi todas las etiquetas en HTML se abren (<html>) y se cierran con una barra inclinada (</html>). Lo que metas en medio es lo que se verá afectado.
2. <head>: El cerebro invisible
Aquí se mete la información que el usuario no ve directamente en la pantalla, pero que es vital para los buscadores y el navegador. Se colocan los títulos de la pestaña del navegador, las etiquetas de SEO (meta descripciones) o los enlaces a los estilos visuales.
<head>
<title>Mi primer post sobre HTML</title>
</head>
3. <body>: El cuerpo visible
Aquí ocurre la magia. Todo lo que metes dentro de las etiquetas <body> y </body> es lo que tus usuarios van a ver en la pantalla: textos, imágenes, botones, vídeos... todo.
Las etiquetas de contenido: Dando forma al texto
Una vez que tenemos el cuerpo (<body>), necesitamos rellenarlo. Estas son las etiquetas que usarás el 90% del tiempo cuando redactes un artículo o una sección:
4. Los encabezados (<h1>, <h2>, <h3>...)
Sirven para estructurar los títulos de tu web. Van del <h1> (el más importante) al <h6> (el menos importante).
Regla de oro: Usa un solo <h1> por página (el título principal). Para los apartados usa <h2> y para los subapartados <h3>.
<h1>Este es el título principal de mi post</h1>
<h2>Este es un subapartado importante</h2>
5. El párrafo (<p>)
Cada vez que quieras escribir un bloque de texto normal y corriente, debes envolverlo en una etiqueta de párrafo. Al cerrarlo, el navegador entiende automáticamente que debe dar un salto de línea para empezar el siguiente bloque.
<p>Este es un texto normal donde explico cosas súper interesantes sobre mi negocio.</p>
6. El salto de línea (<br>)
¿Qué pasa si quieres bajar a la línea de abajo pero sin crear un párrafo nuevo (es decir, sin dejar ese espacio en blanco tan grande)? Usas la etiqueta <br>.
<p>Quiero escribir una línea aquí abajo <br> y que esta continúe justo debajo sin separarse.</p>
Las etiquetas de acción: Enlaces e imágenes
Una web sin enlaces ni fotos sería un desierto de texto aburridísimo. Para darles vida usamos estas dos:
7. Los enlaces (<a>)
La "a" viene de anchor (ancla). Es la etiqueta que te permite viajar a otra página web. Para decirle a dónde tiene que ir el usuario, usamos el atributo href.
<a href="https://tusitio.com/contacto">Contacta con nosotros aquí</a>
8. Las imágenes (<img>)
Al igual que el salto de línea, la etiqueta de imagen no se cierra. Necesita dos datos obligatorios: src (la dirección donde está guardada la foto) y alt (el texto alternativo que lee Google para saber de qué es la foto).
<img src="foto-equipo.jpg" alt="El equipo de nuestra agencia trabajando en la oficina">
Poniéndolo todo junto: El resultado final
Si juntamos todas estas piezas, una página web básica estructurada de principio a fin se vería exactamente así en código:
<!DOCTYPE html>
<html>
<head>
<title>Mi maravillosa página web</title>
</head>
<body>
<h1>Bienvenido a mi negocio local</h1>
<p>Ofrecemos los mejores servicios de fontanería de la ciudad. <br>Disponibles las 24 horas.</p>
<h2>Nuestros Servicios</h2>
<p>Reparamos fugas, desatascos y mucho más. Puedes ver nuestras fotos de trabajos reales aquí abajo:</p>
<img src="fuga-reparada.jpg" alt="Tubería de cobre reparada perfectamente">
<p>¿Tienes una urgencia? <a href="https://miweb.com/contacto">Haz clic aquí para llamarnos</a></p>
</body>
</html>
Conclusión: Hablar HTML te da superpoderes
Como ves, no hace falta ser ingeniero de software para entender el HTML básico. La próxima vez que un texto se te desconfigure en tu editor visual de WordPress, no entres en pánico: dale a la pestaña de "Editar como HTML" (o "Texto"), busca las etiquetas y corrige el esqueleto tú mismo.
FAQ
Preguntas frecuentes
¿Cuál es la diferencia entre HTML y CSS?
HTML define la estructura de la página (títulos, párrafos, imágenes), mientras que CSS controla el aspecto visual (colores, tamaños, fuentes, márgenes). Piensa en HTML como el esqueleto y en CSS como la ropa y el maquillaje.
¿Por qué es importante conocer HTML si uso WordPress o Shopify?
Porque te permite corregir errores de formato, ajustar textos o imágenes y mejorar el SEO sin depender de plugins o desarrolladores. Saber HTML básico te da independencia y velocidad.
Cluster