HTML is easy, said every developer ever. HTML is deceptively simple. You open a tag, you close a tag, and something appears on screen. But beneath that simplicity lurk gotchas that can silently break your layout, wreck your SEO, or make your site look unprofessional when shared on social media. In this world of frameworks and libraries, its easy to miss some of the basic stuff that needs to be taken care of in your webpage, because your frameworks boilerplate code adds up most of the stuff and takes care of the basics. But its always good to know some of them that are important or arent added by your framework by default. Here are the critical HTML pitfalls to avoid and how to fix them immediately. 1. Forgetting the DOCTYPE Declaration Skipping the doctype triggers something called as the quirks mode, where browsers start behaving like it's 1999. This results in inconsistent CSS rendering and unpredictable JavaScript behaviour across browsers. quirks mode Always declare it at the very top of your HTML file: Always declare it at the very top of your HTML file: html> html> 2. Missing the Character Encoding Meta Tag Without proper character encoding, special characters turn into garbled symbols i.e. (). This breaks accented letters, smart quotes, and emojis, and it makes your webpage content look broken and unprofessional. Place this inside the  tag: Place this inside the <meta charset="UTF-8"> <meta charset="UTF-8"> 3. Forgetting the Viewport Meta Tag Has it ever happened to you? Your page zooms awkwardly when users double-tap on mobile; Thats because you're missing the viewport meta tag. Without it, your site isn't truly responsive, regardless of your CSS. Add this to your  section: Add this to your section <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4. Skipping Open Graph Meta Tags Ever shared your blog on LinkedIn, Twitter, or Facebook only to see a bare URL with no preview card? That's because Open Graph tags are missing. These tags control how your content appears when shared on social media. Add these OG tags for rich sharing previews: Add these OG tags for rich sharing previews: <meta property="og:title" content="My Blog Title"><meta property="og:description" content="A quick guide to avoiding HTML gotchas."><meta property="og:image" content="https://example.com/preview.png"><meta property="og:url" content="https://example.com/blog"> <meta property="og:title" content="My Blog Title"><meta property="og:description" content="A quick guide to avoiding HTML gotchas."><meta property="og:image" content="https://example.com/preview.png"><meta property="og:url" content="https://example.com/blog"> Pro tip: Also consider adding Twitter Card tags for optimal Twitter/X previews. Pro tip: 5. Ignoring Content Security Policy Content Security Policy (CSP) helps prevent cross-site scripting (XSS) attacks and other code injection vulnerabilities. It tells browsers which scripts, styles, and resources are allowed to run on your page. Start with a basic CSP meta tag: Start with a basic CSP meta tag: <meta http-equiv="Content-Security-Policy"       content="default-src 'self'; script-src 'self' 'unsafe-inline';"> <meta http-equiv="Content-Security-Policy"       content="default-src 'self'; script-src 'self' 'unsafe-inline';"> Note: This is a starting point. Adjust the policy based on your specific needs and third-party resources. Note: 6. Improper Nesting of Elements Browsers are forgiving, but invalid HTML nesting leads to unpredictable rendering and can break JavaScript that relies on the DOM structure. Common nesting mistakes: Common nesting mistakes: <span><div>Wrong!div>span><p><div>Also wrong!div>p> <span><div>Wrong!div>span><p><div>Also wrong!div>p> Follow these nesting rules: Follow these nesting rules: Inline elements (<span>, <a>, <strong>) should never contain block-level elements (<div>, <section>, <p>)Tags should only wrap inline content, never block-level elementsWhen in doubt, check the HTML specification for content models Inline elements (<span>, <a>, <strong>) should never contain block-level elements (<div>, <section>, <p>) <span> <a> <strong> never <div> <section> <p> Tags should only wrap inline content, never block-level elements Tags should only wrap inline content, never block-level elements When in doubt, check the HTML specification for content models When in doubt, check the HTML specification for content models Conclusion Conclusion These six HTML gotchas might seem minor, but they're the difference between a professional website and one that breaks in subtle, embarrassing ways. Take five minutes to audit your HTML templatesyour future self (and your users) will thank you. These six HTML gotchas might seem minor, but they're the difference between a professional website and one that breaks in subtle, embarrassing ways. Take five minutes to audit your HTML templatesyour future self (and your users) will thank you. Quick checklist for your next project: Quick checklist for your next project: DOCTYPE declaration at the topUTF-8 character encodingViewport meta tag for mobileOpen Graph tags for social sharingBasic Content Security PolicyValid HTML nesting DOCTYPE declaration at the top DOCTYPE declaration at the top UTF-8 character encoding UTF-8 character encoding Viewport meta tag for mobile Viewport meta tag for mobile Open Graph tags for social sharing Open Graph tags for social sharing Basic Content Security Policy Basic Content Security Policy Valid HTML nesting Valid HTML nesting Remember: browsers are forgiving, but that doesn't mean we should be sloppy. Clean HTML is the foundation of a reliable web experience. Remember: browsers are forgiving, but that doesn't mean we should be sloppy. Clean HTML is the foundation of a reliable web experience.

Polyfill This! Flat, Map, Filter & Reduce — The Hard Way

Read My Stories

Portfolio

6 HTML Pitfalls and Gotchas Every Developer Should Avoid

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Module Design Pattern Example in JavaScript

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

A Quick Module Design Pattern Example in JavaScript

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps