Web Design

Basics

With just a little extra mark-up you can greatly enhance your overall web design accessibility. Images are best with alt and pretty much everything can have a title. Add longdesc to important images to provide supplemental information. Don't use images to advertise vital information. Never ever use frames and try to avoid tables.

When defining fonts you really ought to bear in mind that Arial actually means Arial and not Tahoma, Verdana, or any other variant. Prefer dynamic units over static ones to set font-size and avoid values below 65%. You should always prefer recognised values of the 216 CLUT when defining colours.

Robots

Robots are automatic data harvesters. The specific rights for any given robot are configured in the special robots.txt file. However, bear in mind that their is no standard behaviour and most rogue bots ignore the file! You should always add a trailing slash to folder links to prevent extra redirects. Also please note that there is no Allow rule, simply because that is the default. See below for an example how to disallow the foo-bot from accessing /foo-dir and the blah-bot from accessing /blah. Use Disallow: /dir rather than Disallow: /dir/* and one path per line.

META Tags

META tags are becoming increasingly obsolete. You should aim to set most values of importance either in the server's main configuration or via .htaccess tweaks. Using HTTP headers is preferable over META tags.

META http-equiv

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Sets the document default content type. The HTTP content type may extend to the character set.

<meta http-equiv="content-language" content="en-GB">

Sets the natural language of the document. May be used by robots to categorise by language.

<meta http-equiv="content-script-type" content="text/javascript">

Sets the default scripting language of the document.

<meta http-equiv="content-style-type" content="text/css">

Sets the default style sheet language.

<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

Sets date and time after which the document should be considered expired and controls caching in HTTP/1.0. An illegal value like 0 is interpreted as immediately. A value of zero (0) may thus be used to force a modification check (reload) at each visit. Robots may delete expired documents from a search engine or schedule a revisit.

<meta http-equiv="pragma" content="no-cache">

Controls caching in HTTP/1.0. Value must be no-cache.

<meta http-equiv="refresh" content="3;url=http://www.abc.xyz/123.html">

Sets delay in seconds before the document is automatically re-loaded and optionally specifies an alternate URL to load.

<meta http-equiv="vary" content="content-language">

Specifies available alternates. If a header accept-language is sent, an alternate form may be selected.

<meta http-equiv="window-target" content="_top">

Sets the named window of the current page. May be used to stop a document from appearing in a frame.

META name

<meta name="description" content="Joes Supa Dupa Office Tools">

Plain text document information.

<meta name="keywords" content="Joes Supa Dupa Office Tools">

Index a document with Search Engines.

<meta name="language" content="en-GB">

Similar to http-equiv content-language. Seems more reliable if applied via meta name rather then meta http-equiv.

<meta name="robots" content="noindex, follow">

Controls robots behaviours on a per-page basis. Meaningful values are noindex, nofollow, noodp, and noydir.

<meta name="author" content="Joe Doe">

Typically unqualified author's name.

<meta name="copyright" content="Joes Supa Dupa Office Tools">

Unqualified copyright statement.

MIME Types

MIME types are the technical definition for a given resource. Visit the IANA MIME types page for a more complete listing.

Browser Safe Colours

The browser safe colours look-up table represents the colours presumably rendering equal across all major platforms.

216 CLUT browser safe colours look-up table

Response Codes

The first digit defines the class of response. The last two digits do not have a categorisation role. Reason phrase example sets may be replaced by local equivalents without affecting the protocol.

Info

Success

Redirect

Client Error

Server Error

FTP

Follow this link for more information about HTTP status codes.

Top Level Domains

Please visit the IANA homepage for an updated and complete listing.

Country Codes

Language Codes

Character Encodings

Unicode

The Unicode system was founded in 1991 to store characters and elements of different languages. This makes it possible to instruct a computer worldwide how to render any given symbol. Of course, this works only if the computer supports the Unicode system. Unicode characters are written in the form of U+xxxx, whereas the U indicates Unicode and the 4 digits represent a hexadecimal number.

Characters are sorted by classes, and index codes. In addition, each character has a set of properties, like the writing direction as in Arabic languages. There are literally no characters not in the Unicode system. As of version 2, Unicode is synchronised with ISO/IEC 10646. This is of major importance since HTML 4.x and XML 1.x share the same standard. More information can be found on the Unicode homepage.

Hexadecimal

Hexadecimal character encodings are the equivalent of human-readable characters translated into the hexadecimal system. They are most common where it is required to escape parts of the source similar to Unicode. It is a common technique to masquerade the value of a given text string like that of an email address to prevent spoofing or at least make it a little more difficult.

Click this strange thing for a practical example: %68%65%78%61%64%65%63%69%6D%61%6C (requires Java Script). You could use this for basic encryption. Encoding your sources as hexadecimal is likely to cause a severe headache for ordinary users. See below for a simple listing of hexadecimal characters.

%20   Space %30   0    %40   @
%21   !     %31   1    %41   A
%22   "     %32   2    %42   B
%23   #     %33   3    %43   C
%24   $     %34   4    %44   D
%25   %     %35   5    %45   E
%26   &     %36   6    %46   F
%27   '     %37   7    %47   G
%28   (     %38   8    %48   H
%29   )     %39   9    %49   I
%2A   *     %3A   :    %4A   J
%2B   +     %3B   ;    %4B   K
%2C   ,     %3C   <    %4C   L
%2D   -     %3D   =    %4D   M
%2E   .     %3E   >    %4E   N
%2F   /     %3F   ?    %4F   O
%50   P     %60   `    %70   p
%51   Q     %61   a    %71   q
%52   R     %62   b    %72   r
%53   S     %63   c    %73   s
%54   T     %64   d    %74   t
%55   U     %65   e    %75   u
%56   V     %66   f    %76   v
%57   W     %67   g    %77   w
%58   X     %68   h    %78   x
%59   Y     %69   i    %79   y
%5A   Z     %6A   j    %7A   z
%5B   [     %6B   k    %7B   {
%5C   \     %6C   l    %7C   |
%5D   ]     %6D   m    %7D   }
%5E   ˆ     %6E   n    %7E   ˜
%5F   _     %6F   o    %7F   nothing

Timezones

Timezones define the different global date and time regions. Timezone offsets co-ordinate the differences between date and time by calculating all dates and times in relation to GMT (Greenwich Meridian Time), the current date and time in London, United Kingdom. GMT is identical to UTC (Universal Time Co-ordinated).

See below for a basic outline for full hour offset's relative to GMT, either negative (West) or positive (East). The listing features an overview of some prominent locations within the selected timezone. See below for a simplified listing of timezone offsets or follow this link to view the complete list of timezone offsets.

HTML Latin Entities

&quot;     &#34;     Quotation                 "
&amp;      &#38;     Ampersand                 &
&lt;       &#60;     Less than                 <
&gt;       &#62;     Greater than              >
&iexcl;    &#161;    Inverted Exclamation      ¡
&cent;     &#162;    Cent                      ¢
&pound;    &#163;    Pound                     £
&curren;   &#164;    Currency                  ¤
&yen;      &#165;    Yen                       ¥
&brvbar;   &#166;    Broken vertical bar       ¦
&sect;     &#167;    Section                   §
&uml;      &#168;    Diaeresis                 ¨
&copy;     &#169;    Copyright                 ©
&ordf;     &#170;    Ordinal feminine          ª
&laquo;    &#171;    Left double angle quote   «
&not;      &#172;    Not                       ¬
&shy;      &#173;    Soft hyphen               ­
&reg;      &#174;    Registered                ®
&macr;     &#175;    Macron                    ¯
&deg;      &#176;    Degree                    °
&plusmn;   &#177;    Plusminus                 ±
&sup2;     &#178;    Superscript Two           ²
&sup3;     &#179;    Superscript Three         ³
&acute;    &#180;    Acute accent              ´
&micro;    &#181;    Micro                     µ
&para;     &#182;    Paragraph                 ¶
&middot;   &#183;    Middle dot                ·
&cedil;    &#184;    Cedilla                   ¸
&sup1;     &#185;    Superscript One           ¹
&ordm;     &#186;    Ordinal masculine         º
&raquo;    &#187;    Right double angle quote  »
&frac14;   &#188;    Fraction one quarter      ¼
&frac12;   &#189;    Fraction one half         ½
&frac34;   &#190;    Fraction three quarters   ¾
&iquest;   &#191;    Inverted Question         ¿
&Agrave;   &#192;    Capital A grave           À
&Aacute;   &#193;    Capital A acute           Á
&Acirc;    &#194;    Capital A circumflex      Â
&Atilde;   &#195;    Capital A tilde           Ã
&Auml;     &#196;    Capital A diaeresis       Ä
&Aring;    &#197;    Capital A ring above      Å
&AElig;    &#198;    Capital AE                Æ
&Ccedil;   &#199;    Capital C cedilla         Ç
&Egrave;   &#200;    Capital E grave           È
&Eacute;   &#201;    Capital E acute           É
&Ecirc;    &#202;    Capital E circumflex      Ê
&Euml;     &#203;    Capital E diaeresis       Ë
&Igrave;   &#204;    Capital I grave           Ì
&Iacute;   &#205;    Capital I acute           Í
&Icirc;    &#206;    Capital I circumflex      Î
&Iuml;     &#207;    Capital I diaeresis       Ï
&ETH;      &#208;    Capital ETH               Ð
&Ntilde;   &#209;    Capital N tilde           Ñ
&Ograve;   &#210;    Capital O grave           Ò
&Oacute;   &#211;    Capital O acute           Ó
&Ocirc;    &#212;    Capital O circumflex      Ô
&Otilde;   &#213;    Capital O tilde           Õ
&Ouml;     &#214;    Capital O diaeresis       Ö
&times;    &#215;    Multiply                  ×
&Oslash;   &#216;    Capital O stroke          Ø
&Ugrave;   &#217;    Capital U grave           Ù
&Uacute;   &#218;    Capital U acute           Ú
&Ucirc;    &#219;    Capital U circumflex      Û
&Uuml;     &#220;    Capital U diaeresis       Ü
&Yacute;   &#221;    Capital Y acute           Ý
&THORN;    &#222;    Capital THORN             Þ
&szlig;    &#223;    Small sharp s             ß
&agrave;   &#224;    Small a grave             à
&aacute;   &#225;    Small a acute             á
&acirc;    &#226;    Small a circumflex        â
&atilde;   &#227;    Small a tilde             ã
&auml;     &#228;    Small a diaeresis         ä
&aring;    &#229;    Small a ring above        å
&aelig;    &#230;    Small ae                  æ
&ccedil;   &#231;    Small c cedilla           ç
&egrave;   &#232;    Small e grave             è
&eacute;   &#233;    Small e acute             é
&ecirc;    &#234;    Small e circumflex        ê
&euml;     &#235;    Small e diaeresis         ë
&igrave;   &#236;    Small i grave             ì
&iacute;   &#237;    Small i acute             í
&icirc;    &#238;    Small i circumflex        î
&iuml;     &#239;    Small i diaeresis         ï
&eth;      &#240;    Small eth                 ð
&ntilde;   &#241;    Small n tilde             ñ
&ograve;   &#242;    Small o grave             ò
&oacute;   &#243;    Small o acute             ó
&ocirc;    &#244;    Small o circumflex        ô
&otilde;   &#245;    Small o tilde             õ
&ouml;     &#246;    Small o diaeresis         ö
&divide;   &#247;    Division                  ÷
&oslash;   &#248;    Small o stroke            ø
&ugrave;   &#249;    Small u grave             ù
&uacute;   &#250;    Small u acute             ú
&ucirc;    &#251;    Small u circumflex        û
&uuml;     &#252;    Small u diaeresis         ü
&yacute;   &#253;    Small y acute             ý
&thorn;    &#254;    Small thorn               þ
&yuml;     &#255;    Small y diaeresis         ÿ
&Yuml;     &#376;    Capital Y with diaeresis  Ÿ
&OElig;    &#338;    Capital OE                Œ
&oelig;    &#339;    Small oe                  œ
&Scaron;   &#352;    Capital S with caron      Š
&scaron;   &#353;    Small s with caron        š
&circ;     &#710;    Circumflex                ˆ
&tilde;    &#732;    Tilde                     ˜

HTML Math Entities

&forall;   &#8704;   For all                   ∀
&part;     &#8706;   Partial differential      ∂
&exist;    &#8707;   There exists              ∃
&empty;    &#8709;   Empty set                 ∅
&nabla;    &#8711;   Nabla                     ∇
&isin;     &#8712;   Element                   ∈
&notin;    &#8713;   Not an element            ∉
&ni;       &#8715;   Contains as member        ∋
&prod;     &#8719;   N-ary product             ∏
&sum;      &#8721;   N-ary sumation            ∑
&minus;    &#8722;   Minus                     −
&lowast;   &#8727;   Asterisk                  ∗
&radic;    &#8730;   Square root               √
&prop;     &#8733;   Proportional              ∝
&infin;    &#8734;   Infinity                  ∞
&ang;      &#8736;   Angle                     ∠
&and;      &#8743;   Logical and               ∧
&or;       &#8744;   Logical or                ∨
&cap;      &#8745;   Intersection              ∩
&cup;      &#8746;   Union                     ∪
&int;      &#8747;   Integral                  ∫
&there4;   &#8756;   Therefore                 ∴
&sim;      &#8764;   Tilde                     ∼
&cong;     &#8773;   Approximately equal       ≅
&asymp;    &#8776;   Almost equal              ≈
&ne;       &#8800;   Not equal                 ≠
&equiv;    &#8801;   Identical                 ≡
&le;       &#8804;   Less than or equal        ≤
&ge;       &#8805;   Greater than or equal     ≥
&sub;      &#8834;   Subset                    ⊂
&sup;      &#8835;   Superset                  ⊃
&nsub;     &#8836;   Not a subset              ⊄
&sube;     &#8838;   Subset                    ⊆
&supe;     &#8839;   Superset                  ⊇
&oplus;    &#8853;   Circled plus              ⊕
&otimes;   &#8855;   Circled times             ⊗
&perp;     &#8869;   Up tack                   ⊥
&sdot;     &#8901;   Dot operator              ⋅

HTML Greek Entities

&Alpha;    &#913;    Capital alpha             Α
&Beta;     &#914;    Capital beta              Β
&Gamma;    &#915;    Capital gamma             Γ
&Delta;    &#916;    Capital delta             Δ
&Epsilon;  &#917;    Capital epsilon           Ε
&Zeta;     &#918;    Capital zeta              Ζ
&Eta;      &#919;    Capital eta               Η
&Theta;    &#920;    Capital theta             Θ
&Iota;     &#921;    Capital iota              Ι
&Kappa;    &#922;    Capital kappa             Κ
&Lambda;   &#923;    Capital lambda            Λ
&Mu;       &#924;    Capital mu                Μ
&Nu;       &#925;    Capital nu                Ν
&Xi;       &#926;    Capital xi                Ξ
&Omicron;  &#927;    Capital omicron           Ο
&Pi;       &#928;    Capital pi                Π
&Rho;      &#929;    Capital rho               Ρ
&Sigma;    &#931;    Capital sigma             Σ
&Tau;      &#932;    Capital tau               Τ
&Upsilon;  &#933;    Capital upsilon           Υ
&Phi;      &#934;    Capital phi               Φ
&Chi;      &#935;    Capital chi               Χ
&Psi;      &#936;    Capital psi               Ψ
&Omega;    &#937;    Capital omega             Ω
&alpha;    &#945;    Small alpha               α
&beta;     &#946;    Small beta                β
&gamma;    &#947;    Small gamma               γ
&delta;    &#948;    Small delta               δ
&epsilon;  &#949;    Small epsilon             ε
&zeta;     &#950;    Small zeta                ζ
&eta;      &#951;    Small eta                 η
&theta;    &#952;    Small theta               θ
&iota;     &#953;    Small iota                ι
&kappa;    &#954;    Small kappa               κ
&lambda;   &#955;    Small lambda              λ
&mu;       &#956;    Small mu                  μ
&nu;       &#957;    Small nu                  ν
&xi;       &#958;    Small xi                  ξ
&omicron;  &#959;    Small omicron             ο
&pi;       &#960;    Small pi                  π
&rho;      &#961;    Small rho                 ρ
&sigmaf;   &#962;    Small final sigma         ς
&sigma;    &#963;    Small sigma               σ
&tau;      &#964;    Small tau                 τ
&upsilon;  &#965;    Small upsilon             υ
&phi;      &#966;    Small phi                 φ
&chi;      &#967;    Small chi                 χ
&psi;      &#968;    Small psi                 ψ
&omega;    &#969;    Small omega               ω
&thetasym; &#977;    Small theta               θ
&upsih;    &#978;    Upsilon with hook         ϒ
&piv;      &#982;    Pi                        ϖ

HTML Symbol Entities

&ensp;     &#8194;   EN space                   
&emsp;     &#8195;   EM space                   
&thinsp;   &#8201;   Thin space                 
&zwnj;     &#8204;   Zero width non-joiner     ‌
&zwj;      &#8205;   Zero width joiner         ‍
&lrm;      &#8206;   Left to right             ‎
&rlm;      &#8207;   Right to left             ‏
&ndash;    &#8211;   EN dash                   –
&mdash;    &#8212;   EM dash                   —
&lsquo;    &#8216;   Left single quotation     ‘
&rsquo;    &#8217;   Right single quotation    ’
&sbquo;    &#8218;   Single low-9 quotation    ‚
&ldquo;    &#8220;   Left double quotation     “
&rdquo;    &#8221;   Right double quotation    ”
&bdquo;    &#8222;   Double low-9 quotation    „
&dagger;   &#8224;   Dagger                    †
&Dagger;   &#8225;   Double dagger             ‡
&bull;     &#8226;   Bullet                    •
&hellip;   &#8230;   Horizontal ellipsis       …
&permil;   &#8240;   Per mille                 ‰
&prime;    &#8242;   Prime                     ′
&Prime;    &#8243;   Double prime              ″
&oline;    &#8254;   Overline                  ‾
&frasl;    &#8260;   Fraction slash            ⁄
&euro;     &#8364;   Euro                      €
&weierp;   &#8472;   Script Capital P          ℘
&image;    &#8465;   Blackletter Capital I     ℑ
&real;     &#8476;   Blackletter Capital R     ℜ
&trade;    &#8482;   Trademark                 ™
&alefsym;  &#8501;   Alef                      ℵ
&larr;     &#8592;   Left arrow                ←
&uarr;     &#8593;   Up arrow                  ↑
&rarr;     &#8594;   Right arrow               →
&darr;     &#8595;   Down arrow                ↓
&harr;     &#8596;   Left right arrow          ↔
&crarr;    &#8629;   Down arrow with corner    ↵
&lArr;     &#8656;   Left double arrow         ⇐
&uArr;     &#8657;   Up double arrow           ⇑
&rArr;     &#8658;   Right double arrow        ⇒
&dArr;     &#8659;   Down double arrow         ⇓
&hArr;     &#8660;   Left right double arrow   ⇔
&lceil;    &#8968;   Left ceiling              ⌈
&rceil;    &#8969;   Right ceiling             ⌉
&lfloor;   &#8970;   Left floor                ⌊
&rfloor;   &#8971;   Right floor               ⌋
&lang;     &#9001;   Left angle bracket        ⟨
&rang;     &#9002;   Right angle bracket       ⟩
&loz;      &#9674;   Lozenge                   ◊
&spades;   &#9824;   Black spade               ♠
&clubs;    &#9827;   Black club                ♣
&hearts;   &#9829;   Black heart               ♥
&diams;    &#9830;   Black diamond             ♦

HTML Entities Appendix

The following characters are not defined in the ISO-8859-1 charset. Some of them are defined in the Latin Extended-A charset.

&euro;     &#128;    Euro                      €
&sbquo;    &#130;    Single low-9 quote        ‚
&fnof;     &#131;    Small florin              ƒ
&bdquo;    &#132;    Double low-9 quote        „
&hellip;   &#133;    Horizontal ellipsis       …
&dagger;   &#134;    Dagger                    †
&Dagger;   &#135;    Double dagger             ‡
&circ;     &#136;    Circumflex accent         ˆ
&permil;   &#137;    Per mille                 ‰
&Scaron;   &#138;    Capital S with caron      Š
&lsaquo;   &#139;    Single left angle quote   ‹
&OElig;    &#140;    Capital ligature OE       Œ
&lsquo;    &#145;    Left single quote         ‘
&rsquo;    &#146;    Right single quote        ’
&ldquo;    &#147;    Left double quote         “
&rdquo;    &#148;    Right double quote        ”
&bull;     &#149;    Big middle dot            •
&ndash;    &#150;    En dash                   –
&mdash;    &#151;    Em dash                   —
&tilde;    &#152;    Small tilde               ˜
&trade;    &#153;    Trademark                 ™
&scaron;   &#154;    Small s with caron        š
&rsaquo;   &#155;    Single right angle quote  ›
&oelig;    &#156;    Small ligature oe         œ
&Yuml;     &#159;    Capital Y with diaeresis  Ÿ
&nbsp;     &#160;    Non-breaking space