HTML Cheat Sheet | Become A Pro ⭐

HTML Cheat Sheet | Become A Pro

HTML stands for Hyper Text Mark-up Language

Used for: creating web pages (documents) that are displayed on the World Wide Web (websites). The pages can be a mix of text, images, videos, and other elements. It can be created with: notepad, TextPad or any text editors.

Saved as: .html files

HTML Cheat Sheet

Here we are sharing with you the complete HTML Cheat Sheet:

Basic structure

body tags and main content

The main elements in HTML are the tags. Tags structure and present the data in different forms.


<h1>Heading 1</h1>
<h2>Heading 2 </h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 </h6>


<p>write a paragraph</p>
Attribute β€˜style’ can be used with <p> to display the text inside <p> in a specific manner. For example,
<p style = "color:blue">I will appear blue</p>
<p style = "background-color:blue">Highlighting as blue</p>
<br> line break


Span tag is used for styling inline elements.

<span style = β€œcolor:green”> Address </span>

- prints the word β€˜Address’ in the specified color (here green). The style attribute is used to style HTML elements.


  • &nbsp; – space (non-breaking)
  • &quot; - add quotation mark (β€œ)
  • &lt; - less than symbol (<)
  • &gt; - greater than symbol (>)
  • &amp; - the β€˜&’ or ampersand symbol
  • &copy; - copyright symbol
  • &trade; - trademark symbol


  • <b>Bold text </b>
  • <i>*Italic text*</i>
  • <u>*underlined text*</u>
  • <mark>I am highlighted in yellow</mark>- marks the text in yellow. If other colors are needed, span is used.
  • <span style="background-color: #FF00FF">I am highlighted in pink</span>
  • <strong>I am strong</strong> - give emphasis to a particular text; mostly bold
  • <font></font> - chosen font for the text
  • Font is not used in HTML 5, CSS is used. Attributes of <font> -
  • <face> - the font family, for example Courier New
  • <size> - size of the text
  • <color> - color of the text in hex value (eg. #FF000F) or text (
  • <small></small> - smaller text, fine print size
  • <strike>Strike that out</strike> - strikeout the text inside the tag
  • <sup></sup> - superscript (text above the normal text like exponential numbers)
  • <sub></sub> - subscript
  • <em></em> - emphasis
  • <pre></pre> - preformatted text
  • <tt></tt> - typewriter text


<body> - the main content lies in the body. Inside there can be many sections. Attributes –

  • background=β€œβ€ - Background Image source; can be left empty if no image
  • bgcolor=β€œβ€ - Background Colour in hex value
  • text=β€œβ€ - page text color
  • link=β€œβ€ - Link Colour
  • alink=β€œβ€ - Active (current) Link Colour
  • vlink=β€œβ€ - Visited Link Colour
  • bgproperties=β€œβ€ - Background Properties. A value of β€œfixed” means non-scrolling watermark
  • topmargin=β€œ?” - Top Margin Size in Pixels
  • leftmargin=β€œβ€ - Side Margin Size in Pixels


<meta> tag is a part of and describes information about data. Most common use of metadata is by search engines for keywords. - most common character set Attributes –

  • name = β€œβ€ – can be name like keyword, author, description etc…
  • content = β€œβ€ – the value corresponding to above names

Example - <meta name="keywords" content="What is HTML, How to learn HTML">

Sections and divisions

  • <div></div> new section; nested div tags are very common when multiple sub-sections are required
  • <hr> - horizontal line

<hr> has the following attributes –

<hr size = β€œβ€ width = β€œβ€/width = β€œ%” color = β€œβ€ align = β€œleft/center/right”>
size – thickness of the line in pixels
width – in pixels or percentage (any one)
color – color in hex value
align – alignment; left, right or center


<table> - creates a table,
<tr> - creates a row,
<td> - creates column,
<th> - creates header columns

<table> attributes –

  • border=β€œβ€ - Thickness of outside border in pixels
  • bordercolor=β€œβ€ - Border Colour in hex value
  • cellspacing=β€œβ€ - Space between each cell in pixels
  • cellpadding=β€œβ€ - Space between cell border and content
  • align=β€œβ€ - Horizontal Alignment; left, right, center
  • bgcolor=β€œβ€ - Background Colour hex value
  • width=β€œβ€ - Table Width in pixels or %
  • height=β€œβ€ - Table Height in pixels or %

<td> attributes

  • colspan=β€œβ€ - Number of columns the cell spans across
  • rowspan=β€œβ€ - Number of rows cell spans across
  • width=β€œβ€ - width of cell in pixels or %
  • height=β€œβ€ - height of cell in pixels or %
  • bgcolor=β€œβ€ – hex value of background colour for the cell (column)
  • align=β€œβ€ - Horizontal Align; left, center, right
  • valign=β€œβ€ - Vertical Align; top, middle, bottom
  • - is used to define attributes for particular columns of the table.

Example –

 <col span="1" style="background-color:green">
 <col style="background-color:blue">

The first column will be highlighted as green, whereas other columns will be highlighted as blue.

Forms (HTML Cheat Sheet)

Most of the dynamic content like user inputs, submitting a page, filling a form happen inside this tag. It is a group of related inputs.


<form> tag attributes –

  • action=β€œurl” - destination url upon form submission
  • method=β€œβ€ - form method - get, post
  • enctype=β€œβ€ - type of encoding; for file upload it is β€œmultipart/form-data”

<input> tag attributes –

  • type=β€œβ€ - Mandatory input Field Type: text, password, checkbox, submit and so on.
  • name=β€œβ€ - Form Field Name (mandatory for form processing)
  • value=β€œβ€ - value (entered by user) or default value
  • size=β€œβ€ - field size
  • maxlength=β€œβ€ - Maximum acceptable length of Input Field data
  • checked - Mark selected field in checkbox (multi-select) or radio button (single-select)

<select> </select> - Select options from drop-down list <select> tag Attributes:

  • name=β€œβ€ - Drop Down Combo-Box Name; mandatory for form processing
  • size=β€œβ€ - size of the drop-down list
  • multiple - Allow multiple selections

<option></option> - individual items of the drop-down list <option> tag Attributes:

  • value=β€œβ€ - Option value selected or default value set
  • <textarea>lot of text like description - Large area for text inputs

<textarea> Tag Attributes:

  • name=β€œβ€ - Text area name for form processing
  • rows=β€œβ€ - Number of rows of text shown
  • cols=β€œβ€ - Number of columns (characters per row)
  • wrap=β€œβ€ - text wrapping


  • <iframe src=””></iframe> - embed another document within the current document (page) in a frame.
  • Attribute β€œsrc” – location of the document to be embedded


HTML links, also called as hyperlinks are defined by β€˜a’ tag – Attributes –

  • href = β€œβ€ – the url to be visited when the link is clicked
  • target = β€œβ€ – specifies where to open the link - _blank (new tab/window), _self (same window/tab), _parent (in the parent frame), framename – open in a particular frame.
  • title = β€œβ€ – gives information about the element
  • id = β€œβ€ – to create bookmarks in the page that can be used as value in href attribute.

Examples –

  • <a href = "">Go to</a>
  • <a href = "C:\Users\Public">Open a resource from the given location</a>
  • <a href = "#divprop">Reach a div element specified by the name</a>

Build Responsive Real World Websites with HTML5 and CSS3


For styling, there are many attributes being used with various tags. The attributes are –

 text-align= β€œβ€ – align text; left, right, center
 background-color = β€œβ€ – background color of the element
 color=”” – for color of texts
 font-family = β€œβ€ – for various fonts
 font-size = β€œβ€ size of the font
 border = β€œβ€ – border thickness and color for a table

These styling elements are put together in a CSS.


There are two types of lists – ordered and unordered.

    - ordered list Attributes –

    • type=”” – the numbering of the list – A, a, I, 1, i
    • start = β€œβ€ – starting value
    • <ul></ul> - unordered list

    Attributes –

    • type = β€œβ€ – type of bullet – square, circle, disc
    • <li></li> - individual value in the list

    Attributes –

    • <value> = β€œβ€ – value of list item
    • <type>=”” – type of the list item


    - shows the image when page loads Attributes –

    • src =”sourceofimage” – source of the image; url or file location; mandatory
    • alt = β€œalternate text” – alternate text; mandatory
    • align = β€œleft/right/center” – alignment with respect to surrounding items (text)
    • width = β€œβ€ – in pixels or percentage
    • height = β€œβ€ - in pixels or percentage
    • border = β€œβ€ – thickness of the border in pixels
    • hspace = β€œβ€ – space in pixels on the sides of the image
    • vspace = β€œβ€ – space in pixels on top and bottom of the image

    HTML5 Tags


    Happy learning!


    Very good Thank you very much