DEV Community

Cover image for A Standardised Approach to HTML Attribute Ordering
Lakh Bawa
Lakh Bawa

Posted on

A Standardised Approach to HTML Attribute Ordering

#webdev #html #beginners #productivity

We've all been there. You open an HTML file and see this:

<button onclick="submit()" disabled type="submit" aria-label="Submit form" class="btn" id="submit-btn">
  Submit
</button>
Enter fullscreen mode Exit fullscreen mode

Or maybe this:

<button type="submit" id="submit-btn" onclick="submit()" class="btn" aria-label="Submit form" disabled>
  Submit
</button>
Enter fullscreen mode Exit fullscreen mode

Both are valid HTML. Both work perfectly. But which one is "correct"?

Repo: https://github.com/lakhbawa/HTML-Attribute-Ordering-Standard (Please star the repo to help others)

The Problem

HTML doesn't care about attribute order. Your browser doesn't care. But humans do. When every developer on your team orders attributes differently, your codebase becomes harder to read, review, and maintain.

Think about it: how much time have you wasted scanning through a long list of attributes to find the id? Or tracking down that event handler buried in the middle? These small moments add up.

Introducing HAOS

I've created the HTML Attribute Ordering Standard (HAOS) - a comprehensive, community-driven approach to organizing HTML attributes consistently.

The core principle is simple: attributes should be ordered by their purpose and importance.

The 11-Category System

HAOS organizes attributes into 11 categories:

  1. Identification (id, class, name)
  2. References (for, form, list)
  3. Structural (type, href, src, alt)
  4. Data (data-* attributes)
  5. Accessibility (role, aria-*, tabindex)
  6. Form-Specific (placeholder, required, disabled)
  7. Media (width, height, controls)
  8. Behavioral (draggable, contenteditable, loading)
  9. Styling (style)
  10. Event Handlers (onclick, onchange, etc.)
  11. Custom (non-standard attributes)

Before and After

Before (chaos):

<input placeholder="Enter email" onclick="validate()" type="email" 
       required class="form-input" id="user-email" aria-label="Email address">
Enter fullscreen mode Exit fullscreen mode

After (HAOS):

<input 
  id="user-email"
  class="form-input"
  type="email"
  aria-label="Email address"
  placeholder="Enter email"
  required
  onclick="validate()">
Enter fullscreen mode Exit fullscreen mode

See the difference? The most important identifying information (id, class) comes first, followed by structural details, accessibility, form specifics, and finally event handlers.

Why This Matters

1. Faster Code Reviews

When attributes follow a predictable pattern, reviewers can focus on logic changes rather than hunting for specific attributes.

2. Reduced Cognitive Load

Your brain doesn't have to work as hard to parse HTML when attributes appear in expected locations.

3. Better Diffs

Consistent ordering makes Git diffs more meaningful. Attribute changes are easier to spot when everything else stays in place.

4. Easier Onboarding

New team members learn one pattern instead of adapting to each developer's personal style.

5. Automation-Friendly

Standardized ordering makes it easier to write linters, formatters, and other tooling.

Real-World Example

Here's a complex input field following HAOS:

<input 
  id="email-input"
  class="form-control"
  name="user_email"
  type="email"
  value="user@example.com"
  data-validation="email"
  aria-describedby="email-help"
  placeholder="Enter your email"
  required
  autofocus
  autocomplete="email"
  minlength="5"
  maxlength="100"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  oninput="validateEmail(this)">
Enter fullscreen mode Exit fullscreen mode

Every attribute has its place. No guesswork needed.

Framework Support

HAOS includes specific guidance for modern frameworks:

React/JSX:

<input
  id="username"
  className="form-input"
  type="text"
  value={username}
  aria-label="Username"
  required
  onChange={handleChange}
/>
Enter fullscreen mode Exit fullscreen mode

Vue.js:

<input
  id="username"
  class="form-input"
  type="text"
  :value="username"
  aria-label="Username"
  required
  @input="handleInput"
/>
Enter fullscreen mode Exit fullscreen mode

Getting Started

The full standard is available on GitHub [link to your repo]. It includes:

  • Detailed rationale for each category
  • Dozens of real-world examples
  • Framework-specific guidelines
  • Implementation strategies
  • Tooling recommendations

Quick Adoption Tips

  1. Start small: Apply HAOS to new code first
  2. Use tooling: Set up ESLint or Prettier rules
  3. Team buy-in: Share the standard with your team
  4. Be consistent: Make it part of your code review checklist
  5. Stay flexible: Adapt the standard to your team's needs

The Big Picture

HAOS isn't about being pedantic. It's about reducing friction in our daily work. It's about spending less time parsing HTML and more time building features.

Standards like this work because they remove tiny decisions from our day. Should id come before class? Don't think about it - just follow the pattern. Over thousands of elements across dozens of files, that mental energy adds up.

Join the Discussion

This is a community standard. It's meant to evolve based on real-world usage and feedback.

What do you think? Does your team have different conventions? Are there edge cases I missed? I'd love to hear your thoughts in the comments.

Let's bring some order to the beautiful chaos of HTML. 🎯

Repository: https://github.com/lakhbawa/HTML-Attribute-Ordering-Standard

Full Standard: https://github.com/lakhbawa/HTML-Attribute-Ordering-Standard/blob/main/README.md

Found this helpful? Give it a ❤️, Star the repo and share it with your team!

Top comments (0)