Go To Content
codylindley.com

codylindley.com

Building an xhtml webpage - Steps - Template - The Details

8 September 04 | Permanent Link | Add Comments

Instead of keeping this information in my head I decided to write it down for the sake of my sanity. The following are the steps and details I think about when developing an XHTML web page. As well as the template I use when starting construction on a website. Feel free to comment with any recommendations or complaints.

Step 1

Add one of the following DOC types so the browser knows how you want the markup interpreted. Not having a DOC type will result in the browser displaying HTML in quirks mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Step 2

Add a namespace to the HTML tag.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Step 3

Add a meta tag to declare the content type.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Step 4

Add a meta description tag that summarizes the specific XHTML page at hand. Forget about the meta keywords tag, it’s useless.

Step 5

In addition to the meta description tag, add copyright and author meta tags. (See Template Below For The Details)

Step 6

Because many users view websites using Windows XP and Internet Explorer, add the following meta tags.

<meta name="mssmarttagspreventparsing" content="true">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="msthemecompatible" content="no" />

Step 7

Use a robots.txt file, as well as meta robot tags, to guide search engines around your site as well as to restrict them. (See Template Below For The Details)

Step 8

Attempt to keep JavaScript and CSS files external, but keep in mind the amount of calls to the server versus load time.

Step 9

Apply a favicon if applicable.

Step 10

Give the page a complete and meaningful title. This is very important for search engine results.

Step 11

Give the body tag a class value, id value, or both, so if need be, you can isolate this specific page with CSS from a global CSS file.

Step 12

Provide a hidden “skip to content” link right after the body tag, as well as a hidden option in the navigation, to “skip to content”.

Step 13

Define and apply any access keys that might be applicable.

Step 14

Start with a generic page structure, like so:

<div id="container">
<div id="head"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

A XHTML Transitional Template

When I begin a new website I usually start with a generic template which is shown below. If you borrow my template make sure to read the comments as not all tags apply to all situations.


<!-- For use with apache & php -->
<?php
ob_start("ob_gzhandler");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Cody Lindley - codylindley.com." />
<meta name="copyright" content="Copyright 2004 - codylindley.com." />
<meta name="description" content="Provide a meta tag description which contains keywords from the sites content. (250 character max)" />
<!-- Do not archive this page -->
<meta name="robots" content="noarchive" />
<!-- This meta tag is only good for a homepage that frequently change -->
<meta name="robots" content="noindex,follow" />
<!-- This meta tag should be used on all pages past the homepage -->
<meta name="robots" content="index,follow" />
<!-- Microsoft Handlers -->
<meta name="mssmarttagspreventparsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />
<meta http-equiv="msthemecompatible" content="no" />
<!-- A basic reference to a Cascading Style Sheet (typically 4.0+ browsers) -->
<link rel="stylesheet" type="text/css" href="simple.css" />
<!-- A sophistocated reference to a Cascading Style Sheet (typically 5.0+ browsers) -->
<style type="text/css" media="all">
<!--
@import "/css/global.css";
-->
</style>
<!-- Javascript Includes -->
<script type="text/javascript" src="/js/global.js"></script>
<!-- Favicon -->
<link rel="shortcut icon" type="image/ico" href="/images/global/favicon.ico" />
<title>Add a unique title that describes this specific page</title>
</head>
<body class="specify_a_class" id="specify_a_id">
<a href="#content" title="Go To Content" accesskey="2" class="hide" >Go To Content</a>
<div id="container">
<div id="head"></div>
<div id="content"></div>
<div id="foot"></div>
</div>
</body>
</html>

Other Details

  • Keep the content separate from the presentation.
  • Is the site large enough for a site search? If so, it should be a simple search and above the fold.
  • Does the page have a clear homepage button?
  • Does the site have a consistent navigation?
  • Does the site need a site map?
  • Does the page make use of breadcrumb techniques?
  • Take advantage of web page compression. (PHP’s ob_gzhandler)
  • Write all tags (element) and attributes in lowercase.
  • Place all attribute values in quotes.
  • All attributes must have values.
  • Close all tags.
  • Remember the Google bot only speaks text.
  • Keep the number of links on a page less than 100.
  • Avoid frames.
  • Avoid iframes.
  • Important content should be placed as close as possible to the opening body tag.
  • Serve a user-centered and friendly error page.
  • Are all the links underlined, and is there a specified visited links state?
  • Don’t forget about color blind people.
  • Check the line height and font size of all text.
  • Check for enough white space.
  • Make sure all fonts are relative and scalable.
  • Does the content need a CSS file for printing?
  • Is the design flexible? Will it work in a variation of different
    browsers, operating systems, monitor sizes, screen resolutions, window sizes, color calibration, and font sizes?
  • Check for bad or missing alt tag attributes.
  • Don’t place a div tag inside a p tag.
  • Make sure all id values are unique.
  • Make sure any URL’s with ampersands are written correctly.
  • Make sure you don’t have unnecessary div and span elements.
  • Make sure you set a default background color.
  • Make sure you didn’t use a span or div tag when an HTML tag will do.
  • Don’t use CSS to make an HTML tag look like an existing tag.
  • Make sure the HTML tags keep their meaning by placing the tags around the appropriate content. The content will decide which tag you should use.
  • Use tables for tabular data and make sure the table is accessible by using the th tag, summary attributes, and captions.
  • Switch off the CSS and determine if the site’s content is still accessible.
  • Attempt to place all decorative images in CSS.
  • Validate the CSS and XHTML.
  • Validate often!
  • Have you checked the site performance in terms of speed/page size?
  • Check for JavaScript errors. Some will fly under the radar.

Special Characters

  • EN dash: – &#8211;
  • M dash: — &#8212;
  • Apostrophe: ’ &#8217;
  • Open double quote: “ &#8220;
  • Close double quote: ” &#8221;
  • Hyphen: − &#8722;
  • Open single quote: ‘ &#8216;
  • Close single quote (Apostrophe): ’ &#8217;
  • Ellipsis: … &#8230;
 
  1.   #1 Comment Posted by mickael on Sep 12, 07:49 AM
    nice reference for an occasional coder like me

    thanks
  2.   #2 Comment Posted by marko on Sep 12, 03:45 PM
    Nice one! And i like Special Characters list!
  3.   #3 Comment Posted by Thomas on Sep 13, 12:33 PM
    Thanks a lot! Step 12 was new for me.
  4.   #4 Comment Posted by bojan on Feb 21, 06:32 PM
    Nice article.
    In Step 6, you’ve left out the XHTML forward slash.