- HTML 4.01 Specification (w3.org)
HTML CHEAT SHEET
This HTML quick reference cheat sheet lists the common HTML and HTML5 tags in readable layout.
web
8
Sections
45
Cards
#Getting Started
hello.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5 Boilerplate</title>
</head>
<body>
<h1>Hello world, hello CheatSheets.zip!</h1>
</body>
</html>
Or try it out in the jsfiddle
Comment
<!-- this is a comment -->
<!--
Or you can comment out a
large number of lines.
-->
Paragraph
<p>I'm from CheatSheets.zip</p>
<p>Share quick reference cheat sheet.</p>
HTML link
<a href="https://cheatsheets.zip">CheatSheets</a>
<a href="mailto:[email protected]">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
href | The URL that the hyperlink points to | |
rel | Relationship of the linked URL | |
target | Link target location: _self, _blank, _top, _parent |
{.left-text}
See: The <a> Attributes
Image Tag
<img
loading="lazy"
src="https://xxx.png"
alt="Describe image here"
width="400"
height="400"
/>
src | Required, Image location (URL | Path) | |
alt | Describe of the image | |
width | Width of the image | |
height | Height of the image | |
loading | How the browser should load |
{.left-text}
Text Formatting Tags
<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>This text is emphasized</em>
<u>Underline Text</u>
<pre>Pre-formatted Text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Highlighted text (HTML5)</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub>Makes text subscripted</sub>
<small>Makes text smaller</small>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>
Headings
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
You should only have one h1 on your page
Section Divisions
<div></div> | Division or Section of Page Content |
<span></span> | Section of text within other content |
<p></p> | Paragraph of Text |
<br> | Line Break |
<hr> | Basic Horizontal Line |
These are the tags used to divide your page up into sections
Inline Frame
<iframe
title="New York"
width="342"
height="306"
id="gmap_canvas"
src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
scrolling="no"
>
</iframe>
↓ Preview
JavaScript in HTML
<script type="text/javascript">
let text = 'Hello CheatSheets.zip';
alert(text);
</script>
External JavaScript
<body>
...
<script src="app.js"></script>
</body>
CSS in HTML
<style type="text/css">
h1 {
color: purple;
}
</style>
External stylesheet
<head>
...
<link rel="stylesheet" href="style.css" />
</head>
#HTML Tables
Table Example
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Roberta</td>
<td>39</td>
</tr>
<tr>
<td>Oliver</td>
<td>25</td>
</tr>
</tbody>
</table>
HTML Table Tags
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Defines a group of columns |
| <col> | Defines a column within a table |
| <thead> | Groups the header content |
| <tbody> | Groups the body content |
| <tfoot> | Groups the footer content |
\<td> Attributes
| Attribute | Description |
|---|---|
colspan | Number of columns a cell should span |
headers | One or more header cells a cell is related to |
rowspan | Number of rows a cell should span |
See: td#Attributes
\<th> Attributes
| Attribute | Description |
|---|---|
colspan | Number of columns a cell should span |
headers | One or more header cells a cell is related to |
rowspan | Number of rows a cell should span |
abbr | Description of the cell's content |
| scope | The header element relates to |
See: th#Attributes
#HTML Lists
Unordered list
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
Ordered list
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>
Definition list
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
#HTML Forms
Form tags
<form method="POST" action="api/login">
<label for="mail">Email: </label>
<input type="email" id="mail" name="mail" />
<br />
<label for="pw">Password: </label>
<input type="password" id="pw" name="pw" />
<br />
<input type="submit" value="Login" />
<br />
<input type="checkbox" id="ck" name="ck" />
<label for="ck">Remember me</label>
</form>
↓ Preview
The HTML <form> element is used to collect and send information to an external source.
Form Attribute
| Attribute | Description |
|---|---|
name | Name of form for scripting |
action | URL of form script |
method | HTTP method, POST / GET (default) |
enctype | Media type, See enctype |
onsubmit | Runs when the form was submit |
onreset | Runs when the form was reset |
Label tags
<!-- Nested label -->
<label
>Click me
<input type="text" id="user" name="name" />
</label>
<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name" />
for in a label references an input's id attribute
Input tags
<label for="Name">Name:</label> <input type="text" name="Name" id="" />
↓ Preview
See: HTML input Tags
Textarea tags
<textarea rows="2" cols="30" name="address" id="address"></textarea>
↓ Preview
Textarea is a multiple-line text input control
Radio Buttons
<input type="radio" name="gender" id="m" />
<label for="m">Male</label>
<input type="radio" name="gender" id="f" />
<label for="f">Female</label>
↓ Preview
Radio buttons are used to let the user select exactly one
Checkboxes
<input type="checkbox" name="s" id="soc" />
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas" />
<label for="bas">Baseball</label>
↓ Preview
Checkboxes allows the user to select one or more
Select tags
<label for="city">City:</label>
<select name="city" id="city">
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
</select>
↓ Preview
A select box is a dropdown list of options
Fieldset tags
<fieldset>
<legend>Your favorite monster</legend>
<input type="radio" id="kra" name="m" />
<label for="kraken">Kraken</label><br />
<input type="radio" id="sas" name="m" />
<label for="sas">Sasquatch</label>
</fieldset>
↓ Preview
Datalist tags(HTML5)
<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser" />
<datalist id="list">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
↓ Preview
Submit and Reset Buttons
<form action="register.php" method="post">
<label for="foo">Name:</label>
<input type="text" name="name" id="foo" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
↓ Preview
Submit the data to server; Reset to default values