title: HTML date: 2021-07-20 19:16:42 background: bg-[#cc5534] tags: - web categories: - Programming intro: |

This HTML quick reference cheat sheet lists the common HTML and HTML5 tags in readable layout.

Getting Started

hello.html {.col-span-2 .row-span-2}

<!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 QuickRef.ME!</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 QuickRef.ME</p>
<p>Share quick reference cheat sheet.</p>

See: The Paragraph element

HTML link

<a href="https://quickref.me">QuickRef</a>
<a href="mailto:jack@abc.com">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

```html {.wrap} Describe image here

---

|   |           |                                          |
|---|-----------|------------------------------------------|
|   | `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}

See: [The Image Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)



### Text Formatting Tags

```html
<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 {.row-span-2}

```html {.wrap}

#### ↓ Preview
<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>


See: [The Inline Frame element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)


### JavaScript in HTML

```html
<script type="text/javascript">
    let text = "Hello QuickRef.ME";
    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>

HTML5 Tags

Document

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <h1>QuickRef.ME</h1>
  </main>
  <footer>
    <p>©2023 QuickRef.ME</p>
  </footer>
</body>

Header Navigation

<header>
  <nav>
    <ul>
      <li><a href="#">Edit Page</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
    </ul>
  </nav>
</header>

HTML5 Tags {.row-span-4}


article	Content that’s independent
aside	Secondary content
audio	Embeds a sound, or an audio stream
bdi	The Bidirectional Isolate element
canvas	Draw graphics via JavaScript
data	Machine readable content
datalist	A set of pre-defined options
details	Additional information
dialog	A dialog box or sub-window
embed	Embeds external application
figcaption	A caption or legend for a figure
figure	A figure illustrated
footer	Footer or least important
header	Masthead or important information
main	The main content of the document
mark	Text highlighted
meter	A scalar value within a known range
nav	A section of navigation links
output	The result of a calculation
picture	A container for multiple image sources
progress	The completion progress of a task
rp	Provides fall-back parenthesis
rt	Defines the pronunciation of character
ruby	Represents a ruby annotation
section	A group in a series of related content
source	Resources for the media elements
summary	A summary for the <details> element
template	Defines the fragments of HTML
time	A time or date
track	Text tracks for the media elements
video	Embeds video
wbr	A line break opportunity

HTML5 Video

```html {.wrap}

#### ↓ Preview
<video controls="" width="100%">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>


### HTML5 Audio
```html {.wrap}
<audio controls
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
    Your browser does not support the audio element.
</audio>

↓ Preview

HTML5 Ruby

```html {.wrap} 汉 (hàn) 字 (zì)

#### ↓ Preview
<ruby class="mt-4 text-center text-5xl">
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>


### HTML5 kdi
```html
<ul>
 <li>User <bdi>hrefs</bdi>: 60 points</li>
 <li>User <bdi>jdoe</bdi>: 80 points</li>
 <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

↓ Preview

User hrefs: 60 points
User jdoe: 80 points
User إيان: 90 points

HTML5 progress

<progress value="50" max="100"></progress>

HTML5 mark

<p>I Love <mark>QuickRef.ME</mark></p>

I Love QuickRef.ME

HTML Tables

Table Example {.row-span-2}

<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 {.row-span-2}

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>

See: The Unordered List element

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>

See: The Ordered List element

Definition list

<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

HTML Forms

Form tags {.row-span-2}

<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

```html {.wrap}

#### ↓ Preview
<form style="padding: 20px;">
    <textarea rows="2" cols="30" name="address" id="address" class="border border-slate-400"style="width: 100%"></textarea>
</form>

Textarea is a multiple-line text input control



### Radio Buttons
```html
<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 value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</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

HTML input Tags {.cols-2}

Input Attributes {.row-span-2}

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


----

| - |                         |                                                                                                                               |
|---|-------------------------|-------------------------------------------------------------------------------------------------------------------------------|
|   | `type="…"`              | The type of data that is being input                                                                                          |
|   | `value="…"`             | Default value                                                                                                                 |
|   | `name="…"`              | Used to describe this data in the HTTP request                                                                                |
|   | `id="…"`                | Unique identifier that other HTML elements                                                                                    |
|   | `readonly`              | Stops the user from modifying                                                                                                 |
|   | `disabled`              | Stops any interaction                                                                                                         |
|   | `checked`               | The radio or checkbox select or not                                                                                           |
|   | `required`              | Being compulsory, See [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required#example)               |
|   | `placeholder="…"`       | Adds a temporary, See [::placeholder](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#examples)                |
|   | `autocomplete="off"`    | Disable auto completion                                                                                                       |
|   | `autocapitalize="none"` | Disable auto capitalization                                                                                                   |
|   | `inputmode="…"`         | Display a specific keyboard, See [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)   |
|   | `list="…"`              | The id of an associated [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)                        |
|   | `maxlength="…"`         | Maximum number of characters                                                                                                  |
|   | `minlength="…"`         | Minimum number of characters                                                                                                  |
|   | `min="…"`               | Minimum numerical value on range & number                                                                                     |
|   | `max="…"`               | Maximum numerical value on range & number                                                                                     |
|   | `step="…"`              | How the number will increment in range & number                                                                               |
|   | `pattern="…"`           | Specifies a [Regular expression](/regex), See [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) |
|   | `autofocus`             | Be focused                                                                                                                    |
|   | `spellcheck`            | Perform spell checking                                                                                                        |
|   | `multiple`              | Whether to allow [multiple](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) values                     |
|   | `accept=""`             | Expected file type in [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) upload controls            |
{.left-text}

Also see: [Attributes for the \<input> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)


### Input types

|                   |                                                                                                                                          |
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------|
| `type="checkbox"` | <input type="checkbox" class="border border-slate-400">                                                                                   |
| `type="radio"`    | <input type="radio" class="border border-slate-400">                                                                                      |
| `type="file"`     | <input type="file" class="border border-slate-400">                                                                                       |
| `type="hidden"`   | <input type="hidden" class="border border-slate-400">                                                                                     |
| `type="text"`     | <input type="text" class="border border-slate-400">                                                                                       |
| `type="password"` | <input type="password" class="border border-slate-400">                                                                                   |
| `type="image"`    | <input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70"> |
| `type="reset"`    | <input type="reset" class="border border-slate-400">                                                                                      |
| `type="button"`   | <input type="button" class="border border-slate-400">Button</input>                                                                       |
| `type="submit"`   | <input type="submit" class="border border-slate-400">                                                                                     |

#### New Input Types in HTML5
|                         |                                                                     |
|-------------------------|---------------------------------------------------------------------|
| `type="color"`          | <input type="color" value="#0FB881" class="border border-slate-400"> |
| `type="date"`           | <input type="date" class="border border-slate-400">                  |
| `type="time"`           | <input type="time" class="border border-slate-400">                  |
| `type="month"`          | <input type="month" class="border border-slate-400">                 |
| `type="datetime-local"` | <input type="datetime-local" class="border border-slate-400">        |
| `type="week"`           | <input type="week" class="border border-slate-400">                  |
| `type="email"`          | <input type="email" class="border border-slate-400">                 |
| `type="tel"`            | <input type="tel" class="border border-slate-400">                   |
| `type="url"`            | <input type="url" class="border border-slate-400">                   |
| `type="number"`         | <input type="number" class="border border-slate-400">                |
| `type="search"`         | <input type="search" class="border border-slate-400">                |
| `type="range"`          | <input type="range" class="border border-slate-400">                 |


### Input CSS selectors

|               |                           |
|---------------|---------------------------|
| `input:focus` | When its keyboard focused |
See: [Input pseudo classes](/css#input-pseudo-classes)


HTML meta Tags {.cols-2}
-----------

### Meta tags {.row-span-3}

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


```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">

Open Graph

<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.

Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@QuickRef_ME">
<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

Geotagging

<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

Also see

HTML 4.01 Specification (w3.org)