Basic HTML Codes | HTML TAGS

You want to learn HTML.

Having a proper cheat sheet is likely to make your life a lot more straightforward.

Now it is all in my head, though.

Whether you are a savvy internet developer or just a trying to experiment a little, feel free to use this HTML cheat sheet beneath. I originally made it for myself, but because of the launch of HTML5, I decided to upgrade it, does it look better and share it on my site.

I have listed out all of the mainstream HTML tags as well as the newest HTML5 tags.

Enjoy!



Basic HTML Structure

<html>

 <head>
  <title>website title</title>
 </head>
 <body>
  content of website ...
 </body>
</html>

Common Tags for Blogs



<h?> heading </h?> Defines Heading {h1 largest to h6  smallest}
<p> paragraph </p> Defines (Paragraph of Text)
<b> bold </b> Defines Make text between tags bold
<i> italic </i> Defines Make text between tags italic
<a href=”url“> link name </a> Defines Create a link to another page or website
<div> … </div> Defines Divide up page content into sections, and applying styles
<img src=”filename.jpg“> Defines Show an image
<ul> <li> list </li> </ul> Defines Unordered, bullet-point list
<br> Defines Line Break (force a new line)
<span style=”color:green”> green </span> Defines Use CSS style to change text colour
<h?> ..</h?> Defines Heading (?= 1 for largest to 6 for smallest, eg h1)
<b> .. </b> Defines Bold Text
<i> .. </i> Defines Italic Text
<u> .. </u> Defines Underline Text
<strike> .. </strike> Defines Strikeout
<sup> .. </sup> Defines Superscript . Smaller text placed below normal text
<sub> .. </sub> Defines Subscript .- Smaller text placed below normal text
<small> .. </small> Defines Small . Fineprint size text
<tt> .. </tt> Defines Typewriter Text
<pre> .. </pre> Defines Pre.formatted Text
<blockquote> .. </blockquote> Defines Text Block Quote
<strong> .. </strong> Defines Strong .Shown as Bold in most browsers
<em> .. </em> Defines Emphasis .Shown as Italics in most browsers
<font> .. </font> Defines Font tag obsolete, use CSS. (*)
Section Divisions


<div> … </div> Division or Section of Page Content
<span> … </span> Section of text within other content
<p> … </p> Paragraph of Text
<br> Line Break
<hr> Basic Horizontal Line
<hr> Tag Attributes:
size=”?” Line Thickness in pixels
width=”?” Line Width in pixels
width=”??%” Line Width as a percentage
color=”#??????” Line Colour (*)
align=”?” Horizontal Alignment: left, center, right (*)
noshade No 3D cut-out
<nobr> … </nobr> Line Break
Text Formatting
<h?> ..</h?> Defines Heading (?= 1 for largest to 6 for smallest, eg h1)
<b> .. </b> Defines Bold Text
<i> .. </i> Defines Italic Text
<u> .. </u> Defines Underline Text
<strike> .. </strike> Defines Strikeout
<sup> .. </sup> Defines Superscript . Smaller text placed below normal text
<sub> .. </sub> Defines Subscript .- Smaller text placed below normal text
<small> .. </small> Defines Small . Fineprint size text
<tt> .. </tt> Defines Typewriter Text
<pre> .. </pre> Defines Pre.formatted Text
<blockquote> .. </blockquote> Defines Text Block Quote
<strong> .. </strong> Defines Strong .Shown as Bold in most browsers
<em> .. </em> Defines Emphasis .Shown as Italics in most browsers
<font> .. </font> Defines Font tag obsolete, use CSS. (*)
Images



<img src=”url” alt=”text“> Basic Image
<img> Tag Attributes:
src=”url URL or filename of image (required!)
alt=”text Alternate Text (required!)
align=”?” Image alignment within the surrounding text (*)
width=”??” Image width (in pixels or %)
height=”??” Image height (in pixels or %)
border=”??” Border thickness (in pixels) (*)
vspace=”??” Space above and below image (in pixels) (*)
hspace=”??” Space on either side of image (in pixels) (*)
Lists
<ol> … </ol> Ordered List
<ul> … </ul> Un-ordered List
<li> … </li> List Item (within ordered or unordered)
<ol type=”?“> Ordered list type: A, a, I, i, 1
<ol start=”??”> Ordered list starting value
<ul type=”?“> Unordered list bullet type: disc, circle, square
<li value=”??”> List Item Value (changes current and subsequent items)
<li type=”??”> List Item Type (changes only current item)
<dl> … </dl> Definition List
<dt> … </dt> Term or phrase being defined
<dd> … </dd> Detailed Definition of term
Linking Tags
<a href=”url“> link text </a> Basic Link
<a> Tag Attributes:
href=”url Location (url) of page to link to.
name=”??” Name of the link (name of an anchor, or name of the bookmark)
target=”?” Link target location:_self, _blank, _top, _parent
href=”url#bookmark Link to a bookmark (defined with attributename).
href=”mailto:email The link which initiates an email (dependant on the user’s email client).
<ol> … </ol> Ordered List
<ul> … </ul> Un-ordered List
<li> … </li> List Item (within ordered or unordered)
<ol type=”?“> Ordered list type: A, a, I, i, 1
<ol start=”??”> Ordered list starting value
<ul type=”?“> Unordered list bullet type: disc, circle, square
<li value=”??”> List Item Value (changes current and subsequent items)
<li type=”??”> List Item Type (changes only current item)
<dl> … </dl> Definition List
<dt> … </dt> Term or phrase being defined
<dd> … </dd> Detailed Definition of term
Tables
<table> … </table> Define a Table
<table> Tag Attributes:
border=”?” The thickness of the outside border
bordercolor=”#??????” Border Colour
cellspacing=”?” Space between cells (pixels)
cellpadding=”?” Space between cell wall and content
align=”??” Horizontal Alignment: left, center, right (*)
bgcolor=”#??????” Background Colour (*)
width=”??” Table Width (pixels or %) (*)
height=”??” Table Height (pixels or %) (*)
<tr> … </tr> Table Row within table
<th> … </th> Header Cell within table row
<td> … </td> Table Cell within table row
<td> Tag Attributes:
colspan=”?” Number of columns the cell spans across (cell merge)
rowspan=”?” Number of the row a cell spans across (cell merge)
width=”??” Cell Width (pixels or %) (*)
height=”??” Cell Height (pixels or %) (*)
bgcolor=”#??????” Background Colour (*)
align=”??” Horizontal Alignment: left, center, right (*)
valign=”??” Vertical Alignment: top, middle, bottom (*)
nowrap Force no line breaks in a particular cell
Frames
<frameset> … </frameset> Define the set of Frames
<frameset> Tag Attributes:
rows=”??,??, …” Define row sizes & number of rows (size in pixels or %)
cols=”??,??, …” Define column sizes & number of columns (size in pixels or %)
noresize=”noresize” User cannot resize any frames in frameset
<frame> … </frame> Define a frame within the frameset
<frame> Tag Attributes:
src=”url” Location of HTML File for a frame
name=”***” Unique name of frame window
marginwidth=”?” Horizontal margin spacing inside frame (pixels)
marginheight=”?” Vertical margin spacing inside frame (pixels)
noresize=”noresize” Declare all frameset sizes as fixed
scrolling=”***” Can the user scroll inside the frame: yes, no, auto
frameborder=”?” Frame Border: (1=yes, 2=no)
bordercolor=”#??????” Border Colour (*)
<noframes> … </noframes> Unframed content (for browsers not supporting frames)



Forms
<form> … </form> Form input group decleration
<form> Tag Attributes:
action=”url” URL of Form Script
method=”***” Method of Form: get, post
enctype=”***” For File Upload: enctype="multipart/form-data"
<input> … </input> Input field within form
<input> Tag Attributes:
type=”***” Input Field Type: text, password, checkbox, submit etc.
name=”***” Form Field Name (for form processing script)
value=”***” Value of Input Field
size=”***” Field Size
maxlength=”?” Maximum Length of Input Field Data
checked Mark selected field in radio button group or checkbox
<select> … </select> Select options from drop down list
<select> Tag Attributes:
name=”***” Drop Down Combo-Box Name (for form processing script)
size=”?” Number of selectable options
multiple Allow multiple selections
<option> … </option> Option (item) within drop down list
<option> Tag Attributes:
value=”***” Option Value
selected Set option as default selected option
<textarea> … </textarea> Large area for text input
<textarea> Tag Attributes:
name=”***” Text Area Name (for form processing script)
rows=”?” Number of rows of text shown
cols=”?” Number of columns (characters per rows)
wrap=”***” Word Wrapping: off, hard, soft



Special Characters
&lt; < – Less-Than Symbol
&gt; > – Greater-Than Symbol
&amp; & – Ampersand, or ‘and’ sign
&quot;  – Quotation Mark
&copy; © – Copyright Symbol
&trade;  – Trademark Symbol
&nbsp;   – Space (non-breaking space)
&#??; ISO 8859-1 character – replace ?? with the iso code
Miscellaneous Tags
<!– … –> Comment within HTML source code
<!DOCTYPE html … > Document Type Definition (wiki)
<meta> .. </meta> META information tag
<meta> Tag Attributes:
name=”**” Meta name: description, keywords, author
http-equiv=”**” HTTP Equivalent Info: title, etc.
content=”**” Information content
<link> LINK content relationship tag
<link> Tag Attributes:
rel=”**” Type of forward relationship
http=”url Location (URL) of object or file being linked
type=”**” Type of object or file, eg: text/css
title=”**” Link title (optional)
Body Background & Colours
<body> Tag Attributes:
background=”url Background Image (*)
bgcolor=”#?????” Background Colour (*)
text=”#?????” Document Text Colour (*)
link=”#?????” Link Colour (*)
vlink=”#?????” Visited Link Colour (*)
alink=”#?????” Active Link Colour (*)
bgproperties=”fixed” Background Properties – “Fixed” = non-scrolling watermark (*)
leftmargin=”?” Side Margin Size in Pixels (Internet Explorer) (*)
topmargin=”?” Top Margin Size in Pixels (Internet Explorer) (*)

Basic HTML Codes

html tags html tags



html tags html tags html tags html tags

html codes

CSS Cheat Sheet for Beginners