HTML5 Coding Standards

Reference

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML

• Google Style Guides: https://google.github.io/styleguide/

Semantic Markup

Use semantic HTML elements to provide clear structure and improve accessibility.

/* ❌ Bad */
<div className="header">
  <div className="nav">
    <div className="nav-item">Home</div>
  </div>
</div>

/* ✅ Good */
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Common Semantic Elements:

• <header>, <footer>, <nav>

• <main>, <article>, <section>

• <aside>, <figure>, <figcaption>

• <time>, <address>

File Structure

Follow consistent HTML structure in React components:

// UserProfile.tsx
const UserProfile = () => {
  return (
    <article className="user-profile">
      <header>
        <h1>User Profile</h1>
      </header>

      <section className="user-info">
        {/* User details */}
      </section>

      <footer>
        {/* Actions */}
      </footer>
    </article>
  );
};

Attributes Order

Maintain consistent attribute ordering in JSX/TSX:

1. Key/Ref

2. Component-specific props

3. Event handlers

4. Data attributes

5. aria-* attributes

6. className/style

<button
  key="submit"
  ref={buttonRef}
  type="submit"
  disabled={isLoading}
  onClick={handleSubmit}
  data-testid="submit-button"
  aria-label="Submit form"
  className="button-primary"
>
  Submit
</button>

Accessibility Standards

1. ARIA Labels and Roles - Use when semantic HTML isn’t sufficient - Provide clear descriptions - Test with screen readers

/* ❌ Bad */
<div onClick={closeModal}>x</div>

/* ✅ Good */
<button
  onClick={closeModal}
  aria-label="Close modal"
  type="button"
>
  x
</button>

2. Focus Management - Ensure keyboard navigation - Maintain focus order - Use proper button/link elements

Best Practices

1. Element Usage - Use buttons for actions - Use anchors for navigation - Avoid div-soup

2. Forms - Label all inputs - Group related fields - Provide error messages

/* ❌ Bad */
<div>
  <input
    type="text"
    onChange={handleChange}
    value={name}
  />
</div>

/* ✅ Good */
<div>
  <label htmlFor="name">Name</label>
  <input
    id="name"
    type="text"
    onChange={handleChange}
    value={name}
    aria-describedby="name-error"
  />
  {error && (
    <span id="name-error" role="alert">
      {error}
    </span>
  )}
</div>

3. Content Structure - Use appropriate heading levels - Maintain logical document outline - Keep markup clean and minimal