My Preferred XHTML Template

Posted on April 19, 2012 by Jimmy K. in Articles, Tutorials.

During my internet travels, I have gathered bits and pieces of code and have compiled my preferred XHTML template for starting new projects into this article for anyone looking for new tips and tricks. Some readers might agree with this article and some might disagree with it. In either case – that’s okay! Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Website</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Sample, Example, Website" />
<meta name="description" content="This is a sample description for our sample website." />

<!-- Mobile-Friendly Tags -->
<meta name="viewport" content="width=1000,initial-scale=1.0,user-scalable=yes" />
<!-- Mobile-Friendly Tags -->

<!-- Facebook Tags -->
<meta property="og:title" content="Homepage" />
<meta property="og:type" content="Blog" />
<meta property="og:url" content="http://www.samplewebsite.com/" />
<meta property="og:image" content="http://www.samplewebsite.com/preview-image.jpg" />
<meta property="og:site_name" content="Sample Website" />
<meta property="og:description" content="This is a sample description for our sample website." />
<!-- Facebook Tags -->

<link href="http://cloud.endseven.net/css/default/1.1/style.css" media="all" rel="stylesheet" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

</head><body>

<p><strong>Welcome to my website!</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus porttitor iaculis. Donec tortor purus, sollicitudin ac imperdiet a, ultricies eget mi.</p>

</body>
</html>

I will go through the source code line by line and explain what each piece means and why I chose to include it in my template.

Doctype, XML Namespace, and Page Title

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Website</title>

Line 1 states which document type your page uses. A doctype defines which version of (X)HTML your document is actually using, and is a critical piece of information needed by some tools processing the document. The most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a “standard” rendering mode. This line is very important if you’re concerned with how your website is displayed in different browsers (which you should be). Here is a list of valid doctypes.

Line 2 is the XMML namespace. I don’t rightly know what the XML namespace is used for, but the W3C recommends it and that’s good enough for me. Wikipedia states, “XML namespaces are used for providing uniquely named elements and attributes in an XML document. An XML instance may contain element or attribute names from more than one XML vocabulary. If each vocabulary is given a namespace then the ambiguity between identically named elements or attributes can be resolved.” So that’s that.

Lines 3 and 4 are pretty self-explanatory. (Don’t forget to replace “Sample Website” with your website’s name!)

Content Type, Keywords, and Description

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Sample, Website, Example, XHTML" />
<meta name="description" content="This is a sample description for our sample website." />

These are the basic meta tags that every page should have. Meta tags are elements that can be read by various browsers or internet services and are used to embed additional metadata within your document. Google uses meta tags for some of their services, such as verifying ownership of your website.

Line 1 declares the content type to be used for your document as well as the character set to use. Most of the time this will stay “UTF-8″. Unless you are writing in another language like Japanese, in which case the character set would be something like “EUC-JP”.

Line 2 specifies the keywords for your document. I’m not sure how many search engines still rely on keywords, but I’ve heard that smaller search engines still use them so it wouldn’t hurt to include a handful of relevant keywords for each page.

Line 3 specifies a description for your document. I’ve seen this value used in search engines, hyperlink generators and some social networking sites. (For an example of this, click the “Share on Facebook” link at the bottom of this article!)

Optional Meta Tags

<!-- Mobile-Friendly Tags -->
<meta name="viewport" content="width=1000,initial-scale=1.0,user-scalable=yes" />
<!-- Mobile-Friendly Tags -->

<!-- Facebook Tags -->
<meta property="og:title" content="Homepage" />
<meta property="og:type" content="Blog" />
<meta property="og:url" content="http://www.samplewebsite.com/" />
<meta property="og:image" content="http://www.samplewebsite.com/preview-image.jpg" />
<meta property="og:site_name" content="Sample Website" />
<meta property="og:description" content="This is a sample description for our sample website." />
<!-- Facebook Tags -->

Line 2 specifies the viewport width for your document when viewing from an iPhone or iPad (and some tablets). This tag is used by Mobile Safari to determine how much of the space your website should fill up left-to-right. I typically build websites to fit on a 1024×768 screen resolution and setting this value to “1000″ will ensure that my website will fit nice and snug on the screen. The higher you set this value, the more space on the left and right you will have and vice versa. For more information regarding Mobile Safari’s supported meta tags, please click here.

Lines 6-11 are Facebook-specific tags used by Open Graph to help identify the pages on your site. These tags include the URL, a preview image, page title, page description, the name of your site, and what type of site it is. To learn more about Facebook’s Open Graph meta tags, visit David Walsh’s blog.

Helpful Libraries

<link href="http://cloud.endseven.net/css/default/1.1/style.css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Line 1 includes a preferred stylesheet that I like to use when creating new projects. This stylesheet includes a variety of properties that I don’t want to track down each time, or might simply forget to include later. (Let’s face it, my memory isn’t the greatest. :P)

Line 2 includes the jQuery library which lets you do all kinds of fun things like animations, fading, Ajax requests – lots of stuff. It’s a very useful library and I find myself using it in almost every project I work on.

Last, but not least…

</head><body>

<p><strong>Welcome to my website!</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus porttitor iaculis. Donec tortor purus, sollicitudin ac imperdiet a, ultricies eget mi.</p>

</body>
</html>

And this is the last piece. It’s pretty straightforward so it probably doesn’t need explaining.

I refer to this article almost every day and I hope that it helps any wandering web developers. If you have any questions or comments, please feel free to let me know in the comments section of this article. I would greatly value your input. Thanks!

Tags: , , , ,

 

Jimmy K. is a Chicago-based web developer who actively posts tutorials, articles and insights on his web development blog to help other programmers and developers.

You can find Jimmy on Google+ and Twitter.

 
 
 
 
 

If you like this, please leave a comment.

Name (required)
Email Address (required)
Website
Comments: