HTML cheat sheet
96 one-line examples for HTML. Open it while you code, or print it and keep it near the keyboard. Free, with no signup and no ads.
Document Structure
| Code | What it does |
|---|---|
<!DOCTYPE html> | Declares the page as HTML5. |
<html lang="en"> | Starts the page and sets its language. |
<head> | Holds page data that users do not see. |
<meta charset="UTF-8"> | Sets the character set to UTF-8. |
<meta name="viewport" content="width=device-width"> | Makes the page fit small screens. |
<title>My Page</title> | Sets the text in the browser tab. |
<body> | Holds all visible page content. |
</head> | Closes the head section. |
</body> | Closes the body section. |
</html> | Closes the page. |
<link rel="stylesheet" href="style.css"> | Links an external CSS file. |
<script src="app.js"></script> | Loads an external JavaScript file. |
Text Content
| Code | What it does |
|---|---|
<h1>Main Title</h1> | Makes the top-level heading. |
<h2>Section Title</h2> | Makes a second-level heading. |
<p>A short paragraph.</p> | Makes a paragraph of text. |
<strong>Important</strong> | Marks text as strongly important. |
<em>Emphasis</em> | Marks text with emphasis. |
<br> | Adds a line break. |
<hr> | Adds a horizontal divider line. |
<blockquote>Quote</blockquote> | Marks a long quotation. |
<code>let x = 1;</code> | Marks inline code text. |
<pre>Text block</pre> | Keeps spaces and line breaks. |
<span>Inline text</span> | Groups inline text for styling. |
<!-- note --> | Adds a comment that users do not see. |
Links and Images
| Code | What it does |
|---|---|
<a href="page.html">Go</a> | Makes a link to another page. |
<a href="https://site.com">Site</a> | Makes a link to an external site. |
<a href="#top">Top</a> | Links to an element with id top. |
<a href="mailto:[email protected]">Mail</a> | Opens the email app to send a message. |
<a href="page.html" target="_blank">New</a> | Opens the link in a new tab. |
<img src="cat.jpg" alt="A cat"> | Shows an image with alt text. |
<img src="cat.jpg" width="200"> | Sets the image width to 200 pixels. |
<figure> | Groups an image with its caption. |
<figcaption>Caption</figcaption> | Adds a caption to a figure. |
<a href="file.pdf" download>Get</a> | Downloads the file when clicked. |
<nav> | Marks a group of navigation links. |
<link rel="icon" href="icon.png"> | Sets the small tab icon. |
Lists
| Code | What it does |
|---|---|
<ul> | Starts an unordered list. |
<ol> | Starts an ordered list. |
<li>Item</li> | Makes one list item. |
</ul> | Closes an unordered list. |
</ol> | Closes an ordered list. |
<ol start="3"> | Starts the number list at 3. |
<ul style="list-style:none"> | Removes the bullet marks. |
<dl> | Starts a description list. |
<dt>Term</dt> | Makes a term in a description list. |
<dd>Meaning</dd> | Makes the meaning of a term. |
<li value="5">Item</li> | Sets this list item to number 5. |
<ol type="A"> | Uses letters instead of numbers. |
Tables
| Code | What it does |
|---|---|
<table> | Starts a table. |
<tr> | Makes one table row. |
<th>Head</th> | Makes a header cell. |
<td>Cell</td> | Makes a data cell. |
<thead> | Groups the header rows. |
<tbody> | Groups the body rows. |
<tfoot> | Groups the footer rows. |
<caption>Title</caption> | Adds a title to the table. |
<td colspan="2">Wide</td> | Makes a cell span two columns. |
<td rowspan="2">Tall</td> | Makes a cell span two rows. |
</table> | Closes the table. |
<colgroup> | Groups columns for styling. |
Forms
| Code | What it does |
|---|---|
<form action="/send" method="post"> | Starts a form that sends data. |
<input type="text" name="user"> | Makes a one-line text field. |
<input type="email" name="mail"> | Makes an email field with checks. |
<input type="password" name="pass"> | Makes a field that hides typed text. |
<input type="checkbox" name="ok"> | Makes a checkbox. |
<input type="radio" name="size"> | Makes one radio button. |
<input type="submit" value="Send"> | Makes a button that sends the form. |
<label for="user">Name</label> | Labels the field with id user. |
<textarea name="note"></textarea> | Makes a multi-line text field. |
<select name="city"> | Starts a drop-down list. |
<option value="1">One</option> | Makes one choice in a list. |
<button type="button">Click</button> | Makes a button that does not send. |
Page Sections
| Code | What it does |
|---|---|
<header> | Marks the top area of a page. |
<footer> | Marks the bottom area of a page. |
<main> | Marks the main content of a page. |
<section> | Groups related content with a theme. |
<article> | Marks content that stands on its own. |
<aside> | Marks side content. |
<div> | Groups content in a block. |
<div id="top"> | Gives the element the name top. |
<div class="card"> | Gives the element the class card. |
<header>Site</header> | Makes a header with text. |
<main>Content</main> | Makes the main area with text. |
<footer>End</footer> | Makes a footer with text. |
Media and Attributes
| Code | What it does |
|---|---|
<video src="clip.mp4" controls> | Shows a video with play controls. |
<audio src="song.mp3" controls> | Shows an audio player with controls. |
<iframe src="page.html"></iframe> | Shows another page inside this page. |
<video src="a.mp4" muted autoplay> | Plays the video with no sound. |
<source src="a.mp4" type="video/mp4"> | Gives the browser a media file choice. |
<track src="sub.vtt" kind="captions"> | Adds captions to a video. |
<img src="a.jpg" loading="lazy"> | Loads the image only when needed. |
<input type="text" required> | Makes the field required before sending. |
<input type="text" placeholder="Name"> | Shows hint text inside the field. |
<a href="page.html" rel="noopener">Go</a> | Blocks access to the opener page. |
<html lang="fr"> | Sets the page language to French. |
<meta name="description" content="Info"> | Gives search engines a page summary. |