Misc

Case sensitivity

  • HTML is case insensitive.
  • XHTML, the next generation of HTML, is case senstive, as is XML.

Character encoding

utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • Unicode
  • For Unicode characters, character entity references or numeric character references are not required

iso-8859-1

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  • Subset of utf-8
  • Supports a set of Western languages
  • For Unicode characters, character entity references or numeric character references are required

Doctype

Quirks mode

  • Quirks mode
  • Standards mode
  • Almost Standards mode
  • IE <= 5 is always in Quirks mode
  • Mode is triggered by the doctype used (no doctype means Quirks mode)
  • Almost Standards mode is the same as Standards mode except for the vertical sizing of table cells

  • For IE6, IE7, FF, Safari, the browser will be in Quirks mode if the following doctype(s) are specified:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • For IE6, IE7, FF, Safari, the browser will be in Almost Standards mode if the following doctype(s) are specified: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

IFrame

<iframe src="..." width="..." height="..." frameborder="..." scrolling="[yes,no,auto]">
Alternative content to display if IFrames are not supported
</iframe>
scrolling
    yes    Both scrollbars are always present; disabled if not needed
    no     Neither scrollbar is present
    auto   Each scrollbar is only present if needed
  • Inline frame
  • A separate page is embedded in the current page
  • Often used to insert content from another website into the current page, and for rich text editors
  • Useful for displaying content that's larger than the available space within the page
  • For Ajax, it's an alternative to editing the document's DOM tree and using XMLHttpRequest
  • Have to specify the width and height for an IFrame; it's not automatically resized like a div
  • IFrames are generally used with scroll bars, unless the content has a fixed size that's known ahead of time
  • If the content in an IFrame is bad, it can’t kill the page as a whole (unless a browser-specific bug kills the entire browser).
  • An IFrame is rendered with a different window object, as if it were in a separate window or tab.
  • In IE 5.5+ and Firefox, it's possible to have a transparent IFrame, by setting the allowtransparency attribute for the IFrame to true, and setting the background-color for the body of the inline page to transparent.
  • For cross-browser support, give the iframe a name and use frames[name].location.href
Displaying remote or untrusted content in an IFrame (failsafe)
  • Hide or collapse the IFrame to a height of 0
  • In the onload event, use innerHTML to check the number of elements (or perform a comparable test)
  • If the content is okay, access the parent tag to display the IFrame

Conditional comments

<!--[if condition]> HTML <![endif]-->
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]--> 

<!--[if !IE]>--> HTML <!--<![endif]--> 

condition:
  IE
  IE version
  lt IE version
  lte IE version
  gte IE version
  gt IE version
  • Only applies to IE >= 5 (on Windows)
  • Applies to HTML, not CSS

Link targets

<a href="..." target="...">...</a>
  • By default, a link will open in the current window or frame
  • To open a link in a different window or frame, use the target attribute
target (the name of the frame or iframe to open the link in, or one of the following)
    _blank     New window
    _self      Current window
    _parent    Parent frame
    _top       Full browser window
  • Specify the name of the frame, or use one of the following values:
  • _blank :  New window
  • _self :  Current window
  • _parent :  Parent frame
  • _top :  Full browser window

Misc

  • The width of a div is 100% by default.
  • Adding marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" to the <body> tag removes any margins from the web page; this code will not validate, however.
  • For images in a table cell, can't have any white space between the <td>, <img>, and </td> tags, or extra vertical space appears.
  • For hyperlinked images in a div, can't have any white space between the <div>, <img>, <a>, </a>, and </div> tags, or extra vertical space appears.
  • cellpadding - equivalent to CSS padding
  • cellspacing - equivalent to CSS margin
  • These are not necessarily 0 by default
  • <p>...</p> tags cannot have <table>...</table> tags nested within them.  When the W3C validator encounters <p>...<table>, it interprets it as <p>...[</p>]<table>, and then views the </p> (following </table>) as an unmatched tag.
  • The width and height of an image can be specified as a percentage