Let's be honest — nobody memorizes every HTML tag. Even developers with ten years of experience Google stuff. That's completely normal. What matters is knowing where to look quickly. This HTML cheat sheet is that place. Everything you need, organized cleanly, with working code examples you can copy and use right now.
Want to test any HTML tag from this cheat sheet instantly? Paste the code into our free HTML Editor Online Pro and see it render live in your browser — no installation, no signup needed.
Every HTML file you ever create needs to start with this basic structure. Think of it as the skeleton that holds everything else. Get this right once, and you can just copy it as your starting template forever.
Here is what every single line does and why it matters:
lang attribute is important for screen readers and SEO — it tells Google and accessibility tools what language the page is in.Text is the backbone of every webpage. These are the HTML tags you will use more than any others — every day, in every project.
HTML gives you six levels of headings. Think of them like a book: h1 is the book title, h2 is a chapter title, h3 is a section within that chapter, and so on. Every page should have exactly one h1 — Google uses it as the primary signal for what the page is about.
SEO Tip: Use your target keyword in the h1. Use related keywords naturally in h2 and h3 headings. Google reads your headings first when deciding what a page is about.
Links are what makes the web a "web." The anchor tag <a> is one of the most powerful — and most commonly misused — tags in HTML. Here is everything you need to know about it.
Always add rel="noopener noreferrer" when using target="_blank". Without it, the new tab can access your page through window.opener — a security vulnerability. This is a very common mistake.
Images can make or break a webpage — both visually and in terms of performance. Here is how to use them correctly in HTML.
SEO Tip: The alt attribute is not optional — it is essential. Google's image search reads alt text to understand what the image shows. Also, missing alt text is an accessibility failure. Always write descriptive, specific alt text for every image.
Lists are one of the most underrated HTML elements. Google loves well-structured lists — they often get pulled into featured snippets at the top of search results. Use them whenever you are listing items, steps, or definitions.
HTML tables get a bad reputation because people used to use them for page layouts — which is wrong. Tables are for tabular data only — things that actually belong in rows and columns. When used correctly, they are very useful and semantic.
The full table tag reference:
| Tag | Purpose |
|---|---|
<table> | The container for the entire table |
<thead> | Groups the header row(s) — tells the browser and screen readers this is the header |
<tbody> | Groups the body rows — the main data content |
<tfoot> | Groups footer row(s) — totals, summaries, notes |
<tr> | Table row — wraps one row of cells |
<th> | Table header cell — bold and centered by default, semantically a header |
<td> | Table data cell — regular data content |
colspan="n" | Attribute to make a cell span across n columns |
rowspan="n" | Attribute to make a cell span across n rows |
Forms are how websites collect information from users — login forms, contact forms, search bars, checkout pages. HTML forms are powerful and complex. Here is everything you need in one place.
All input types available in HTML5:
| Type | What it does |
|---|---|
type="text" | Plain single-line text input |
type="email" | Email input with built-in format validation |
type="password" | Password field — hides characters as you type |
type="number" | Numeric input with optional min/max/step |
type="tel" | Phone number input — shows numeric keyboard on mobile |
type="url" | URL input with format validation |
type="date" | Date picker — shows a calendar UI |
type="time" | Time picker |
type="checkbox" | Checkbox — toggles true/false |
type="radio" | Radio button — one option from a group |
type="range" | Slider input for a range of values |
type="color" | Color picker UI |
type="file" | File upload input |
type="search" | Search input with a clear button |
type="hidden" | Hidden field — not visible, but submitted with form |
type="submit" | Submit button |
type="reset" | Resets all form fields to defaults |
Before HTML5, developers built page layouts using <div> for everything — <div id="header">, <div id="footer">, <div id="nav">. HTML5 introduced semantic elements that tell both humans and search engines exactly what each part of the page is.
Using semantic HTML is one of the easiest SEO improvements you can make. Google understands the structure of your page much better when you use <header>, <nav>, <main>, and <footer> instead of generic <div> tags everywhere.
| Semantic Tag | When to use it |
|---|---|
<header> | Site header or the header of a section/article. Contains logo, nav, titles. |
<nav> | Navigation links — main menu, breadcrumbs, pagination |
<main> | The main content area of the page. Only one per page. |
<article> | Self-contained content that makes sense on its own: blog post, news article, product card |
<section> | A thematic group of content, usually with a heading. Like a chapter in a book. |
<aside> | Content related to but not part of the main content: sidebars, callouts, ads |
<footer> | Footer of the page or section. Copyright, links, contact info. |
<address> | Contact information for the nearest article or body element |
<time> | A specific time or date — use the datetime attribute for machine-readable format |
Meta tags live in the <head> section and are invisible on the page — but they are extremely important for SEO, social media sharing, and how your page appears in search results. Here are the ones that genuinely make a difference.
Title tag should be 50–60 characters max. Meta description should be 150–160 characters. These are what users see in Google before clicking — write them like ads, not afterthoughts.
These attributes can be added to almost any HTML element — they are not specific to one tag.
| Attribute | What it does | Example |
|---|---|---|
id | Unique identifier for one element on the page. Used by CSS and JS. | id="main-header" |
class | Reusable label for styling multiple elements with CSS | class="btn btn-primary" |
style | Inline CSS styles — avoid for large projects, useful for quick tests | style="color:red" |
title | Tooltip text shown on hover | title="Click to submit" |
lang | Language of the element's content | lang="fr" |
hidden | Hides the element — display:none equivalent | hidden |
tabindex | Controls keyboard tab order | tabindex="1" |
contenteditable | Makes element editable by the user in the browser | contenteditable="true" |
data-* | Custom data attributes for storing extra info — accessible via JS | data-user-id="123" |
aria-label | Accessibility label for screen readers | aria-label="Close menu" |
draggable | Makes the element draggable | draggable="true" |
spellcheck | Enable/disable browser spell checking | spellcheck="false" |
Copy any code example from this HTML cheat sheet, paste it into HTML Editor Online Pro, and see it rendered live in your browser. Switch between mobile, tablet, and desktop views. No installation, no signup — completely free.
⚡ Open HTML Editor Free →Q: How many HTML tags are there in total?
HTML5 officially has over 110 tags. But realistically, about 30–40 tags cover 95% of everything you will ever build. This cheat sheet covers all the important ones. You do not need to memorize every tag — just know where to look.
Q: What is the difference between <strong> and <b>?
Both make text bold visually. But <strong> has semantic meaning — it tells search engines and screen readers "this text is important." Use <strong> for genuinely important content. Use <b> only when you want bold styling without any semantic weight — like styling a product name in a list.
Q: What is the difference between <div> and <span>?
<div> is a block-level element — it takes up the full width and starts on a new line. <span> is an inline element — it sits inside text without breaking the line. Use <div> for sections of layout. Use <span> to style specific words or characters within text.
Q: Do HTML tags need to be lowercase?
HTML is not case-sensitive, so technically no. But lowercase is the universal standard convention. Using uppercase tags like <DIV> is outdated and will make other developers (and future you) uncomfortable. Always use lowercase.
Q: What is a void element in HTML?
A void element is a tag that does not have a closing tag because it cannot contain content. Examples include <img>, <input>, <br>, <hr>, <meta>, and <link>. In HTML5, you do not need to self-close them with a slash (like <br />) — that was an XHTML requirement. Plain <br> is perfectly valid HTML5.
Q: Should I use HTML tables for page layout?
Absolutely not. Tables are for tabular data — information that naturally belongs in rows and columns, like a spreadsheet. Using tables for page layout was common before CSS existed, but it is completely wrong in modern web development. Use CSS Flexbox or CSS Grid for layouts.