HTML
HTML Cheat Sheet
Every tag and attribute from the HTML track on one page, grouped in learning order. Print it, keep it next to your editor, and follow the lesson links when you need the full explanation.
Page structure Lesson
<!DOCTYPE html> | First line of every page; turns on standards mode |
<html lang="en"> | Root element; lang sets the page language |
<head>…</head> | Information about the page, not shown in the page itself |
<meta charset="utf-8"> | Character encoding; put it first in <head> |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Makes the page fit phone screens |
<title>Page title</title> | Text shown in the browser tab and search results |
<body>…</body> | Everything visible on the page |
Files, comments and checking Lesson
index.html | The default page a server shows for a folder |
about-us.html | Use lowercase names with hyphens, no spaces |
<!-- note to self --> | A comment; the browser ignores it |
Ctrl+U | View the page source in most desktop browsers |
F12 | Opens DevTools to inspect elements (most browsers on Windows) |
validator.w3.org | The official W3C checker for HTML mistakes |
Extra spaces and line breaks in your code collapse into a single space on the page.
Elements and attributes Lesson
<p>Some text</p> | Opening tag + content + closing tag = an element |
<br> <hr> <img> <input> | Void elements: no content and no closing tag |
<a href="/about/">About</a> | Attributes go inside the opening tag as name="value" |
<input type="checkbox" checked> | Boolean attribute: being present means true |
id="intro" | A unique name; use it only once per page |
class="card featured" | One or more class names, separated by spaces |
data-price="499" | Custom data your scripts can read |
hidden | Hides the element from everyone |
title="More info" | Tooltip text; don't put important info only here |
Close nested tags in reverse order: <p><strong>…</strong></p>.
Headings and text Lesson
<h1> … <h6> | Headings from most to least important; don't skip levels |
<p> | A paragraph |
<br> | Line break inside text, e.g. in an address |
<hr> | A thematic break between topics |
<strong> | Strong importance (bold by default) |
<em> | Stress emphasis (italic by default) |
<mark> | Highlighted text |
<sub> <sup> | Subscript and superscript, as in H₂O and x² |
<blockquote> | A long quotation in its own block |
<q> | A short quotation inside a sentence; adds quote marks |
<code> | A fragment of computer code |
<pre> | Preformatted text: keeps spaces and line breaks |
Links Lesson
<a href="https://example.com/"> | Absolute URL: full address to another site |
<a href="contact.html"> | Relative URL: a file next to this page |
<a href="/blog/"> | Root-relative URL: starts from the site root |
<a href="#faq"> | Jumps to the element with id="faq" |
<a href="mailto:[email protected]"> | Opens the visitor's email app |
<a href="tel:+919876543210"> | Starts a phone call on mobiles |
<a href="menu.pdf" download> | Downloads the file instead of opening it |
target="_blank" | Opens the link in a new tab; use sparingly |
Write link text that makes sense alone: "Download the menu", not "click here".
Images Lesson
<img src="tea.jpg" alt="Masala tea in a glass"> | alt describes the image for screen readers |
alt="" | Decorative image; screen readers skip it |
width="800" height="600" | Reserves space and prevents layout shift |
loading="lazy" | Loads only when near the screen; not for the top image |
<figure> + <figcaption> | An image with a visible caption |
srcset="s.jpg 480w, l.jpg 1200w" | Offers several sizes; the browser picks one |
sizes="(max-width: 600px) 100vw, 50vw" | Tells the browser how wide the image will display |
<picture><source srcset="a.avif" type="image/avif"> | Offers a modern format with an <img> fallback |
.avif .webp .jpg | Photos: AVIF and WebP are usually smaller than JPEG |
.svg .png | SVG for logos and icons; PNG for sharp graphics |
Lists Lesson
<ul><li>…</li></ul> | Unordered (bulleted) list |
<ol><li>…</li></ol> | Ordered (numbered) list |
<ol start="5"> | Numbering starts at 5 |
<ol reversed> | Counts down instead of up |
<ol type="a"> | Letters a, b, c (also A, i, I, 1) |
<li>Tea <ul>…</ul></li> | Nested list: put it inside an <li> |
<dl><dt>Term</dt><dd>Meaning</dd></dl> | Description list for terms and definitions |
<nav><ul><li><a>… | Menus are lists of links inside <nav> |
Tables Lesson
<table> | Holds tabular data – never page layout |
<caption> | The table's title; first child of <table> |
<tr> | A table row |
<td> | A data cell |
<th scope="col"> | Header cell for a column |
<th scope="row"> | Header cell for a row |
<thead> <tbody> <tfoot> | Group header, body and footer rows |
colspan="2" | Cell stretches across two columns |
rowspan="3" | Cell stretches down three rows |
Forms Lesson
<form action="/subscribe" method="post"> | Where the data goes and how it is sent |
<label for="email">Email</label> | Linked to the input with id="email" |
<input type="email" id="email" name="email"> | name is the key sent to the server |
type="text|email|tel|number|date|password" | Common input types; each gives a fitting keyboard or picker |
<input type="radio" name="size" value="m"> | Radios with the same name: pick one |
<input type="checkbox" name="news"> | A box that can be ticked on or off |
<select name="city"><option>Chennai</option></select> | A drop-down list |
<textarea name="msg" rows="4"></textarea> | Multi-line text |
<button type="submit">Send</button> | Submits the form |
required | The field must be filled before submitting |
minlength="8" min="1" max="10" | Length and number limits the browser checks |
pattern="[0-9]{6}" | Value must match the pattern, e.g. a 6-digit PIN |
placeholder is a hint, not a label. Every field needs a real <label>.
Semantic elements Lesson
<header> | Introductory content for the page or a section |
<nav> | A block of main navigation links |
<main> | The main content; only one visible per page |
<article> | A self-contained piece: a post, a product card |
<section> | A themed group of content, usually with a heading |
<aside> | Related side content, such as a sidebar |
<footer> | Footer for the page or a section |
<time datetime="2026-10-08">8 Oct</time> | A date that machines can read |
<address> | Contact details for the page or article owner |
<div> <span> | No meaning: block and inline boxes for styling |
Audio and video Lesson
<audio src="song.mp3" controls></audio> | Audio player with play and volume controls |
<video src="clip.mp4" controls width="640"></video> | Video player |
<source src="clip.webm" type="video/webm"> | Alternative format; the browser plays the first it supports |
poster="cover.jpg" | Image shown before the video plays |
autoplay muted playsinline | Browsers usually allow autoplay only when muted |
loop | Starts again when it ends |
preload="none" | Download nothing until play (metadata, auto) |
<track kind="captions" src="en.vtt" srclang="en"> | Captions from a WebVTT file |
<iframe src="…" title="Product demo"></iframe> | Embeds another page, e.g. a hosted video |
Head, meta tags and SEO Lesson
<title>Masala Tea Recipe – Chai Corner</title> | Unique, specific title for each page |
<meta name="description" content="…"> | Summary that search results may show |
<link rel="canonical" href="https://…/page/"> | The preferred URL when copies exist |
<meta name="robots" content="noindex"> | Keeps the page out of search results |
<meta property="og:title" content="…"> | Title used when the page is shared on social media |
<meta property="og:image" content="https://…"> | Preview image for social sharing |
<link rel="icon" href="/favicon.svg"> | The small icon in the browser tab |
<link rel="stylesheet" href="style.css"> | Loads a CSS file |
<script src="app.js" defer></script> | Runs after the HTML is parsed, in order |