0 Comentarios
Si estás dando tus primeros pasos en el mundo del desarrollo web, seguramente te has topado con HTML. Y claro, te habrás preguntado: ¿cuáles son los comandos básicos de HTML? Pues bien, en esta guía vamos a ayudarte a entenderlos con claridad, sin rodeos y desde cero. Porque sí, todos empezamos en algún momento... y créenos: no es tan complicado como parece.
Vamos a contarte lo esencial para que puedas crear tu primera página web con confianza, entendiendo cada etiqueta y cada estructura básica. No necesitas experiencia previa, solo ganas de aprender. Así que, vamos al lío.
HTML significa “HyperText Markup Language”, o lo que es lo mismo, el lenguaje que usamos para estructurar el contenido en la web. No es programación pura y dura (nada de variables ni bucles), pero sí es esencial.
Todo lo que ves en una página web (textos, imágenes, enlaces) pasa primero por HTML. Aunque existan editores visuales o constructores automáticos, si tú entiendes cómo funciona el HTML, puedes ajustar cosas, corregir errores y darle ese toque personalizado a tus proyectos. Tener control sobre tu web empieza por aquí.
Vamos a empezar por lo más elemental: cómo se estructura un documento HTML.
Cualquier página necesita un mínimo de estructura para que el navegador la entienda. Este sería un ejemplo base:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<h1>Hola, mundo</h1>
<p>Este es mi primer párrafo en HTML.</p>
</body>
</html>
¿Te fijas? Todo empieza y termina con etiquetas. Cada parte tiene su función específica, y si falta algo, el navegador puede mostrar errores o comportamientos raros.
En HTML casi todas las etiquetas vienen por pares:
Apertura: <p>
Cierre: </p>
La barra inclinada / indica que estamos cerrando esa etiqueta. Es como abrir y cerrar una caja: todo lo que esté dentro, está afectado por esa etiqueta.
Importante: Algunas etiquetas son “autocontenidas”, como <img> o <br>, y no se cierran de forma tradicional.
Vamos a lo que interesa: los comandos o etiquetas básicas de HTML que vas a usar sí o sí en tus primeros proyectos.
<html>, <head> y <body><html>: Encierra todo el contenido HTML.
<head>: Información “invisible” para el usuario (título, enlaces a CSS, etc.).
<body>: Lo que se muestra en pantalla: texto, imágenes, botones…
Estas etiquetas son como los pilares de una casa. Sin ellas, no hay estructura ni funcionalidad.
<h1> hasta <h6> y <p><h1> a <h6>: Títulos de más grande (h1) a más pequeño (h6).
<p>: Párrafos. Todo texto que no es un título debería ir aquí.
Un ejemplo:
<h1>Bienvenido a mi web</h1>
<p>Este sitio está construido desde cero con HTML.</p>
Consejo: Solo debería haber un <h1> por página. El resto ayudan a jerarquizar el contenido.
<a> y <button><a href="URL">Texto del enlace</a>: Para enlazar a otras páginas.
<button>: Botones que luego puedes programar con JavaScript.
<a href="https://www.overant.com/">Visita nuestro sitio</a>
<button>Haz clic aquí</button>
Ambos son súper útiles para dar interactividad básica a tu página.
<img> y dar formato con <br> y <hr><img src="imagen.jpg" alt="Descripción">: Inserta una imagen.
<br>: Salto de línea.
<hr>: Línea horizontal para separar secciones.
Ejemplo real:
<img src="foto.jpg" alt="Foto de ejemplo">
<p>Este texto va aquí.<br>Y esto aparece justo debajo.</p>
<hr>
No todo es saber etiquetas. También hay que escribir bien y con orden.
Muchas etiquetas aceptan atributos, que dan más información o modifican su comportamiento.
Ejemplos típicos:
href en <a>: define la URL del enlace.
src en <img>: define la imagen a mostrar.
alt: texto alternativo para imágenes (muy importante para accesibilidad).
class y id: para aplicar estilos con CSS o interactuar con JS.
<a href="pagina.html" class="boton">Ir a la página</a>
Ojo: no te olvides de cerrar los atributos con comillas. Es un error muy común.
Los comentarios no se ven en pantalla, pero sirven para dejar notas dentro del código.
<!-- Este es un comentario -->
<p>Texto visible</p>
Útiles cuando colaboras con otros o cuando vuelves a tu código después de semanas y no recuerdas nada.
Esto no termina aquí. Aprender HTML es el primer paso, pero hay un montón de recursos para seguir avanzando.
Aquí algunas que recomendamos:
freeCodeCamp.org
Codecademy
MDN Web Docs (Mozilla)
W3Schools
Practica, copia, prueba y rompe cosas (¡en un entorno seguro, claro!). La clave está en ensuciarte las manos.
HTML te da la estructura, pero para que una web sea atractiva y dinámica necesitas CSS (estilos) y JavaScript (interacción).
CSS: Cambia colores, tamaños, posiciones, etc.
JavaScript: Hace que pasen cosas cuando haces clic, escribes, mueves el ratón...
Aunque HTML funciona solo, la magia ocurre cuando los combinas.
Y si no sabes por dónde empezar... aquí en Overant podemos ayudarte con todo lo relacionado con el diseño web en Alicante. Nos encanta acompañar a quienes están aprendiendo o emprendiendo.
Depende del tiempo que le dediques, pero lo básico lo puedes entender en cuestión de días.
No, pero conocer lo básico te permite personalizar y solucionar errores cuando los plugins no lo hacen todo.
El navegador puede comportarse raro o ignorar ese contenido. Usa validadores como W3C Validator.
Sí, salvo las autocontenidas como <img>, <br>, <hr>. Pero ojo, en HTML5 hay normas más flexibles, aunque conviene seguir las buenas prácticas.
En resumen, los comandos básicos de HTML son como el abecedario del lenguaje web. Una vez los entiendes, puedes empezar a crear, experimentar y construir páginas que funcionen de verdad.
Y si ya tienes una idea en mente y quieres llevarla al siguiente nivel, echa un vistazo a nuestro servicio de diseño web en Alicante. Podemos ayudarte a hacerla realidad, sin complicaciones y con mucho mimo.
Nos leemos pronto… ¡y buen código!
¿Qué te ha parecido este artículo?