Rules for doctypes

Question

After going through a lot of articles and this post, i know Why doctypes are used for and also about the different modes triggered by the browser like standards, quirks etc.

I downloaded the a strict doctype from this url - http://www.w3.org/TR/html4/strict.dtd but couldn't understand a thing of what is written inside it.

My question is, if i want to write a page with html and css which is going to have a doctype that will trigger standards mode, where can i get a clear and simple to understand list of all the rules that my html and css code should adhere to?

Answer 1

Look at the W3C specification. That should tell you a lot. It should also have well-written and well-documented code, which adheres to web semantics. Develop your own patterns which you use and after experience it will become more adherant.

A few things that I would suggest, is making sure your meta, br and link tags don't have /> at the end of them.

<link rel="stylesheet" /> <!-- bad -->
<link rel="stylesheet"> <!-- good -->

Also, don't put divs with ids inside of divs with classes.

<div class="myClass"> <!-- bad -->
    <div id="myId">

    </div>
</div>

<div id="myId"> <!-- good -->
    <div id="myClass">

    </div>
</div>

Also, be wary of deprecated elements. Google "deprecated html elements" and you will find a lot of references. For example, don't use HTML tags which style content, only use HTML tags which format content, then use CSS to style it. (E.g. the i, b, s, u, font tags).

"Standards", is also a very broad "umbrella" topic. There are many ways which you can comply or not comply to standards. Also, try to always stick to HTML5 and CSS3 semantics, see this page for info on that.

Some good references:

http://www.w3.org/html5
http://www.w3.org/html/wg/drafts/html/master/
http://www.webkit.org/coding/coding-style.html (only for a few things)
http://www.w3.org/standards/

Edit

in response to your confused comment

Well, you don't really have to avoid closing statements ( /> ), it's just good practice. So it's not critical or even eligible for criticism that you avoid it, it's just all about forming good, structural and adherent-to-standard habits. And those are just a few things I pointed out, not even a big deal. Those are just things that I correct if re-designing a website.

As far as the nesting scheme, it is, again, considered good practice. Think about it, id stands for identification. It identifies parts of your document. A div with a class in it, defines a certain class or target for certain elements that are more pointed. What would you be doing identifying a large part of your document inside of an element that's meant to target a specific part of your document? I like to think of it as a parent-child relationship, however this is quite debatable.

All in all, I suppose using the terms "good" and "bad" may have been a bit harsh. Replace them with "what standard-wary people prefer" and "what standard-wary people don't prefer".

Going back to your question, it seems that my answer doesn't provide a list of exact rules, but I don't think such exists. Just worry about building good habits, and read up on a lot of blogs and specs. Do some googling, you'll be surprised.

Edit 2

On a second note, I see you're using HTML4 "Strict". This isn't 2009 anymore. Even though HTML5 is still only a candidate recommendation, if you're worried about adhering to the "latest and future standards", start sticking with it.