600+ Ai Avatars Reel Bundle with Exclusive Bonuses

Largest Reels Bundle Lifetime Access

70K Ultimate ChatGPT Prompt

3000+ Digital Products Bundle

πŸ‘‰ Our Premium Courses πŸ‘ˆ

Get 13TB Mega Link Here

Email me For Courses Links Click HERE

Telegram Ihtreek Tech
Telegram Ihtreek Tech
Telegram Ihtreek Tech
Telegram Ihtreek Tech
Telegram Ihtreek Tech

HTML Cheat Sheet | Become A Pro Free Download –

HTML Cheat Sheet | Become A Pro Free Download –

image 142
HTML Cheat Sheet | Become A Pro Free Download - 3

HTML stands for Hyper Text Mark-up Language

Used for: creating web pages 8 (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.


  •   β€“ space (non-breaking)
  • " – add quotation mark (β€œ)
  • < – less than symbol (<)
  • > – greater than symbol (>)
  • & – the β€˜&’ or ampersand symbol
  • © – copyright symbol
  •  – 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>  <tr>  <td></td>  <td></td>  <td></td>  </tr>  <tr>  <td></td>  <td></td>  <td></td>  </tr> </table> 
<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 –

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

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>  <input>  <select><option></option></select>  <textarea> </form> 

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


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

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

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

image 143
HTML Cheat Sheet | Become A Pro Free Download - 4

Leave a Comment