HTML Cheat Sheet

<meta name="ICBM" content="45.416667,-75.7"> <meta name="geo.position" content="45.416667;-75.7"> <meta name="geo.region" content="ca-on"> <meta name="geo.placename" content="Ottawa"> 

See: Geotagging

<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@FechinLi"> <meta name="twitter:title" content="HTML cheatsheet"> <meta name="twitter:url" content="https://quickref.me/html"> <meta name="twitter:description" content="Description of this page"> <meta name="twitter:image" content="https://xxx.com/image.jpg"> 

See: Twitter Card Documentation

<meta property="og:type" content="website"> <meta property="og:locale" content="en\_CA"> <meta property="og:title" content="HTML cheatsheet"> <meta property="og:url" content="https://quickref.me/html"> <meta property="og:image" content="https://xxx.com/image.jpg"> <meta property="og:site\_name" content="Name of your website"> <meta property="og:description" content="Description of this page"> 

Used by Facebook, Instagram, Pinterest, LinkedIn, etc.

The meta tag describes meta data within an HTML document. It explains additional material about the HTML.

<meta charset="utf-8"> 

<!-- title --> <title>···</title> <meta property="og:title" content="···"> <meta name="twitter:title" content="···"> 

<!-- url --> <link rel="canonical" href="https://···"> <meta property="og:url" content="https://···"> <meta name="twitter:url" content="https://···"> 

<!-- description --> <meta name="description" content="···"> <meta property="og:description" content="···"> <meta name="twitter:description" content="···"> 

<!-- image --> <meta property="og:image" content="https://···"> <meta name="twitter:image" content="https://···"> 

<!-- ua --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<!-- viewport --> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=1024"> 

#New Input Types in HTML5

The input tag is an empty element, identifying the particular type of field information to obtain from a user.

<input type="text" name="?" value="?" minlength="6" required /> 

<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

Name: Submit the data to server; Reset to default values

<label for="b">Choose a browser: </label> <input list="list" id="b" name="browser"/> <datalist id="list"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist> 

#↓ Preview

Choose a browser:

<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

Your favorite monster Kraken
Sasquatch

<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

City: Sydney Melbourne Cromwell A select box is a dropdown list of options

<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

Soccer Baseball Checkboxes allows the user to select one or more

<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

Male Female Radio buttons are used to let the user select exactly one

<textarea rows="2" cols="30" name="address" id="address"></textarea> 

#↓ Preview

Textarea is a multiple-line text input control

<label for="Name">Name:</label> <input type="text" name="Name" id=""> 

#↓ Preview

Username: See: HTML input 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

<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

Email:

Password:

Remember me The HTML <form> element is used to collect and send information to an external source.

<dl> <dt>A Term</dt> <dd>Definition of a term</dd> <dt>Another Term</dt> <dd>Definition of another term</dd> </dl> 

See: The Description List element

<ol> <li>I'm the first item</li> <li>I'm the second item</li> <li>I'm the third item</li> </ol> 

See: The Ordered List element

<ul> <li>I'm an item</li> <li>I'm another item</li> <li>I'm another item</li> </ul> 

See: The Unordered List element