HTML Do's and Don'ts for Beginners

HTML do's and don'ts help you write clean, semantic, accessible, SEO-friendly, and maintainable web pages. This guide explains the most important HTML rules with practical examples in table format.

What Are HTML Do's and Don'ts?

HTML do's and don'ts are practical rules that help developers avoid common mistakes while building websites. Following these rules improves SEO, accessibility, performance, responsive design, browser compatibility, and long-term code quality.

<main>
  <article>
    <h1>HTML Best Practices</h1>
    <p>Write meaningful HTML before adding CSS or JavaScript.</p>
  </article>
</main>

HTML Do's and Don'ts Table

The following table explains what you should do and what you should avoid when writing modern HTML.

#	Category	Do	Don't	Why It Matters
1	Document	Use `<!doctype html>`.	Do not skip the doctype.	It helps browsers render pages in standards mode.
2	Language	Use `<html lang="en">`.	Do not leave the page language undefined.	It improves accessibility, translation, and SEO.
3	Charset	Use `<meta charset="UTF-8" />`.	Do not rely on browser guessing.	It supports most characters and symbols correctly.
4	Responsive	Add the viewport meta tag.	Do not publish pages without mobile scaling.	It makes pages display correctly on mobile devices.
5	SEO	Write a unique page title.	Do not reuse the same title on every page.	Unique titles help search engines understand each page.
6	SEO	Add a helpful meta description.	Do not keyword-stuff descriptions.	Good descriptions improve search result clarity.
7	Headings	Use one clear `<h1>`.	Do not use headings only for visual size.	Headings define page structure for users and crawlers.
8	Headings	Use heading levels in order.	Do not jump randomly from `<h1>` to `<h5>`.	Logical headings improve readability and accessibility.
9	Semantic HTML	Use `<main>`, `<article>`, and `<section>`.	Do not use `<div>` for everything.	Semantic tags explain the meaning of content.
10	Navigation	Use `<nav>` for important menus.	Do not create navigation with unrelated wrappers only.	It helps screen readers and search engines identify navigation.
11	Links	Use descriptive link text.	Do not use vague text like “click here”.	Descriptive links improve SEO and accessibility.
12	Links	Use `rel="noopener noreferrer"` with new-tab external links.	Do not use `target="_blank"` alone.	It improves security and performance.
13	Images	Add meaningful `alt` text for useful images.	Do not use empty or vague alt text for important images.	Alt text improves accessibility and image SEO.
14	Images	Use `alt=""` for decorative images.	Do not describe purely decorative images unnecessarily.	It prevents screen readers from reading useless content.
15	Images	Set image `width` and `height`.	Do not allow images to cause layout shift.	Image dimensions improve visual stability.
16	Images	Use `loading="lazy"` for below-the-fold images.	Do not lazy-load important hero images unnecessarily.	Lazy loading improves performance when used correctly.
17	Forms	Use visible `<label>` elements.	Do not rely only on placeholder text.	Labels improve form accessibility and usability.
18	Forms	Use the correct input type.	Do not use `type="text"` for every field.	Correct input types improve validation and mobile keyboards.
19	Forms	Use `name` attributes on form fields.	Do not forget `name` when submitting data.	The name attribute identifies submitted form values.
20	Forms	Use `required` and validation attributes carefully.	Do not depend only on client-side validation.	Client-side validation improves UX, but server validation is still needed.
21	Tables	Use tables for tabular data.	Do not use tables for page layout.	Tables should represent rows and columns of data.
22	Tables	Use `<th>` and `<caption>`.	Do not create complex tables without headings.	Header cells and captions improve accessibility.
23	Media	Add captions or transcripts for videos.	Do not rely only on audio or video content.	Captions help accessibility and content understanding.
24	Media	Use controls for audio and video.	Do not autoplay media with sound.	Users should control playback.
25	Iframes	Add a meaningful iframe `title`.	Do not embed iframes without accessible labels.	Iframe titles help screen reader users understand embedded content.
26	Performance	Use `defer` for non-critical scripts.	Do not block HTML parsing with unnecessary scripts.	Deferred scripts can improve page loading.
27	Classes and IDs	Use classes for reusable styling.	Do not use IDs heavily for CSS styling.	Classes are easier to reuse and maintain.
28	Classes and IDs	Keep IDs unique on the page.	Do not duplicate ID values.	Duplicate IDs break labels, anchors, ARIA, and scripts.
29	Accessibility	Use native HTML before ARIA.	Do not add ARIA when native HTML already works.	Native elements are simpler and more reliable.
30	Code Quality	Use lowercase tags and attributes.	Do not mix random casing styles.	Consistent markup is easier to read and maintain.

HTML SEO Do's and Don'ts

Do	Don't
Use a clear title and meta description.	Do not duplicate metadata across many pages.
Use semantic headings and sections.	Do not use headings only for visual styling.
Use descriptive internal links.	Do not use vague anchor text like “read more” everywhere.
Add useful image alt text.	Do not stuff keywords into alt text.
Keep important content in readable HTML.	Do not hide important text inside images only.

HTML Accessibility Do's and Don'ts

Do	Don't
Use semantic HTML landmarks.	Do not build everything with generic `<div>` tags.
Use labels for form inputs.	Do not rely only on placeholder text.
Keep keyboard focus visible.	Do not remove outlines without replacement.
Use real buttons for actions.	Do not use clickable `<div>` elements as buttons.
Use captions or transcripts for important media.	Do not make audio/video the only source of key information.

HTML Clean Code Do's and Don'ts

<article class="tutorial-card">
  <h2>HTML Forms</h2>
  <p>Learn how to create accessible forms.</p>
</article>

.tutorial-card {
  padding: 1rem;
  border-radius: 0.75rem;
}

Do use consistent indentation.
Do use meaningful class names.
Do keep HTML for structure, CSS for design, and JavaScript for behavior.
Do not write unnecessary nested wrappers.
Do not use inline styles everywhere.
Do not leave unused or broken markup in production pages.

Common HTML Mistakes to Avoid

Missing <!doctype html>.
Missing viewport meta tag.
Using duplicate IDs.
Skipping alt text for meaningful images.
Using tables for layout.
Using buttons without proper type.
Using non-semantic markup everywhere.
Publishing without testing keyboard navigation.
Using obsolete tags like <font> or <center>.

Key Takeaways

Use semantic HTML to describe page meaning clearly.
Use SEO-friendly titles, descriptions, headings, links, and alt text.
Use accessible labels, buttons, focus styles, and media alternatives.
Use tables for data, forms for input, and CSS for layout.
Keep HTML clean, valid, responsive, and easy to maintain.

Pro Tip

Before publishing an HTML page, check the title, meta description, headings, alt text, labels, links, mobile layout, and keyboard navigation.