How to Format HTML: Semantic Hierarchy, Void Elements, and Accessibility Standards
Learn best practices for formatting HTML5 documents: semantic markup structure, void element handling, attribute ordering, and accessibility linting.
The Importance of Semantic HTML Structure
Clean HTML formatting is not merely cosmetic; it directly shapes accessibility (A11y) tree generation for screen readers, search engine indexing (SEO), and DOM parsing efficiency. Avoid "div soup" by structuring pages with semantic landmark elements (<header>, <nav>, <main>, <article>, <section>, <footer>).
Production HTML5 Document Boilerplate
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoShareX | Developer Engineering Utilities</title>
<meta name="description" content="Zero-knowledge, client-first developer utilities and P2P sharing.">
<!-- Security & Canonical Headers -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<link rel="canonical" href="https://cosharex.com/blog">
<!-- Stylesheets & Module Scripts -->
<link rel="stylesheet" href="/styles/main.css">
<script type="module" src="/scripts/app.js" defer></script>
</head>
<body>
<header role="banner">
<nav aria-label="Main Navigation">...</nav>
</header>
<main id="main-content" role="main">
<article>...</article>
</main>
<footer role="contentinfo">...</footer>
</body>
</html>Void Elements vs Self-Closing Tags in HTML5
In HTML5, void elements cannot have child nodes and do not require closing tags. While XML/XHTML mandated trailing slashes (<img />), standard HTML5 treats trailing slashes on void elements as optional syntactical noise:
| Void Element | Standard HTML5 Formatting | XHTML Legacy Formatting | Notes |
|---|---|---|---|
| Image | <img src="hero.webp" alt="Dashboard preview"> | <img src="hero.webp" alt="..." /> | Always include descriptive `alt` text |
| Input | <input type="text" name="query"> | <input type="text" name="query" /> | Always associate with `<label>` |
| Line Break | <br> | <br /> | Use CSS margin/padding for layout spacing instead |
| Horizontal Rule | <hr> | <hr /> | Represents a thematic break in content |
| Meta / Link | <meta charset="UTF-8"> | <meta charset="UTF-8" /> | Place in `<head>` |
Consistent Attribute Ordering Conventions
Format attributes logically from structural identity to presentation and event handlers:
<!-- Recommended Attribute Order: id -> class -> name/type -> data-* -> aria-* -> event handlers -->
<button
id="submit-transfer-btn"
class="btn btn-primary btn-lg"
type="submit"
data-analytics="start-transfer"
aria-label="Initiate peer-to-peer file transfer"
aria-disabled="false"
>
Send Files Securely
</button>Script Loading: module vs defer vs async
Placing unadorned <script src="bundle.js"> tags in the document <head> blocks the HTML parser and halts First Contentful Paint (FCP). Modern web formatting follows strict script loading conventions:
| Attribute | HTML Parsing Blocked? | Execution Timing | Best Use Case |
|---|---|---|---|
| `type="module"` | No (Deferred automatically) | Executes after DOM parsing, in strict mode | Modern ES modules, React/Vue/Next.js client entry points |
| `defer` | No | Executes after HTML is fully parsed, preserving source order | Legacy monolithic scripts, polyfills, third-party libraries |
| `async` | No | Executes immediately as soon as the script download completes (out of order) | Independent analytics trackers (Google Analytics, Plausible) |
Accessibility: ARIA & Form Label Formatting
Always format form controls with explicit for attribute bindings to corresponding <label> tags, ensuring that screen readers announce field requirements unambiguously:
<div class="form-group">
<label for="room-passphrase" class="form-label">
Room Encryption Passphrase <span aria-hidden="true">*</span>
</label>
<input
id="room-passphrase"
class="form-control"
type="password"
required
aria-required="true"
aria-describedby="passphrase-help"
>
<small id="passphrase-help" class="form-hint">
Used locally to derive AES-256 keys via Web Crypto. Never sent to servers.
</small>
</div>Code Formatter & Converter Suite
Validate, format, minify, and convert JSON, SQL, YAML, XML, and code dialects directly on your local machine.
Frequently Asked Questions
Why should I avoid deeply nested DOM hierarchies?
Excessive DOM depth (>32 levels) increases browser memory overhead, slows down style recalculation passes, and degrades touch responsiveness on mobile devices.
What is the standard HTML indentation in 2026?
Two spaces is the recognized standard across Prettier and ESLint HTML plugins.
Conclusion
Read more tools and developer guides on CoShareX.
Related Articles
How to Format CSS: Specificity Management, Cascade Layers (@layer), and Stylelint Rules
Master CSS code formatting and architecture: logical property ordering, Cascade Layers (@layer), CSS Custom Properties, and automated Stylelint standards.
Developer ToolsHow to Format JavaScript: AST-Driven Code Formatting, ASI Traps, and Prettier Standards
A comprehensive guide to JavaScript and TypeScript code formatting: AST parsers, Automatic Semicolon Insertion (ASI) edge cases, and Prettier/Biome configurations.
Developer ToolsHow to Format SQL Queries: CTEs, JOIN Alignment, Window Functions, and SQLFluff Standards
Master SQL query formatting: uppercase keyword standards, Common Table Expression (CTE) indentation, JOIN alignment, window functions, and SQLFluff linting.