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.

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"
/>