HTML Cheat Sheet

This is a summarized form of the HTML Tutorial.

For reference this is the HTML Specification .

What is HTML

  • HTML stands for Hyper Text Markup Language.
  • An HTML file is a text file containing small markup tags telling a web browser how to display the page. It must end with htm or html.
  • A simple HTML web page
<!DOCTYPE ...>
  <head> <title> Title of page </title> </head>
  <body background=url> This is my first webpage. </body>
  • HTML 4 comes in three versions :
    • Strict which contains no deprecated elements or frames
      "-//W3C//DTD HTML 4.01//EN"
    • Transitional which includes deprecated elements
      "-//W3C//DTD HTML 4.01 Transitional//EN"
    • Frameset which includes deprecated elements and frames
      "-//W3C//DTD HTML 4.01 Frameset//EN"

HTML Components

  • HTML documents are text files consisting of HTML elements.
  • HTML elements are defined using HTML tags. HTML Tag Reference.
  • HTML tags contain the element name surrounded by angle brackets ( < > ).
  • HTML tags normally come in pairs - the start tag(<p>) and the end tag (</p>).
  • The text between the start tag and the end tag is the element content.
  • HTML tags may contain attributes with values specified in the start tag e.g. <h1 align=“center”>.
  • Attribute values should always be either single or double-quoted.
  • Element and attribute names are not sensitive but lowercase names are recommended and required in XHTML.
  • Standard attributes valid for most elements include: class, id, title, style, lang.

Formatting Tags

  • Basic tags
    • <p> … </p> defines a paragraph.
    • <br /> is a line break (a self-closed tag).
    • <hr /> is a horizontal line.
    • <!–– … ––> is a comment.
  • Physical formatting tags
    • <h1> to <h6> defines headers level 1 through 6.
    • <b> - bold, <i> - italic, <em> - emphasized, <big>,<small>, <sub>, <sup> .
    • <del > is for deleted text, <ins> for inserted text.
    • <pre> … </pre> contains pre-formatted text.
    • <blockquote></blockquote> is used for a long quote, <q></q> for a short quote.
  • Logical Formatting Tags
    • < code>, <tt>, <kbd>, <samp>, <var> are computer-related text tags.
    • <abbr title=“United Nations”>UN</abbr>
    • <acronym title=“World Wide Web”>WWW</acronym>
    • <address> is for addresses
    • <cite> is for citations, <dfn> for definitions.

Lists & Tables

  • <ul><li></li></ul> - Unordered list, can have type disc, circle, square.
  • <ol><li></li></ol> - Ordered list, can have type A, a, I, i.
  • <dl><dt></dt><dd></dd></dl> - Definition list
  •      <table border="1">
         <caption>My Table</caption>
         <tr><th>header 1</th> <th>header 2</th></tr>
         <tr><td>row 1-cell 1</td> <td>row 1-cell 2</td></tr>
  • A table with border 0 can be used to format the layout of a page.
  • A table can also be in the form: <thead> <tfoot> <tbody> , but all three must be specified and contain at least one row.
  • To set attributes of columns in a table, a colgroup with column entries can be used e.g.
    <table border="1">
    <colgroup span="2">
    <col width="20"></col>
    <col width="50"></col>
    </colgroup> ... </table>


  • Forms are areas that contain form elements used to allow the user to enter and submit information e.g.
<form name="input" action="cgi.php" method="get">
  <input type="text" name="name" value="">
  <input type="radio" name="sex" value="male">
  • Valid input types include: text, radio/checkbox (checked=“checked”), button (also <button>), submit (for the submit button).
  • For a drop-down selection :
    <select name="cars">
     <optgroup label="German">
      <option value="audi" selected="selected">Audi</option>
     <option value="saab">Saab</option>
  • <textarea rows=“10” cols=“30”> </textarea> for a text area.
  • To define a field set with a caption
  • <button type=“button”>Click Me</button> - another button

Other Tags

  • <a href=“url/#anchor” target=“_top/_blank/framename”></a> - a link. Always add the trailing slash for a folder to prevent an extra request.
  • <a href=“mailto:a@b?subject=”></a> - E-mail link
  • <a name=“”></a> - an anchor (webpage bookmark)
  • <img border=0 src=url width=0 height=0 alt=“alt text”> - an image. Align can be set to bottom/top/middle/left/right.
  • <frameset cols/rows=“25%,50%,25%”> - a vertical or horizontal set or frames.
  • <frame src=“frame_a.htm”> - a single frame
  • <noframes> <iframe> - no-frames alternative page, internal frame
  • An image map :
    <img src="planets.gif" usemap="#planetmap">
    <map id="planetmap" name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm">
    <area shape="circle" coords="90,58,3" href="merc.htm">

Fonts, Colors & Backgrounds

  • A body tag can contain bgcolor/text/background attributes.
  • All above attributes are deprecated in HTML 4, style sheets should be used instead.
  • Colors are defined as hex values, rgb values or by name e.g. #000000=rgb(0,0,0)=black, #FF0000=rgb(255,0,0)=red.
  • 16 valid colour names are guaranteed valid: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
  • 140 colour names are universally supported - colour name reference, chart.
  • The 216 cross-browser color palette was created to ensure that all 256-color monitors would display the colors correctly. It is now obsolete.
  • The <font> tag is deprecated, style-sheets or the style attribute should be used instead e.g.
     <p style="font-family:verdana;font-size:80%;color:green">

Character Entities

  • A character entity represents a single character. Character entities Symbol Entities.
  • It consists of an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;) (e.g. &#60;).
  • Common character entities include: &gt; , &lt; , &nbsp; (space), &quot; , &apos; .
  • Other common symbols include: cent ¢, pound £, yen ¥, euro €, copy ©, times ×, div ÷, reg ®, sect §
  • Non-standard letters and other characters can be displayed url-encoded using hexadecimal format e.g. %20.


  • The head element of a page is not displayed. It contains information about the document.
  • It may only contain the following tags: base (base url for links), link (external resources, meta, title, style, and script.
  • Example style declaration in head
      <style type="text/css">
        h1 {color: red}
        h3 {color: blue}
  • Examples of the meta tag
    <meta name="keywords" content="HTML, DHTM" />
    <meta name="description" content="Free tutorials" />
    <meta name="revised" content="My Name, 6/10/99" />
    <meta http-equiv="refresh" content="5" />

Advanced HTML

  • <div> is used to group elements or divide a page into sections. <span> is used for selecting a part of an element. Both can be used for formatting purposes.
  • A simple script in a webpage
      <script type="text/javascript">
        <!-- //to prevent display in older browsers
        document.write("Hello World!")
      <noscript>Javascript not supported</noscript>
  • An object element with child param elements can also be used to embed content.
  • accesskey (character) and tabindex (integer) attributes can be used to make a page keyboard-friendly.
  • Events allow scripts to be registered for certain user actions. There are four types of events :
    • window events are only valid in a body or frameset element: onload, onunload.
    • form element events: onchange, onselect, onreset, onsubmit, onblur, onfocus
    • keyboard events: onkeydown, onkeypress, onkeyup
    • mouse events: onclick, ondblclick, onmousedown, onmousemove, onmouseup, onmouseover, onmouseup


  • XHTML is a stricter and cleaner replacement for HTML defined as an XML format.
  • XHTML requires elements to be closed, properly nested and lowercase.
  • Documents must have a DOCTYPE declaration and only a single root element. They must have a head with a title and a body.
  • Attributes must be lowercase with quoted values and must have values (e.g. checked=“checked”).
  • id replaces the name attribute, xml:lang replaces lang but both should be used for compatibility.
  • There are three XHTML variations
    • Strict - No presentational attributes allowed
      <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    • Transitional - Presentational attributes allowed but no frames
      <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    • Frameset - Allows presentational attributes and frames
      <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
Recent changes RSS feed Creative Commons License Donate Minima Template by Wikidesign Driven by DokuWiki