# Which DOCTYPE should I use?



## toptemp (Aug 15, 2004)

How am I supposed to choose the correct DOCTYPE for my site http://toptiertemplates.com. I would like to validate the page but cannot do so before I know that I have the correct one.


----------



## dimamo1983 (Jun 16, 2003)

ummm... i don't see any frames and it's more than strict can handle ====> Transitional 1.0

but you'll have to change all the tags from upper case to lovercase first, as required by XHTML 1.0 specs

good luck with that...

dima


----------



## toptemp (Aug 15, 2004)

So what should I use exactly (I'm kind of new to this)

i.e:

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

is this good?


----------



## dimamo1983 (Jun 16, 2003)

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

Welcome to the Ohio State University Challenge X team website

</meta>


----------



## toptemp (Aug 15, 2004)

My problem is that whenever I change my doctype to that, in my editor, all my divs are not aligned where they should be... what should i do here? Is it something to do with the tag attributes that I need to change?


----------



## dimamo1983 (Jun 16, 2003)

are the divs not aligned in the editor or on the page (when you view it)? if it's the page, which browser are you using? are you sure you've closed every one of them? (happened to me yesterday... spent about two hours "fixing" misallignment of divs just to find out that i forgot to close one of them and had to redo everything)


----------



## toptemp (Aug 15, 2004)

I am pretty sure that I have I.E v.6, and when I view the page with the new doctype, the text does not align how I'd like it to. I want it to have padding on both sides of the text but that's not happening anymore.


----------



## toptemp (Aug 15, 2004)

I tell it to have padding in this code:


----------



## dimamo1983 (Jun 16, 2003)

have you tried to view it in Firefox? IE can't render most of the stuff correctly. I remember about some issue with its padding or margin rendering... It was one of them that IE can't do correctly so you have to use another one instead (margins instead of padding)... i'm not a big expert myself here, just trying to learn it as well... takes me way too much time and nerves to get it to display correctly in all browsers...  

so, i guess, try substituting margins instead of padding and also don't forget that you have to specify the units, even though usually it is not the problem


----------



## Big-K (Nov 22, 2003)

As I remember, the tag isnt supported in xhtml, but I may be wrong. And your going to have to change everything except for the section of the DOCTYPE and content to lowercase. It also requires a title tag and head tag(with title under the head).


----------



## Shadow2531 (Apr 30, 2001)

I strongly suggest you use XHTML 1.0 Strict and conform to it.

For IE's sake, you need to have the doctype on the first line of the html file.

Here's an example.


```
<!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" xml:lang="en" lang="en">
<head>
<title>XHTML 1.0 Strict</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
<script type="text/javascript" src="file.js"></script>
</head>
<body>
<div id="main">
<div>Some Content</div>
<div>Some More Content</div>
</div>
</body>
</html>
```
Keep css in external files. tag.
Provide a print style sheet if needed.

Keep javascript in external files except when it's necessary to have the script inline. If you do keep scripts inline, get rid of . This is XHTML, let's not worry about dinosaur browsers. Same goes for inline stylesheets with .

Avoid using lots of 
tags. Use css to separate your content.

When viewing your page, put javascript:alert(document.compatMode) in the addressbar and hit enter. If it says "Quirks mode", you don't have your doctype and char encoding set properly.

Do not use an XML declaration unless you choose to serve the page as application/xhtml+xml.

Make tagnames and attribute names lower case. not

Also, width="40" is not valid. You need to have a unit like px. width="40px".

All the attribute values need to be in quotes.

Specify all your widths, heights,borders, background colors, aligns, margins via css and not via tag attributes.

Avoid p tags. Don't use them. Forget they existed.

You can check your page for errors at http://validator.w3.org

As for the that everything is encased in, that allows you to use 
for separation purposes when it's really necessary. You do not have to encase the whole page in a main div like the example. That will be up to you.

Also, scripts don't always have to go in the head of the document.

Also, it is bad form to use tables to position and form the layout of your page. Tables are for tabular data only. However, you can do whatever you want, just know that tables are not meant for that.

Also, only use a text editor to code your page. Notepad, Metapad, EditPlus, UltraEdit, XEmacs, Gvim, crimson editors etc. Do not use front page or dreamweaver. They will just booger up your code.


----------



## Big-K (Nov 22, 2003)

Half of that goes completely against how I learned it(w3schools). When I recoded my webpage(it still has some errors that i havnt fixed) I left it as a table layout, used plenty of 
tags, and use the

tag whenever I put in formatted text. I also use the

tag for aligning headers to the center. It just doesnt work for me in css. If it was conformed to the standards you just listed, that would make more work not less.


----------



## Shadow2531 (Apr 30, 2001)

You can still use P tags.
You can still use Tables for layouts.
You can still use break tags.

However, they are not recommended.

Putting everything inside p tags and having a billion nested p tags is not recommended. For one it's a mess, but depending on the browser, if you use p tags (especially in XHTML served as application/xhtml+xml, you can cause a margin collapse, which is per spec, but undesired. So it's good to avoid them. There are billion situations on the subject, but you'll find out yourself sooner or later.

Using a million break tags to separate everything is not recommended.

e.g.


```
<div>
<div>bla bla bla</div>
<br />
<br />
<br />
<br />
<div>bla bla bal</div>
</div>
```
A better way to do that would be to use


```
<div>bla bla bla</div>
<div>bla bla bla</div>
```
and just use css to separate them more. ( if you needed to).

Here's a non-glamorous example.

As for w3cschools, it's a great site, but there are a lot of tutorials based on old html styles and coding.

Just keep in mind that just because a page validates, doesn't mean it's right.

My suggestions are really flags that say "Hey, maybe I should go to w3c.org and see what's recommended". Basically it comes down to, make the page validate and following all recommendations that you agree are not bogus and ultimately test in lots of browsers.


----------

