HTML Cheatsheet

< The Complete
HTML
Cheat Sheet
>
by Zahid Khaliq
0 | HTML Cheat Sheet
Table of Content
Document Summary
01
Document Information
Document Structure
Text Formatting 02
Links
03
Images
Lists
Forms
04
Input Type Attributes
Select Attributes
Option Attributes
05
Table Formatting
Objects & iFrames
iFrame Attributes
06
Embed Attributes
HTML5 New tags
Collective Character Objects 07
For the web developers, it is crucial to be proficient in HTML, and while HTML is not the most
difficult to get accustomed to, one can still manage to forget all the nooks and crannies is has to
offer. A good solution, therefore, is to always have a cheat sheet at hand, helping you in your most
troubling moments.
Document Summary Document Information
Let us see how we can break the code up in the <base/>

different components. Used to specify the base URL of your site,
this tag makes linking to internal links on
<!DOCTYPE>
your site cleaner.
Defines the document type.
<meta/>
<html> .... </html>
This is the metadata tag for the webpage.
This tag specifies that the webpage is written
Can be useful for mentoring the page’s
in HTML, it appears at the very first and last
author, keywords, original published date
line of the webpage. It is mainly used to show
etc.
that the page uses HTML5 - the latest version
<link/>
of the language. Also known as the root
element,this tag can be thought as as a parent This is used to link to scripts external to the
tag for every other tag used in the page. webpage. Typically utilized for including
stylesheet.
<head> .... </head>
<style> …. </style>
This is the head tag that contains the
The style tag can be used as an alternative
metadata of the document.
to an external stylesheet, or complement it.
<title> .... </title> Includes the webpage’s appearance
As the name suggests, this tag contains the information.
title/name of the webpage. You can see this in <script> …. </script>
your browser’s title bar for every web page
Used to add code snippets, typically in
open in the browser.
JavaScript, to make webpage dynamic. It can
<body> .... </body> also be used to just link to an external script.
Everything the user can see on a webpage is
written inside this tag. It is container for all the Example
contents of the webpage.
<html>
Example <head>
<meta charset=”utf-8”>
<base
<html>
href=”http://mywebsitename.com
<head>
target=”_blank” />
<title>My Website Name</title>
<title>My Website Name</title>
</head>
<link rel=”stylesheet”
<body>
href=”/css/style.css”>
<script type=”text/javascript>
</body>
var dummy=0;
</html>
</script>
</head>
<body>
</body>
</html>
Document Structure <i> .... </i>

Also used to display text in italic, but does
<h1> .... </h1> to <h6> …. </h6> not emphasize it like above tag.
Represents six levels of section headings, <h1> <cite> .... </cite>
is the max level and <h6> is the lowest level. used to mark up the title of a cited creative
<p> .... </p> work. The reference may be in an
Usually represented paragraph of the abbreviated form according to
webpage. context-appropriate conventions related to
<br/> citation metadata.
Insert a single line break. <del> .... </del>
represents a range of text that has been
<div> … </div>
deleted from a document. This can be used
A webpage’s content is usually divided into
when rendering "track changes"
blocks, specified by the div tag.
<ins> .... </ins>
<span> … </span> Denotes Text that has been inserted into the
The <span> HTML element is a generic inline webpage.
container for phrasing content, which does not <blockquote> .... </blockquote>
inherently represent anything. It can be used
indicates that the enclosed text is an
to group elements for styling purposes.
extended quotation.
<hr/>
<q> .... </q>
Defines thematic break in the webpage. indicates that the enclosed text is a short
<--! …. -->
inline quotation. Most modern browsers
Used to add the comment in the document for
implement this by surrounding the text in
the developers.
quotation marks. This element is intended
for short quotations that don't require
Example
paragraph breaks
<div> <abbr> .... </abbr>
<--! This is comment in HTML sheet --> Denotes abbreviations, along with the full
<h1>This is max title in HTML5</h1> forms.
<p>This is <span>Highlighted</span> <address> .... </address>
paragraph.</p> Tag for specifying author’s contact/address
<hr/>
details.
<h6>This is min tile in HTML5</h6>
</div> <dfn> .... </dfn>
Tag dedicated to the definitions.
Text Formatting <code> .... </code>

This is used to display a code snippets within
<strong>...</strong> the paragraph.
indicates that its contents have strong
<sub> .... </sub>
importance, seriousness, or urgency. Browsers
Used to writing a subscript (small font just
typically render the contents in bold type.
below the midpoint of normal font.)
<sup> .... </sup>
<b>...</b>
Same as above, but this tag is for
Alternative to above tag, also creates text bold.
superscripting.
<em>...</em> <small> .... </small>

Another emphasize tag, it creates text in italic. Reduced the text size in HTML5, it often
refers to redundants or invalid information.
Example border=””
<p><strong>Bold text</strong> Regular Text & Specifies border thickness of the image. If
<em>some words in italic</em> regular text not mentioned, default to 0.
again.</p> <map> … </map>
<blockquote>Anyone who has never made a Denotes an interactive (clickable) image.
mistake has never tried something new. <cite>- <map name=””> … </map>
Albert Einstein</cite></blockquote> Name of the map associated between the
image and the map.
<p>A code snippet: <code>write some code in
this tag</code></p> <area/>
Specifies image map area
Links shape=””
Shape of the image.
<a href=”#”> … </a>
Anchor tag, Primarily used to creates a Example
hyperlink to web pages, files, email addresses,
locations in the same page, or anything else a <img src=”filename.jpg” width=”100”
URL can address. height=”80” alt=”filename”
● Sections of a page with document usemap=”#filename”>
fragments <map name=”filename”>
● Specific text portions with text fragments
● Telephone numbers with tel: URLs <area shape=”rect” coords=”0,0,60,100”
href=”selectarea1.html” alt=”selectarea1”>
● Email addresses with mailto: URLs
● SMS text messages with sms: URLs <area shape=”rect” coords=”90,58,3”
Images <area shape=”circle” coords=”150,58,8”
<img/> </map>
A tag to display images in the webpage.
src=”url”
The url or path where the images is located on
your drive or on the web.
alt=”text”
The text written here is displayed when user
hovers mouse over the image. Can be used to
give additional details of the image.
height=””
Specifies image height in pixels or percentage.
width=””
Specifies image width in pixels or percentage.
align=””
The relative alignment of the image. Can
change with changes to other elements.
Lists enctype=””
Only for POST method, this dictates the data
<ol> … </ol> encoding scheme to be used when form is
Tag for ordered or numbered list of items. submitted.
<ul> … </ul> autocomplete
Contrary to the above tag, used for unordered Determines if the form has autocomplete is
list of items. enabled.
<li> … </li> novalidate
Individual item as part of the list. Determines whether the form should be
<dl> … </dl> validated before submission.
Represents a description list. accept-charsets
Determines character encoding when form
<dt> … </dt>
is submitted.
Specifies a term in a description or definition
list.
target
After submission, the form response is
<dd> … </dd>
displayed werever this refers to, usually has
Provides the description, definition, or value
the following values: _blank, _self, _parent &
for the preceding term.
_top
Example <fieldset> … </fieldset>
<ol> Identifies the group of all fields on the form.
<li>January</li> <label> … </label>
<li>February</li>
This is used to label a field in the form.
<li>March</li>
</ol> <legend> … </legend>
This operates as a caption for the <fieldset>
<ul> element.
<li>April</li>
<input />
<li>May</li>
<li>June</li> This tag is used to take input from the user.
</ul> Input type is determined by a number of
attributes.
<dl>
<dt>Origin</dt> Input Type Attributes
<dd>Japan</dd>
</dl> type=””
Forms Determines which type of input (text,
dates,password & number) is requested
<form> … </form> from the user.
The parent tag for an HTML form. name=””
action=”url” Specifies the name of the input field.
The URL listed here is where the form data will value=””
be submitted once user fills it. Specifies the value contained currently in the
method=”” input field.
It specifies which HTTP method (POST or GET)
would be used to submit the form.
size=”” required
Determines the input element width(number Specifies whether choosing an options is
of characters) necessary.
maxlength=”” autofocus
Specifies the most input field characters Specifies that a drop down list automatically
allowed. comes into focus after a pge loads.
required <option> … </option>
Makes an input field compulsory to be filled. Tag for listing individual items in the list of
width=”” options.
Determines the width of the input element.
Option Attributes
height=””
Determines the height of the input element. value=””
placeholder=”” The text visible to the user for any given
Can be used to give hints to the user about the option.
nature of the requested data. selected
pattern=”” Determines which option is selected by
Specifies a regular expression, which can be default
look for the pattern in the user’s text. <button> … </button>
min=”” Tag for creating a button for form
The minimum value allowed for an <input>. submission.
max=””
Example
The maximum value allowed for an <input>.
autofocus <form actions=”form_submit.php”
Forces focus on the <input>, when webpage method=”post”>
loading is completed. <fieldset>
disabled <legend>Bio:</legend>
First name: <br>
Disable the <input>, user cannot enter data. <input type=”text” name=”first-name”
<textarea> … <textarea/> value=”John” placeholder=”write your
For longer strips of input, can be used to get first name” > <br>
Last name: <br>
multi sentence text from the user
<input type=”text” name=”last-name”
<select> … <select/> vale=”Smith” placeholder=”write your
This tag specifies a list of options which the last name”> <br>
user can choose from. Favourite Sport: <br>
<select>
Select Attributes <option
value=”soccer”Soccer</option>
name=”” <option value=”golf”Golf</option>
</select>
The name of a particular list of options.
<textarea name=”descrip”></textarea>
size=”” <input type=”submit” value=”submit”>
Total number of options given to the user. </fieldset>
multiple </form>
States whether user can choose multiple opts.
Tables Objects & iFrames

<table> … </table> <object> … </object>
Marks a table in webpage. This tag is used to embed additional
<caption> … </caption> multimedia into a webpage. Can be audio,
Description of the table placed inside this tag. video , document (PDF) etc.
<thead> … </thead> height=””
Indicating that they comprise the head of a Determines object height in pixel values.
table with information. width=””
<tbody> … </tbody> Determines object width in pixel values.
The body of the table, where the data is held. type=””
<tfoot> … </tfoot> The type/format of the object’s contents.
Determines the footer of the table. <iframe> … </iframe>
<tr> … </tr> An inline block of content, this is used as a
Denotes a single row in the table. container for multimedia in a flexible
<th> … </th> manner.
The value of a heading of a table’s column.
iFrame Attributes
<td> … </td>
A single cell of a table. Contains the actual name=””
value/data. The name of the iFrame.
<colgroup> … </colgroup> src=””
Used for grouping columns together.
The source URL/path of the multimedia
<col> … </col> object to be held inside the iFrame.
Denotes a column inside the table.
srcdoc=””
Any HTML content to be displayed inside the
Example
iFrame.
<table> height=””
<colgroup> Determines the height of the iFrame.
<col span=”2”>
width=””
<col>
</colgroup> Determines the width of the iFrame.
<tr> <param />
<th>Name</th> For iFrame customization. This includes
<th>City</th> additional parameters to go along with the
</tr>
content.
<tr>
<th>Zahid</th> <embed> … </embed>
<th>Lahore</th> This is used to embed external objects, like
</tr> plugins(e.g a flash video).
</table>
Embed Attributes <figcaption> .... </figcaption>

A description of the figure is placed inside
height=”” these.
Determines the height of the embedded item. <dialog> .... </dialog>
width=”” Used to create a dialog box
<nav> .... </nav>
Determines the width of the embedded item.
Navigation links for the user in a webpage.
type=”” <menuitem> .... </menuitem>
The type or format of embedded item. A particular item from a list or a menu.
src=”” <mark> .... </mark>
Used to highlight a particular portion of the
The URL/path of the embedded item.
text.
Example <meter> .... </meter>
● <object width=”1000” height=”100”></object> Defines a scalar measurement within a
known range, or a fractional value. This
● <iframe src=”anyl_file.html” width=”500”
is also known as a gauge.
height=”200”></iframe>
● <iframe src=”anyl_file.html” width=”500” <progress> .... </progress>
height=”200”></iframe> Typically used for a progress bar, this is used
to track the progress.
<rp> .... </rp>
HTML5 New Tags This tag is meant for showing text for
browsers without ruby annotation support.
<header> .... </header>
<ruby> .... </ruby>
Specifies the webpage header. Could also be Describes a ruby annotation for east asian
used for objects inside the webpage. typography.
<main> .... </main> <rt> .... </rt>
Marks the main content of the webpage. Displays east asian typography character
<footer> .... </footer> details.
Specifies the webpage footer. Could also be <time> .... </time>
used for objects inside the webpage. Tag for formatting time & date.
<article> .... </article> <wbr>
Denotes an article. A line break within the content.
<aside> .... </aside>
Denotes content displayed in a sidebar of the Collective Character objects
webpage.
" " & &
<section> .... </section>
Quotation mark - “ Ampersand sign - &
Specifies a particular section in the webpage.
< < @ Ü
<details> .... </details> Less than sign - < At-sign sign - @
Used for additional information, user has the > > ö
option to view or hide this. Greater than sign - > Small bullet - •
<summary> .... </summary> û
Used as the heading for the above tag. Is Non-breaking space Trademark symbol™
always visible to the user. © ©
<figure> .... </figure> Copyright symbol ©
A tag reserved for figure (diagram, charts) in
HTML5
Follow for more useful content
Telegram
@codehype
Join Telegram for
FREE Coding
Resources
CodeHype

HTML Cheatsheet

Uploaded by

Copyright:

Available Formats

HTML Cheatsheet

Uploaded by

Document Information

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

< The Complete

Document Summary Document Information

Let us see how we can break the code up in the <base/>

Document Structure <i> .... </i>

Text Formatting <code> .... </code>

<em>...</em> <small> .... </small>

Tables Objects & iFrames

Embed Attributes <ﬁgcaption> .... </ﬁgcaption>

You might also like