» HTML :: CSS, JavaScript and XHTML Explained

Web Development for the iPhone: HTML, CSS & JS Support December 5, 2009

Filed under: Accessibility,Best Practices,Browsers,Character Entities,contactApp,CSS (including hacks),DTD,firebug,HTML,IE7,InvoiceApp,iPhone,JavaScript,Web Development — Estelle Weyl @ 9:27 pm

Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I’ve also added the attributes that each element supports. I didn’t include id, class, style, dir & title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.

iPhone Support for CSS3 Selectors
iPhone Support for CSS3 properties
iPhone & Safari Support for HTML elements, including HTML5
HTML attributes for the iPhone and Safari
Safari and iPhone Event Handlers
Other iPhone and Safari Resources

iPhone Support for CSS3 Selectors

All CSS Selectors are supported by Safari on the iPhone. See CSS browser support for a chartcomparison of all the selectors. Selectos include:

*
E
.class
#id
E F
E > F
E + F
E[attribute]
E[attribute=value]
E[attribute~=value]
E[attribute|=value]

:first-child
:link
:visited
:lang()
:before
::before
:after
::after
:first-letter
::first-letter
:first-line
::first-line

E[attribute^=value]
E[attribute$=value]
E[attribute*=value]
E ~ F
:root
:last-child
nly-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
nly-of-type
:nth-of-type()
:nth-last-of-type()

:empty
:not()
:target
:enabled
:disabled
:checked
see them all

iPhone Support for CSS3 properties

Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all CSS2.1 properties and values by browser for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:

Some CSS3 including the following, which will be discussed in future blog posts.

hsl(), rgba(), hsla() color support
native rounded corners (-webkit-border-radius)
IE box model (-webkit-box-sizing)
Shadows on text (text-shadow was in CSS2.0)
Shadows on elements (-webkit-box-shadow)
multiple background images
opacity /gradient transparency
@font-face web fonts
CSS Animation
Media Queries
namespaces

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.

<ELEMENT>	Element Name	Safari Version	iPhone Support	Attributes (and Notes in italic)
Elements occuring outside the body element
<!DOCTYPE>	Document Type Declaration	1.0	1.0
<html>	html	1.0	1.0	manifest (Saf. 4, iphone 2.2)
<head>	document head	1.0	1.0	profile
<base />	url base for links	1.0	1.0	href, target
<link />	link	1.0	1.0	charset, href, media, rel, rev, target
<meta />	meta	1.0	1.0	content, name, http-equiv, scheme
<style>	style	1.0	1.0	media, type
<script>	script	1.0	1.0	charset, defer, language, src, type
<title>	document title	1.0	1.0
Elements Occuring in the <body> in HTML 4.01 and HTML5
<body>	document body	1.0	1.0	bgproperties (value: fixed)
<a>	Anchor	1.0	1.0	different event handlers for iPhone than Safari accesskey, charset, href (required), hreflang, rel, rev, shape (rect/cirlce/poly), target (deprecated, but useful), type
<abbr>	Abbreviation	1.0	1.0	title shows on hover in Safari
<acronym>	acronym	1.0	1.0	title shows on hover in Safari
<address>	address	1.0	1.0	italic
<area>	image map area	1.0	1.0	accesskey, alt (required), coords, href (required), hreflang, shape (rect/cirlce/poly), target
<article>				HTML5
<aside>				HTML5
<audio>	audio	3.1	3.0	HTML5: Similar to object, can nest sources and content to cascade until supported found. Audio support includes AAC, M4A, MP3, Wave, AIFF , Apple Lossless, Quicktime, but not OGG; autoplay, controls, end, loopend, loopstart, playcount, src, start
<bdo>	bi-directional override	1.0	1.0
<blockquote>	long quote	1.0	1.0	cite
<br>	break return or forced line break	1.0	1.0
<button>	push button	1.0	1.0	accesskey, disabled, type, value
<canvas>	canvas drawing region	1.3	1.0	HTML5: Stroke and fill colors, rgba/hsla colors, paths, rectangles, shadows, gradients, patterns, translations, rotation and scale
<caption>	caption	1.0	1.0
<cite>	citation	1.0	1.0
<code>	code	1.0	1.0
<col />	column	1.0	1.0	char, charoff, span
<colgroup>	column group	1.0	1.0	char, charoff, span
<dd>	definition description	1.0	1.0
<del>	delete	1.0	1.0	datetime
<dfn>	definition	1.0	1.0
<div>	generic block element	1.0	1.0	aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4.0)
<dl>	definition list	1.0	1.0
<dt>	definition term	1.0	1.0
<em>	emphasized text	1.0	1.0
<fieldset>	field set	1.0	1.0
<figure>				HTML5
<footer>				HTML5
<form>	form	1.0	1.0	accept, accept-charset, action, enctype. method, target
<frame />	frame	1.0	1.0	frameborder, longdesc, marginheight, marginwidth, noresize, scrolling (yes/no/auto), src
<frameset>	frameset	1.0	1.0	cols, rows
<h1-6>	headers	1.0	1.0
<header>				HTML5
<hgroup>				HTML5
<hr />	horizontal rule	1.0	1.0
<iframe>	internal frame	1.0	1.0	frameborder, longdesc, marginheight, marginwidth, scrolling (yes/no/auto), src
<img />	image	1.0	1.0	alt (required), composite, ismap, longdesc, src, usemap
<input />	input	1.0	1.0	accept, accesskey, alt, autocapitalize (iphone 1.1, values: on/off), autocomplete, autocorrect (iphone 1.1, values: on/off), autosave (safari), checked, disabled, incremental (safari), ismap, max, maxlength, min, placeholder, results, src, type, usemap, value
<ins>	Insert	1.0	1.0	datetime
<kbd>	keyboard	1.0	1.0
<keygen>	key generation	1.0	1.0	challenge, keytype
<label>	label	1.0	1.0	accesskey, for
<legend>	caption for fieldset	1.0	1.0	accesskey
<li>	list item	1.0	1.0	type, value
<map>	image map	1.0	1.0
<mark>				HTML5
<meter>				HTML5
<object>	object	1.0	1.0	archive, classid, codetype, data, declare, loop, type, usemap
<ol>	ordered list	1.0	1.0	type
<optgroup>	option group	1.0	1.0	disabled, label
<option>	option	1.0	1.0	disabled, label, selected, value
<p>	paragraph	1.0	1.0
<param>	parameter	1.0	1.0	type, value, valuetype
<pre>	preformatted text	1.0	1.0
<progress>				HTML5
<q>	inline quotation	1.0	1.0	cite
<samp>	sample computer code	1.0	1.0
<select>	option selector	1.0	1.0	disabled, multiple
<source>		3.1		HTML5 media
<span>	span (generic non-semantic container)	1.0	1.0	aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4)
<strong>	strong emphasized text	1.0	1.0
<sub>	subscript	1.0	1.0
<sup>	superscript	1.0	1.0
<table>	data table	1.0	1.0	frame (values: above, below, hsides, vsides, rhs, lhs, box, border), rules (values: none, groups, rows, cols, and all), summary
<tbody>	table body	1.0	1.0	char, charoff
<td>	table data cell	1.0	1.0	abbr, axis, char, charoff, colspan, headers, rowspan, scope
<textarea>	text area	1.0	1.0	accesskey, cols, disabled, readonly, rows, wrap
<time>				HTML5
<tfoot>	table footer	1.0	1.0	char, charoff
<th>	table header cell	1.0	1.0	abbr, axis, char, charoff, colspan, headers, rowspan, scope
<thead>	table head	1.0	1.0	char, charoff
<tr>	table row	1.0	1.0	char, charoff
<ul>	unordered list	1.0	1.0
<var>	variable	1.0	1.0
<video>	video	3.1	3.0	HTML5 autoplay, controls, end, loopend, loopstart, playcount, poster, src, start
Elements you should not be using, that are still valid
<tt>	teletype	1.0	1.0
<i>	italic
<b>	bold
<big>	big font
<small>	small font
<noframes>	no frames	1.0	1.0
<noscript>	no script	1.0	1.0
Elements that are deprecated or were never in a W3C spec, but you may still see on older websites
<applet>	applet	1.0
<center>	center	1.0	1.0
<dir>	direction	1.0	1.0
<embed>	embed	1.0	1.0	use object instead hidden, loop, pluginpage, pluginspage, pluginurl
<font>	font	1.0	1.0
<layer>	layer	1.0	1.0
<listing>	listing	3.0	1.0	use <pre> instead. from HTML 3.2
<marquee>	,arquee	1.0	1.0	behavior, direction, loop, scrollamount, scrolldelay, truespeed
<menu>	menu	1.0	1.0
<nobr>	no break	1.0	1.0
<noembed>	no embed	1.0	1.0
<nolayer>	no layer	1.0	1.0
<plaintext>	plaintext	1.0	1.0
<strike>	strikethrough	1.0	1.0	use <del>
<u>	underline
<wbr>	with breaks	1.0	1.0
<xmp>	sequence of literal characters	1.o	1.0

Safari and iPhone Event Handlers:

Event	Safari	iPhone	Explanation
onabort	1.0	1.0	When an image element is aborted during load. (for <img /> elements)
onbeforecopy	1.3		before the element is copied.
onbeforecut	1.3		before the element is cut.
onbeforepaste	1.3		before the element has something pasted into it.
onbeforeunload	1.3		before the element is unloaded from the page.
onblur	1.0	1.0	when the element loses focus.
onchange	1.0	1.0	when the element changes its value.
onclick	1.0	1.0	when the element is clicked.
oncontextmenu	1.1		when the element is right-clicked or when the mouse button is held down long enough to generate a contextual menu.
oncopy	1.3		when the element is copied.
oncut	1.3		when the element is cut.
ondblclick	1.0		when the element is double-clicked.
ondrag	1.3		when the element is dragged.
ondragend	1.3		when the element is done being dragged.
ondragenter	1.3		when a drag has entered the element.
ondragleave	1.3		when a drag has left the element.
ondragover	1.3		when a drag is over the element.
ondragstart	1.3		when the element has started to be dragged.
ondrop	1.3		when the element is dropped.
onerror	1.0	1.0	when the element has an error in loading.
onfocus	1.0	1.0	when the element gets focus.
ongesturechange		2.0	When fingers are moved during a gesture. (proprietary)
ongestureend		2.0	When the gesture ends (when there are 1 or 0 fingers touching the surface). (proprietary)
ongesturestart		2.0	When two or more fingers touch the surface. (proprietary)
oninput	1.3	1.0	when text is entered into the element.
onkeydown	1.0	1.0	when a key is pressed over the element.
onkeypress	1.0	1.0	when a key is pressed and released over the element.
onkeyup	1.0	1.0	when a key is released over the element.
onload	1.0	1.0	when the element finishes loading.
onmousedown	1.0	1.0	when the mouse button is pressed over the element.
onmousemove	1.0	1.0	when a key is moved within the element.
onmouseout	1.0	1.0	when the mouse leaves the element.
onmouseover	1.0	1.0	when the mouse is over the element.
onmouseup	1.0	1.0	when the mouse button is released over the element.
onmousewheel	1.0	1.0	when the mouse wheel button is rotated.
onorientationchange		1.1	When the orientation of the device changes.
onpaste	1.3		when the element is pasted.
onreset	1.0	1.0	when the form element is reset.
onresize	1.0	1.0	when the element is resized.
onscroll	1.2	1.0	when the element is scrolled (a text box would use this, for example).
onsearch	1.3		when a search is performed. (proprietary)
onselect	1.0	1.0	when text within the element is selected.
onselectstart	1.3		when the element begins to be selected. You can use this to prevent selections.
onsubmit	1.0	1.0	when the form element is submitted.
ontouchcancel		2.0	When the system cancels tracking for the touch. (proprietary)
ontouchend		2.0	When a given event lifts from the surface. (proprietary)
ontouchmove		2.0	When a finger for a given event moves on the surface. (proprietary)
ontouchstart		2.0	When a finger for a given event touches the surface. (proprietary)
onunload		2.1	when the element is unloaded from the page.

iPhone Screen Orientation: Portrait and Landscape September 11, 2009

Filed under: Browsers,Character Entities,HTML,iPhone,JavaScript,Web Development — Estelle Weyl @ 12:22 am

When you tilt your iPhone, the screen changes orientation. The website you developed for the default portrait orientation may not look good in landscape mode, especially if you developed your page for the 480 (h) x 320 (w) screen.

In my original iPhone post, I instructed detecting the width of the screen at regular intervals to detect the orientation of the iPhone. That post was written within a week of the launch of v1 of the iPhone. There is now a better method: use the onOrientationChange method to change the class of your body based on the page’s orientation. Include CSS for both normal page layout, and then include a series of overrides for when the screen is displaying your iPhone application in landscape mode.

What you want to include is the unobstrusive javascript equivalent of:

<body onOrientationChange="changeMyClass();">

In this case, we’ll call

switch(window.orientation){
   case 0:
       //handle portrait actions
       //document.getElementsByTagName('body')[0].className = 'portrait';
       break;
  case -90:
  case 90:
       // handle landscape actions
       //document.getElementsByTagName('body')[0].className = 'landscape';
       break;
} //end switch

hover pseudoclass for the iPhone December 28, 2008

Filed under: Best Practices,CSS (including hacks),HTML,IE7,iPhone,JavaScript,Web Development — Estelle Weyl @ 9:38 pm

Since you’re not hovering, there is no hover pseudo class on the iPhone. instead they have touch events. To simulate the :hover pseudo class, include javascript similar to this:

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

and in your CSS add something similar to:

a:hover, a.hover { /* whatever your hover effect is */ }

Notes:

onTouchStart is similar to onMouseOver and onTouchEnd is similar to onMouseOut
You’ll likely want something more complex than simply removing the class on touch end. This is just a very simple example that will replace all classes on all your links with a "hover" class, which is probably not what you want. But you get the idea.
You can use this on all elements, not just links.

-Estelle Weyl

Note:

See also Web Development for the iPhone. This is an update to that post.

XHTML Elements, their parent, children, attributes and default browser presentation November 21, 2008

Filed under: Browsers,DTD,HTML,Web Development — Estelle Weyl @ 12:12 am

XHTML Elements, their meaning, semantics and attributes
<ELEMENT>	Element Name	Block, Inline, etc.	Element’s Parents	Element’s Children 3	Browser Presentation	Attributes1	Comments
Elements occuring outside the body element
<!DOCTYPE>	Document Type Declaration	Not Displayed	first line	none	-		Required. Should be first in the document
<html>	html		root element	<head> and <body>	-	xmlns	Required
<head>	document head	Not Displayed	<html>	<base>, <link>, <meta>, <style>, <script>, <title>	other than the title, all the other child elements are not visible to user	profile, id, dir, lang. NOT class, style, title	Required
<base />	url base for links	Not Displayed	<head>	Empty3	-	href, no standard attributes1
<link />	link	Not Displayed	<head>	Empty3	-	href, charset, hreflang, type, rel, rev, media
<meta />	meta	Not Displayed	<head>	Empty3	-	content, name or http-equiv, scheme
<style>	style	Not Displayed	<head>	text	-	type, media
<script>	script	Not Displayed	<head> (allowed in <body> too.	text or src attribute, not both	-	type, charset, src, defer	do NOT self close with slash. Use end tag
<title>	document title		<head>	text only	seen in the chrome of browser	id, dir, lang. NOT class, style, title	Required
Elements Occuring in the <body>
<body>	document body	block	<html>	Block3		all non-core attributes are deprecated	Required
<a>	Anchor	inline	inline or semantic block	Text and inline3 except <a>	underlined and colored	href, hreflang, rel, charset, type, name, rel, rev, shape (rect), coords	cannot contain other <a> children
<abbr>	Abbreviation	inline	inline or semantic block	only text / inline3	dotted underline with cursor, tooltip	title
<acronym>	acronym	inline	inline or semantic block	only text / inline3	dotted underline with cursor, tooltip	title
<address>	address	blocktext	<blockquote>, <div>, <body>, <form>	inline3 elements, <p>	italic, block	-
<area />	image map area	Not Displayed	<map>	Empty3	makes hot areas on image	alt, shape, coords, href, nohref	‘rect’ is default shape if omitted
<bdo>	bi-directional override	inline	inline or semantic block	only text / inline3	reversed text	dir, lang
<blockquote>	long quote	blocktext		block3	margin: 1em 40px;	cite
<br />	break return or forced line break	inline		none	line-break	does not take internationalizaion attributes	use as linebreak in poetry or addresses, not to separate paragraphs.
<button>	push button	inline		any inline3, except form elements and <a>	push button	disabled, name, type 2, value, accesskey, tabindex	Cannot contain <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> as children.
<caption>	caption		<table>	text and inline3	centered above table	-	must be first child of the table
<cite>	citation	inline	phrase element	text and inline 3	italicized text	-	-
<code>	code	inline	phrase element	text and inline 3	monospace font	-	-
<col />	column	Not Displayed	<table>	Empty3	-	char, charoff, span	align & valign allowed, but use CSS instead
<colgroup>	column group	Not Displayed	<table>	zero or more <col>		span, char, charoff. align & valign allowed, but use CSS instead	while empty, close with an ending </colgroup> tag.
<dd>	definition description	block	<dl>	Flow3	indented with a left margin	-	-
<del>	delete	inline or block	inline or block	Flow3	strikethrough	cite, datetime	don’t put block content in a <del> that is inline
<dfn>	definition	inline	phrase element	only text	italic	-	-
<div>	generic block element	block		Flow3	-	-	-
<dl>	definition list	lists (block)		one or more <dd> and <dt> only	-	-	-
<dt>	definition term	block	<dl>	text and inline3 only	-	-	cannot have block elements as children!
<em>	emphasized text	inline	phrase element	text and inline3 only	italics	-	-
<fieldset>	field set	block	<form>	<legend>, Flow 3	box around child elements with legend, if any	-	-
<form>	form	Block	block element	block elements and block form elements	-	action, method, enctype, accept, accept-charset	cannot nest a <form> within a <form>
<h1-6>	headers	heading (block)	body or block	inline and text	varying font sizes and bold	-	-
<hr />	horizontal rule	blocktext (block)	body or block	Empty	horizontal line	-	-
<iframe>	internal frame					longdesc, name, src, frameborder, marginwidth, marginheight, scrolling, align, height, width
<img />	image	inline	inline or semantic block	Empty	The image identified in the src	src, alt, longdesc, usemap, ismap	height and width are optional attributes best omitted.
<input />	input	inline	inside a semantic block located in <form>	Empty	depends on type	type, name, value, check, disabled, readonly, size, maxlength, src, alt, usemap, accept	type defaults to text if not declared, but you should declare it
<ins>	Insert	inline or surrounding blocks		Flow	underlined	cite, datetime	don’t put block content in a <del> that is inline
<kbd>	keyboard	inline	phrase element	text (and inline)	monospace font	-	should really just be text
<label>	label	inline	semantic block within a <form>	text and inline	-	for, accesskey	cannot contain child <label> elements
<legend>	caption for fieldset		<fieldset>	inline and text	top left section of the fieldset box	-
<li>	list item	block	<ul> or <ol>	Flow	bulleted new line	-
<map>	image map	Not Displayed		one or more <area> OR block	-	ID, name
<object>	object			<param>, if included, should come first. Flow		declare, classid, codebase, date, type, codetype, archive, standby, usemap, name, tabindex	allowed in <head> by spec. height and width are optional attributes best omitted.
<ol>	ordered list	lists (block)	block	one or more <li> elements	indented <li>s with numeric bullets	-
<optgroup>	option group		<select>	one or more <option>	bold, non-selectable header for a group of indented options.	label, disabled
<option>	option		<select>, or within <optgroup>	textnode	appears within the select drop down as new row	selected, disabled, label, value	if value is omitted, submitted value is the text node value
<p>	paragraph	block	block	inline and text	new line of text	-	-
<param />	parameter	invisible	<object>	none	not visible, though may cause visual effects	id, name, value, valuetype, type	can place params as name/value pairs in the object element
<pre>	preformatted text	blocktext (block)		inline, except <img>, <object>, <sub> & <sup>	monospace font and nowrap whitespace	-	Cannot contain <img>, <object>, <sub>, or <sup> elements
<q>	inline quotation	inline	inline or semantic block	inline and text	quotes at start and end of content	cite (URL)	quote style depends on language. Poor browser support of quotes
<samp>	sample computer code	inline	phrase element	inline	monospace font	-	-
<select>	option selector	inline	inline or semantic block within <form>	one or more <option> required, optional <optgroup>	drop down list	name, size, multiple, disabled, tabindex
<span>	span (generic non-semantic container)	inline	inline or semantic block	text or inline	-	-
<strong>	strong emphasized text	inline	phrase element	text or inline	bolder text	-	don’t use in <h1-6> as those are already emphasized
<sub>	subscript	inline	inline or semantic block	text or inline	smaller, subscripted text	-	do not include in <pre>
<sup>	superscript	inline	inline or semantic block	text or inline	smaller, superscript text	-	cannot be a child of <pre>
<table>	data table	block	block or body	<caption>?, (<col>\|<colgroup>), <thead>?, <tfoot>?, (<tbody>+\|<tr>+)) 4	data table	summary (width, border, frame, rules, cellspacing, cellpadding)	width, border, cellspacing, cellpadding are allowed, but better to use CSS.
<tbody>	table body	block	<table>	one or more <tr>	appears between thead and tfoot	char, charoff	in code flow, comes AFTER <tfoot>
<td>	table data cell	block	<tr>	Flow	vertical align middle, text-align: left	abbr, axis, headers, scope, rowspan, colspan, width, align & valign allowed, but use CSS instead
<textarea>	text area	block	<form> or block within form	textnode or no text	multi-line text field displaying textnode if there is one	rows, cols, name, disabled, readonly
<tfoot>	table footer	block	<table> only	one or more <tr>	appears at bottom of table	char, charoff, width, align & valign allowed, but use CSS instead	comes before <tbody>
<th>	table header cell	block	<tr> only	Flow	bold and center	abbr, axis, headers, scope, rowspan, colspan, char, charoff. width, align & valign allowed, but use CSS instead
<thead>	table head	block	<table> only	one or more <tr> only	at top of table	char, charoff. width, align & valign allowed, but use CSS instead	follows opening <table> or <caption> if there is one.
<tr>	table row	block	<table>, <thead>, <tfoot> or <tbody>	one or more <th> or <td>	new line	char, charoff. width, align & valign allowed, but use CSS instead	if any of the parent elements are present, there must be at least one <tr>
<ul>	unordered list	lists (block)	block	one or more <li> elements	indented, bulleted on <li>s	-	-
<var>	variable	inline	phrase element	text (and inline)	italic	-	No reason to include inline elements. Should be just text as child
Elements you should not be using, that are still valid
<tt>	teletype	inline	inline or semantic block	text (and inline)	monospace	-	Purely presentational. Should be deprecated, but aren’t yet.
<i>	italic				italic
<b>	bold				bold
<big>	big font				bigger font
<small>	small font				smaller font
<frame />	frame	block	<frameset>	Empty	page within a page	name, src, longdesc, security. frameborder, marginwidth, marginheight, noresize, scrolling also allowed.	only allowed in frameset DTD
<frameset>	frameset	block	<body>	<frame>, <frameset>, <noframes>	divides the browser window	cols, rows.	only allowed in frameset DTD
<noframes>	no frames	block	<frameset>	Flow	-	-	can be found outside of frameset (for no iframe support)
<noscript>	no script	block	Flow	Flow	-	-	Your site should work without scripts, so should not be necessary

Note:

Attributes: All elements accept the standard and internationalization attributes of id, class, title, style, dir, and lang unless otherwise noted. The attributes column lists elements specific attributes and exceptions to the core attributes. Required attributes have been emphasized.
Even though the type attribute is not required by the specifications, always define type because IE is stupid.
Inline: <a>, <br>, <span>, <bdo>, <map>, <object>, <img>, <tt>, <em>, <strong>, <dfn>, <code>, <q>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <sub>, <sup>, <input>, <select>, <textarea>, <label> and<button>
Block:
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr>, <blockquote>, <address>, <fieldset>, <table>
Flow: text < form > and all the inline and block elements
Empty: self closing element, include a slash before the end of the opening tag to self close. Contains no children
Table elements: 0 or 1 optional <caption> element, 0 or more optional <col> elements OR 0 or more optional <colgroup> elements, 0 or 1 optional <thead> element, 0 or 1 optional <tfoot> element, and REQUIRED either one or more <tbody> elements OR one or more <tr> elements.

http-equiv: Meta Attribute Values for http-equiv September 25, 2008

Filed under: Browsers,HTML,Web Development — Estelle Weyl @ 3:47 am

The http-equiv attribute is used by servers to gather information about a page using the HTTP header. The meta tag’s http-equiv attribute set is similar to a http header. The attribute lets you to send additional information to the browser in the http header. I rarely use any http-equiv meta elements other than content-type, and had never really thought about them for any purpose other than caching, So, as I looked deeper into the possible values, I thought I would “share”. There isn’t as much depth to this post as my usual endeavors, but hopefully this will make a good resource to bookmark.

Structure of Meta Element

The structure of the meta element is:

<meta http-equiv="value" content="value" />

Do not include the name attribute in the meta when the http-equiv attribute is included.

Do include the content attribute. Below are the various values for the http-equiv attribute:

Values for `http-equiv`

http-equiv=”content-type” indicates the type of data sent to the browser, enabling the browsers to know what to do with data received. The <meta> element, in all its forms, are optional. Content-type is the one you really don’t want to omit. For English sites use <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />. There are many other possible values for content, such as <meta http-equiv=”content-type” content=”text/html; charset=ISO-2022-JP” /> for Japanese sites.

The date indicates the date and time that the document is set to expire. When the date is reached, the document will be reloaded even if the document is stored in the cache. This <meta> element is used to disable caching of the document: simply put a date that has passed in the date, and this will cause the browser to fetch new files. Put a date far into the future if you want the page to be cached. Note that IE6 will fetch the content of a users home page when a new browser window is opened, even if you set it to cache.

The name is the name of the cookie.The value is the value to be set for that named cookie. The date is the date and time when the cookie will be deleted from the the computer. The date is optional. If you don’t include an expiration date and time, the cookie will be deleted when you exit the browser. You can include more than one http-equiv=”set-cookie” if you need to set more than one cookie name/value pair.

Indicates the encoding of the returned data; usually the compression type. For g-zipped documents, use <meta http-equiv=”content-encoding” content=”gzip” />

Supposedly you include methods supported by server, but I’ve never seen this in action.

Include the date and time that the page was created.

The content is the date and time the page was last modified.

ex. <meta http-equiv=”refresh” content=”12″ />
ex. <meta http-equiv=”refresh” content=”3;url=http://www.evotech.net/blog” />n is the interval at which time the page should be refreshed: in our example, the page will refresh every 12 seconds. If included, url is the location the page will redirect to. Our second example would cause the page to redirect to Community MX after 3 seconds. Please do NOT use this method to redirect to a new URL. It is not accessible.

The http-equiv=”window-target” specifies the “named window” of the current page. The main use is to prevent a page from appearing inside another framed page: <meta http-equiv=”window-target” content=”_top” />. Usually this means that the Web browser will force the page to go the top frameset.

http-equiv=”www-authenticate” is one method of providing basic access authentication, but providing such authentication in such a visible manner is not recommended for security reasons.

The Platform for Internet Content Selection (PICS) is a standard for labeling online content: basically online content rating. To generate the labelist, visit safesurf or another labellist generator. Note that the content attribute uses single quotes, because the PICS label syntax uses double quotes.

You can use the http-equiv=”expires” with a past date to ensure that the browser retrieves fresh files from the server (rather than caching). Since not all client browsers and caching devices (e.g. proxy servers) are known to successfully implement all no-caching options, include multiple no-caching options, including:

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="no-store" />

Enables language specification, enabling search engines to accurately categorize the document into language and country. The language is the main language code, and the country is the country where the dialect of the language is more specific, such as en-US versus en-GB, US English versus English spoken in Great Britain. <meta http-equiv=”content-language” content=”de-AU” /> would be German as is spoken in Austria.

The default script language for the script element is javascript. If you aren’t using JavaScript as your default, declare <meta http-equiv=”content-script-type” content=”text/VBscript”> informs the browser which type of scripting language you are using by default: is this case, Visual Basic.

Page-enter and page-exit are Microsoft proprietary transitions that only work in Internet Explorer. The seconds is how long the transition should take, and num is an integer between 0 and 23, correlated with a specific type of transition (23 is random).<meta http-equiv=”page-enter” content=”revealtrans(duration=2,transition=6)”>. There are 23 transitions, from 0 – 22. A transition with value of 23 is allows Internet Explorer to randomly select from the 23 available transitions. <meta http-equiv=”page-enter” content=”blendTrans(duration=sec)” /> is another value.

Another IE specific (which means you shouldn’t use it) http-equiv value is “imagetoolbar”. In some versions of Internet Explorer, when an image is hovered, an image toolbar appears. <meta http-equiv=”imagetoolbar” content=”no”> enables the disabling of the image toolbar.

Notes:

The following characters appearing within the content must be escaped using SGML entities:

‘ ‘ single quote

& & ampersand

> > greater than
Note: Dates take the following format:
Thu, 25 Nov 2008 16:15:30 GMT

XHTML v. HTML, Strict v. Transitional June 4, 2007

Filed under: Best Practices,DTD,HTML,Web Development — Estelle Weyl @ 9:47 am

Comparing XHTML and HTML, Strict and Transitional

Note: Yes, this issue has been rehashed all over the web. I am addressing it because 1) you will be asked this at your next job interview, 2) very little has been written on Strict versus Transitional, and 3) it’s not easy to find info on what will make seemingly valid code not validate.

The difference between strict and transitional XHTML:

Transitional is a forgiving form of doctype.While you must code cleanly — properly nested lowercase tags — transitional allows deprecated elements and attributes to pass validation. The strict doctype is strict: deprecated elements and attributes will fail to validate under a strict doctype and may well display incorrectly as well.

For example, <p align="left"> and <center> will validate in transitional, but not in strict mode since the align attribute and the <center> element are both deprecated.

Similarities in HTML 4.01 strict and XHTML Strict

HTML 4.01 strict will also fail to validate if you include depreciated elements and attributes. HTML 4.01 will fail to validate if you include XML style closing syntax on empty elements.

Differences between HTML and XHTML

The primary benefit is that XHTML is more widely accepted in non "computer" devices like cell phone, palm devices and other scaled down browsers. This is commonly called portability between devices.
XHTML is also said to be extensible: new tags can be added. Also, XHTML, due to it’s stricter nature, forces the developer to write cleaner code (yes, that is a ver good thing).

Here are "official" differences between XHTML and HTML:

In XHTML the elementy tags must all be in lower case as must all the attribute names. In HTML you can code willy-nilly. Nothing in the W3C states that attribute values need to be lowercase, but some, like ID, are case sensitive.
Note: Even if you have declared a HTML doctype, all lowercase, while not required, is recommended.
In XHTML all attribute values must be encased in single or double quotes. In HTML, only attribute values with spaces or special characters were required to be in quotes.
In XHTML, every opening tag must have a closing tag. Empty elements such as img and br must be self-closing. In HTML tags can be left unclosed. So, while this reduces the number of characters on a page, it also allows for sloppy code.
Note: Self closing tags, such as <br />, will cause strict HTML to not validate.
In XHTML, all tags must be properly nested: If you start tag <a> and then start tag <strong>, you must close tag </strong> before you close the </a>
In XHTML, all attributes must be coded as attribute/value pairs. The default selected option in XHTML should be written selected="selecterd". In HTML, the same would simply be coded as selected.
In XHTML, the elements need to be coded in a semantic manner. Tables and forms can not be included in paragraphs, but form elements, being inline elements, need to be contained within a semantic block level element, such as a paragraph or table cell.

The most common errors

I’ll reiterate some points made above because this is what people always get wrong (and if you’re in a job interview, you’re more likely to impress if you know these):

HTML 4.01 will fail to validate if you include XML style closing syntax on empty elements.
Strict DTD’ed documents will FAIL if you include deprecated elements and attributes.
In XHTML, there are no "empty attributes." All attributes must be in the form of name/value pairs.

Javascript, CSS, and (X)HTML entities in numeric order April 28, 2007

Filed under: Character Entities,HTML,Web Development — Estelle Weyl @ 12:40 am

Named HTML entities in numeric order

Below are the entities listed in numeric order with definition and ISO numeric code. CSS 'content' does not accept named entities or regular numeric entities such as @, but does render ASCII text and unicode.

If you want to replace the bullets in a bulleted list with a different character, perhaps a ♥ or · you would need to use the unicode entity rather than the named or numeric entity: use the hexadecimal entity.

li:before {content:"\2665"; text-indent: -10px;}

JavaScript Special Characters / Entities

If you want to include characters in JavaScript, the process is very similar to the CSS inclusion method, except : in JavaScript use octal-encoded characters without a preceding 0 instead of the HTML entity for the normal chars, and the hex character preceded by a \u for all other characters..

alert('M\351nage \340 trois.')

Notes:

If you know the numeric value of your HTML entity, use the handy CSS & Javascript Entity Calculator to get the JS and/or CSS code
There is a much smaller list of named entities in alphabetical order which may be a good place to start. Find the entity you are looking for there by appearance, then do a search for the numeric entity or named entity here.
Remember that IE doesn’t understand the :before pseudoclass with content, and you would have to set the list-style-type as none, or you would get 2 bullets in CSS compliant browsers.
In the above if you see two backslashes it’s because some browsers escape the backslashes and others don’t, so I stuck two in.
If you click on any javascript entities in the "alerts" javascript entity column below, the entity will show up as an alert.

Named entities, numeric entities and ISO numeric codes

Special characters for (X)HTML

"	"	"	quotation mark, a.k.a. apl quote	u+0022 ISOnum	p:before { content:"\0022"; }	alert("\42")
&	&	&	ampersand	u+0026 ISOnum	p:before { content:"\0026"; }	alert("\46")
&lt ;	<	<	less-than sign	u+003C ISOnum	p:before { content:"\003c"; }	alert("\74");
&gt ;	>	>	greater-than sign	u+003E ISOnum	p:before { content:"\003e"; }	alert("\76");

Latin-1 entity set for HTML

Name		Numeric	Description	Hex	ISO in CSS content	Octal
			no-break space	%A0	p:before { content:"\00a0"; }	alert("\240");
¡	¡	¡	inverted exclamation mark	%A1	p:before { content:"\00a1"; }	alert("\241");
¢	¢	¢	cent sign	%A2	p:before { content:"\00a2"; }	alert("\242");
£	£	£	pound sterling sign	%A3	p:before { content:"\00a3"; }	alert("\243");
¤	¤	¤	general currency sign	%A4	p:before { content:"\00a4"; }	alert("\244");
¥	¥	¥	yen sign	%A5	p:before { content:"\00a5"; }	alert("\245");
¦	¦	¦	broken (vertical) bar	%A6	p:before { content:"\00a6"; }	alert("\246");
§	§	§	section sign	%A7	p:before { content:"\00a7"; }	alert("\247");
¨	¨	¨	umlaut (dieresis)	%A8	p:before { content:"\00a8"; }	alert("\250");
©	©	©	copyright sign	%A9	p:before { content:"\00a9"; }	alert("\251");
ª	ª	ª	ordinal indicator, feminine	%AA	p:before { content:"\00aa"; }	alert("\252");
«	«	«	angle quotation mark, left	%AB	p:before { content:"\00ab"; }	alert("\253");
¬	¬	¬	not sign	%AC	p:before { content:"\00ac"; }	alert("\254");
			soft hyphen	%AD	p:before { content:"\00ad"; }	alert("\255");
®	®	®	registered sign	%AE	p:before { content:"\00ae"; }	alert("\256");
¯	¯	¯	macron	%AF	p:before { content:"\00af"; }	alert("\257");
°	°	°	degree sign	%B0	p:before { content:"\00b0"; }	alert("\260");
±	±	±	plus-or-minus sign	%B1	p:before { content:"\00b1"; }	alert("\261");
²	²	²	superscript two	%B2	p:before { content:"\00b2"; }	alert("\262");
³	³	³	superscript three	%B3	p:before { content:"\00b3"; }	alert("\263");
´	´	´	acute accent	%B4	p:before { content:"\00b4"; }	alert("\264");
µ	µ	µ	micro sign	%B5	p:before { content:"\00b5"; }	alert("\265");
¶	¶	¶	pilcrow (paragraph sign)	%B6	p:before { content:"\00b6"; }	alert("\266");
·	·	·	middle dot	%B7	p:before { content:"\00b7"; }	alert("\267");
¸	¸	¸	cedilla	%B8	p:before { content:"\00b8"; }	alert("\270");
¹	¹	¹	superscript one	%B9	p:before { content:"\00b9"; }	alert("\271");
º	º	º	ordinal indicator, masculine	%BA	p:before { content:"\00ba"; }	alert("\272");
»	»	»	angle quotation mark, right	%BB	p:before { content:"\00bb"; }	alert("\273");
¼	¼	¼	fraction one-quarter	%BC	p:before { content:"\00bc"; }	alert("\274");
½	½	½	fraction one-half	%BD	p:before { content:"\00bd"; }	alert("\275");
¾	¾	¾	fraction three-quarters	%BE	p:before { content:"\00be"; }	alert("\276");
¿	¿	¿	inverted question mark	%BF	p:before { content:"\00bf"; }	alert("\277");
À	À	À	capital A, grave accent	%C0	p:before { content:"\00c0"; }	alert("\300");
Á	Á	Á	capital A, acute accent	%C1	p:before { content:"\00c1"; }	alert("\301");
Â	Â	Â	capital A, circumflex accent	%C2	p:before { content:"\00c2"; }	alert("\302");
Ã	Ã	Ã	capital A, tilde	%C3	p:before { content:"\00c3"; }	alert("\303");
Ä	Ä	Ä	capital A, dieresis or umlaut mark	%C4	p:before { content:"\00c4"; }	alert("\304");
Å	Å	Å	capital A, ring	%C5	p:before { content:"\00c5"; }	alert("\305");
Æ	Æ	Æ	capital AE diphthong (ligature)	%C6	p:before { content:"\00c6"; }	alert("\306");
Ç	Ç	Ç	capital C, cedilla	%C7	p:before { content:"\00c7"; }	alert("\307");
È	È	È	capital E, grave accent	%C8	p:before { content:"\00c8"; }	alert("\310");
É	É	É	capital E, acute accent	%C9	p:before { content:"\00c9"; }	alert("\311");
Ê	Ê	Ê	capital E, circumflex accent	%CA	p:before { content:"\00ca"; }	alert("\312");
Ë	Ë	Ë	capital E, dieresis or umlaut mark	%CB	p:before { content:"\00cb"; }	alert("\313");
Ì	Ì	Ì	capital I, grave accent	%CC	p:before { content:"\00cc"; }	alert("\314");
Í	Í	Í	capital I, acute accent	%CD	p:before { content:"\00cd"; }	alert("\315");
Î	Î	Î	capital I, circumflex accent	%CE	p:before { content:"\00ce"; }	alert("\316");
Ï	Ï	Ï	capital I, dieresis or umlaut mark	%CF	p:before { content:"\00cf"; }	alert("\317");
Ð	Ð	Ð	capital Eth, Icelandic	%D0	p:before { content:"\00d0"; }	alert("\320");
Ñ	Ñ	Ñ	capital N, tilde	%D1	p:before { content:"\00d1"; }	alert("\321");
Ò	Ò	Ò	capital O, grave accent	%D2	p:before { content:"\00d2"; }	alert("\322");
Ó	Ó	Ó	capital O, acute accent	%D3	p:before { content:"\00d3"; }	alert("\323");
Ô	Ô	Ô	capital O, circumflex accent	%D4	p:before { content:"\00d4"; }	alert("\324");
Õ	Õ	Õ	capital O, tilde	%D5	p:before { content:"\00d5"; }	alert("\325");
Ö	Ö	Ö	capital O, dieresis or umlaut mark	%D6	p:before { content:"\00d6"; }	alert("\326");
×	×	×	multiply sign	%D7	p:before { content:"\00d7"; }	alert("\327");
Ø	Ø	Ø	capital O, slash	%D8	p:before { content:"\00d8"; }	alert("\330");
Ù	Ù	Ù	capital U, grave accent	%D9	p:before { content:"\00d9"; }	alert("\331");
Ú	Ú	Ú	capital U, acute accent	%DA	p:before { content:"\00da"; }	alert("\332");
Û	Û	Û	capital U, circumflex accent	%DB	p:before { content:"\00db"; }	alert("\333");
Ü	Ü	Ü	capital U, dieresis or umlaut mark	%DC	p:before { content:"\00dc"; }	alert("\334");
Ý	Ý	Ý	capital Y, acute accent	%DD	p:before { content:"\00dd"; }	alert("\335");
Þ	Þ	Þ	capital THORN, Icelandic	%DE	p:before { content:"\00de"; }	alert("\336");
ß	ß	ß	small sharp s, German (sz ligature)	%DF	p:before { content:"\00df"; }	alert("\337");
à	à	à	small a, grave accent	%E0	p:before { content:"\00e0"; }	alert("\340");
á	á	á	small a, acute accent	%E1	p:before { content:"\00e1"; }	alert("\341");
â	â	â	small a, circumflex accent	%E2	p:before { content:"\00e2"; }	alert("\342");
ã	ã	ã	small a, tilde	%E3	p:before { content:"\00e3"; }	alert("\343");
ä	ä	ä	small a, dieresis or umlaut mark	%E4	p:before { content:"\00e4"; }	alert("\344");
å	å	å	small a, ring	%E5	p:before { content:"\00e5"; }	alert("\345");
æ	æ	æ	small ae diphthong (ligature)	%E6	p:before { content:"\00e6"; }	alert("\346");
ç	ç	ç	small c, cedilla	%E7	p:before { content:"\00e7"; }	alert("\347");
è	è	è	small e, grave accent	%E8	p:before { content:"\00e8"; }	alert("\350");
é	é	é	small e, acute accent	%E9	p:before { content:"\00e9"; }	alert("\351");
ê	ê	ê	small e, circumflex accent	%EA	p:before { content:"\00ea"; }	alert("\352");
ë	ë	ë	small e, dieresis or umlaut mark	%EB	p:before { content:"\00eb"; }	alert("\353");
ì	ì	ì	small i, grave accent	%EC	p:before { content:"\00ec"; }	alert("\354");
í	í	í	small i, acute accent	%ED	p:before { content:"\00ed"; }	alert("\355");
î	î	î	small i, circumflex accent	%EE	p:before { content:"\00ee"; }	alert("\356");
ï	ï	ï	small i, dieresis or umlaut mark	%EF	p:before { content:"\00ef"; }	alert("\357");
ð	ð	ð	small eth, Icelandic	%F0	p:before { content:"\00f0"; }	alert("\360");
ñ	ñ	ñ	small n, tilde	%F1	p:before { content:"\00f1"; }	alert("\361");
ò	ò	ò	small o, grave accent	%F2	p:before { content:"\00f2"; }	alert("\362");
ó	ó	ó	small o, acute accent	%F3	p:before { content:"\00f3"; }	alert("\363");
ô	ô	ô	small o, circumflex accent	%F4	p:before { content:"\00f4"; }	alert("\364");
õ	õ	õ	small o, tilde	%F5	p:before { content:"\00f5"; }	alert("\365");
ö	ö	ö	small o, dieresis or umlaut mark	%F6	p:before { content:"\00f6"; }	alert("\366");
÷	÷	÷	divide sign	%F7	p:before { content:"\00f7"; }	alert("\367");
ø	ø	ø	small o, slash	%F8	p:before { content:"\00f8"; }	alert("\370");
ù	ù	ù	small u, grave accent	%F9	p:before { content:"\00f9"; }	alert("\371");
ú	ú	ú	small u, acute accent	%FA	p:before { content:"\00fa"; }	alert("\372");
û	û	û	small u, circumflex accent	%FB	p:before { content:"\00fb"; }	alert("\373");
ü	ü	ü	small u, dieresis or umlaut mark	%FC	p:before { content:"\00fc"; }	alert("\374");
ý	ý	ý	small y, acute accent	%FD	p:before { content:"\00fd"; }	alert("\375");
þ	þ	þ	small thorn, Icelandic	%FE	p:before { content:"\00fe"; }	alert("\376");
ÿ	ÿ	ÿ	small y, dieresis or umlaut mark	%FF	p:before { content:"\00ff"; }	alert("\377");

Latin Extended-A

&OElig;	Œ	Œ	latin capital ligature oe	u+0152 ISOlat2	p:before { content:"\0152"; }	alert("\u0152");
&oelig;	œ	œ	latin small ligature oe (ligature is a misnomer, this is a separate character in some languages)	u+0153 ISOlat2	p:before { content:"\0153"; }	alert("\u0153");
&Scaron;	Š	Š	latin capital letter s with caron	u+0160 ISOlat2	p:before { content:"\0160"; }	alert("\u0160");
&scaron;	š	š	latin small letter s with caron	u+0161 ISOlat2	p:before { content:"\0161"; }	alert("\u0161");
&Yuml;	Ÿ	Ÿ	latin capital letter y with diaeresis	u+0178 ISOlat2	p:before { content:"\0178"; }	alert("\u0178");

Mathematical, Greek and Symbolic characters for HTML (& spacing modifiers)

Latin Extended-B

&fnof;

ƒ

latin small f with hook, a.k.a. function, a.k.a. florin

u+0192 ISOtech

p:before { content:"\0192"; }

alert("\u0192");

Spacing Modifier Letters

&circ;	ˆ	modifier letter circumflex accent	u+02C6 ISOpub	p:before { content:"\02c6"; }	alert("\u02c6");
&tilde;	˜	small tilde	u+02DC ISOdia	p:before { content:"\02dc"; }	alert("\u02dc");

Greek

Α	Α	Α	greek capital letter alpha	u+0391	p:before { content:"\0391"; }	alert("\u0391");
Β	Β	Β	greek capital letter beta	u+0392	p:before { content:"\0392"; }	alert("\u0392");
Γ	Γ	Γ	greek capital letter gamma	u+0393 ISOgrk3	p:before { content:"\0393"; }	alert("\u0395");
Δ	Δ	Δ	greek capital letter delta	u+0394 ISOgrk3	p:before { content:"\0394"; }	alert("\u0394");
Ε	Ε	Ε	greek capital letter epsilon	u+0395	p:before { content:"\0395"; }	alert("\u0395");
Ζ	Ζ	Ζ	greek capital letter zeta	u+0396	p:before { content:"\0396"; }	alert("\u0396");
&Eta ;	Η	Η	greek capital letter eta	u+0397	p:before { content:"\0397"; }	alert("\u0397");
Θ	Θ	Θ	greek capital letter theta	u+0398 ISOgrk3	p:before { content:"\0398"; }	alert("\u0398");
Ι	Ι	Ι	greek capital letter iota	u+0399	p:before { content:"\0399"; }	alert("\u0399");
Κ	Κ	Κ	greek capital letter kappa	u+039A	p:before { content:"\039a"; }	alert("\u039a");
Λ	Λ	Λ	greek capital letter lambda	u+039B ISOgrk3	p:before { content:"\039b"; }	alert("\u039b");
&Mu ;	Μ	Μ	greek capital letter mu	u+039C	p:before { content:"\039c"; }	alert("\u039c");
&Nu ;	Ν	Ν	greek capital letter nu	u+039D	p:before { content:"\039d"; }	alert("\u039D");
&Xi ;	Ξ	Ξ	greek capital letter xi	u+039E ISOgrk3	p:before { content:"\039e"; }	alert("\u039e");
Ο	Ο	Ο	greek capital letter omicron	u+039F	p:before { content:"\039f"; }	alert("\u039f");
&Pi ;	Π	Π	greek capital letter pi	u+03A0 ISOgrk3	p:before { content:"\03a0"; }	alert("\u03a0");
&Rho ;	Ρ	Ρ	greek capital letter rho	u+03A1	p:before { content:"\03a1"; }	alert("\u03a1");
there is no Sigmaf, and no u+03A2 character either)
Σ	Σ	Σ	greek capital letter sigma	u+03A3 ISOgrk3	p:before { content:"\03a3"; }	alert("\u03A3");
&Tau ;	Τ	Τ	greek capital letter tau	u+03A4	p:before { content:"\03a4"; }	alert("\u03A4");
Υ	Υ	Υ	greek capital letter upsilon	u+03A5 ISOgrk3	p:before { content:"\03a5"; }	alert("\u03A5");
&Phi ;	Φ	Φ	greek capital letter phi	u+03A6 ISOgrk3	p:before { content:"\03a6"; }	alert("\u03A6");
&Chi ;	Χ	Χ	greek capital letter chi	u+03A7	p:before { content:"\03a7"; }	alert("\u03A7");
&Psi ;	Ψ	Ψ	greek capital letter psi	u+03A8 ISOgrk3	p:before { content:"\03a8"; }	alert("\u03A8");
Ω	Ω	Ω	greek capital letter omega	u+03A9 ISOgrk3	p:before { content:"\03a9"; }	alert("\u03A9");
α	α	α	greek small letter alpha	u+03B1 ISOgrk3	p:before { content:"\03b1"; }	alert("\u03b1");
β	β	β	greek small letter beta	u+03B2 ISOgrk3	p:before { content:"\03b2"; }	alert("\u03b2");
γ	γ	γ	greek small letter gamma	u+03B3 ISOgrk3	p:before { content:"\03b3"; }	alert("\u03b3");
δ	δ	δ	greek small letter delta	u+03B4 ISOgrk3	p:before { content:"\03b4"; }	alert("\u03b4");
ε	ε	ε	greek small letter epsilon	u+03B5 ISOgrk3	p:before { content:"\03b5"; }	alert("\u03b5");
ζ	ζ	ζ	greek small letter zeta	u+03B6 ISOgrk3	p:before { content:"\03b6"; }	alert("\u03b6");
&eta ;	η	η	greek small letter eta	u+03B7 ISOgrk3	p:before { content:"\03b7"; }	alert("\u03b7");
θ	θ	θ	greek small letter theta	u+03B8 ISOgrk3	p:before { content:"\03b8"; }	alert("\u03b8");
ι	ι	ι	greek small letter iota	u+03B9 ISOgrk3	p:before { content:"\03b9"; }	alert("\u03b9");
κ	κ	κ	greek small letter kappa	u+03BA ISOgrk3	p:before { content:"\03ba"; }	alert("\u03ba");
λ	λ	λ	greek small letter lambda	u+03BB ISOgrk3	p:before { content:"\03bb"; }	alert("\u03bb");
&mu ;	μ	μ	greek small letter mu	u+03BC ISOgrk3	p:before { content:"\03bc"; }	alert("\u03bc");
&nu ;	ν	ν	greek small letter nu	u+03BD ISOgrk3	p:before { content:"\03bd"; }	alert("\u03bd");
&xi ;	ξ	ξ	greek small letter xi	u+03BE ISOgrk3	p:before { content:"\03be"; }	alert("\u03be");
ο	ο	ο	greek small letter omicron	u+03BF NEW	p:before { content:"\03bf"; }	alert("\u03bf");
&pi ;	π	π	greek small letter pi	u+03C0 ISOgrk3	p:before { content:"\03c0"; }	alert("\u03c0");
&rho ;	ρ	ρ	greek small letter rho	u+03C1 ISOgrk3	p:before { content:"\03c1"; }	alert("\u03c1");
&sigmaf;	ς	ς	greek small letter final sigma	u+03C2 ISOgrk3	p:before { content:"\03C2"; }	alert("\u03c2");
σ	σ	σ	greek small letter sigma	u+03C3 ISOgrk3	p:before { content:"\03C3"; }	alert("\u03c3");
&tau ;	τ	τ	greek small letter tau	u+03C4 ISOgrk3	p:before { content:"\03C4"; }	alert("\u03c4");
υ	υ	υ	greek small letter upsilon	u+03C5 ISOgrk3	p:before { content:"\03C5"; }	alert("\u03c5");
&phi ;	φ	φ	greek small letter phi	u+03C6 ISOgrk3	p:before { content:"\03C6"; }	alert("\03c6");
&chi ;	χ	χ	greek small letter chi	u+03C7 ISOgrk3	p:before { content:"\03C7"; }	alert("\u03c7");
&psi ;	ψ	ψ	greek small letter psi	u+03C8 ISOgrk3	p:before { content:"\03C8"; }	alert("\u03c8");
ω	ω	ω	greek small letter omega	u+03C9 ISOgrk3	p:before { content:"\03C9"; }	alert("\u03c9");
&thetasym;	ϑ	ϑ	greek small letter theta symbol	u+03D1 NEW	p:before { content:"\03D1"; }	alert("\u03D1");
&upsih;	ϒ	ϒ	greek upsilon with hook symbol	u+03D2 NEW	p:before { content:"\03D2"; }	alert("\u03D2");
&piv ;	ϖ	ϖ	greek pi symbol	u+03D6 ISOgrk3	p:before { content:"\03D6"; }	alert("\u03D6");

General Punctuation

&ensp;			en space	u+2002 ISOpub	p:before { content:"\2002";}	alert("\u2002");
&emsp;			em space	u+2003 ISOpub	p:before { content:"\2003";}	alert("\u2003");
			thin space	u+2009 ISOpub	p:before { content:"\2009";}	alert("\u2009");
&zwnj;	‌	‌	zero width non-joiner	u+200C NEW RFC 2070	p:before { content:"\200C";}	alert("\u200C");
&zwj;	‍	‍	zero width joiner	u+200D NEW RFC 2070	p:before { content:"\200D";}	alert("\u200d");
&lrm;	‎	‎	left-to-right mark	u+200E NEW RFC 2070	p:before { content:"\200E";}	alert("\u200e");
&rlm;	‏	‏	right-to-left mark	u+200F NEW RFC 2070	p:before { content:"\200F";}	alert("\u200f");
–	–	–	en dash	u+2013 ISOpub	p:before { content:"\2013";}	alert("\u2013");
—	—	—	em dash	u+2014 ISOpub	p:before { content:"\2014";}	alert("\u2014");
‘	‘	‘	left single quotation mark	u+2018 ISOnum	p:before { content:"\2018";}	alert("\u2018");
’	’	’	right single quotation mark	u+2019 ISOnum	p:before { content:"\2019";}	alert("\u2019");
&sbquo;	‚	‚	single low-9 quotation mark	u+201A NEW	p:before { content:"\201A";}	alert("\u201a");
“	“	“	left double quotation mark	u+201C ISOnum	p:before { content:"\201C";}	alert("\u201c");
”	”	”	right double quotation mark	u+201D ISOnum	p:before { content:"\201D";}	alert("\u201d");
&bdquo;	„	„	double low-9 quotation mark	u+201E NEW	p:before { content:"\201E";}	alert("\u201e");
&dagger;	†	†	dagger	u+2020 ISOpub	p:before { content:"\2020";}	alert("\u2020");
&Dagger;	‡	‡	double dagger	u+2021 ISOpub	p:before { content:"\2021";}	alert("\u2021");
&permil;	‰	‰	per mille sign	u+2030 ISOtech	p:before { content:"\2030";}	alert("\u2030");
&lsaquo;	‹	‹	single left-pointing angle quotation mark (lsaquo is proposed but not yet ISO standardised)	u+2039 ISO proposed	p:before { content:"\2039";}	alert("\u2039");
&rsaquo;	›	›	single right-pointing angle quotation mark rsaquo is proposed but not yet ISO standardised	u+203A ISO proposed	p:before { content:"\203A";}	alert("\u203a");

General Punctuation

•	•	•	bullet, a.k.a. black small circle bullet is NOT the same as bullet operator — u+2219	u+2022 ISOpub	alert("\u2219");
…	…	…	horizontal ellipsis, a.k.a. three dot leader	u+2026 ISOpub	alert("\u2026");
′	′	′	prime, a.k.a. minutes, a.k.a. feet	u+2032 ISOtech	alert("\u2032");
″	″	″	double prime, a.k.a. seconds, a.k.a. inches	u+2033 ISOtech	alert("\u2033");
&oline;	‾	‾	overline, a.k.a. spacing overscore	u+203E NEW	alert("\u203e");
&frasl;	⁄	⁄	fraction slash	u+2044 NEW	alert("\u8260");

Letterlike Symbols

&weierp;	℘	℘	script capital P, a.k.a. power set, a.k.a. Weierstrass p	u+2118 ISOamso	alert("\u2118");
&image;	ℑ	ℑ	blackletter capital I, a.k.a. imaginary part	u+2111 ISOamso	alert("\u2111");
&real;	ℜ	ℜ	blackletter capital R, a.k.a. real part symbol	u+211C ISOamso	alert("\u211c");
™	™	™	trade mark sign	u+2122 ISOnum	alert("\u2122");
&alefsym;	ℵ	ℵ	alef symbol, a.k.a. first transfinite cardinal alef symbol is NOT the same as hebrew letter alef — u+05D0 although the same glyph could be used to depict both characters	u+2135 NEW	alert("\u");

Arrows

←	←	←	leftwards arrow	u+2190 ISOnum	alert("\u2190");
↑	↑	↑	upwards arrow	u+2191 ISOnum	alert("\u2191");
→	→	→	rightwards arrow	u+2192 ISOnum	alert("\u2192");
↓	↓	↓	downwards arrow	u+2193 ISOnum	alert("\u2193");
↔	↔	↔	left right arrow	u+2194 ISOamsa	alert("\u2194");
&crarr;	↵	↵	downwards arrow with corner leftwards, a.k.a. carriage return	u+21B5 NEW	alert("\u21b5");
⇐	⇐	⇐	leftwards double arrow can be used for ‘is implied by’	u+21D0 ISOtech	alert("\u21d0");
&uArr;	⇑	⇑	upwards double arrow	u+21D1 ISOamsa	alert("\u21d1");
⇒	⇒	⇒	rightwards double arrow	u+21D2 ISOtech	alert("\u21d2");
&dArr;	⇓	⇓	downwards double arrow	u+21D3 ISOamsa	alert("\ud1d3");
⇔	⇔	⇔	left right double arrow	u+21D4 ISOamsa	alert("\u21d4");

Mathematical Operators

∀	∀	∀	for all	u+2200 ISOtech	alert("\u2200");
∂	∂	∂	partial differential	u+2202 ISOtech	alert("\u2202");
∃	∃	∃	there exists	u+2203 ISOtech	alert("\u2203");
∅	∅	∅	empty set, a.k.a. null set, a.k.a. diameter	u+2205 ISOamso	alert("\u2205");
∇	∇	∇	nabla, a.k.a. backward difference	u+2207 ISOtech	alert("\u2207");
∈	∈	∈	element of	u+2208 ISOtech	alert("\u2208");
∉	∉	∉	not an element of	u+2209 ISOtech	alert("\u2209");
&ni ;	∋	∋	contains as member	u+220B ISOtech	alert("\u220b");
∏	∏	∏	n-ary product, a.k.a. product sign prod is NOT the same character as u+03A0 ‘greek capital letter pi’ though the same glyph might be used for both	u+220F ISOamsb	alert("\u03a0");
&sum ;	∑	∑	n-ary sumation sum is NOT the same character as u+03A3 ‘greek capital letter sigma’ though the same glyph might be used for both	u+2211 ISOamsb	alert("\u03a3");
−	−	−	minus sign	u+2212 ISOtech	alert("\u2212");
&lowast;	∗	∗	asterisk operator	u+2217 ISOtech	alert("\u2217");
√	√	√	square root, a.k.a. radical sign	u+221A ISOtech	alert("\u221a");
&prop;	∝	∝	proportional to	u+221D ISOtech	alert("\u221d");
∞	∞	∞	infinity	u+221E ISOtech	alert("\u221e");
&ang ;	∠	∠	angle	u+2220 ISOamso	alert("\u2220");
&and ;	⊥	⊥	logical and, a.k.a. wedge	u+2227 ISOtech	alert("\u2227");
&or ;	⊦	⊦	logical or, a.k.a. vee	u+2228 ISOtech	alert("\u2228");
&cap ;	∩	∩	intersection, a.k.a. cap	u+2229 ISOtech	alert("\u2229");
&cup ;	∪	∪	union, a.k.a. cup	u+222A ISOtech	alert("\u222a");
&int ;	∫	∫	integral	u+222B ISOtech	alert("\u222b");
&there4;	∴	∴	therefore	u+2234 ISOtech	alert("\u2234");
&sim ;	∼	∼	tilde operator, a.k.a. varies with, similar to tilde operator, but is NOT the same character as the tilde u+007E, although the same glyph might be used to represent both	u+223C ISOtech	alert("\u223c");
&cong;	≅	≅	approximately equal to	u+2245 ISOtech	alert("\u2245");
≈	≈	≈	almost equal to, a.k.a. asymptotic to	u+2248 ISOamsr	alert("\u2248");
&ne ;	≠	≠	not equal to	u+2260 ISOtech	alert("\u2260");
&equiv;	≡	≡	identical to	u+2261 ISOtech	alert("\u2261");
&le ;	≤	≤	less-than or equal to	u+2264 ISOtech	alert("\u2264");
&ge ;	≥	≥	greater-than or equal to	u+2265 ISOtech	alert("\u2265");
&sub ;	⊂	⊂	subset of	u+2282 ISOtech	alert("\u2282");
&sup ;	⊃	⊃	superset of note that nsup, ‘not a superset of u+2283′ is not covered by the Symbol font encoding and is not included.	u+2283 ISOtech	alert("\u2283");
&nsub;	⊄	⊄	not a subset of	u+2284 ISOamsn	alert("\u2284");
&sube;	⊆	⊆	subset of or equal to	u+2286 ISOtech	alert("\u2286");
&supe;	⊇	⊇	superset of or equal to	u+2287 ISOtech	alert("\u2287");
&oplus;	⊕	⊕	circled plus, a.k.a. direct sum	u+2295 ISOamsb	alert("\u2295");
&otimes;	⊗	⊗	circled times, a.k.a. vector product	u+2297 ISOamsb	alert("\u2297");
&perp;	⊥	⊥	up tack, a.k.a. orthogonal to, a.k.a. perpendicular	u+22A5 ISOtech	alert("\u22a5");
⋅	⋅	⋅	dot operator dot operator is NOT the same character as u+00B7 middle dot	u+22C5 ISOamsb	alert("\u22c5");

Miscellaneous Technical

&lceil;	⌈	⌈	left ceiling, a.k.a. apl upstile	u+2308, ISOamsc	alert("\u2308");
&rceil;	⌉	⌉	right ceiling	u+2309, ISOamsc	alert("\u2309");
&lfloor;	⌊	⌊	left floor, a.k.a. apl downstile	u+230A, ISOamsc	alert("\u230a");
&rfloor;	⌋	⌋	right floor	u+230B, ISOamsc	alert("\u230b");
&lang;	〈	〈	left-pointing angle bracket, a.k.a. bra lang is NOT the same character as u+003C ‘less than’ or u+2039 ‘single left-pointing angle quotation mark’	u+2329 ISOtech	alert("\u2329");
&rang;	〉	〉	right-pointing angle bracket, a.k.a. ket rang is NOT the same character as u+003E ‘greater than’ or u+203A ‘single right-pointing angle quotation mark’	u+232A ISOtech	alert("\u232a");

Geometric Shapes

&loz ;

◊

lozenge

u+25CA ISOpub

alert("\u25ca");

Miscellaneous Symbols

&spades;	♠	♠	black spade suit	u+2660 ISOpub	alert("\u2660");
&clubs;	♣	♣	black club suit, a.k.a. shamrock	u+2663 ISOpub	alert("\u2663");
&hearts;	♥	♥	black heart suit, a.k.a. valentine	u+2665 ISOpub	alert("\u2665");
&diams;	♦	♦	black diamond suit	u+2666 ISOpub	alert("\u2666");

Named HTML Entities in Alphabetical Order April 27, 2007

Filed under: Character Entities,HTML,Web Development — Estelle Weyl @ 11:12 am

A
Á	Á
Â	Â
´	´
Æ	Æ
À	À
ℵ	&alefsym;
Α	Α
&	&
∧	&and;
∠	&ang;
Å	Å
≈	≈
Ã	Ã
Ä	Ä
B
„	&bdquo;
Β	Β
¦	¦
•	•
C
∩	∩
Ç	Ç
¸	¸
¢	¢
Χ	Χ
ˆ	&circ;
♣	&clubs;
≅	&cong;
©	©
↵	&crarr;
∪	∪
¤	¤
D
†	&dagger;
↓	↓
°	°
Δ	Δ
♦	&diams;
÷	÷
E
É	É
Ê	Ê
È	È
∅	∅
	&emsp;
	&ensp;
Ε	Ε
≡	&equiv;
Η	Η
Ð	Ð
Ë	Ë
€	€
∃	∃

F
ƒ	&fnof;
∀	∀
½	½
¼	¼
¾	¾
⁄	&frasl;
G
Γ	Γ
≥	≥
>	>
H
↔	↔
♥	&hearts;
…	…
I
Í	Í
Î	Î
¡	¡
Ì	Ì
ℑ	&image;
∞	∞
∫	∫
Ι	Ι
¿	¿
∈	∈
Ï	Ï
K
Κ	Κ
L
Λ	Λ
⟨	&lang;
«	«
←	←
⌈	&lceil;
“	“
≤	≤
⌊	&lfloor;
∗	&lowast;
◊	&loz;
‎	&lrm;
‹	&lsaquo;
‘	‘
<	<
M
¯	¯
—	—
µ	µ
·	·
−	−
Μ	Μ

N
∇	∇

–	–
≠	≠
∋	&ni;
¬	¬
∉	∉
⊄	&nsub;
Ñ	Ñ
Ν	Ν
O
Ó	Ó
Ô	Ô
Œ	&OElig;
Ò	Ò
‾	&oline;
Ω	Ω
Ο	Ο
⊕	&oplus;
∨	&or;
ª	ª
º	º
Ø	Ø
Õ	Õ
⊗	&otimes;
Ö	Ö
P
¶	¶
∂	∂
‰	&permil;
⊥	&perp;
Φ	Φ
Π	Π
ϖ	ϖ
±	±
£	£
′	′
∏	∏
∝	&prop;
Ψ	Ψ
Q
"	"
R
√	√
⟩	&rang;
»	»
→	→
⌉	&rceil;
”	”
ℜ	&real;
®	®
⌋	&rfloor;
Ρ	Ρ
‏	&rlm;
›	&rsaquo;
’	’

S
‚	&sbquo;
Š	&Scaron;
⋅	⋅
§	§

Σ	Σ
ς	&sigmaf;
∼	&sim;
♠	&spades;
⊂	⊂
⊆	&sube;
∑	∑
⊃	⊃
¹	¹
²	²
³	³
⊇	&supe;
ß	ß
T
Τ	Τ
∴	&there4;
Θ	Θ
ϑ	&thetasym;

Þ	Þ
˜	&tilde;
×	×
™	™
U
Ú	Ú
↑	↑
Û	Û
Ù	Ù
¨	¨
ϒ	&upsih;
Υ	Υ
Ü	Ü
W
℘	&weierp;
X
Ξ	Ξ
Y
Ý	Ý
¥	¥
ÿ	ÿ
Z
Ζ	Ζ
‍	&zwj;
‌	&zwnj;

CSS, JavaScript and XHTML Explained

Estelle Weyl's Blog of quirks, random thoughts and funky finds discovered in day-to-day coding

Web Development for the iPhone: HTML, CSS & JS Support December 5, 2009

iPhone Support for CSS3 Selectors

iPhone Support for CSS3 properties

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Safari and iPhone Event Handlers:

iPhone Screen Orientation: Portrait and Landscape September 11, 2009

hover pseudoclass for the iPhone December 28, 2008

XHTML Elements, their parent, children, attributes and default browser presentation November 21, 2008

http-equiv: Meta Attribute Values for http-equiv September 25, 2008

Structure of Meta Element

Values for `http-equiv`

XHTML v. HTML, Strict v. Transitional June 4, 2007

Comparing XHTML and HTML, Strict and Transitional

The difference between strict and transitional XHTML:

Similarities in HTML 4.01 strict and XHTML Strict

Differences between HTML and XHTML

The most common errors

Javascript, CSS, and (X)HTML entities in numeric order April 28, 2007

Named HTML entities in numeric order

JavaScript Special Characters / Entities

Named entities, numeric entities and ISO numeric codes

Mathematical, Greek and Symbolic characters for HTML (& spacing modifiers)

Named HTML Entities in Alphabetical Order April 27, 2007

About Estelle

Most recent posts

Accessibility

Browser Quirks & Hacks

References

Resources

Tutorials

@webdevtips’ Tips

Like my blog?

Community MX

Admin Stuff

Blog Categories