Curso HTML 16.5 Componentes y diseño atómico desde la perspectiva del HTML

16.5 Componentes y diseño atómico desde la perspectiva del HTML

En este apartado exploraremos el concepto de Atomic Design aplicado puramente al marcado HTML. La idea es clasificar y construir nuestra interfaz web en niveles:

• Átomos: Elementos más básicos y sin dependencia.
• Moléculas: Combinaciones simples de átomos que cumplen una función pequeña.
• Organismos: Secciones de la interfaz formadas por varias moléculas e incluso otros organismos.
• Templates: Estructuras de página donde se colocan organismos para definir layouts.
• Pages: Páginas completas con contenido real aplicado a los templates.

1. Átomos (Atoms)

Los átomos en HTML son etiquetas básicas como button, input, label, img, etc. Se usan de forma aislada y su objetivo es encapsular una sola unidad de funcionalidad o presentación.

  Enviar



Email:

  

2. Moléculas (Molecules)

Las moléculas combinan átomos para lograr pequeños bloques funcionales. Ejemplo: un campo de formulario que incluye una etiqueta, un input y un mensaje de error.

  Usuario:
  
  
  
El nombre de usuario es obligatorio.

  

3. Organismos (Organisms)

Los organismos son secciones más complejas que agrupan varias moléculas y átomos. Por ejemplo, una barra de navegación o un card de producto:

  
  
  
  

    
Nombre del Producto
    
$29.99
  
  
  Comprar

  

4. Templates y Pages

En esta fase ensamblamos organismos dentro de layouts o plantillas (templates) y finalmente rellenamos con contenido real para generar pages. Aunque esto ya entra en HTML dinámico (servidor o JS), la estructura base de HTML marcará la diferencia en mantenibilidad.

Tabla comparativa de niveles

Buenas prácticas al usar Atomic Design en HTML

• Usar roles y atributos ARIA para accesibilidad en cada componente.
• Evitar estilos en línea: dejar el marcado puro y semántico.
• Nombrar clases de forma consistente según el nivel (por ejemplo, .btn para átomo botón).
• Componer primero átomos y validar su comportamiento antes de combinarlos.
• Documentar cada componente con comentarios en el HTML si es necesario.

Con esta metodología, tu código HTML será modular, semántico y escalable, lo que facilitará su mantenimiento y la colaboración entre equipos de desarrollo y diseño.