HTML

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

Last updated 1 year ago

HTML

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

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 QuickRef.ME!</h1>
</body>
</html>

Or try it out in the

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>

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

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

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

Content that’s independent

Secondary content

Embeds a sound, or an audio stream

The Bidirectional Isolate element

Draw graphics via JavaScript

Machine readable content

A set of pre-defined options

Additional information

A dialog box or sub-window

Embeds external application

A caption or legend for a figure

A figure illustrated

Footer or least important

Masthead or important information

The main content of the document

Text highlighted

A scalar value within a known range

A section of navigation links

The result of a calculation

A container for multiple image sources

The completion progress of a task

Provides fall-back parenthesis

Defines the pronunciation of character

Represents a ruby annotation

A group in a series of related content

Resources for the media elements

A summary for the <details> element

Defines the fragments of HTML

A time or date

Text tracks for the media elements

Embeds video

A line break opportunity

HTML5 Video

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

↓ Preview

HTML5 Audio

<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

<ruby>
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

↓ Preview

汉hàn字zì

HTML5 kdi

<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

<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

Defines a table

Defines a header cell in a table

Defines a row in a table

Defines a cell in a table

Defines a table caption

Defines a group of columns

Defines a column within a table

Groups the header content

Groups the body content

Groups the footer content

<td> Attributes

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

<th> Attributes

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

The header element relates to

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

Email: Password: Remember me

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

Form Attribute

name

Name of form for scripting

action

URL of form script

method

HTTP method, POST / GET (default)

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

Username:

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

Male Female

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

Soccer Baseball

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

City: Sydney Melbourne Cromwell

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

Your favorite monster Kraken Sasquatch

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

Choose a browser:

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

Name:

Submit the data to server; Reset to default values

HTML input Tags

Input Attributes

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

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

placeholder="…"

autocomplete="off"

Disable auto completion

autocapitalize="none"

Disable auto capitalization

inputmode="…"

list="…"

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="…"

autofocus

Be focused

spellcheck

Perform spell checking

multiple

accept=""

Input types

type="checkbox"

type="radio"

type="file"

type="hidden"

type="text"

type="password"

type="image"

type="reset"

type="button"

Button

type="submit"

New Input Types in HTML5

type="color"

type="date"

type="time"

type="month"

type="datetime-local"

type="week"

type="email"

type="tel"

type="url"

type="number"

type="search"

type="range"

Input CSS selectors

input:focus

When its keyboard focused

See: Input pseudo classes

HTML meta Tags

Meta tags

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

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="@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">

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

PreviousWeb Development NextCSS 3

Last updated 1 year ago

Getting Started

hello.html

Comment

Paragraph

HTML link

Image Tag

Text Formatting Tags

Headings

Section Divisions

Inline Frame

JavaScript in HTML

CSS in HTML

HTML5 Tags

Document

Header Navigation

HTML5 Tags

HTML5 Video

HTML5 Audio

HTML5 Ruby

HTML5 kdi

HTML5 progress

HTML5 mark

HTML Tables

Table Example

HTML Table Tags

<td> Attributes

<th> Attributes

HTML Lists

Unordered list

Ordered list

Definition list

HTML Forms

Form tags

Form Attribute

Label tags

Input tags

Textarea tags

Radio Buttons

Checkboxes

Select tags

Fieldset tags

Datalist tags(HTML5)

Submit and Reset Buttons

HTML input Tags

Input Attributes

Input types

Input CSS selectors

HTML meta Tags

Meta tags

Open Graph

Twitter Cards

Geotagging

Getting Started

hello.html

Comment

Paragraph

HTML link

Image Tag

Text Formatting Tags

Headings

Section Divisions

Inline Frame

JavaScript in HTML

CSS in HTML

HTML5 Tags

Document

Header Navigation

HTML5 Tags

HTML5 Video

HTML5 Audio

HTML5 Ruby

HTML5 kdi

HTML5 progress

HTML5 mark

HTML Tables

Table Example

HTML Table Tags

<td> Attributes

<th> Attributes

HTML Lists