HTML Cheatsheet

Three. Two.
Online
The Complete
HTML Cheat Sheet
HTML
The Complete HTML Cheat Sheet
Table of Content
Click or tap to jump to any section;
1 Document Summary 9 Select Attributes

2 Document Information Option Attributes
3 Document Structure 10 Tables
4 Text Formatting 11 Objects and iFrames
5 Links 12 iFrame Attributes
6 Images Embed Attributes
7 Lists 13 HTML5 New Tags
Forms 14 Collective
8 Input Type Attribute Character Objects
HOSTINGER Three. Two. Online

The Complete HTML Cheat Sheet 1
Introduction
If you want to be a web developer, it’s crucial to be proficient in HTML – the language
of the internet. A good solution, therefore, is to always have a cheat sheet at hand to
help you in your most troubling moments.
You will find a fairly basic yet comprehensive HyperText Markup Language (HTML)
cheat sheet in this document.
We will go through each major HTML tag and explain how to use them. This document
is also a good starting point for people who want to learn HTML, with
easy-to-understand examples.
So, let’s get started!
Start your own website with unlimited hosting.

Use HostingerTutorials Discount Code and
Get Up to 83% OFF for any web hosting plan.
Use It Today
Document Summary
<html> … </html> <title> … </title>
Specifies that the webpage is written in Contains the title/name of the webpage. You can
HTML. It appears on the very first and last see this in your web browser’s title bar for every
line of the webpage. It’s mainly used to web page. Search engines use this tag to extract
show that the page uses HTML5 – the the topic of the webpage, which is quite
latest language version. Also known as the convenient when ranking relevant search results.
root element, this tag acts as a parent tag Keep in mind that including this tag in your
for every other tag used on the page. document is mandatory.

<head> … </head> <body> … </body>
Used to specify metadata about the webpage. It Everything the user sees on a webpage is written
includes the webpage’s name, its dependencies inside this tag. It’s a container for all the contents
(JS and CSS scripts), font usage, etc. of the webpage.
Example
<html>
<head>
<title>My First Website</title>
</head>
<body>
</body>
</html>
your web content should be easy to perceive for any visitor.
Document Information
<base> <meta>
Used to specify the base URL of your site. This Metadata tag for the webpage. It can help
tag makes linking to internal links on your site highlight the page’s author, keywords, original
systematized. Remember that this tag can published date, etc.
only be used once and only in the <head> tag.
<style> … </style> <script> … </script>
It can be used as an alternative to an external Used to add code snippets, typically in

style sheet or complement it. Includes the JavaScript, to make a web page dynamic. It can
webpage’s appearance information. also be used to just link to an external script.
<link>
Used to link to scripts external to the webpage.

Typically utilized for including stylesheets.

Example
<html>
<head>
<meta charset="utf-8">
<base href="http://myfirstwebsite.tld" target="_blank" />
<title>My Beautiful Website</title>
<link rel="stylesheet" href="/css/master.css">
<script type="text/javascript">
var dummy = 0;
</script>
</head>
<body>
</body>
</html>
Document Structure
<h1-h6> … </h1-h6> <span> … </span>
Six different variations of writing a heading. This tag injects inline elements, like an image,
<h1> has the largest font size, while <h6> icon, or emoticon, without ruining the formatting
has the smallest. or styling of the page.
<br> <div> … </div>
A single line break for webpages. It’s used A web page’s content is usually divided into
to write a new line. blocks specified by the <div> tag.
<hr> <p> … </p>
Similar to the <br> tag. In addition to switching Plain text is placed inside this tag.
to the next line, <hr> tag also draws a horizontal
bar to indicate the end of the section.

Example
<div>
<h1>Top 10 Greatest Films</h1>
<p>These are considered the greatest movies of all time.</p>
<hr>
<h2>The Godfather</h2>
<p>This 1972 classic stars Marlon Brando and Al Pacino.</p>
</div>
Text Formatting
<strong> … </strong> <b> … </b>
Makes text bold. Used to emphasize Alternative to the <strong> tag.

a word or phrase. Generates bold text.
<em> … </em> <i> … </i>
Another emphasis tag, but displays Used to display text in italics but does not
text in italics. emphasize it like the <em> tag.
<cite> … </cite> <ins> … </ins>
A tag for citing the author of a quote. Denotes text that has been added to the webpage.
<blockquote> … </blockquote> <pre> … </pre>
Quotes often go into this tag. Is used Pre-formatted, monospaced font text laid out, with
in tandem with the <cite> tag. whitespace inside the element, remained intact.
<q> … </q> <address> … </address>
Similar to the above tag, but for shorter quotes. A tag for specifying the author’s contact details.
<abbr> … </abbr> <dfn> … </dfn>
Denotes abbreviations or acronyms. A tag dedicated to mark definitions.

<code> … </code> <sub> … </sub>
Used to display code snippets within Used to write a subscript. It’s smaller font just
a paragraph. below the mid-point of regular fonts. Example: ax.
<sup> … </sup> <small> … </small>
Similar to the <sub> tag, but used to Reduces text size. In HTML5, it often refers
write a superscript. Example: ax. to redundant or invalid information.
Example
<p>Here's <strong>some bold text</strong> and here's <em>some text in

italics</em> compared to regular text.</p>
<blockquote>
Anyone who has never made a mistake has never tried anything new.
<cite>- Albert Einstein</cite>
</blockquote>
<pre>
Here's what pre-formatted text looks like.
</pre>
<p>A code snippet example: <code>Three. Two. Online</code></p>
Links
<a href="mailto:"> … </a> <a href=""> … </a>
A tag dedicated to sending emails. An anchor tag. Primarily used to include hyperlinks.
<a href="#name"> … </a> <a href="tel://###-###"> … </a>
A variation of the <a name="name"> tag. An anchor tag for mentioning contact numbers.
Used to navigate to the web page's <div> The numbers are clickable, which can be
section only. particularly beneficial for mobile users.

Images
<img> <area>
A tag to display images on a web page. Specifies image map area.
alt="text" coords=""
A text is displayed when the user hovers Coordinates vital information about the
the mouse over an image. It can be used to shape. Example: vertices for rectangles,
give additional details about the image. center or radius for circles.
border="" src="url"
Specifies the border thickness of the image. A URL or path where the image is located
If not mentioned, the default value is 0. on your drive or the web.
width="" height=""
Specifies image width in pixels or percentages. Specifies image height in pixels or percentages.
shape="" <map> … </map>
The shape of an area. Denotes an interactive (clickable) image.
<map name=""> … </map> align=""
Name of the map associated between The relative alignment of an image. It can change
an image and a map. parallel to other elements on a web page.
Example
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Solar_system.jpg"
width="823" height="1024" alt="The Solar System"
usemap="#solarmap">
<map name="solarmap">
<area shape="circle" coords="572,322,100" href="solar-system.htm" alt="The Solar

System">
</map>

Lists
<ol> … </ol> <li> … </li>
A tag for an ordered or numbered list of items. An individual item as part of a list.
<ul> … </ul> <dt> … </dt>
Opposed to the <ul> tag. Used for an A definition of a single term that is in-line
unordered list of items. with body content.
<dl> … </dl> <dd> … </dd>
A tag for a list of items with definitions. A description of the defined term.
Example
<ol>content should be easy to perceive for any visitor.

your web
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
<dl>
<dt>Toyota</dt>
<dd>A Japanese car brand</dd>
<dt>Armani</dt>
<dd>An Italian fashion brand</dd>
</dl>
Forms
<form> … </form> action="url"
A parent tag for an HTML form. Where the form data will be submitted once the user fills it.

method="" enctype=""
Specifies which HTTP method (POST or Used only for the POST method. It dictates the
GET) will be used to submit the form. data encoding scheme when a form is submitted.
autocomplete novalidate
Determines if the form has Determines whether a form should be

auto-complete enabled. validated before submission.
accept-charsets <label> … </label>
Determines character encodings Used to label a field in the form.

when a form is submitted.
<fieldset> … </fieldset> <legend> … </legend>
Identifies groups of all fields on the form. Operates as a caption for the <fieldset> element.
your web content should be easy to perceive for any target

<input> visitor.
Used to take input from the user. The input type After submission, the form response will be
is determined by a number of attributes. displayed wherever this refers to. Usually has the
following values: _blank, _self, _parent, _top.
Input Type Attribute
type="" size=""
Determines which type of input (text, dates, Determines the input element width
password) is requested from the user. (number of characters).
name="" maxlength=""
Specifies the name of the input field. Specifies the most input field characters allowed.
value="" required
Specifies the value currently contained Makes an input field compulsory. The form cannot
in the input field. be submitted if a required field is left empty.
width="" height=""
Determines the width of the input element Determines the height of the input element in
in pixel values. pixel values.

placeholder="" pattern=""
This tag can be used to provide a hint to the Specifies a regular expression that can be
user about the nature of the requested data. used to look for patterns in the user’s text.
min="" max=""
The minimum value allowed for an The maximum value allowed for an
<input> element. <input> element.
autofocus disabled
Forces focus on the input element when a Disables an input element. The user can no
web page loads completely. longer enter data.
<textarea> … </textarea> <select> … </select>
Applied for longer strings of input. It can be used Specifies a list of options that the user
to get a multi-sentence text from the user. can choose from.
Select Attributes
name="" size=""
A name for a particular list of options. A total number of options given to the user.
multiple required
States if the user can choose multiple Specifies if choosing an option(s) is necessary
options from the list. for form submission.
autofocus <option> … </option>
Specifies that a drop-down list will automatically A tag for listing individual items on the list of
come into focus after the page loads. options.
Option Attributes
value="" selected
A text visible to the user for any given option. Determines which option is selected by
default when a form loads.

<button> … </button>
Tag for creating a button for form submission.
Example
<form action="form_submit.php" method="post">

<fieldset>
<legend>Bio:</legend>
First name:<br>
<input type="text" name="first-name" value="John"
placeholder="Please enter your first name here"><br>
Last name:<br>
<input type="text" name="last-name" value="Doe"
placeholder="Please enter your last name here"><br><br>
Favorite sport:<br>
<select>
<option value="basketball">Basketball</option>
<option value="soccer">Soccer</option>
<option value="tennis">Tennis</option>
</select>
<textarea name="description"></textarea>
<input type="submit" value="Submit">
</fieldset>
</form>
Tables
<table> … </table> <caption> … </caption>
Marks a table on a webpage. A description of a table is placed inside this tag.
<tfoot> … </tfoot> <tbody> … </tbody>
Determines the footer of a table. The body of a table where the data is held.
<tr> … </tr> <thead> … </thead>
Denotes a single row in a table. Specifies information about specific columns of a table.

<th> … </th> <td> … </td>
The value of a heading of a table’s column. A single cell of a table. Contains the actual value/data.
<colgroup> … </colgroup> <col>
Used for grouping columns together. Denotes a column inside a table.
Example
<table>
<colgroup>
<col span="2">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>
Objects and iFrames
<object> … </object> <iframe> … </iframe>
Used to embed an additional multimedia An inline block of content. It’s used as a container for
object into a web page. This can be an multimedia objects in a flexible manner. It floats inside a web
audio/video file, document (.pdf), etc. page, meaning it’s placed relative to other webpage items.

height="" width=""
Determines object height in pixel values. Determines object width in pixel values.
type=""
The type/format of the object’s contents.
iFrame Attributes
name="" srcdoc=""
The name of an iFrame. Any HTML content to be displayed inside an iFrame.
src="" <param />
The source URL/path of the multimedia Used for iFrame customization. This includes
object to be held inside an iFrame. additional parameters to go along with the content.
height="" width=""
Determines the height of an iFrame. Determines the width of an iFrame.
<embed> … </embed>
Used to embed external objects, such as plugins.
Embed Attributes
height="" width=""
Determines the height of an embedded item. Determines the width of an embedded item.
src="" type=""
The URL/path of an embedded item. The type or format of an embedded content.

Example
<object width="1000" height="1000"></object>

<iframe src="other-web-page.html" width="500" height="500"></iframe>
<embed src="video-file.swf" width="500" height=“500"></embed>
HTML5 New Tags
<header> … </header> <footer> … </footer>
Specifies the webpage header. It can also Specifies the webpage footer. It can also be
be used for objects inside the web page. used for objects inside the web page.
<main> … </main> <article> … </article>
Marks the main content of a web page. Denotes an article.
<aside> … </aside> <details> … </details>
Denotes content displayed in Used for additional information. The user

a sidebar of a web page. has the option to view or hide these details.
<figure> … </figure> <summary> … </summary>
A tag reserved for figures (diagrams, Used as a heading for the <details> tag.
charts) in HTML5. It’s always visible to the user.
<dialog> … </dialog> <section> … </section>
Used to create a dialog box. Specifies a particular section in a webpage.
<figcaption> … </figcaption> <mark> … </mark>
A description of the figure is placed inside. Used to highlight a particular portion of a text.
<nav> … </nav> <menuitem> … </menuitem>
Navigation links for the user in a web page. A particular item from a list or menu.
<meter> … </meter> <progress> … </progress>
Measures data within a given range. Typically used as a progress bar. This is used
to track progress.

<rp> … </rp> <ruby> … </ruby>
Shows text for web browsers without Describes a Ruby annotation for East
Ruby annotation support. Asian typography.
<rt> … </rt> <time> … </time>
Displays East Asian typography character details. A tag for formatting date and time.
<wbr>
A line-break within the content.
Collective Character Objects
" " & & < < > >
Quotation Marks (“) Ampersand (&) Less than sign (<) Greater than sign (>)
© © @ Ü ö
Non-breaking space ( ) Copyright symbol (©) @ Symbol (@) Small bullet (•)
û
Trademark symbol (™)

HTML Cheatsheet

Uploaded by

Copyright:

Available Formats

HTML Cheatsheet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Cheatsheet

Uploaded by

Copyright:

Available Formats

Three. Two.

1 Document Summary 9 Select Attributes

7 Lists 13 HTML5 New Tags

HOSTINGER Three. Two. Online

So, let’s get started!

Start your own website with unlimited hosting.

<html> … </html> <title> … </title>

HOSTINGER Three. Two. Online

<head> … </head> <body> … </body>

your web content should be easy to perceive for any visitor.

<style> … </style> <script> … </script>

It can be used as an alternative to an external Used to add code snippets, typically in

Used to link to scripts external to the webpage.

HOSTINGER Three. Two. Online

your web content should be easy to perceive for any visitor.

<h1-h6> … </h1-h6> <span> … </span>

<br> <div> … </div>

<hr> <p> … </p>

HOSTINGER Three. Two. Online

<strong> … </strong> <b> … </b>

Makes text bold. Used to emphasize Alternative to the <strong> tag.

<em> … </em> <i> … </i>

<cite> … </cite> <ins> … </ins>

<blockquote> … </blockquote> <pre> … </pre>

<q> … </q> <address> … </address>

<abbr> … </abbr> <dfn> … </dfn>

Denotes abbreviations or acronyms. A tag dedicated to mark deﬁnitions.

HOSTINGER Three. Two. Online

<code> … </code> <sub> … </sub>

<sup> … </sup> <small> … </small>

<p>Here's <strong>some bold text</strong> and here's <em>some text in

<p>A code snippet example: <code>Three. Two. Online</code></p>

<a href="mailto:"> … </a> <a href=""> … </a>

<a href="#name"> … </a> <a href="tel://###-###"> … </a>

HOSTINGER Three. Two. Online

A tag to display images on a web page. Speciﬁes image map area.

shape="" <map> … </map>

The shape of an area. Denotes an interactive (clickable) image.

<map name=""> … </map> align=""

<area shape="circle" coords="572,322,100" href="solar-system.htm" alt="The Solar

HOSTINGER Three. Two. Online

<ol> … </ol> <li> … </li>

<ul> … </ul> <dt> … </dt>

<dl> … </dl> <dd> … </dd>

<ol>content should be easy to perceive for any visitor.

<form> … </form> action="url"

HOSTINGER Three. Two. Online

Determines if the form has Determines whether a form should be

accept-charsets <label> … </label>

Determines character encodings Used to label a ﬁeld in the form.

<ﬁeldset> … </ﬁeldset> <legend> … </legend>

your web content should be easy to perceive for any target

Input Type Attribute

HOSTINGER Three. Two. Online

<textarea> … </textarea> <select> … </select>

autofocus <option> … </option>

HOSTINGER Three. Two. Online

Tag for creating a button for form submission.

<form action="form_submit.php" method="post">

" " & & < < > >

© © @ Ü ö