Introduction

Today, I’m going to give you a peak at some templates I use in my workflow to help me get a running start on new web development projects. In addition to the XHTML templates, I’ll go over some CSS templates and some XHTML markup examples I’ve made to help me create style guides for various sites.

HTML Form Builder

A long time ago, there used to be a time when the following template or guideline could give you a great head start.

<html><head>
<title></title>
</head><body>
</body></html>

Ah, good times. Anyway, the world is a bit more complicated now and while the above outline is great for teaching an HTML 101 class, a good web developer following the current trends in web standards knows you need a LOT more code just to start a decent web page.

In fact, getting started on the HTML markup is one of the most time consuming tasks a web designer can face. Inspiration—easy. Multiple comps—no problem. Remembering all the different CSS selectors needed to cover all the configurations of styles that may come up on a blog post—harder than getting Africa as the final continent challenge on PBS’s Where in the World is Carmen Sandiego.

Anyway, before I got smart and started using customized CSS and XHTML templates, I usually found myself opening up prior projects just to answer the same questions over and over again: How do I include an external JavaScript file? How do I properly form a meta tag? How do I make comments in a CSS file? What’s the best way to structure a form? My friends, it’s time to stop the inefficiency. Let’s get to it.

The Files

XHTML Template 1

The header on an XHTML page is like that form on the clipboard at the doctor’s office—preliminary paperwork. The following template is focused on getting a site’s header structure compliant and complete. Except for the doctype, you just fill in the blanks.

<!-- Doctype : Choose one and delete this comment -->
<!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 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><!-- Meta Tags -->
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" /><meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" /><!-- Favicon -->
<link rel="shortcut icon" href="" /><!-- CSS -->
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" /><!-- RSS --><link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" /><!-- JavaScript -->
<script src="" type="text/javascript"></script></head>

XHTML Template 2

Template 1 is great for understanding what information needs to be filled in, but bad for rapid development and styling because the ‘.css’ and ‘.js’ files are attached. That means I have to create two more documents just to work on the behavior and design layer of a page. When I’m working on a deadline or a one page prototype, managing three files is sometimes an unnecessary burden. Adding embedded CSS and JavaScript sections to my header allows me to start coding and styling almost immediately. Instead of showing the whole template again, I’ll just show you the revised sections:

REVISED CSS SECTION

<!-- CSS : Include and embedded versions-->
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<style type="text/css">
<!--/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Title : 
Author : 
URL : Description : Created : 
Modified : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*//* ----- CSS ----- */-->
</style>

REVISED JAVASCRIPT SECTION

<!-- JavaScript : Include and embedded version -->
<script src="" type="text/javascript"></script>
<script type="text/javascript">
<!--// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//
// Title : 
// Author : 
// URL : 
//
// Description :
//
// Created : 
// Modified : 
//
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -// JavaScript
window.onload = function(){}//-->
</script>

These embedded sections also keep me from forgetting to properly document my ‘.js’ and ‘.css’ files. Now there’s no excuse because it’s just too easy. The JavaScript section also includes a blank ‘window.onload’ function just in case I need to unobtrusively run any scripts on page load. Once everything starts working nicely, I just copy and paste the CSS and JavaScript to external files for proper file management.

CSS Template 1

If I know I’m going to be working on a site that’s going to need a massive style attack, I like to use this template as a sort of preflight checklist to make sure I cover all my selector bases. If different areas on a page (like ‘navigation’ and ‘primaryContent’) are using two different styles of a group of selectors (like an unordered list), I just copy, paste and add the appropriate ids or classes. Whatever sections I don’t use, I just delete. Here’s a sampling from CSS Template 1:

/* ----- IDS ----- */#container{
}   
#primaryContent{
}   
#secondaryContent{
}   
#navigation{
}   
#footer{
}/* ----- CLASSES ----- */.hide{
}
.show{
}/* ----- HEADINGS ----- */h1{
}
h2{
}
h3{
}
h4{
}/* ----- LISTS ----- */li{
}
li p{
}
ol{
}
ul{
}
ol li{
}
ul li{
}/* ----- IMAGES ----- */img{
}
img a{
}
img a:hover{
}/* ----- LINKS ----- */a{
}
a:hover{
}
a:visited, a:active, a:focus{
}
a:visited{
}
a:active{
}
a:focus{
}/* ----- FORMS ----- */form{
}
fieldset{
}
legend{
}
label{
}
input{
}
textarea{
}
input, textarea{
}
select{
}
optgroup{
}
option{
}/* ----- TABLES ----- */table{
}
caption{
}
thead{
}
tbody{
}
tfoot{
}
tr{
}
tr .alt{
}
th{
}
td{
}

CSS Template 2

You know what sucks? Remembering and then filling in all the appropriate CSS properties for all those selectors. I’ve noticed most of my projects, use the same properties for these selectors over and over again. So I created another template based off of CSS Template 1 that adds my most commonly used CSS properties to all the CSS selectors. Here’s a sample of what that looks like in CSS Template 2:

/* ----- CSS ----- */*{
margin:;
padding:;
font-family:;
font-size:;
}
body{
margin:;
padding:;
background:;
}/* ----- IDS ----- */#container{
width:;
margin:;
padding:;
background:;
text-align:;
}
#primaryContent{
position:;
float:;
width:;
margin:;
padding:;
background:;
text-align:;
}/* ----- CLASSES ----- */.hide{
display:none;
}
.show{
display:block;
}/* ----- PARAGRAPHS ----- */p{
font:;
color:;font-size:;
font-family:;
font-style:;
font-weight:;
font-variant:;text-align:;
text-indent:;
text-decoration:;
text-shadow:;
text-transform:;letter-spacing:;
word-spacing:;
}/* ----- LISTS ----- */li{
listy-style:;list-style-type:;
list-style-image:;
list-style-position:;
float:;
margin:;
padding:;
}/* ----- LINKS ----- */a{
font:;
color:;
text-decoration:;
border-bottom:;
}
a:hover{
color:;
background-color:;
border-bottom:;
}
a:visited, a:active, a:focus{
color:;
background-color:;
border-bottom:;
}

Anyway, you get the point. One thing to notice is that I’ve included shorthand selectors like ‘font’ and ‘list-style’ with the individual properties they replace. That’s just to give me more options during the design and development phase.

XHTML Markup Template

But what good is it to have all those CSS selectors and properties if you’ve got no XHTML markup to demo what they look like? XHTML Markup Template is my version of Lorem Ipsum for web design. Here’s a sample from this template:

<div id="container"><h1><a href="" title="Test Link">Untitled</a> - Online Style Guide Template (h1)</h1><p>Title : <em>Title of this Document</em><br /> 
Description : <em>A description of this document that explains how this guide should be used.</em></p>
<p>Author : <em>The Author</em><br /> 
URL: <em>http://url.to.reference.com</em><br /></p>
<p>Created : <em>Month DD, YYYY</em><br />Modified : <em>Month DD, YYYY</em><br /></p><hr /><div id="navigation"><h2>Navigation (h2)</h2><ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li><li><a href="" title="Test Link">Another item that is linked</a></li>
<li>Last item.</li>
</ul><ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li><li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li>
</ol></div><!-- navigation --><hr /><div id="primaryContent"><h2>Primary Content (h2)</h2><h3>Headline the Third (h3)</h3>
<h4>Headline the Fourth (h4)</h4><p>First paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong> or <em>emphasized</em>.</p><p>Another paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p><ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="">Another item that is linked</a></li>
<li>Last item.</li></ul><ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li></ol>

One thing to notice about this template is that it lacks examples of image elements in context. Because these elements are contingent upon external files being present, I prefer to include them on a case-by-case basis.

Online Style Guide Template

If you’re like me and come from a print design background, you’ll see the value of this template very quickly. Style guidelines make it very easy to communicate and illustrate design points for a team of designers and developers.

This template is basically all the other templates put together on one page. The Online Style Guide Template ridiculously reduces the time to create an extensive set of markup rules. If you’re using Firefox and have the Web Developer Toolbar installed, I highly recommend using “Edit CSS” to watch the page tranform as you style. When you’re done, just save out your modified CSS to an external file and update the HTML markup to reflect your changes. Just as good as the fancy CSS editing programs, but free.

This template also allows me to test more experimental CSS designs safely and see how it might affect other elements and properties on a page.

Conclusion

One of the great things about creating these templates is that it taught me a lot about the details hidden in the specs for XHTML and CSS . I learned about elements, selectors and properties I never would have considered using had I not sat down and created these templates. Basically, these templates not only made me a faster web designer, they made me a better one too.

Obviously, every designer and developer works differently. Using XHTML and CSS templates might not be the best way for you to start your web projects. I just know that it’s the way I start them and it helps significantly. Plus, I figure starting with something to fill in feels much more productive than staring at a blank document in Dreamweaver. Momentum is a powerful thing.

If you don’t like something I’ve done—no worries—just manipulate the templates and adapt them to your own workflow. If you have any additional ideas or notice any errors, definitely let me know so I can update/change them, because ultimately, I believe good templates make good web sites. Now get out there and get started.

HTML Form Builder
Kevin Hale

Quick Start Your Design with XHTML Templates by Kevin Hale

This entry was posted 5 years ago and was filed under Features.
Comments are currently closed.

· 80 Comments! ·

  1. Aesqe · 5 years ago

    Thank you very much for this, it really helps, especially when it comes to narrowing things down when one starts working on a fresh design.

  2. luxuryluke · 5 years ago

    ahhh, thanks for a nice quick and easy text to plugin to all my editors for instant creation ease!!!

  3. luxuryluke · 5 years ago

    btw, i spent about 15minutes freaking about your template. there’s an unclosed DL in the first section…. just so everyone knows.

  4. Kevin Hale · 5 years ago

    Ah. Thanks LuxuryLuke. Files are fixed.

  5. Marlene Jaeckel · 5 years ago

    This is great, Kevin. Thanks for sharing.

  6. Mårten · 5 years ago

    Great work, thanks!

  7. cbit · 5 years ago

    Useful article, thanks!

    i think you have a typo in CSS Template 2 (unless its a property i ddint hear of before) “listy-style:;”

  8. Kevin Hale · 5 years ago

    Yeah, listy-style. I think w3c is working on that one for css3. :) Bah! Alright, files updated, thanks cbit.

  9. bart · 5 years ago

    In the style sheet template, it should be a img {} and a:hover img {}, not img a {} and img a:hover {}.

  10. Kevin Hale · 5 years ago

    Alright, I agree. But should that be moved to the Links section or left in images.

  11. Pat · 5 years ago

    Quite useful. I have similar templates that I made for myself. It was becoming a real pain to have to look up those Doctypes every time I started a new project!

  12. Me · 5 years ago

    I’m not stupid, just ignorant.

    What’s the diff ‘tween the old HTML and XHTML?

  13. Cody Lindley · 5 years ago

    This is handy stuff. I put something together like this a while back for xhtml and css.

  14. Loopion · 5 years ago

    Excellent tutorial! Great work!

    Thanks a lot.

  15. Erik · 5 years ago

    The most basic difference between XHTML and HTML is that all attributes should be quoted (

  16. James Archer · 5 years ago

    I think those hr tags are probably extraneous. If you want a horizontal rule, you can just add border-top to the following div (or border-bottom to the previous). It’d probably be best to omit presentation markup like that from the actual XHMTL code.

    Also, I could be mistaken—it’s early!—but I think there are some missing closing tags from that last chunk of code.

    Great work overall, though. This is a fine service to the web community, and I hope that people pick these up and make them their own.

  17. Nathan Smith · 5 years ago

    This is something I’d been doing for awhile, just for my own benefit. I guess it just never occurred to me that there is a big need for solid templates, when it comes to fledging designers (or veterans for that matter).

    Great post, by the way. Alot of what you’ve got there is much more comprehensive than the template I have stored in Araneae. It’s a great little program for XHTML code-highlighting, and it’s free. It’s like Dreamweaver without all the frills. PC only, unfortunately.

  18. Henrik Lied · 5 years ago

    Please, remove the XHTML 1.1 DTD if you’re planning on running the text/html MIME type.

  19. Kevin Hale · 5 years ago

    James, I agree that the hr tags are extraneous. That’s why the hr selector in the css has a commented out property of display=none set in there. I use hr tags to help break up the sections on a site when I’m looking at it with styles turned off (that usually happens when we’re debugging something in development).

    On the Particletree front page, you’ll notice that I use border-bottoms on divs to create visual dividers on the page in conjuction with hr elements to accomplish the same thing. I don’t recommend trying to style an hr element … browsers just do a terrible job with them when you try to manipulate with css.

  20. Kevin Hale · 5 years ago

    Henrik, that’s a good call and reminds me to change our own mime-type on PT. If you want to know about proper mime types per doctype check out this w3c page for more information.

    Because application/xhtml+xml can be used on all three xhtml doctypes, you can just use that mime type for the templates. Alright, files updated.

  21. Douglas Clifton · 5 years ago

    Nice article Kevin. I enjoy the rest of the content on Particletree as well, and have for a while. So much so that I’ve waited patiently to find the right piece to add to my drx database—you win the prize! lol, ~d

  22. spyrral · 5 years ago

    I just wanted to caution that when confronted with a script element with a blank src, many browser will attempt to load the page again as it’s own js include. This can cause bizarre double actions in scripts. So don’t forgot to either fill in that src attribute or comment out the script element.

    If I were to use the template, I would put something like blank.js in the source.

  23. Kenneth · 5 years ago

    Templates are a good idea. Especially for people just starting out.

    My only worry/complaint is that you seem to have your !DOCTYPE on two lines. I browsers don’t seem to mind and work anyway, but it’s a single tag so it needs to be on a single line. Most text editors will wrap it on the space that’s inside of it, so it’s still readable at a glance.

    Good idea, again.

  24. Michelle · 5 years ago

    Great idea; thanks for saving me a whole lotta work. :) Now, does anyone remember how to modify the default templates in Dreamweaver MX 2004? I could swear I saw instructions about modifying some XML documents somewhere, but can’t seem to Google it up now.

  25. Cedric Francois · 5 years ago

    Ah that’s great stuff! The “online-style-guide-template” html file is spot on! Thank you!

  26. Neo · 5 years ago

    Hello, Kevin.

    This is a useful article for designer, you do a great job.

    Can I translate it into Chinese for the people?

  27. Chris Campbell · 5 years ago

    Hi Neo,

    We would be excited to see a Chinese translation. Please let us know when it happens so we can link to it.

  28. Oscar Eg Gensmann · 5 years ago

    Nice article, and great inspiration for my own personal templates. Thank you for taking the time to publish and share this.

  29. Rimantas · 5 years ago

    Get rid of those comments in embeded javascript section or your script will not work if processed by XML parser.

  30. Neo · 5 years ago

    Kevin, hello again.

    I have translated it into Chinese, and put online now. The URI of this translated article is http://omemo.net/neo/tech/templates.php .

    Due to my site’s style, the info of your site and this artcle is at the bottom, pls check it.

    all Chinese speaking people will thank you, LOL.

  31. Faruk Ates · 5 years ago

    Okay, here’s some quick critique on an otherwise good resource:

    1) remove XHTML 1.1 for sure; it’s semi-deprecated by the W3 themselves, not meant to be used, and so forth.

    2) as far as I personally would advise, just leave XHTML 1.0 Strict in there and don’t deal with the doctype choosing at all. Strict is the way to go, and it prevents you from accidentally using presentational elements.

    3) ’s aren’t presentational, they have the meaning and function of separating sections in a document. You can, for instance, put one after your header/navigation on each page, and that would be semantically correct. More info on XHTML 2’s element, which is to replace HR’s, can be found on Lachy’s log

    4) The META element with the content-type declaration is kind of pointless. application/xhtml+xml can only be specified through content headers (on apache/php/etc level), not through a META element. The above example will be a text/html document with a mismatching META declaration. It’s useful for the charset though.

    5) Erik, the most basic difference between XHTML and HTML is that XHTML is XML and should be well-formed; that’s a lot more than just “attributes must be quoted”

    Other than that, a good start for creating some demo’s :-)

  32. Brian Tully · 5 years ago

    Outstanding!!! Thanks so much for sharing! :)

  33. Jack · 5 years ago

    Thanks, Anything to save time and stay organized is a big help.

  34. Davezilla · 5 years ago

    Another tweak to consider.

    Meta keyword support was dropped from most, if not all, search engines in 1997. The only engine that still uses it is Inktomi (Hotbot). http://searchenginewatch.com/sereport/article.php/2165061 http://www.seoconsultants.com/meta-tags/

  35. Mega · 5 years ago

    You could add an empty delorie.htm file, so you can test the site with delorie’s Lynx Viewer when you don’t have lynx available

  36. Yannick L. · 5 years ago

    Thanks this will definitely come in handy, especially the CSS Templates and the XHTML Markup Template.

  37. Anna L. · 5 years ago

    Thank you! I’ve been wanting to learn the basics for a while now, but just haven’t found the right source. Now that I have, I can’t wait to start writing. Thanks!

  38. Miraz Jordan · 5 years ago

    These look really great. Thanks for sharing them!

  39. Dominic Chloe · 5 years ago

    The stepping stone to any successful design ideas, be it architecture or interior or exterior or home design, is well selected and skillfully executed colour scheme ideas

  40. Byron Ellacott · 5 years ago

    It’s really an incredibly bad idea to pretend to use XHTML. If you’re not serving application/xhtml+xml, why aren’t you using HTML 4.01 Strict, instead? After all, if you don’t serve it as XML, it will be parsed as HTML.

    You can verify this very simply. Create an “XHTML” document that has implicit close tags, perhaps on some table cells. Serve it as text/html, with your meta hack, and note that it doesn’t fail. Then serve it as application/xhtml+xml, and watch it die. Or use document.write(), or mix case in element names, or use short-form boolean attributes…

    In my opinion, serving XHTML as the wrong content type is paying lip service to standards compliance while simultaneously being compliant with neither HTML nor XHTML.

  41. Kevin Hale · 5 years ago

    That’s a really good point Byron. It feels wrong right now and honestly I can’t tell you why, but I’m glad you got me thinking.

    Good show. I’m going to do some research and go ponder it now.

  42. Faruk Ates · 5 years ago

    Kevin,

    XHTML still has a good purpose on the web, even as text/html.

  43. Faruk Ates · 5 years ago

    Err, what happened to my link in the post above? o_O It should have linked here:

    http://www.kurafire.net/articles/case-for-xhtml

  44. Douglas Clifton · 5 years ago

    “1) remove XHTML 1.1 for sure; it’s semi-deprecated by the W3 themselves, not meant to be used, and so forth.” (Faruk)

    Excuse me?

  45. Byron Ellacott · 5 years ago

    Faruk, I read the article you linked. There’s a few flaws in it I’d like to counter.

    The first is the notion that XHTML is more strict than HTML based on implicit creation and closing of elements. One could argue that requiring this to be stated explicitly is stricter, but HTML does have very clear and precise rules on when implicit behaviour happens, so I find the argument somewhat specious.

    The second is the idea that encouraging people to copy XHTML that’s developed, tested and serves as HTML is somehow a good idea. The problem with this is that there are many mistakes that can be made that will not be noticed when serving XHTML as HTML, but which become apparent when serving it as XHTML. Case sensitivity on CSS selectors, document.write() and styling on the body element vs the html element are three obvious ones. The Ian Hixie document goes in to more detail here.

    The problem, of course, is that many pages developed as XHTML contain these problems. These problematic pages are cut’n’pasted, and the errors propagate. One can easily imagine a situation where XHTML cannot be parsed as XML anymore for the sake of backwards compatibility.

    The third flaw is that the author argues in favour of the extensibility of XHTML. MathML, for instance, can only be embedded in XHTML. Trouble is, if you serve it as HTML, the MathML is not recognised and is ignored. This argument is a very strong case against serving XHTML as the wrong content type: you don’t get the benefits of it.

    The final flaw is that the author points out a managerial attitude: XHTML is a standard, if you can’t use the standard, what’s the point of standards? The author seems unable to point out that HTML 4.01 Strict is a standard published by the same standards body, yet supported by the world’s most common browser. The author’s inability to make this point should not be considered a good reason to abandon standards in the name of standards.

    The gist of my argument here is that when you serve XHTML as text/html, it’s not just Internet Explorer that treats it as HTML. It’s all browsers. You, by definition, can have none of the benefits of XHTML, while at the same time you are producing invalid HTML: an incorrect DOCTYPE and artifacts such as shorthand empty elements. Hence, you are not quite HTML, and not quite XHTML, but instead somewhere in between, breaking BOTH standards.

    Finally: if you’re not serving XHTML as XHTML, you are getting no benefit out of it. You would get the same results writing HTML 4.01 Strict, following the same priciples of good web design, while offering fully valid pages for others to copy and propagate.

  46. Kevin Hale · 5 years ago

    Those are really great points Byron, thanks for sharing them. There’s a really great interview if people want to follow up on this with Anne van Kesteren over at the Web Standards Group Blog.

    http://webstandardsgroup.org/features/anne-van-kesteren.cfm

    In the article, he says:

    “Another problem with ‘text/html’ is that your document is treated as HTML, not as XHTML. There are some small differences in handling of CSS that you might not understand the first time you use ‘application/xhtml+xml’. To name an example: in HTML documents, the ‘background’ property applied to the BODY element will be “re-applied” by the browser to the ‘viewport’ so that the image or color covers the entire screen and not just the BODY element. You might have guessed it, in XML this is different. The BODY element hasn’t got any special treatments at all in such documents and behaves like it was a DIV with some default styling (‘padding’, ‘margin’).

    To conclude, I think it is ok if you are sending your XHTML 1.0 documents as ‘text/html’ as long as you are aware what problems it might give in the future.”

    Also check out XML.com’s article on XHTML and Mime types. http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

  47. Srem · 5 years ago

    nice and easy tutorial

    maybe +php +ruby or others language

  48. john rieber · 5 years ago

    thank you. for those of us who started out trying to get a handle on html/xtml and css by fiddling around with wordpress stylesheets, then moved on to deconstructing cool sites that work…but still get confused trying to write html from scratch. these are not only great timesavers, but great learning tools. by this time next week, i hope to have made friends with a few more of bbedit’s formatting palettes. best wishes—

  49. Jared · 5 years ago

    This is nice, I’m using it on my website jaredweb.com and it seems to work great. Keep up the good work.

  50. Aaron Hursman · 5 years ago

    Excellent work, although you may want to reconsider the over-use of the DIV tag. Often referred to as “divmania”, too many div tags contribute to over-bloated markup that isn’t always necessary.

  51. kumar · 5 years ago

    you need a hug. thanks. makes my life easier.

  52. Peter · 5 years ago

    @James Archer: Haven’t checked this at the W3C ;), but I regard HR’s as more than presentational markup. They divide a page in sections.

    @Anyone that likes HR’s but doesn’t like the browsers CSS implementation of it: Consider wrapping a div with class hr around the HR’s and styling that instead (sorry Aaron… ;) You can do some nice stuff this way:

    div.hr hr { display: none } div.hr { height: 50px; background-position: center center; background-repeat: no-repeat; background-image: url(some-subtle-but-nice-background.png) }

    And the good part is that, contrary to CSS borders, text-mode browsers will display the HR. I have no clue about screenreaders though, but a HR has a better chance of being detected than a CSS border.

  53. Chauzer · 5 years ago

    Nice template, but it misses the element and the tag.

  54. Paul · 5 years ago

    Great! I’m miles ahead of where i was 15 minutes ago.

  55. web site templates · 5 years ago

    Everyone needs a hug.

  56. yakout · 5 years ago

    hello i want to know all about how can i use ssi in html? thank you

  57. Jordan · 5 years ago

    Hi,

    I’m a little confused. I thought it was best to write XHTML where possible, using the appropriate doctype; I guessed that so long as I was validating regularly (keep an eye on Tidy, big final check with the w3c) and using accessible techniques, I was taking the most pragmatic route. Unfortunately I work for a company which deals largely with e-commerce, so we have no option but to support IE 6 (at least): ‘application/xhtml+xml’ is a non-option for the time being.

    Now, I find articles saying that I should really be writing my pages in HTML 4; the most powerful argument is that I will need to fix most of my web pages when we eventually do start using the correct doctype. Correct me if I’m wrong, but it looks like I’m faced with a choice:

    1. Use an XHTML doctype, scream and cry when the pages don’t work, and start fixing them so that they work.

    2. Use HTML 4.0 and hope that it remains supported forever; if the standard is dropped by a major browser/vendor, switch to XHTML, scream and cry when the pages don’t work, and start fixing them so that they work.

    The main difference being that the second case will probably take longer to come about, but if it does it will be a rather more hellish occasion, since I was not coding in an XHTML-conscious fashion, and validating my code against different standards.

    Is there any kind of consensus on which route is the least damaging? I’m genuinely confused, and I’d like to have an answer so that I can start coding ‘right’.

    Now I’m going to find out why XHTML 1.1 is considered semi-deprecated!

  58. Jan Riebold · 5 years ago

    Thanks for this great introduction to xhtml and css. It’s kind of hard to read because I am german, but it definitly was worth it!

  59. Davis Hepnar · 5 years ago

    Great! Just what you need to quickly get started on putting an HTML web page together.

  60. corgom · 4 years ago

    Very useful. Thank you.

  61. Robert · 4 years ago

    {{ HUG }}

  62. Web Designer · 4 years ago

    Everyone needs a hug.

  63. Web Designer · 4 years ago

    Very helpful templates! Thanks a ton for sharing.

  64. Melle · 4 years ago

    Very helpful!

  65. Mo K. · 4 years ago

    I found this article extremely helpful!

    Thank You Very Much!

  66. Web Design India · 4 years ago

    Very Good Template Concept.

  67. Web Design Delhi · 4 years ago

    Excellent Content About the XHTML Templates.

  68. Matthew Reed · 4 years ago

    excellent article. the templates were just what i was looking for.

  69. Matthew Babbs · 4 years ago

    The W3C actually states that it is acceptable to serve XHTML 1.0 as text/html when the HTML Compatibility Guidelines are met. However the sections describing these techniques are ‘informative’ rather than ‘normative’, so it’s considered less than ideal.The best practice, until user-agents that don’t accept application/xhtml+xml are few enough to be safely ignored, is to use content negotiation to serve application/xhtml+xml to those that do. There’s an excellent explanation of how this works, with PHP, ASP and Perl scripts, at Juicy Studio. Autistic Cuckoo has a more advanced script that aims to re-write the XHTML header as HTML 4.01. If you use the Juicy Studio scripts, do make sure to move the declaration into the XHTML part of the if…else loop, as serving the XML declaration to IE triggers quirks mode.If you develop in something other than IE, the quickest thing is to serve the templates as application/xhtml+xml, then wrap the page in your preferred server-side script for IE-testing.BTW, an excellent set of templates Kevin! I have a few already, but nowhere near as advanced as these. Thanks!

  70. Matthew Babbs · 4 years ago

    Correction - I meant to say, move the XML declaration into the if..else loop.Just forgot to wrap the xml tag in PRE tags…

  71. abzgha · 4 years ago

    in site ro ham bebinid bad nist http://www.oyovo.com

  72. Jan · 4 years ago

    If then else…

  73. alex · 4 years ago

    very nice!

  74. Ajie · 4 years ago

    uhuy , very helpfull ! Thanks A Lot !

  75. lordmarin · 4 years ago

    Very good article. Good work :)

  76. gad · 4 years ago

    good article. thx

  77. juan · 4 years ago

    Very nice done

  78. graham · 3 years ago

    Excellent guidelines, thanks

  79. Carol · 3 years ago

    Thanks for this guide. It will help me a lot in developing my site.

  80. Mark · 3 years ago

    Hi, Thank You so much for this. I have been looking all over for how to actually create the graphics for a wordpress theme. Or a css site for that matter.? Anyone have any good sites. I have been searching for layouts etc but cannot find anything thanks.