The DOCTYPE declaration should always be the first line in an XHTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.
Added Info - Identifying your language
Like the DOCTYPE, you should identify your language on every page of your web site. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Quoted excerpts from: http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1
Block-level elements are rendered with an implicit line break before and after, while inline-level elements are rendered where they occur in the text flow.
Ignoring CSS (The display property, as the name implies, only controls the presentation of an element, not what it is.
), a block level element CANNOT be contained by an inline element.
For example:
Valid - <div><a href="#"></a></div>
Invalid - <span><p></p></span>
The div is block level and contains a, which is inline, therefore it will validate.
The span is inline and contains p, which is block level, therefore it will not validate.
The exception is the OBJECT element type, which may, in fact, also contain block-level elements.
Some block-level elements are only allowed to contain other block-level elements. One example is FORM. In strict document types, the BODY may only contain block-level elements. All copy text must thus be marked up with paragraphs or other block-level element types.
For a floating or absolutely positioned element, the display property is generally ignored
An inline display will ignore vertical margins along with width and height.
From: http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position
Source: http://www.autisticcuckoo.net/archive.php?id=2005/01/12/block-vs-inline-2
The CSS 2.1 specification says that the width (height) of a block box is computed as the sum of the width (height) of the content area and the widths (heights) of its horizontal (vertical) padding and borders. Margins lie outside the box and are thus unaffected by properties for e.g. background colour.
Consider an element with the following CSS rules:
div#foo {
width:200px;
height:100px;
padding:20px;
border:10px solid #000;
}
The width of the generated block box is 200 + 20 + 20 + 10 + 10 = 260 pixels, while the height is 100 + 20 + 20 + 10 + 10 = 160 pixels. Note that both the left and right (or top and bottom) values must be included for padding and border widths.
Padding and border widths are thus added to the specified content area size. Microsoft got this wrong in older versions of Internet Explorer by using the specified width and height values as the outer dimensions of the block box, and subtracting the padding and border widths to compute the size of the content area.
To overcome this inconsitency, use the simplified box model hack.
width: 253px; // read by all browsers, used for IE5.x
w\idth: 200px; // read by all browsers, but ignored by IE5.x
The result is that the browsers the correctly implements the box model with have the correct width(100px), while IE5.x and lower with only see the 140px width. http://css-discuss.incutio.com/?page=BoxModelHack
From: http://css.maxdesign.com.au/floatutorial/clear.htm
Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements. The four options are
clear: left, clear: right, clear: both or clear: none.
clear: left - The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
clear: right - The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
clear: both - The element is moved below all floating boxes of earlier elements in the source document.
Auto-clearing floats: http://www.positioniseverything.net/easyclearing.html
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {height: 1%;}
Floats:
According to the W3C (http://www.w3.org/TR/CSS21/visuren.html#floats):
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property).
For more tips see Dive Into Accessibility
* Italicized items are from Google - http://www.google.com/support/webmasters/bin/answer.py?answer=35769
Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.
Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map into separate pages.
Create a useful, information-rich site, and write pages that clearly and accurately describe your content.
Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.
Try to use text instead of images to display important names, content, or links. The Google crawler doesn't recognize text contained in images.
Make sure that your TITLE and ALT tags are descriptive and accurate.
Use a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would. If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.