HTML Cheat Sheet
Every important HTML tag and attribute with a one-line explanation, in the order you learn them. Use the search box to jump to anything.
Nothing matches your search.
Page structure
Full lesson<!DOCTYPE html>- Tells the browser this is a modern HTML5 page. Always the very first line.
<html lang="en">- The root element. The lang attribute helps screen readers and search engines pick the right language.
<head>- Holds information about the page (title, meta tags, CSS links). Nothing in it is shown on the page.
<body>- Holds everything visible: text, images, links, forms.
<meta charset="UTF-8">- Sets the character encoding so symbols and non-English text display correctly.
<title>- The page title shown in the browser tab and in search results.
<!-- comment -->- A note for developers. The browser ignores it and it is never displayed.
Elements and attributes
Full lesson<tag>content</tag>- An element is an opening tag, content and a closing tag.
void element- A tag with no content and no closing tag, such as <br>, <img>, <hr> and <input>.
attribute="value"- Extra information on a tag, written in the opening tag: name="value".
id- A unique name for one element on the page. Used for links (#id), CSS and JavaScript.
class- A reusable label for styling or selecting many elements. An element can have several.
style- Inline CSS on a single element. Handy for quick tests, avoid it in real projects.
title- Extra text shown as a tooltip when the mouse hovers over the element.
hidden- Hides the element from view and from assistive technology.
data-*- Custom data you can store on an element and read from JavaScript, e.g. data-id="42".
boolean attribute- Present means on, absent means off: disabled, required, checked, hidden.
Text and headings
Full lesson<h1> to <h6>- Headings from most to least important. Use one <h1> per page and do not skip levels.
<p>- A paragraph of text. Browsers add space above and below it.
<br>- A single line break inside text.
<hr>- A horizontal rule, used to separate topics.
<pre>- Preformatted text. Keeps spaces and line breaks exactly as typed.
<blockquote>- A longer quotation from another source. Add the cite attribute for the source URL.
<q>- A short inline quotation. Browsers add quotation marks automatically.
<cite>- The title of a creative work, such as a book or article.
Block, inline and grouping
Full lessonblock element- Starts on a new line and takes the full width, e.g. <div>, <p>, <h1>, <ul>.
inline element- Flows inside a line of text and takes only the width it needs, e.g. <span>, <a>, <strong>.
<div>- A generic block container with no meaning. Used to group elements for layout and styling.
<span>- A generic inline container. Used to style or select a piece of text.
Text formatting
Full lesson<strong>- Strong importance. Shown bold, and screen readers may stress it.
<em>- Stress emphasis. Shown italic and changes the meaning of the sentence.
<b> and <i>- Bold or italic styling without extra importance, such as keywords or technical terms.
<mark>- Highlights text that is relevant right now, like a search match.
<small>- Side comments and fine print such as copyright lines.
<del> and <ins>- Deleted text (struck through) and inserted text (underlined).
<sub> and <sup>- Subscript (H₂O) and superscript (x²).
<code>- Inline computer code, shown in a monospace font.
<kbd>- Keyboard input, such as Ctrl + C.
<abbr title="">- An abbreviation. The title attribute holds the full form.
Links
Full lesson<a href="url">- Creates a link. The href is where it goes.
target="_blank"- Opens the link in a new tab. Pair it with rel="noopener noreferrer" for safety.
href="#section-id"- Jumps to the element with that id on the same page.
href="mailto:"- Opens the visitor's email app with the address filled in.
href="tel:"- Starts a phone call on devices that support it.
absolute URL- A full address including https://. Use it for other websites.
relative URL- A path from the current page, such as /about/ or ../index.html. Use it for your own pages.
download- Tells the browser to download the file instead of opening it.
Images, audio, video and iframes
Full lesson<img src alt>- Shows an image. alt is the text description used by screen readers and when the image fails to load.
width and height- Set on <img> so the browser reserves space and the page does not jump while loading.
loading="lazy"- Loads an image only when it is about to scroll into view. Good for images below the fold.
srcset and sizes- Offer several image sizes so the browser picks the best one for the screen.
<picture>- Chooses between several image sources, for different formats or screen sizes.
<figure> and <figcaption>- An image, diagram or code sample with a caption.
<audio controls>- Plays sound. controls shows the play and volume buttons.
<video controls>- Plays video. Add poster for a preview image, and muted autoplay loop for background clips.
<source>- A file option inside <audio>, <video> or <picture>. The browser uses the first it supports.
<track>- Adds subtitles or captions to a video.
<iframe src title>- Embeds another page, such as a map or video. Always add a descriptive title.
Lists
Full lesson<ul>- An unordered (bulleted) list.
<ol>- An ordered (numbered) list. Supports start, reversed and type.
<li>- One item in a <ul> or <ol>.
<dl>, <dt>, <dd>- A description list: a term (<dt>) followed by its description (<dd>).
nested list- Put a whole <ul> or <ol> inside an <li> to make sub-items.
Tables
Full lesson<table>- Wraps a table of data. Use tables for data only, never for page layout.
<tr>- A table row.
<th>- A header cell. Bold and centered by default, and understood by screen readers.
<td>- A normal data cell.
<thead>, <tbody>, <tfoot>- Group the header rows, body rows and footer rows.
<caption>- A title for the table, placed right after <table>.
colspan and rowspan- Make a cell stretch across several columns or rows.
scope="col" or "row"- Tells assistive technology whether a <th> labels a column or a row.
Forms and inputs
Full lesson<form action method>- Wraps form controls. action is where the data goes, method is GET or POST.
GET vs POST- GET puts data in the URL (searches, filters). POST sends it in the body (logins, new data).
<label for="id">- Describes a control. Clicking it focuses the input. for must match the input's id.
<input>- The main form control. Its type attribute decides how it looks and behaves.
name- The key under which the input's value is sent. Inputs without a name are not submitted.
value- The current or default content of a control.
placeholder- A grey hint inside an empty field. It does not replace a label.
<textarea>- A multi-line text box. Size it with rows and cols.
<select> and <option>- A dropdown list. <optgroup> groups options.
<button type>- A clickable button. type is submit (default), button or reset.
<fieldset> and <legend>- Group related controls, such as radio buttons, with a caption.
<datalist>- Suggests values while the visitor types into an input that uses list="id".
Input types
Full lessontype="text"- A single-line text field (default).
type="email"- Text that must look like an email address. Mobile keyboards show the @ key.
type="password"- Hides the characters as they are typed.
type="number"- Numbers only. Supports min, max and step.
type="tel"- A phone number. Opens the numeric keypad on phones.
type="url"- A web address that must be a valid URL.
type="search"- A search box, sometimes with a clear button.
type="checkbox"- An on or off choice. Many can be selected.
type="radio"- One choice from a group. Radios with the same name belong to one group.
type="date"- A date picker. Also time, datetime-local, month and week.
type="range"- A slider between min and max.
type="color"- A colour picker.
type="file"- A file upload. Add multiple for several files and accept to filter file types.
type="hidden"- Sends a value with the form without showing anything.
Form validation attributes
Full lessonrequired- The field must be filled in before the form can be submitted.
minlength and maxlength- The minimum and maximum number of characters allowed.
min, max and step- Limits and steps for numbers and dates.
pattern="regex"- The value must match a regular expression. Pair it with a title that explains the rule.
disabled- The control cannot be used and its value is not submitted.
readonly- The value is visible and submitted but cannot be edited.
autocomplete- Helps browsers autofill: email, name, new-password, current-password and so on.
autofocus- Focuses the control when the page loads. Use sparingly.
novalidate- On the <form>: turns off the browser's built-in validation.
multiple- Allows several values in <select> and <input type="file">.
Special characters
Full lesson< and >- Show < and > as text instead of starting a tag.
&- Shows an ampersand (&).
" and '- Shows double and single quotes, useful inside attribute values.
- A non-breaking space. Keeps two words on the same line.
© ® ™- Copyright, registered and trademark symbols.
&#number; or &#xhex;- Any character by its Unicode number, such as ☃.
Semantic layout elements
Full lesson<header>- Introductory content: logo, title, main navigation. A page or an article can have one.
<nav>- A block of major navigation links. Label it with aria-label if there are several.
<main>- The unique content of the page. Use it exactly once.
<article>- Self-contained content that makes sense on its own, such as a blog post or product card.
<section>- A themed group of content that normally has its own heading.
<aside>- Related but non-essential content, such as a sidebar.
<footer>- Closing information such as copyright and secondary links.
<time datetime>- A date or time in a machine-readable form.
<address>- Contact information for the page or the nearest article.
Head, meta tags and scripts
Full lesson<meta name="viewport">- Makes the page scale properly on phones: width=device-width, initial-scale=1.
<meta name="description">- The summary search engines often show under your title. Aim for about 150 characters.
<link rel="canonical">- Tells search engines the preferred URL when the same content has several addresses.
<meta name="robots">- Controls indexing. noindex keeps a page out of search results.
<link rel="stylesheet">- Loads an external CSS file.
<link rel="icon">- Sets the favicon shown in the browser tab.
<script src defer>- Loads JavaScript. defer waits until the HTML is parsed and keeps script order.
<script async>- Loads and runs the script as soon as it is ready, in any order. Good for independent scripts.
Open Graph tags- og:title, og:description and og:image control how the page looks when shared on social media.
<style>- Writes CSS directly inside the page.
Accessibility and ARIA
Full lessonalt text- Describe what an image shows. Use alt="" for purely decorative images.
label for every input- Each form control needs a visible label. This is the most common accessibility fix.
landmarks- header, nav, main and footer let screen reader users jump around the page.
skip link- A first link that jumps to #main-content so keyboard users can skip the menu.
tabindex="0"- Adds an element to the keyboard tab order. Use tabindex="-1" for focus by script only. Avoid positive values.
focus styles- Never remove the focus outline without providing a clear replacement.
aria-label- Gives an element an invisible text name, such as on an icon-only button.
aria-labelledby- Names an element using the text of another element, by id.
aria-hidden="true"- Hides decorative content from screen readers. Never put it on focusable elements.
aria-expanded- Says whether a control (such as an accordion button) is open or closed.
role- Overrides the meaning of an element. The first rule of ARIA: use a native element if one exists.
Interactive elements
Full lesson<details> and <summary>- A built-in show and hide widget. The summary is the clickable heading. No JavaScript needed.
open- On <details>: starts the widget expanded.
<dialog>- A popup window. Open it with dialog.showModal() and close it with dialog.close().
<progress> and <meter>- A progress bar for a task, and a gauge for a value within a known range.
SEO and best practices
Full lessonone <h1>- One clear main heading per page that matches the page topic.
unique <title>- Every page needs its own descriptive title. Keep it under about 60 characters.
unique meta description- Every page needs its own summary, not a copy of another page.
descriptive link text- Write "read the CSS guide", never "click here".
structured data- JSON-LD in a <script type="application/ld+json"> tag helps search engines understand your content.
validate your HTML- Use the W3C validator to catch unclosed tags, duplicate ids and invalid nesting.
lowercase and quotes- Write tags and attributes in lowercase and always quote attribute values.