HTML Tips That Most Developers Overlook

HTML is not just markup. These tags and attributes will level up your pages.

Semantic HTML (More Than Just divs)

<!-- ❌ Non-semantic -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">
    <div class="title">...</div>
    <div class="content">...</div>
  </div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ Semantic (accessible, SEO-friendly) -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
    <p>Content here...</p>
  </article>
  <aside>Sidebar content</aside>
</main>
<footer>...</footer>

<!-- Benefits:
     - Screen readers understand the structure
     - SEO: search engines know what's important
     - Easier to style with CSS
     - Better default behavior on mobile -->

Meta Tags You Need

<head>
  <!-- Essential -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO -->
  <title>Your Page Title — Keep under 60 chars</title>
  <meta name="description" content="Page description — keep under 160 chars">
  <link rel="canonical" href="https://yoursite.com/page">

  <!-- Open Graph (social sharing preview) -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Description for social cards">
  <meta property="og:image" content="https://yoursite.com/og-image.jpg">
  <meta property="og:url" content="https://yoursite.com/page">
  <meta property="og:type" content="article">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Page Title">
  <meta name="twitter:description" content="Description">
  <meta name="twitter:image" content="https://yoursite.com/twitter-image.jpg">

  <!-- Performance -->
  <meta name="theme-color" content="#2563eb">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://api.example.com">

  <!-- Security -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Useful Attributes

<!-- Download attribute (force download instead of navigate) -->
<a href="/report.pdf" download="q4-report.pdf">Download PDF</a>

<!-- Lazy load images (native!) -->
<img src="photo.jpg" alt="Description" loading="lazy" decoding="async">

<!-- Responsive images -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

<!-- No-referrer for external links (privacy) -->
<a href="https://external-site.com" rel="noopener noreferrer" referrerpolicy="no-referrer">
  External link
</a>

<!-- Target for links (open in new tab safely) -->
<a href="/page" target="_blank" rel="noopener noreferrer">Open new tab</a>

<!-- Autocomplete hints for forms -->
<input type="text" name="email" autocomplete="email" placeholder="you@example.com">
<input type="text" name="address" autocomplete="street-address">

<!-- Input modes (shows right keyboard on mobile) -->
<input type="tel" inputmode="tel" placeholder="Phone number">
<input type="text" inputmode="numeric" placeholder="Enter number">
<input type="text" inputmode="email" placeholder="Email address">
<input type="text" inputmode="search" placeholder="Search...">

<!-- Contenteditable (rich text editing) -->
<div contenteditable="true" spellcheck="true">
  This text can be edited by the user!
</div>

<!-- Data attributes (custom data in HTML) -->
<button data-user-id="123" data-action="delete">Delete User</button>
<script>
  document.querySelector('button').dataset.userId; // "123"
  document.querySelector('button').dataset.action; // "delete"
</script>

Accessibility Basics

<!-- Images MUST have alt text -->
<img src="chart.png" alt="Q4 revenue increased by 23% compared to Q3">
<img src="decorative.png" alt=""> <!-- Decorative = empty alt -->

<!-- Form labels (click label to focus input) -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email">

<!-- Or implicit label (no for/id needed) -->
<label>Email Address <input type="email" name="email"></label>

<!-- ARIA labels when visual label isn't enough -->
<button aria-label="Close dialog">×</button>
<span aria-label="Rating: 4 out of 5 stars">★★★★☆</span>

<!-- Live regions (screen readers announce changes) -->
<div aria-live="polite" role="status">
  <!-- Content updates will be announced -->
</div>

<!-- Skip navigation link (keyboard users love this) -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<main id="main-content">
  ...
</main>

<!-- Meaningful heading hierarchy (don't skip levels!) -->
<h1>Main Title</h1>
  <h2>Section One</h2>
    <h3>Subsection A</h3>
    <h3>Subsection B</h3>
  <h2>Section Two</h2>

Underused Tags

<!-- Details/Summary (accordion without JS!) -->
<details open>
  <summary>Click to expand</summary>
  <p>This content is hidden by default.</p>
</details>

<!-- Mark (highlighted text) -->
<p>The <mark>most important part</mark> should stand out.</p>

<!-- Time (machine-readable dates) -->
<time datetime="2026-05-16">May 16, 2026</time>
<time datetime="2026-05-16T19:30">7:30 PM today</time>

<!-- Abbreviation with expansion -->
<abbr title="Application Programming Interface">API</abbr>

<!-- Small (fine print, legal text) -->
<small>&copy; 2026 Your Company. All rights reserved.</small>

<!-- Superscript/Subscript -->
<p>H<sub>2</sub>O is water. E=mc<sup>2</sup>.</p>

<!-- Code blocks -->
<code>const x = 42;</code>
<pre><code>function hello() {
  return 'world';
}</code></pre>

<!-- Figure with caption -->
<figure>
  <img src="diagram.png" alt="System architecture diagram">
  <figcaption>Figure 1: System architecture showing data flow</figcaption>
</figure>

<!-- Blockquote with citation -->
<blockquote cite="https://example.com/speech">
  <p>The only way to do great work is to love what you do.</p>
  <footer>— <cite>Steve Jobs</cite></footer>
</blockquote>

<!-- Dialog element (native modal!) -->
<dialog id="modal">
  <h2>Confirm Action</h2>
  <p>Are you sure you want to proceed?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>
<script>
  const dialog = document.getElementById('modal');
  dialog.showModal(); // Opens as modal (blocks rest of page)
  // dialog.show(); // Opens as non-modal

  dialog.addEventListener('close', () => {
    if (dialog.returnValue === 'confirm') {
      doAction();
    }
  });
</script>

HTML Validation

# Validate your HTML online or via CLI
# https://validator.w3.org/

# Common mistakes to avoid:
# ❌ Missing alt on images
# ❌ Missing form labels
# ❌ Empty button without accessible name
# ❌ Div where a button should be (no keyboard support!)
# ❌ Missing lang attribute on <html>
# ❌ Heading hierarchy skip (h1 → h3)
# ❌ Multiple h1s on one page