The Last HTML Cheat Sheet You’ll Ever Need to Bookmark

1. Introduction: Why HTML Still Matters

The Hook: Explain that while frameworks like React or Vue are popular, they all compile down to HTML.

The Problem: Developers often rely on "Div-itis" (using only <div> tags), which hurts SEO and accessibility.

The Solution: A quick-glance guide to writing cleaner, faster code.

2. Document Anatomy (The "Skeleton")

The Boilerplate: Briefly show the <!DOCTYPE html>, <html>, <head>, and <body> tags.

The Meta Power: Highlight the <meta name="viewport"> tag for mobile responsiveness and <title> for SEO.

3. Mastering Semantic Layouts (The SEO Section)

Why it matters: Explain how Google’s bots read your site.

The Key Players:

Pro Tip: Use a visual diagram or a small code block showing a "Correct vs. Incorrect" layout.

4. Forms and Data Collection

Essential Tags: <form>, <label>, <input>, and <textarea>.

Input Types: Mention modern types like email, tel, date, and range.

Accessibility Note: Why the for attribute in a <label> must match the id of an <input>.

5. Media & Links: Beyond Just Images

Images: Proper use of the alt attribute for screen readers.

Links: When to use target="_blank" and why you need rel="noopener".

Embedding: A quick mention of <iframe>, <video>, and <audio>.

6. Global Attributes You Use Daily

Class vs. ID: When to use which.

Data Attributes: Using data-* to store custom information for JavaScript.

Title & Lang: Small attributes that make a big difference for UX and translation.

7. Common Pitfalls (What to Avoid)

Self-closing tag mistakes.

Nesting <a> tags inside other <a> tags.

Forgetting the lang attribute in the <html> tag.

Digiviso