Indentation and formatting

The Importance of Indentation and Formatting

Code indentation and formatting directly impact readability and maintainability. Good indentation habits can enhance team collaboration efficiency and reduce errors caused by messy formatting. Although HTML, as a markup language, does not have strict indentation requirements, consistent formatting standards are crucial for large-scale projects.

Basic Indentation Rules

HTML documents should use 2 spaces as the standard indentation unit. Tabs may display with varying widths in different editors and are therefore not recommended. Each nested level should increase the indentation by one level:

<div>
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
  </ul>
</div>

Self-closing tags do not require additional indentation and should align with the parent element:

<img src="image.jpg" alt="Example Image">

Formatting for Elements with Multiple Attributes

When an element contains multiple attributes, each attribute should occupy its own line and be indented by one level:

<input
  type="text"
  id="username"
  name="user_name"
  required
  maxlength="20"
>

Boolean attributes (such as disabled, required, etc.) can omit values to maintain a clean format:

<button disabled>Not Clickable</button>

Formatting Long Content

For elements containing long text or complex content, it is recommended to break the content into multiple lines with proper indentation:

<p>
  This is a very long piece of text content. To maintain code readability,
  we split it into multiple lines while preserving the correct indentation level.
  This makes the DOM structure clearer during future maintenance.
</p>

Indentation Standards for Template Languages

When using template syntax like Vue or React, maintain the same indentation principles as HTML:

function Component() {
  return (
    <div className="container">
      <Header />
      <main>
        <Article
          title="Example Article"
          content="..."
        />
      </main>
    </div>
  )
}

Handling Special Cases

Elements such as <pre> and <code> require preserving their original formatting, so forced indentation should not be applied:

<pre><code>function test() {
  console.log('Preserve original indentation');
}</code></pre>

Table elements can have relaxed indentation rules to improve readability:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
  </tr>
</table>

Automated Formatting Tools

It is recommended to use tools like Prettier or ESLint for automatic code formatting. Example configuration (.prettierrc):

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "css"
}

Editor configurations should enable "format on save" to ensure formatting rules are applied automatically upon saving.

Formatting Consistency in Team Collaboration

For team projects, add an .editorconfig file in the root directory:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

For mixed-technology stack projects, special attention should be paid to coordinating indentation between HTML and embedded scripts:

<script>
  // JavaScript code should follow the same indentation rules as HTML
  function init() {
    console.log('Initialization');
  }
</script>

Handling Formatting in Legacy Code

When dealing with legacy code, gradually refactor the formatting rather than making sweeping changes all at once. You can:

1. First, add formatting rule comments to the file.
2. Fix surrounding formatting when modifying specific features.
3. Ensure version control is in place before using tools for bulk formatting.

<!-- prettier-ignore -->
<div class="old-style">
<p>This code remains unchanged for now</p>  </div>

Accessibility Considerations in Formatting

Proper indentation helps screen readers parse content structure, especially for ARIA attribute arrangements:

<nav aria-label="Main Menu">
  <ul>
    <li>
      <a
        href="#home"
        aria-current="page"
      >
        Home
      </a>
    </li>
  </ul>
</nav>