Scribd
Upload
46 views21 pages

HTML Cheat Sheet

The HTML Cheat Sheet provides a concise overview of HTML concepts, including the basic structure of an HTML document, various tags for headings, paragraphs, text formatting, lists, links, images, tables, and more. It also covers attributes for specific tags and includes examples for better understanding. This resource serves as a quick reference for both beginners and experienced developers working with HTML.

Uploaded by

22pa1a04e0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views21 pages

HTML Cheat Sheet

The HTML Cheat Sheet provides a concise overview of HTML concepts, including the basic structure of an HTML document, various tags for headings, paragraphs, text formatting, lists, links, images, tables, and more. It also covers attributes for specific tags and includes examples for better understanding. This resource serves as a quick reference for both beginners and experienced developers working with HTML.

Uploaded by

22pa1a04e0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Page 1 of 23

Home Whiteboard Online Compilers Practice Articles AI Assistant

SQL HTML CSS Javascript Python Java C C++ PHP Scala C#

HTML Cheat Sheet


PDF Meta
DOWNLOAD
View PDF (Free)
This HTML cheatsheet is a summary of theHTML 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>

Advertisement
-

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 1/23
Page 2 of 23

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>

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)

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 2/23
Page 3 of 23

<h6>Heading 6</h6>

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

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 3/23
Page 4 of 23

<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

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

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 4/23
Page 5 of 23

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>

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>

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 5/23
Page 6 of 23

<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


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="https://www.tutorialspoint.com/" 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.

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 6/23
Page 7 of 23

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

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 7/23
Page 8 of 23

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.

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/html-mini-logo.jpg" alt="logo" title="logo"/>

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 8/23
Page 9 of 23

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

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

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 9/23
Page 10 of 23

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.

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

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 10/23
Page 11 of 23

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

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>
tutorialspoint.com<br>
Madhapur, Hyderabad<br>
India
</address>

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 11/23
Page 12 of 23

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

<!--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 &nbsp; entity to display non-breaking space.

Open Compiler

<p>ABC XYZ</p>

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 12/23
Page 13 of 23

3. Less Than and Greater Than


To display less than and greater than characters, you can use the &lt; and &gt;
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.:

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 Examples

<html>.. This tag serves as the root element of an HTML


Try It
</html> document, encapsulating all other elements within it.

<head>.. The 'head' tag include meta-information about the


Try It
</head> document that isn't directly displayed on the page.

<body>..
Sets off the visible portion of the document. Try It
</body>

Puts the name of the document in the title bar, when


<title>..
bookmarking pages, this is what is bookmarked and Try It
</title>
render on the browser's tab.

Body Attributes

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 13/23
Page 14 of 23

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 Examples

<body HTML bgcolor set background color of the document,


Try It
bgcolor=""> using color name or hex value.

HTML text attribute is used to define color of text


<body text=""> Try It
inside the body, default value is black.

Used to set color of hyperlinks inside body, using


<body link=""> Try It
color name or hex value.

Used to specify color of visited hyperlinks, using


<body vlink=""> Try It
color name or hex value.

<body alink=""> Define color of active links (while mouse-clicking). Try It

Text Tags
The following are the different text tags to make the text look beautiful and readable:

Tags & Attributes Description Examples

HTML pre tag used to create preformatted


<pre>..</pre> Try It
text.

<h1>..</h1> to Creates headlines of variable size --


Try It
<h6>..</h6> H1=largest, H6=smallest

The b tag is used create bold text (should


<b>..</b> Try It
use <strong> instead).

Creates italic text (should use <em>


<i>..</i> Try It
instead).

<tt>..</tt> Used to create typewriter-style text. Try It

Used to define source code, usually


<code>..</code> Try It
monospace.

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 14/23
Page 15 of 23

Creates a citation, usually processed in


<cite>..</cite> Try It
italics.

<address>.. Creates address section, usually processed in


Try It
</address> italics.

Emphasizes a word (usually processed in


<em>..</em> Try It
italics).

Emphasizes a word (usually processed in


<strong>..</strong> Try It
bold)

<font size="">.. Sets size of font - 1 to 7 (Recommended to


Try It
</font> use CSS instead).

<font color="">.. Used to define color of font (should use CSS


Try It
</font> instead).

<font face="">.. Defines the font used (should use CSS


Try It
</font> 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
of the same document.

Attributes Description Examples

Creates a hyperlink to
<a href="URL">clickable text</a> a Uniform Resource Try It
Locator.

Creates a hyperlink to
<a href="mailto:email_address">clickable
a specified email Try It
text</a>
address.

Creates a target
<a name="NAME"> location within a Try It
document

Creates a link to that


<a href="#NAME">clickable text</a> Try It
target location.

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 15/23
Page 16 of 23

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 Examples

The P tag is used to define a new paragraph


<p>..</p> Try It
in a document

The br tag is used to insert a line break


<br> Try It
(carriage return) between two lines.

<blockquote>.. Puts content in a quote - indents text from


Try It
</blockquote> both sides.

The div tag is used to format block content


<div>..</div> Try It
with CSS.

The span tag is used to format inline content


<span>..</span> Try It
and block 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.

Tags Description Examples

The ul tag in HTML is used for creating an unordered


<ul>..</ul> Try It
list, i.e, list without numbering.

<ol start="">.. The ol tag is used to create an ordered list


Try It
</ol> (start=xx, where xx is a counting number).

The li tag defines each item in the list for both


<li>..</li> Try It
unordered list and ordered list.

The dl tag is used to create a definition list, a


<dl>..</dl> Try It
heading with its definition.

The dt tag defines heading element of the definition


<dt> Try It
list.

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 16/23
Page 17 of 23

The dd tag defines definition element of the


<dd> Try It
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 Examples

Hr tag is used to insert a horizontal rule in


<hr> Try It
document.

<hr size=""> Sets size (height) of a horizontal rule. Try It

Defines width of rule (as a % or absolute pixel


<hr width=""> Try It
length).

Creates a horizontal rule without a shadow (This


<hr noshade> Try It
attribute is deprecated in HTML5).

<img src="URL"
Adds image, it is a separate file located at the URL. Try It
/>

<img src="URL" Aligns image left/right/center/bottom/top/middle


Try It
align=""> (use CSS).

<img src="URL" Sets the size of the border surrounding the image
Try It
border=""> (use CSS).

<img src="URL" Sets the height of the image, in pixels or


Try It
height=""> percentage of screen width.

<img src="URL" Defines width of image, in pixels or percentage of


Try It
width=""> screen width.

<img src="URL" Sets the alternate text for browsers that can't
Try It
alt=""> process 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:

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 17/23
Page 18 of 23

Tags & Attributes Description Examples

The form tag in HTML is used to define


<form>..</form> Try It
user submittable application form.

Creates a scrollable selection menu. The


<select multiple name=""
Size sets the number of menu items Try It
size=""> </select>
visible before user needs to scroll.

<select name=""> Creates a dropdown menu with default


Try It
</select> size as 0.

Option tag is used to define each item in


<option> Try It
dropdown list.

<textarea name=""
Creates a text box area. Columns set
cols="x" rows="y"> Try It
the width, rows set the height.
</textarea>

The input type with checkbox is used to


<input type="checkbox" create a checkbox, which allows users
Try It
name="" value=""> to select one or more options from a
set.

<input type="checkbox"
Creates a checkbox which is pre-
name="" value="" Try It
checked for certain values.
checked>

<input type="radio" The input type with radio attribute is


Try It
name="" value=""> used to create radio buttons in HTML.

<input type="radio"
Creates a radio button which is pre-
name="" value="" Try It
checked.
checked>

<input type="text" Defines a one-line text area. Size sets


Try It
name="" size=""> length, in characters.

Used to add a submit button at the end


<input type="submit"
of form. Value sets the text in the Try It
value="">
submit button.

<input type="image" Creates a submit button using an


name="" src="" border="" image. It helps to hide a button in an Try It
alt=""> image.

<input type="reset"> A reset button is used within a form to Try It


clear all user inputs and reset the form

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 18/23
Page 19 of 23

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 Examples

<table>.. Tables in HTML are used to organize and display data in


Try It
</table> a tabular format, consisting of rows and columns.

The tr tag inside table tag is used to define each row in


<tr>..</tr> Try It
a table.

The td tag inside tr tag is used to define each cell in a


<td>..</td> Try It
row.

Sets off the table header (a normal cell with bold,


<th>..</th> Try It
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 Examples

<table
Sets the width of the border around table cells. Try It
border="">

<table
Defines amount of space between table cells. Try It
cellspacing="">

<table Sets amount of space between a cell's border and


Try It
cellpadding=""> its contents.

Specify width of the table in pixels or as a


<table width=""> Try It
percentage.

Sets alignment for cells within the row


<tr align=""> Try It
(left/center/right).

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 19/23
Page 20 of 23

<td align=""> Sets alignment for cells (left/center/right). Try It

Defines vertical alignment for cells within the row


<tr valign=""> Try It
(top/middle/bottom).

Sets vertical alignment for cell


<td valign=""> Try It
(top/middle/bottom).

Defines number of rows a cell should span


<td rowspan=""> Try It
(default=1).

<td colspan=""> Sets number of columns a cell should span. Try It

Prevents lines within a cell from being broken to


<td nowrap> Try It
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 Examples

The input type email is used to


<input type="email" name=""> accept text which are in the Try It
format of email address.

The input type with value url is


<input type="url" name=""> Try It
used to specifically accept URLs.

The input type number is used


<input type="number" name=""> Try It
to accept single-line number.

Defines single-line text box for a


<input type="range" name=""> Try It
range of numbers.

<input Generates single-line text box


type="date/month/week/time" with a calendar showing the Try It
name=""> date/month/week/time.

Sets a single-line text box for


<input type="search" name=""> Try It
searching.

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 20/23
Page 21 of 23

Defines single-line text box for


<input type="color" name=""> Try It
choosing a color.

TOP TUTORIALS

Python Tutorial

Java Tutorial

C++ Tutorial
C Programming Tutorial

C# Tutorial

PHP Tutorial
R Tutorial

HTML Tutorial

CSS Tutorial
JavaScript Tutorial

SQL Tutorial

TRENDING TECHNOLOGIES

Cloud Computing Tutorial

Amazon Web Services Tutorial


Microsoft Azure Tutorial

Git Tutorial

Ethical Hacking Tutorial


Docker Tutorial

Kubernetes Tutorial

DSA Tutorial
Spring Boot Tutorial

SDLC Tutorial

Unix Tutorial

CERTIFICATIONS

Business Analytics Certification


Java & Spring Boot Advanced Certification

Data Science Advanced Certification

https://www.tutorialspoint.com/html/html_cheat_sheet.htm 21/23

You might also like