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>© 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
What's your favorite HTML tip? Did I miss anything important?
Follow @armorbreak for more web development content.