My Profile Photo

An IT Engineer with a love for all things IT including (but not limited to), Microsoft Azure, Automation and Service Management!

Basic HTML Cheatsheet

Handy little HTML cheat-sheet for use when developing your website.


Basic Tags

Creates an HTML document

Sets off the title and other information that isn’t displayed on the Web page itself

Sets off the visible portion of the document

Body Attributes

<body bgcolor=”pink”> Sets the background color, using name or hex value

<body text=”black”> Sets the text color, using name or hex value

<body link=”blue”> Sets the color of links, using name or hex value

<body vlink=”#ff0000″> Sets the color of followed links, using name or hex value

<body alink=”#00ff00″> Sets the color of links on click

<body ondragstart=”return false” onselectstart=”return false”> Disallows text selection with the mouse and keyboard

Text Tags

Creates preformatted text

Creates the largest headline

Creates the smallest headline

Creates bold text

Creates italic text

Creates teletype, or typewriter-style text

Creates a citation, usually italic

Emphasizes a word (with italic or bold)

Emphasizes a word (with italic or bold)

<font size=”3″></font> Sets size of font, from 1 to 7

<font color=”green”></font> Sets font color, using name or hex value


<a href=”URL”></a> Creates a hyperlink

<a href=”mailto:EMAIL”></a> Creates a mailto link

<a href=”URL”><img src=”URL”> </a> Creates an image/link

<a name=”NAME”></a> Creates a target location within a document

<a href=”#NAME”></a> Links to that target location from elsewhere in the document


Creates a new paragraph

<p align=”left”> Aligns a paragraph to the left (default), right, or center.

Inserts a line break

Indents text from both sides

Creates a definition list

Precedes each definition term
Precedes each definition
    Creates a numbered list
      Creates a bulleted list
    • Precedes each list item, and adds a number or symbol depending upon the type of list selected <div align=”left”> A generic tag used to format large blocks of HTML, also used for stylesheets <img src=”name”> Adds an image <img rajaram=”name” align=”left”> Aligns an image: left, right, center; bottom, top, middle <img src=”name” border=”1″> Sets size of border around an image
      Inserts a horizontal rule <hr size=”3″ /> Sets size (height) of rule <hr width=”80%” /> Sets width of rule, in percentage or absolute value
      Creates a rule without a shadow **CSS** font-family {font-family:} (specify) or ~ [serif, sans-serif\*, cursive\*, fantasy*, monospace] font-style {font-style:} normal, italic font-weight {font-weight:} normal\*, bold, 100\*, 200\*, 300\*, 400\*, 500\*, 600\*, 700\*, 800\*, 900\* font-size {font-size:} , *, ~~, color {color:} (see [/webmonkey/stylesheets/reference/units.html “Units of Measure”)] background-color {background-color:} (see [/webmonkey/stylesheets/reference/units.html “Units of Measure”)] background-image {background-image:url()} URL (relative or absolute path margin $ {margin:} \*\*, \*\*, auto(sequence:t r b l) margin-top {margin-top:} **, , auto Margin-right {margin-right:} , , auto margin-bottom\* {margin-bottom:} \*, \*, auto\* margin-left {margin-left:} , , auto padding $\* {padding:} \*, *, (sequence:t r b l) padding-top\* {padding-top:} \*, * padding-right\* {padding-right:} \*, * padding-bottom\* {padding-bottom:} \*, * padding-left\* {padding-left:} \*, * border-color\* {border-color:} \* border-style\* {border-style:} solid\*, double\*, groove\*, ridge\*, inset\*, outset* border $\* {border:} \*, *,
      comments powered by Disqus