HTML Elements and Attributes

This document defines the conventions to follow when writing HTML in projects. The goal is to ensure consistency, readability, and maintainability across all codebases.

Quick Reference

For a comprehensive, consolidated formatting reference covering all rules including template formatting, see Formatting Reference. A machine-optimized JSON version is also available for tooling integration.

Spacing Between Sibling Elements

• If a parent has two or more direct children, insert a blank line between them.

• Applies recursively to all nested levels.

👎🏼 BAD

<section>
  <h2>Title</h2>
  <p>Some content here.</p>
</section>

👍🏼 GOOD

<section>
  <h2>Title</h2>

  <p>Some content here.</p>
</section>

Self Close Elements

• Always use explicit closing tags, even for optional ones (<li>, <p>).

• Self-closing elements (<img>, <br>, <hr>, <input>) must end with />.

👎🏼 BAD

<ul>
  <li>Item 1

  <li>Item 2
</ul>

<img src="logo.png">

👍🏼 GOOD

<ul>
  <li>Item 1</li>
  
  <li>Item 2</li>
</ul>

<img src="" alt="" />

Attribute Order

Attributes should follow this order for consistency:

• Directives

  • v-if

  • All other v-* directives in alphabetical order

• Simple attributes (e.g., id, class, type, name) in alphabetical order

• Bound attributes (:) in alphabetical order

• Events (@) in alphabetical order

👎🏼 BAD

<MyComponent
  submit
  v-model="model"
  :otherProp="prop"
  @onSomeEvent="onSomeEvent"
  v-if="!loading"
  outlined
  class="w-full"
  @click="onClick"
  :label="myCustomLabel"
/>

👍🏼 GOOD

<MyComponent
  v-if="!loading"
  v-model="model"
  submit
  outlined
  class="w-full"
  :label="myCustomLabel"
  :otherProp="prop"
  @click="onClick"
  @onSomeEvent="onSomeEvent"
/>