HTML Syntax
Clean and structured HTML is the foundation for reliable and future-proof interfaces.
By following best practices, developers ensure that HTML is semantic, accessible, consistent, and maintainable across all projects. This improves SEO, usability, debugging, and team collaboration.
Use semantic HTML elements
Use semantic tags (<header>, <main>, <article>, <section>, <nav>, etc.) instead of generic <div> and <span>. Semantics improve accessibility, SEO, and maintainability.
1<div class="header">
2 <div class="nav">...</div>
3</div>1<header>
2 <nav>...</nav>
3</header>Use lowercase for all tag and attribute names
HTML is case-insensitive, but consistent use of lowercase improves readability and avoids confusion with JSX or XML-style conventions.
<div class="container">Always close HTML tags
Unclosed or self-closing tags without slashes can lead to rendering bugs and inconsistent DOM structure.
1<img src="logo.png">
2<br>
3<div>1<img src="logo.png" />
2<br />
3<div>...</div>Use double quotes for attribute values
Stick to double quotes ("...") around attribute values. It’s the most widely accepted convention and avoids conflicts with JavaScript and JSX.
<input type="text" placeholder="Name" />Avoid Inline Styles
Inline styles break separation of concerns and are harder to override and maintain. Use CSS/SCSS classes instead.
<div style="color: red; margin-top: 10px">Hello</div><div class="welcome-message">Hello</div>Use meaningful alt text for images
The alt attribute is critical for accessibility and fallback content. Use descriptive but concise alt text that reflects the image’s purpose.
<img src="logo.png" alt="image" /><img src="logo.png" alt="Company logo" />Follow logical heading hierarchy
Use headings (<h1> to <h6>) in a logical, nested order. Never skip levels (e.g. <h1> directly to <h4>), as this breaks accessibility and outline structure.
1<h1>Main title</h1>
2<h4>Subsection</h4>1<h1>Main title</h1>
2<h2>Subsection</h2>Avoid extra wrappers
Do not use <div> or <span> elements unless necessary. Prefer semantic or structural tags, and avoid “div soup.”
1<div>
2 <div>
3 <span>Click me</span>
4 </div>
5</div><button>Click me</button>Use 'aria-*' attributes to enhance accessibility
When using non-semantic tags for UI components, add aria-* attributes to provide additional context for screen readers.
<div onclick="openMenu()">Menu</div><div role="button" aria-label="Open menu" tabindex="0" onclick="openMenu()">Menu</div>Use 'data-*' attributes for behavior — not styling
data-* attributes are ideal for custom logic and JS hooks, but should not be used as styling selectors.
<div data-button-style="primary">Submit</div><div class="button button--primary" data-role="submit">Submit</div>Keep indentation and nesting consistent
Use 2 spaces for indentation (never tabs) and keep HTML nesting clean. Avoid overly deep trees or inconsistent spacing.
1<ul>
2 <li>Item 1
3 <ul>
4 <li>Subitem</li>
5 </ul>
6</li>
7</ul>1<ul>
2 <li>
3 Item 1
4 <ul>
5 <li>Subitem</li>
6 </ul>
7 </li>
8</ul>Always associate '<label>' with form inputs
Use <label> with a for attribute matching the input’s id, or wrap the input inside the label. This improves accessibility and clickable area.
<input type="email" placeholder="Email">1<label for="email">Email</label>
2<input type="email" id="email" placeholder="you@example.com">
3
4<!-- or -->
5
6<label>
7 Email
8 <input type="email" placeholder="you@example.com">
9</label>Define 'input' attributes
Make form inputs self-descriptive and accessible by specifying the correct type, a consistent name, and a required attribute when applicable.
<input type="password" name="user_password" required>Use correct interactive tags
Use <button> for actions and <a> for navigation. Never use <div> or <span> for interactive behavior without role and tabindex.
<div onclick="goToPage()">Go</div>1<a href="/target-page">Go</a>
2<!-- or -->
3<button onclick="goToPage()">Go</button>Always define 'lang' in '<html>' and use correct metadata
Set lang for accessibility and SEO. Include <meta charset>, <meta viewport> and a title for responsive, accessible, and indexed pages.
1<html lang="en">
2<head>
3 <meta charset="UTF-8">
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Page Title</title>
6</head>
7<body>
8</body>
9</html>Keep 'doctype' and structure minimal but correct
Always start documents with the HTML5 <!DOCTYPE html> declaration and avoid excessive wrappers or legacy HTML.
Use 'defer' for scripts when possible
To avoid blocking rendering, add defer to external scripts (unless they must execute immediately). This ensures HTML loads first, improving performance.
<script src="/main.js" defer></script>Place '<script>' and '<link>' elements correctly
Place
<link>for styles in<head>.Place
<script>tags at the end of<body>or use defer if in<head>to avoid blocking render.
1<head>
2 <link rel="stylesheet" href="styles.css">
3 <script src="app.js" defer></script>
4</head>Ensure focusable elements are reachable with keyboard
Use native focusable elements (<button>, <a href>, <input>) or explicitly add tabindex="0" to custom components to support keyboard navigation.
<div onclick="toggleMenu()">Menu</div><div role="button" tabindex="0" onclick="toggleMenu()">Menu</div>Use landmarks and roles for accessibility structure
Define key layout areas with landmark roles (role="main", role="navigation", etc.) or semantic equivalents (<main>, <nav>) to help screen readers understand the page.
1<div id="container">
2 <div class="menu">...</div>
3</div>1<main role="main">
2 <nav role="navigation">...</nav>
3</main>Always use 'rel' and 'target' where needed for links and resources
When linking resources or external URLs, be explicit about purpose and behavior using attributes like rel="noopener noreferrer" and target="_blank".
<a href="https://external.site.com" target="_blank" rel="noopener noreferrer">Visit</a>