Page 1 of 19
HTML Cheat Sheet
This HTML cheatsheet is a summary of the HTML tutorial. Here, you will find quick
information about HTML concepts, starting from the basic structure to advanced
elements.
Basic HTML Structure
The following is the basic structure of an HTML document:
Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage's Page Title</title>
</head>
<body>
<!-- Webpage's content goes here -->
</body>
</html>
Heading Tags
The following are the six HTML heading tags, where <h1> is the main heading of the
webpage and <h6> is the least heading with the smallest size:
Heading 1 (<h1> Tag)
<h1>Heading 1</h1>
Heading 2 (<h2> Tag)
<h2>Heading 2</h2>
Page 2 of 19
Heading 3 (<h3> Tag)
<h3>Heading 3</h3>
Heading 4 (<h4> Tag)
<h4>Heading 4</h4>
Heading 5 (<h5> Tag)
<h5>Heading 5</h5>
Heading 6 (<h6> Tag)
<h6>Heading 6</h6>
Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.
Paragraph
The <p> tag is used to place content in a paragraph.
Open Compiler
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis
mattis nisi, at facilisis nunc tempus sed. Duis sagittis odio ac neque tempor
iaculis. Fusce et arcu consequat, pretium lectus ut, venenatis leo. Phasellus
libero enim, semper ut luctus a, pretium in turpis. Donec eget ultricies arcu,
et suscipit nisi. Ut et neque posuere, lacinia dui vitae, varius tellus.
Mauris placerat, leo sed pretium viverra, massa ante ultricies orci, quis
vehicula ex elit et ligula. Nullam ac lectus semper, aliquet neque sit amet,
cursus urna. Aenean faucibus dignissim orci sed malesuada. Maecenas arcu erat,
aliquam eget lacus non, malesuada consectetur tellus. Fusce non eros et dui
ultrices consequat. Vivamus rutrum lobortis purus, ut cursus massa malesuada
vel.</p>
<p>Morbi sollicitudin luctus velit, eget maximus ex accumsan at. Sed interdum
Page 3 of 19
felis a erat tempor, et hendrerit sapien lacinia. Maecenas imperdiet lacinia
ante ut congue. Vestibulum vehicula vulputate dolor non hendrerit.</p>
Text Formatting Tags
1. <b>
This tag makes the enclosed text bold.
Open Compiler
<p><b>This is bold text</b></p>
2. <i>
This tag is used to make the enclosed text italic.
Open Compiler
<p><i>This is italic text</i></p>
3. <u>
The <u> tag underlines the text.
Open Compiler
<p><u>This is underlined text</u></p>
4. <strong>
The <strong> tag is used for semantically important text.
Open Compiler
Page 4 of 19
<p><strong>This is important bold text</strong></p>
5. <em>
The <em> tag is used to emphasize text.
Open Compiler
<p><em>This is emphasized italic text</em></p>
5. <sub>
The <sub> tag is used for subscript text.
Open Compiler
<p>H<sub>2</sub>O</p>
6. <sup>
The <sup> tag creates superscript text.
Open Compiler
<p>x<sup>2</sup> (x squared)</p>
7. <strike>
The <strike> tag shows text with a strikethrough effect.
Open Compiler
<p><strike>This is strikethrough text</strike></p>
8. <mark>
Page 5 of 19
The <mark> tag highlights or marks text.
Open Compiler
<p><mark>This text is highlighted</mark></p>
Listing Tags
HTML provides two tags for listing <ul> and <ol>. The <ul> tag displays an unordered
listing (shows bullets), and the <ol> tag displays an ordered listing (shows numbers).
Unordered Listing
The <ul> tag defines an unordered listing, which shows bullets with list items.
Open Compiler
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Ordered Listing
The <ol> tag defines an ordered listing, which shows numbers with list items.
Open Compiler
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Link (Anchor) Tag
Page 6 of 19
To link different internal or external webpages with text, images, or any other HTML
elements, use the <a> tag. The <a> tag defines an anchor link.
Attributes of the <a> tag are:
href: It is used to define the target page's link.
title: It is used to place the text that you want to see on the mouse over the link.
target: It is used to define where you want to open the link (in the same tab, or in
the new tab).
Open Compiler
<p>Open TutorialsPoint by clicking on the following link:</p>
<p><a href="[Link] target="_blank" title="Open
TutorialsPoint">Open TutorialsPoint</a></p>
Container Tags
HTML container tags are used as the parent element to contain the other HTML tags.
These tags are used to define multiple sections on the webpage.
There are many container tags, such as <div>, <span>, <p>, etc.
<div> Tag
The <div> tag defines the division (or blocks) on the webpage.
Open Compiler
<div>
<p>Paragraph inside div</p>
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
<span> Tag
Page 7 of 19
The <span> tag may contain various elements in it. Whenever you want to apply specific
styles to a part of the text, you can use it.
Open Compiler
<p>Hello, World: This is <span style="background-
color:#f40;color:#fff;padding:8px;">HTML Cheatsheet</span>.</p>
<p> Tag
The <p> tag can also be used as a container tag, where you can use other tags such as
<span>, <a>, <button>, etc.
Open Compiler
<p>Take a variable <span class="tp-codespan">x</span> and assign
<strong>100</strong> in it.</p>
<pre> Tag
The <pre> tag is used for preserving formatting and can also be used to display
programming code on the webpage.
Open Compiler
<pre>
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
</pre>
<code> Tag
The <code> tag is used to display source codes.
Page 8 of 19
Open Compiler
<code>#include <stdio.h></code>
Images
The <img> tag inserts an image on the webpage. The following are the attributes of the
<img> tag:
src: It defines the source (path) of the image.
alt: It defines an alternative text to be displayed on the webpage when an image is
not found.
title: It defines the title that shows on the mouse over on the image.
Read More: HTML Images
Open Compiler
<img src="/html/images/[Link]" alt="logo" title="logo"/>
Tables
The HTML <table> tag is used to display data in a tabular format. The following tags are
used with the <table> tag:
<thead>: It defines table head.
<tbody>: It defines the table body.
<tr>: It defines a row in the table.
<th>: It defines a table cell (known as a table head) inside a <tr> tag.
<td>: It defines a table cell (known as table data) inside a <tr> tag.
<caption>: It defines the table's caption.
Table Structure
The table structure is as follows:
Open Compiler
Page 9 of 19
<table>
<caption>Table Structure</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
Table Tag Attributes
The following are the common attributes that can be used with the <table> tag.
Note: These attributes are deprecated in HTML5.
Attribute Description Example Status
It defines the thickness
border <table border="1"> Deprecated
of the table border.
It defines the padding
cellpadding <table cellpadding="10"> Deprecated
inside a table cell.
It defines the space
cellspacing <table cellspacing="5"> Deprecated
between table cells.
It defines the width of
width <table width="100%"> Deprecated
the table.
Page 10 of 19
Attribute Description Example Status
It defines the height of
height <table height="300"> Deprecated
the table.
It defines the alignment
align <table align="center"> Deprecated
of the table.
It defines the
bgcolor background color of the <table bgcolor="#f0f0f0"> Deprecated
table.
It provides a summary of <table summary="Sales data
summary Deprecated
the table's purpose. for Q1">
It defines the color of the <table border="1"
bordercolor Deprecated
table border. bordercolor="blue">
Quotation and Citation Elements
The following are the quotation and citation tags:
1. <blockquote> and <cite> Tags
The <blockquote> defines the quoted text, and <cite> defines the title of the work.
Open Compiler
<blockquote>
Education is the most powerful weapon which you can use to change the world.
</blockquote>
<p><cite>Programming in ANSI C</cite> was written by E. Balagurusamy.</p>
2. <q> Tag
The <q> tag is used to define a short quotation.
Open Compiler
<p>Here is: <q>Live as if you were to die tomorrow</q></p>
Page 11 of 19
3.<abbr> Tag
The <abbr> tag is used to define an abbreviation or an acronym.
Open Compiler
<p>The <abbr title="HyperText Markup Language">HTML</abbr> was founded in
1993.</p>
4. <address> Tag
The <address> tag is used to define the contact information.
Open Compiler
<address>
Written by SUDHIR SHARMA.<br>
Visit us at:<br>
[Link]<br>
Madhapur, Hyderabad<br>
India
</address>
5. <bdo> Tag
The <bdo> tag is used to override the current text direction
Open Compiler
<bdo dir="rtl">HTML stands for Hyper Text Markup Language</bdo>
Comments
Place the comment in an HTML document by using <!-- and -->.
Open Compiler
Page 12 of 19
<!--This is comment-->
Entities
1. Character Entities
HTML character entities can be used with the & (ampersand) sign.
Open Compiler
<p>This is RIGHT ARROW: →</p>
<p>This is LEFT ARROW: ←</p>
<p>This is BLACK SUN WITH RAYS: ☀</p>
<p>This WHITE UP POINTING INDEX: ☝</p>
2. Non-breaking Space
Use the entity to display non-breaking space.
Open Compiler
<p>ABC XYZ</p>
3. Less Than and Greater Than
To display less than and greater than characters, you can use the < and >
respectively.
Open Compiler
<p>The <BODY> tag defines body of the webpage.</p>
HTML Quick Reference
Find the quick reference of different HTML tags, elements, attributes, etc.:
Page 13 of 19
Basic Tags Horizontal Rule & Image Attributes
Body Attributes Forms
Text Tags Tables
Links Table Attributes
Text and Layout HTML5 input tag Attributes
Lists
Basic Tags
The following are the basic and required tags for an HTML document:
Tags Description
<html>.. This tag serves as the root element of an HTML document,
</html> encapsulating all other elements within it.
<head>.. The 'head' tag include meta-information about the document that
</head> isn't directly displayed on the page.
<body>..
Sets off the visible portion of the document.
</body>
<title>.. Puts the name of the document in the title bar, when bookmarking
</title> pages, this is what is bookmarked and render on the browser's tab.
Body Attributes
The body section is the main part of any website, as we all know. There are a few
attributes that can be applied to the <body> tag. It is highly recommended that these
attributes not be used to develop an actual website but only be used in email
newsletters.
Attributes Description
<body HTML bgcolor set background color of the document, using
bgcolor=""> color name or hex value.
HTML text attribute is used to define color of text inside the
<body text="">
body, default value is black.
Used to set color of hyperlinks inside body, using color name
<body link="">
or hex value.
Page 14 of 19
Used to specify color of visited hyperlinks, using color name or
<body vlink="">
hex value.
<body alink=""> Define color of active links (while mouse-clicking).
Text Tags
The following are the different text tags to make the text look beautiful and readable:
Tags & Attributes Description
<pre>..</pre> HTML pre tag used to create preformatted text.
<h1>..</h1> to <h6>.. Creates headlines of variable size -- H1=largest,
</h6> H6=smallest
The b tag is used create bold text (should use
<b>..</b>
<strong> instead).
<i>..</i> Creates italic text (should use <em> instead).
<tt>..</tt> Used to create typewriter-style text.
<code>..</code> Used to define source code, usually monospace.
<cite>..</cite> Creates a citation, usually processed in italics.
<address>..</address> Creates address section, usually processed in italics.
<em>..</em> Emphasizes a word (usually processed in italics).
<strong>..</strong> Emphasizes a word (usually processed in bold)
Sets size of font - 1 to 7 (Recommended to use CSS
<font size="">..</font>
instead).
Used to define color of font (should use CSS
<font color="">..</font>
instead).
<font face="">..</font> Defines the font used (should use CSS instead).
Links
HTML links, also known as hyperlinks, are a fundamental feature of the World Wide Web.
They allow users to navigate between different web pages, websites, or different sections
Page 15 of 19
of the same document.
Attributes Description
Creates a hyperlink to a
<a href="URL">clickable text</a>
Uniform Resource Locator.
<a href="[Link] Creates a hyperlink to a
text</a> specified email address.
Creates a target location
<a name="NAME">
within a document
Creates a link to that target
<a href="#NAME">clickable text</a>
location.
Text and Layout
Text and Layoutin HTML involves using a variety of tags to define the structure,
appearance, and semantic meaning of the text. Here are some of the most commonly
used HTML tags for text formatting.
Tags Description
The P tag is used to define a new paragraph in a
<p>..</p>
document
The br tag is used to insert a line break (carriage
<br>
return) between two lines.
<blockquote>..
Puts content in a quote - indents text from both sides.
</blockquote>
<div>..</div> The div tag is used to format block content with CSS.
The span tag is used to format inline content and block
<span>..</span>
content with CSS.
Lists
In HTML, lists are used to group a set of related items. There are three main types of
lists: ordered lists, unordered lists, and description lists. Each serves a different
purpose and is marked up with specific HTML tags.
Page 16 of 19
Tags Description
The ul tag in HTML is used for creating an unordered list, i.e, list
<ul>..</ul>
without numbering.
<ol start="">.. The ol tag is used to create an ordered list (start=xx, where xx
</ol> is a counting number).
The li tag defines each item in the list for both unordered list
<li>..</li>
and ordered list.
The dl tag is used to create a definition list, a heading with its
<dl>..</dl>
definition.
<dt> The dt tag defines heading element of the definition list.
<dd> The dd tag defines definition element of the definition list.
Horizontal Rule and Image Attributes
The following are the attributes for customizing horizontal rules, such as size, width, and
for images, including source, alignment, border, dimensions, etc.:
Attributes Description
<hr> Hr tag is used to insert a horizontal rule in document.
<hr size=""> Sets size (height) of a horizontal rule.
<hr width=""> Defines width of rule (as a % or absolute pixel length).
Creates a horizontal rule without a shadow (This attribute is
<hr noshade>
deprecated in HTML5).
<img src="URL" /> Adds image, it is a separate file located at the URL.
<img src="URL"
Aligns image left/right/center/bottom/top/middle (use CSS).
align="">
<img src="URL"
Sets the size of the border surrounding the image (use CSS).
border="">
<img src="URL" Sets the height of the image, in pixels or percentage of
height=""> screen width.
<img src="URL" Defines width of image, in pixels or percentage of screen
width=""> width.
Page 17 of 19
<img src="URL" Sets the alternate text for browsers that can't process
alt=""> images (required by the ADA).
Forms
HTML forms are one of the most important components of web development. The
following table contains the common tags and attributes related to designing forms in
HTML:
Tags & Attributes Description
The form tag in HTML is used to define user
<form>..</form>
submittable application form.
Creates a scrollable selection menu. The Size sets
<select multiple name=""
the number of menu items visible before user
size=""> </select>
needs to scroll.
<select name=""> </select> Creates a dropdown menu with default size as 0.
Option tag is used to define each item in
<option>
dropdown list.
<textarea name="" cols="x" Creates a text box area. Columns set the width,
rows="y"></textarea> rows set the height.
The input type with checkbox is used to create a
<input type="checkbox"
checkbox, which allows users to select one or
name="" value="">
more options from a set.
<input type="checkbox" Creates a checkbox which is pre-checked for
name="" value="" checked> certain values.
<input type="radio" name="" The input type with radio attribute is used to
value=""> create radio buttons in HTML.
<input type="radio" name=""
Creates a radio button which is pre-checked.
value="" checked>
<input type="text" name="" Defines a one-line text area. Size sets length, in
size=""> characters.
<input type="submit" Used to add a submit button at the end of form.
value=""> Value sets the text in the submit button.
Page 18 of 19
<input type="image" name="" Creates a submit button using an image. It helps
src="" border="" alt=""> to hide a button in an image.
A reset button is used within a form to clear all
<input type="reset"> user inputs and reset the form fields to their
default values.
Tables
Tables are used to render the data in a structured form. Use tables for data layout and
CSS for page layout.
Tags Description
<table>.. Tables in HTML are used to organize and display data in a tabular
</table> format, consisting of rows and columns.
<tr>..</tr> The tr tag inside table tag is used to define each row in a table.
<td>..</td> The td tag inside tr tag is used to define each cell in a row.
<th>..</th> Sets off the table header (a normal cell with bold, centered text).
Table Attributes
Sometimes a normal table is not enough to represent the data we want to render. So,
some attributes are required to be used on table elements so that the table looks good.
Use these attributes for email newsletters, and to decorate a table, use CSS for better
results.
Attributes Description
<table border=""> Sets the width of the border around table cells.
<table
Defines amount of space between table cells.
cellspacing="">
<table Sets amount of space between a cell's border and its
cellpadding=""> contents.
<table width=""> Specify width of the table in pixels or as a percentage.
<tr align=""> Sets alignment for cells within the row (left/center/right).
Page 19 of 19
<td align=""> Sets alignment for cells (left/center/right).
Defines vertical alignment for cells within the row
<tr valign="">
(top/middle/bottom).
<td valign=""> Sets vertical alignment for cell (top/middle/bottom).
<td rowspan=""> Defines number of rows a cell should span (default=1).
<td colspan=""> Sets number of columns a cell should span.
<td nowrap> Prevents lines within a cell from being broken to fit.
HTML5 Input Tag Attributes
These attributes are newly included after the release of HTML5, and the input tag plays
an important role. Not all browsers support these attributes. So, it is better to verify
before using.
Attributes Description
The input type email is used to accept
<input type="email" name=""> text which are in the format of email
address.
The input type with value url is used to
<input type="url" name="">
specifically accept URLs.
The input type number is used to accept
<input type="number" name="">
single-line number.
Defines single-line text box for a range of
<input type="range" name="">
numbers.
<input Generates single-line text box with a
type="date/month/week/time" calendar showing the
name=""> date/month/week/time.
<input type="search" name=""> Sets a single-line text box for searching.
Defines single-line text box for choosing a
<input type="color" name="">
color.
