HTML Cheat Sheet – Quick Guide To HTML Tags For Beginners

Refer to this comprehensive HTML Cheat Sheet to learn about various commonly used HTML coding tags with code examples:

As we begin the tutorial, we will first understand what is HTML language and further in the tutorial, we will take a look at the various HTML tags. Here, we shall also understand some of the tags used in HTML5.

So let us get going and first understand what is HTML.

HTML Cheat Sheet

What Is HTML

HTML stands for Hyper Text Markup Language. It is a markup language that was invented by Tim Berners-Lee in the year 1991. In simple words, we can say that this is a language that describes how the content on a web page would display. For this purpose, it uses tags within which the text to be displayed is embedded. The browser interprets those tags to display the text on the screen.

There have been many revisions to HTML, and the most recent one available is HTML5 that was released in the year 2014.

What Is An HTML Cheat Sheet

HTML Cheat Sheet is a quick reference guide that lists the commonly used HTML tags and their attributes. The tags are generally grouped category wise for easy readability.

HTML Tags

Below we have grouped the tags into various categories and we shall learn about the tags falling in each category along with examples.

Basic Tags

TagsPurpose
<HTML>...</HTML>This is the parent tag (root element) for any HTML document. The entire HTML code block is embedded within this tag
<HEAD>...</HEAD>This tag provides general information about the document like its title and links to style sheets(if any). This information is not displayed on the web page.
<TITLE>...</TITLE>My Web Page
<BODY>...</BODY>My First Web Page

Code Snippet:

<HTML>
   	<HEAD>
      	   <TITLE> 
		My Web Page  
      	   </TITLE>
  	 </HEAD>
 	 <BODY>
		My First Web Page
   	</BODY>
</HTML>

Output:

My Web Page
(Displayed in the browser’s Title Bar)

My First Web Page
(Displayed as Web page content)

Meta Information Tags

TagsPurpose
<BASE>
This is used to specify the base URL of the website.
<META>
It contains information like Published date, author;s name etc.
<STYLE>
It contains the information related to the appearance of the web page.
<LINK> It is used to indicate external links, mainly stylesheets. It is an empty tag and contains attributes only.
<SCRIPT> …. </SCRIPT>Used for adding code snippets to make a web page dynamic.

Code Snippet:

<HTML>
     <HEAD>
         <META name="The author" content="Rashmi"> 
         <BASE href=”https://Webpage.com” target=”_blank”>
         <TITLE> Rashmi’s Web Page </TITLE>
         <LINK rel=”Stylesheet” href=”/parent.css”>
         <SCRIPT src=”source.js”>
            Var a=10;
         </SCRIPT>
     </HEAD>
     <BODY>
            This is Rashmi’s Web Page Content Area
     </BODY>
</HTML>

Output:

Rashmi’s Web Page

(Displayed in the browser’s Title Bar)

This is  Rashmi’s Web Page Content Area

(Displayed as Web page content)

Text Formatting Tags

TagPurposeCode SnippetOutput
<B> .... </B>Makes the text bold<B>Hello</B>Hello
<I> .... </I>Makes the text Italic<I>Hello</I>Hello
<U> .... </U>Underlines the text<U>Hello</U> Hello
<STRIKE>.... </STRIKE>Strike out the text<STRIKE>Hello</STRIKE>Hello
<STRONG>.... </STRONG>Makes the text bold
(Same as <B>..</B> tag)
<STRONG>Hello</STRONG>Hello
<EM>.... </EM>Makes the text Italic
(Same as <I>..</I> tags)
<EM>Hello</EM>Hello
<PRE> ....</PRE>Preformatted text
(spacing, line break and font are preserved)
<PRE>HELLO Sam</PRE>
 HELLO   Sam
<H#> ....
</H#>
Heading Tag - # can range from 1 to 6<H1>Hello</H1>
<H6>Hello </H6 >

Hello


Hello

<SMALL> ....</SMALL>Makes the text small sized<SMALL>Hello</SMALL> Hello
<TT> ....</TT>Displays text Typewriter style<TT>Hello</TT> Hello
<SUP> ....</SUP>Displays text as Superscript5<SUP>2</SUP>5 2
<SUB> ....</SUB>Displays text as SubscriptH<SUB>2</SUB>OH2O
<BLOCKQUOTE>...</BLOCKQUOTE>Displays text as a distinct code block<BLOCKQUOTE>Hello</BLOCKQUOTE>
Hello

FORM

Purpose: This tag is used to accept user input.

AttributePurposeValue
actionMentions where the form data is to be sent after submittingURL
autocompleteMentions if form has autocomplete feature or noton
off
targetMentions display place of response received after form submission_self
_parent
_top
_blank
methodSpecifies method used to send the form dataget
post
nameName of the formtext

Code Snippet:

<FORM name=”User_Details” action=”/data.php” method=”get” autocomplete=”on” target=”_blank”>
<LABEL for="name">Name:</LABEL>
<INPUT type="text" id="your_name" name="your_fname">

Output:

FORM tag output

INPUT

Purpose: This tag specifies an area to capture user input

AttributePurposeValue
altMentions an alternate text to appear if image is missingtext
autofocusMentions if the input field should have focus when the form loadsautofocus
nameMentions the name of the input fieldtext
requiredMentions if an input field is mandatoryrequired
sizeMentions character lengthnumber
typeMentions type of input fieldbutton, checkbox, image, password, radio, text, time
valueMentions the value of an input areatext

Code Snippet:

<INPUT type=text autofocus name=”user_name” required size=”50” value="Please enter your name">

Output:

INPUT tag output

TEXTAREA

Purpose: This is an input control used to capture multi-line user input.

AttributePurposeValue
colsDefines the width of the textareanumber
rowsDefines the number of visible lines in the textareanumber
autofocusDefines if field should get autofocus on page loadautofocus
maxlengthDefines max characters allowed in the textareanumber
nameDefines the textarea nametext

Code Snippet:

<TEXTAREA name="data" rows="4" cols="50" autofocus maxlength=”200”>
    Hi! This is a textarea
</TEXTAREA>

Output:

textarea tag output

BUTTON

Purpose: It is used to include a button (clickable) on the screen.

AttributePurposeValue
nameDefines the button’s nametext
typeDefines the type of the buttonbutton, reset, submit
valueDefines the initial value of the buttontext
autofocusDefines if the button should get autofocus on page loadautofocus
disabledDefines if button is disableddisabled

Code Snippet:

<BUTTON type=”button” name="button1" value=”Click Me” autofocus> 
     CLICK ME
</BUTTON>

Output:

BUTTON tag output

SELECT

Purpose: This tag is mostly used along with the FORM tag to capture user input. It creates a drop-down list from which the user can select a value.

AttributePurposeValue
nameDefines the name of drop down listtext
requiredDefines if drop down selection is mandatoryrequired
formDefines the form the drop down is associated withform ID
autofocusDefines if the drop down should get autofocus on page loadautofocus
multipleDefines if more than one options can be selectedmultiple

Code Snippet:

<SELECT name="mode" form="transport_id" multiple autofocus required>
<OPTGROUP label="Transport Used">
    <OPTION value="private">Private</OPTION>
    <OPTION value="public">Public</OPTION>
</OPTGROUP>

Output:

SELECT tag output

OPTION

Purpose: This tag is used to define the options of a SELECT list.

AttributePurposeValue
disabledDefines the option to be disableddisabled
labelDefines a short name for an optionText
selectedDefines an option to be pre selected on page loadselected
valueDefines the value that is sent to the serverText

Code Snippet:

<SELECT name="mode" >
    <OPTION value="private" disabled label=”PV”>Private</OPTION>
    <OPTION value="public" selected>Public</OPTION>

Output:

option tag output

OPTGROUP

Purpose: This tag is used to group options in a SELECT tag.

AttributePurposeValue
disabledDefines if an option group is disableddisabled
LabelDefines a label for an option grouptext

Code Snippet:

<SELECT name="mode" id="Transport">
     <OPTGROUP label="Private">
         <OPTION value="private1">Car</OPTION>
         <OPTION value="private2">Bike</OPTION>
     </OPTGROUP>
     <OPTGROUP label="Public">
          <OPTION value="public1">Bus</OPTION>
          <OPTION value="public2">Taxi</OPTION>
      </OPTGROUP>
</SELECT>

Output:

optgroup output

FIELDSET

Purpose: This tag is used to group related elements in a form.

AttributePurposeValue
disabledDefines if a fieldset should to be disableddisabled
formDefines the form to which the fieldset belongsform ID
nameDefines a name for the fieldsettext

Code Snippet:

<FORM action="/action_page.php">
  <FIELDSET>
       First Name <INPUT type="text" id="fname" name="fname"><br><br>
       Last Name <INPUT type="text" id="lname" name="lname"><br><br>
       Age &nbsp; &nbsp;<INPUT type="email" id="email" 
          name="email"><br><br>
              <INPUT type="submit" value="Submit">
</FIELDSET>
</FORM>

Output:

fieldset output

LABEL

Purpose: As the name suggests, this tag is used to define a label for various other tags.

AttributePurposeValue
forDefines the ID of the element, to which the label is associatedelement ID
formDefines the ID of the form, to which the label is relatedform ID

Code Snippet:

<P> Do you agree with the view: </P>
	
<INPUT type="radio" name="option1" id="yes" value="YES">
<LABEL for="yes">YES</LABEL><br>

<INPUT type="radio" name="option2" id="no" value="NO">
<LABEL for="no">NO</LABEL><br>

<INPUT type="radio" name="option3" id="mb" value="MAY BE">
<LABEL for="may be">MAY BE</LABEL><br>

Output:

label output

OUTPUT

Purpose: This tag is used to show the result of a calculation

Code Snippet:

<P> x = 
 	<INPUT type="number" name="x" value=""><BR>
 	<P> y =  	
 	<INPUT type="number" name="y" value=""><BR><BR>
 	Output is:<OUTPUT name="add"></OUTPUT>

Output:

output

iFRAME

Purpose: It is used to embed a document in the current HTML document. This tag was introduced in HTML5.

AttributePurposeValue
allowfullscreenAllows to set iframe to full screen modetrue, false
heightMentions iframe heightpixels
srcMentions link of the iframeURL
widthMentions iframe widthpixels

Code Snippet:

<iFRAME src=”\sample.html” height=”200” width=”200” 
  allowfullscreen=”true”>
</iFRAME>

Below is the content of sample.html file used in the code snippet above:

<HTML>
   <HEAD>
BODY {
  Background-color: green;
}
H1 {
Color: white;
}
</HEAD> 
   <BODY>
       Success<br>can<br>be<br>found<br>with<br>hardwork.<br>
   </BODY>
</HTML>

Output:

iframe

LIST

Purpose: Lists are used to group similar items together. HTML provides two types of List tag – Ordered <OL> and Unordered <UL> lists.

TagPurpose Code SnippetOutput
<OL>.... </OL>Creates a numbered list by default.<OL>
<LI> Red </LI>
<LI> Blue </LI>
<LI> Green </LI>
</OL>

  1. Red

  2. Blue

  3. Green

<UL> …. </UL>Creates a bulleted list by default.<UL>
<LI> Red </LI>
<LI> Blue </LI>
<LI> Green </LI>
</UL>

  • Red

  • Blue

  • Green

<LI> …. </LI>Indicates a list item for ordered as well as unordered list<UL>
<LI> Hello </LI>
<LI> World </LI>
</UL>

  • Hello

  • World


IMAGE

Purpose: It allows embedding an image on a web page. It serves as a placeholder.

AttributePurposeValue
alt (mandatory)Mentions text to appear if image is not displayed for some reasontext
src (mandatory)Mentions path of the imageURL
heightMentions height of the imagepixels
widthMentions width of the imagepixels

Code Snippet:

<IMG src="Bird.jpg" alt="Bird" width="200" height="300">

Output:

img

LINK

Purpose: This tag allows the user to define a link to an external document. It is placed in the <head> section of the document. It is generally used to link external style sheets.

AttributesPurposeValue
hrefMentions the place where the link should redirectDestination URL
titleMentions information to be shown as tooltipText
targetMentions where the link should open_self (opens in the same window)
_blank (opens in a new tab or window)
_top (opens in the full screen mode from top of the window)
_parent (opens link in the parent frame)

Code Snippet:

<HEAD>
    <TITLE>Link Tag</TITLE>
    <LINK rel = "stylesheet" href = "stylenew.css">
</HEAD>
<BODY>
     <p> This text is formatted with external style sheet </p>
</BODY>

Below is the code of “stylenew.css” used above.

BODY {
             Background-color: powderblue;
             }
H1       {
             Color: white;
             }

Output:

link

TABLE

Purpose: This tag is used to define a table structure.

TagsPurpose
<TABLE> …. </TABLE>To define a table structure
<TH> …. </TH>To define table header
<TR> …. <TR>To define row
<TD> …. </TD>To define table data

Code Snippet:

<TABLE>
   <TR>
        <TH> Quarter </TH>
        <TH> Revenue ($) </TH> 
   </TR>
   <TR>
        <TD> 1st </TD>
        <TD> 200 </TD>
   </TR>
   <TR>
         <TD> 2nd </TD>
         <TD> 225 </TD>
    </TR>
</TABLE>

Output:

Table

HTML5 Tags

Tags PurposeCode SnippetOutput
<ARTICLE>To display an independent piece of article<ARTICLE>
<H3> TOURISM </H3>
<P>This industry has been greatly impacted by the pandemic. </P>
</ARTICLE>

TOURISM


This industry has been greatly impacted by the pandemic.



<ASIDE>To display text not much relevant to the web page content<H4> TOURISM </H4>
Travel for pleasure or business.
<ASIDE>
<H6>Travel</H6>
<P> Tourism is a dynamic and competitive industry. </P>

TOURISM


Travel for pleasure or business.
<AUDIO>To include an audio file<P>Click to play:</P>

<AUDIO controls>
<SOURCE src="rythm.mp3"
type="audio/mp3">
</AUDIO>

Click to play:



<CANVAS>To render an instant graphic such as a graph<CANVAS id=”mycanvas” width=”50” height=”10”> The browser does not support the canvas tag </CANVAS>Canvas
<DETAILS>To display additional information that the user can obtain if required<DETAILS>
<P> This is a website marketed by GIPS group </P>
<SUMMARY> Welcome to this webpage </SUMMARY>
</DETAILS>

This is a website marketed by GIPS group


Welcome to this webpage
<EMBED>To include external content or plugin<EMBED src=”sound.html” width=”10” height=”20”>Sound.html
This file lists the various type of sounds

(Above was the content of the src file ‘sound.html” as mentioned in the code)
<FIGURE>To display information that is treated as a single unit and is self contained<FIGURE>
<IMG src=”bird.gif”>
</FIGURE&gt
figure
<FOOTER>To display information as footer<FOOTER>
<P> URL: SoftwareTestingHelp <BR>
<A HREF=”https://www.softwaretestinghelp.com/ ”>
SoftwareTestingHelp.com
</A>
</FOOTER>
<HEADER>To display information as header<HEADER>
<H1> This is Heading 1 </H1>
<P>This is the information section</P>
</HEADER>

This is Heading 1


This is the information section


<MARK>To highlight text which is to be referenced in another section<P>Below text is <MARK>encrypted <MARK>
</P>

Below text is encrypted

<METER>To represent a measurement unit<P> Your Progress status is: </P>
<METER id="status_id" value="0.5">60%</METER>

Your Progress status is:


60%
<NAV>To reference a section to be used for navigation<P> E-commerce websites=> Tech websites </P>
<A href="https://www.softwaretestinghelp.com/ ">SoftwareTestingHelp</A> <BR>
<A href="https://www.softwaretestinghelp.com/practical-software-testing-new-free-ebook-download/">Free eBook</A> <BR>

E-commerce websites:Tech websites


SoftwareTestingHelp

Free eBook
<OUTPUT>To display the result of a calculation<FORM oninput="add.value=parseInt(x.value)+add(y.value);">
<P> x =
<INPUT type="number" name="x" value=""/><BR>
<P> y =
<INPUT type="number" name="y" value=""><BR><BR>
Output is:<OUTPUT name="add"></OUTPUT>
</FORM>

x =


y =



Output is:

<PROGRESS>To display the progress of a task<P> Transfer status :
<PROGRESS id="data" value="50" max="100"> 25% </PROGRESS>

Transfer status :
25%

<SECTION>To distinguish a document part as a separate section<SECTION>
<H4>Section 1</H4>
<P>Hi! This is section 1.</P>
</SECTION>

<H4>Section 2</H4>
<P>Hi! This is section 2.</P>
</SECTION>

Section 1


Hi! This is section 1.




Section 2


Hi! This is section 2.


<TIME>To display date/ time<P> Current time is <TIME> 5:00 PM </TIME> </P>

Current time is

<VIDEO>To represent a video<VIDEO width="320" height="240" controls>
<SOURCE src="seasons.mp4" type="video/mp4">
</VIDEO>

<WBR>To include a line break<P> Line is broken in two <WBR>lines</P>

Line is broken in two lines

Frequently Asked Questions

Q #1) What are the four basic HTML tags?

Answer: The four basic tags used in HTML are:

<HTML>..</HTML>
<HEAD>..</HEAD>
<TITLE>..</TTILE>
<BODY>..</BODY>

Q #2) What are the 6 heading tags?

Answer: HTML provides us with 6 heading tags as below:

<H1>..</H1>
<H2>..</H2>
<H3>..</H3>
<H4>..</H4>
<H5>..</H5>
<H6>..</H6>

The content written within the heading tag appears as a distinct text as a heading where H1 is the biggest and H6 the smallest sized heading.

Q #3) Is HTML case sensitive?

Answer: No, it is not case sensitive. The tags and their attributes can be written in either upper or lower case.

Q #4) How do I align text in HTML?

Answer: Text in HTML can be aligned using the <P> paragraph tag. This tag uses the attribute Style to align the text. The CSS property text-align is used to align the text.

Refer code snippets below:

<P style="text-align:right">
<P style="text-align:left"> 
<P style="text-align:center">

Q #5) How to set Heading alignment in HTML?

Answer: Similar to text, alignment for Heading can also be set using the text-align property of CSS. The Style attribute can be used with the heading tag as below:

<H1 style="text-align:right">
<H1 style="text-align:left">
<H1 style="text-align:center">

Q #6) What is the difference between HTML elements and tags?

Answer: An HTML element comprises the start tag, some content, and the end tag

Example:

<H1 style="text-align:right"> Heading </H1>

On the other hand, the start or end tag is what we refer to as the HTML tag.

Example: <H1> or <H1> or <P> or </P> each of these are referred to as tags. However, it should be noted that often the two terms are used interchangeably.

Q #7) What are the 2 types of tags in HTML?

Answer: There are two types of tags in HTML Paired and Unpaired or Singular tags.

Paired Tags – As the name suggests, these are tags comprising 2 tags. One is called the opening tag and the other is called the closing tag. For example: <HTML> </HTML>, <TITLE> </TITLE> etc.

Unpaired Tags – These tags are single tags and only have the opening tag and no closing tag. For example: <BR>, <IMG> etc.

Q #8) What is the difference between a container tag and an empty tag?

Answer:

Container tags are those tags that have an opening tag followed by content and a closing tag. For example: <DIV> </DIV>, <SPAN>

Empty tags are the tags that do not have any content and/or closing tag. For example: <BR>, <HR> etc.

Q #9) What is the largest heading tag?

Answer: <H1> is the largest heading tag in HTML tag.

Q #10) What is the select tag in HTML?

Answer: A <SELECT> tag is used for creating a drop-down list. It is most commonly used in forms where user input is to be collected. Below is a code snippet along with the output of the tag. It also shows the common attributes of this tag.

Code Snippet:

<H4>How do you travel to work</H4>
<SELECT name="travel" id="mode">
   <OPTION value="Private Transport">Private Transport</OPTION>
    <OPTION value="Public Transport">Public Transport</OPTION>
</SELECT>

Output:

select tag output

Conclusion

Hope this article has provided you with an understanding of what exactly an HTML cheat sheet is. The aim was to share with our readers a quick reference guide of various frequently used HTML tags.

We have also seen Basic Tags, Meta Information tags, Text Formatting tags, Forms, Frames, Lists, Images, Links, Tables, and Input tags. Some tags, generally used along with the FORM tag like Select and Button, is also covered in this article. We also learned about the tags introduced with HTML5.

For each of the tags, we learned about the most common attributes used along with the tags and also saw its related code and output.