HTML Attributes

Double Quotes for Attribute Values

• Rule: Attribute values MUST be wrapped in double quotes.

• Reason: Double quotes are the standard convention in HTML and distinguish HTML attributes from JavaScript strings (which use single quotes).

Example (Correct):

<div class="container" id="main">
<input type="text" name="username" placeholder="Enter name">

Example (Incorrect):

<div class='container' id='main'>
<div class=container>

Attribute Order

• Rule: Attributes SHOULD follow this order:

  1. id
  2. class
  3. name
  4. data-* attributes
  5. src, href, type
  6. alt, title
  7. aria-*, role
  8. Other attributes

• Reason: Consistent attribute ordering improves readability and makes it easier to find specific attributes.

Example (Correct):

<input id="email" class="form-input" name="email" type="email" placeholder="Enter email" required>

<a id="home-link" class="nav-link" href="/" title="Go to homepage">Home</a>

Boolean Attributes

• Rule: Boolean attributes SHOULD be written without a value.

• Reason: HTML5 allows boolean attributes to be written without values, which is more concise.

Example (Correct):

<input type="checkbox" checked disabled>
<button type="submit" disabled>Submit</button>

Example (Incorrect):

<input type="checkbox" checked="checked" disabled="disabled">

Summary:

• Attribute values MUST use double quotes.
• Attributes SHOULD follow a consistent order (id, class, name, data-*, etc.).
• Boolean attributes SHOULD be written without values.