HTML Hints and Tips

Favourite Icon

Add the following to your HTML document <head> section:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Add favicon.ico to your server's root directory too. See How To Create And Install A favicon.ico which also describes using png2ico to convert a 16x16 pixel png image to ico format. Another option is to use The Gimp.

See also:

Doctypes

HTML 5

Many elements are optional, so the following is valid:

<!DOCTYPE html>
<html lang="en-GB">
<title>Example</title>
</html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>My Page</p>
  </body>
</html>

HTTP Redirects

Place a meta tag within the <head> section of your page.

   <meta http-equiv="refresh" content="3; URL=http://somewhere_else/">

CDATA sections

<example>
  <attribute><![CDATA[some data]]></attribute>
</example>

Specifying Encoding

   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- or -->
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>

Style Sheets

External Style Sheet

   <head>
   <link type="text/css" rel="stylesheet" href="css/style.css">
   </head>

Embedded Style Sheet

   <head>
   <style>
     img {border: none}
   </style>
   </head>

Escaping HTML/XML

The following characters most commonly need escaping in HTML/XML:

    Character   Entity
    ----------  -------
    "           &quot;
    '           &apos;
    &           &amp;
    <           &lt;
    >           &gt;

See Predefined Entities in XML

References

_ W3C cheatsheet - HTML 4.01 Specification - http://validator.w3.org/

-- Frank Dean - 01 Feb 2003

Related Topics: CssTips