HTML Cheatsheet
Quick reference for common HTML tags: document structure, text, links, media, semantics, and forms.
HTML Cheatsheet
HTML (HyperText Markup Language) is the markup used to define the structure and content of web pages. You use tags in angle brackets to describe headings, paragraphs, links, images, forms, and so on. The browser turns that into the page you see. HTML works together with CSS (for styling and layout) and JavaScript (for behavior). Learning the main tags and how to use them is the first step in building or editing websites.
Minimal document
Every page starts with <!DOCTYPE html> so the browser uses standards mode. Put the language on <html> so screen readers and translation tools work better.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html><meta charset="UTF-8"> should be early in <head> so special characters (é, ñ, emoji) display correctly. The <title> shows in the tab and in search results. The <head> holds metadata and resources that aren’t shown on the page. The <body> holds everything that is visible.
Mobile view setup
On phones and small screens, browsers need to know how to size the page. Without a viewport meta tag, many devices pretend the page is wide and zoom out, so text looks tiny. Add this inside <head> so the page uses the device’s actual width and doesn’t zoom out by default:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width tells the browser to use the screen width as the layout width. initial-scale=1 sets the initial zoom to 1 (no zoom). Avoid setting maximum-scale=1 or user-scalable=no so people can zoom for accessibility. Making the layout actually respond to different widths is done with CSS (fluid widths, media queries). See our
CSS cheatsheets
for layout.
Minimal head with charset, title, and viewport:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
</head>Headings and text
Use one <h1> per page for the main title. Then <h2> for sections, <h3> for subsections. Don’t skip levels (e.g. go from h2 to h5). Screen readers use this for navigation.
<h1>Contact us</h1>
<p>Send a message using the form below.</p>
<h2>Office hours</h2>
<p>Monday to Friday, 9am–5pm.</p>For bold use <strong> when it’s important, <b> only for style. For italic use <em> for emphasis, <i> for terms or names. Lists: <ul> and <li> for bullets, <ol> and <li> for numbers.
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
<ol>
<li>Turn on the device</li>
<li>Press the button</li>
</ol>Line break: <br>. Thematic break between sections: <hr>.
Links
href is the URL. Internal link: path from root or relative. External link that opens in a new tab: add target="_blank" and rel="noopener" (the latter for security).
<a href="/pricing">See pricing</a>
<a href="https://example.com" target="_blank" rel="noopener">Example site</a>Placeholder link that does nothing: href="#". For a button that navigates, use <a href="..." class="button"> and style it, or a real <button> inside a form.
Images
Always set alt. Describe what’s in the image in a short phrase. If the image is decorative (e.g. a divider), use alt="" so screen readers skip it.
<img src="team.jpg" alt="Team photo from the 2024 retreat">
<img src="decoration.svg" alt="">For high-DPI screens you can offer a larger image with srcset so retina devices get a sharper picture.
<img src="hero.jpg" srcset="hero-2x.jpg 2x" alt="Conference hall">Page structure (semantics)
Use <header>, <main>, <nav>, <footer> so browsers and assistive tech can find the main content. One <main> per page. Put the primary navigation in <nav>.
<body>
<header>
<a href="/">Home</a>
<nav>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Latest news</h2>
<p>...</p>
</article>
</main>
<footer>
<p>© 2024 Company</p>
</footer>
</body><article> is for a self-contained piece (blog post, product card). <section> groups content under a heading. <aside> is for sidebars or tangentially related content.
When to use div vs section. Use <div> when you need a wrapper for styling or scripting and there is no better semantic tag. Use <section> when the block has its own heading and represents a distinct part of the document outline (e.g. “Office hours”, “Pricing”). A section should usually have an <h2> or similar inside it. Don’t use section for every wrapper. Div vs span: <div> is block-level (stacks vertically); <span> is inline (sits in a line of text). Use span to style or mark a few words or characters without starting a new block.
Navigation with logo. Common pattern: logo (often a link home) plus a list of links. Wrap in <nav>. Use a list for the links so screen readers can announce the number of items.
<header>
<nav>
<a href="/">Site name</a>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>Style the list with CSS (e.g. display: flex, list-style: none) so it looks like a horizontal bar.
Forms
Wrap inputs in a <form>. Use <label for="id"> and give the input the same id so clicking the label focuses the field. Use name so the server receives the value.
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>Common input types: text, email, number, password, tel, url. For checkboxes and radios, use the same name for each group so only one radio is selected. Use <textarea> for multi-line text.
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="4"></textarea>
<fieldset>
<legend>Size</legend>
<input type="radio" id="s" name="size" value="s">
<label for="s">Small</label>
<input type="radio" id="m" name="size" value="m">
<label for="m">Medium</label>
</fieldset>method="get" puts values in the URL (good for search). method="post" sends them in the body (good for login, signup).
Validation hints. The required attribute blocks submit until the field is filled. type="email" and type="number" give built-in validation and mobile keyboards. Use min, max, and step on number inputs. For custom rules use the pattern attribute with a regex (and add a short hint in the label or nearby so users know the expected format). Server-side validation is still required. Client-side only improves UX.
Tables
Use tables for tabular data (prices, schedules, comparisons), not for layout. Use <thead>, <tbody>, and optionally <tfoot>. Header cells: <th>. Data cells: <td>.
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget A</td>
<td>$10</td>
</tr>
<tr>
<td>Widget B</td>
<td>$15</td>
</tr>
</tbody>
</table>For accessibility, use <th scope="col"> for column headers and <th scope="row"> for row headers when you have both.
Search form with method="get" so the query appears in the URL (bookmarkable, shareable):
<form action="/search" method="get" role="search">
<label for="q">Search</label>
<input type="search" id="q" name="q">
<button type="submit">Go</button>
</form>Quick accessibility checklist
Give every image useful alt text (or alt="" if decorative). Keep heading order logical (one h1, then h2, h3). Associate every form field with a <label>. Use semantic elements (main, nav, header, footer) so screen readers can jump to content.
Skip link. On pages with a lot of navigation, add a link at the very top that jumps to #main or the main content so keyboard and screen-reader users can skip repeated nav. Example: <a href="#main">Skip to content</a> and give your main content id="main".
Focus order. Elements are focused in DOM order. Put the main content early in the HTML, or use a “skip to content” link, so keyboard users don’t have to tab through the whole nav every time. Avoid tabindex except for fixing order in rare cases (e.g. a modal that should trap focus).