HTML Course 16.5 Components and atomic design from the perspective of HTML

HTML Course 16.5: Components and Atomic Design from the Perspective of HTML

In this lesson we explore how to structure HTML projects using the principles of Atomic Design. Atomic Design breaks UI into five hierarchical stages: Atoms, Molecules, Organisms, Templates and Pages. Each stage builds on the previous one, promoting reusability, consistency, and scalability.

1. Overview of Atomic Design

• Atoms: Basic HTML elements—buttons, inputs, icons, labels.
• Molecules: Groups of atoms functioning together—e.g., a search form (input + button).
• Organisms: Complex components made up of molecules and atoms—e.g., navigation bar, card grid.
• Templates: Page-level layout using organisms—defines placement of header, footer, content regions.
• Pages: Real content populated into templates—final deliverable view.

2. Atoms

Atoms are the simplest HTML elements. They have no dependencies beyond basic markup and classes.

Example: A primary button atom

  
  Submit

Example: A text input atom

Search

3. Molecules

Molecules combine atoms to form a small functional unit.

Example: Search form molecule

  
  Search the site
  
  
  Go

Example: Form group molecule (label + input + help text)

  Email Address
  
  We’ll never share your email.

4. Organisms

Organisms are distinct sections of an interface built from groups of molecules and atoms.

Example: Header organism including logo, navigation menu, and search molecule

  
  MySite
  
  
  
  

    Search
    
    🔍
  

Example: Card grid organism

  

    
    
Card Title 1
    
Short description for card one.
    Read More
  
  

    
    
Card Title 2
    
Short description for card two.
    Read More
  
  

5. Templates

Templates define the structure of a page by arranging organisms, molecules, and atoms in a layout without real content.

Example: Two-column layout template

  
  <!-- Include header here -->
  

    

      
Article Title
      
Excerpt placeholder…
    
    
  
  
  
  <!-- Include footer here -->

6. Pages

Pages apply real content to templates. At this stage you replace placeholders with actual text, images, and dynamic data.

Example: Home page built from the two-column template

…


  

    

      
Welcome to Our Blog
      
Here you’ll find the latest news, articles, and tutorials.
      Browse Posts
    
    

      
Getting Started with Atomic Design
      
Learn how to break down your UI into reusable components.
      Read Now
    
  
  

7. Benefits of Atomic Design in HTML

• Modularity: Each component can be developed, tested, and updated independently.
• Reusability: Atoms and molecules are reused across organisms and pages.
• Maintainability: Changes propagate in a single source of truth, reducing duplication.
• Clarity: Developers can quickly locate and understand a component’s purpose.

8. Best Practices

• Use clear, semantic class names to reflect the component’s role and level (e.g., btn--primary, card__title).
• Keep atoms simple and decoupled from styling frameworks when possible.
• Document each component with comments or a living style guide.
• Group related component files in a logical folder structure: /atoms, /molecules, /organisms, etc.
• Avoid styling components directly in HTML; keep CSS separate or use a preprocessor following BEM or similar methodologies.

By following Atomic Design in your HTML structure, you create a scalable, maintainable, and consistent codebase that can grow with your project’s needs.