HTML Best Practices
HTML is forgiving — browsers render badly-structured markup without complaint — which means poor practices rarely show up as visible bugs, only as accessibility gaps, SEO weaknesses, and harder-to-maintain code.
Last updated 2026-09-08
Use semantic elements instead of generic divs for everything
<nav>, <article>, <button>, and <header> communicate meaning to browsers, screen readers, and search engines that a <div> with a class name doesn't. A div styled to look like a button still isn't keyboard-operable or announced correctly by assistive tech.
Always provide alt text for images
alt text is how screen-reader users understand an image's content, and it's also what search engines index for image search. A decorative image should have alt="" (explicitly empty, not omitted) to be correctly skipped by assistive tech.
Use a single, meaningful h1 per page, with a logical heading hierarchy below it
Headings form a structural outline of the page for both SEO and screen-reader navigation. Skipping levels (h1 straight to h4) or using multiple h1s undermines that structure.
Label every form input explicitly
A <label> correctly associated with its input (via for/id, or wrapping) is what lets a screen reader announce the field's purpose, and what makes clicking the label focus the input for all users.
Validate your HTML structure
Unclosed tags and invalid nesting can cause browsers to silently 'fix' the structure in ways that differ from what you intended, sometimes producing layout bugs that only show up in certain browsers.
Common Mistakes to Avoid
- ⚠Using <div onclick> instead of a real <button>, losing keyboard accessibility and semantics
- ⚠Missing or unhelpful alt text on meaningful images
- ⚠Multiple h1 tags on one page, or heading levels that skip around illogically
- ⚠Form inputs with no associated <label>
- ⚠Relying on placeholder text as a substitute for a real label
Frequently Asked Questions
Does semantic HTML actually affect SEO?
Yes, meaningfully — search engines use heading structure and semantic elements to understand content hierarchy and relevance, and this is one of the more reliable, low-effort SEO improvements available.
Is it ever okay to use a div as a button?
Not without significant extra work (tabindex, role='button', keyboard event handlers, ARIA attributes) to replicate what a real <button> gives you for free — using an actual button element is almost always simpler and more correct.