Header

If it’s not intuitively obvious to you, having a modular header, just like a modular sidebar and footer, helps by allowing you to modify your site design with one code change that will ripple through all pages. For the header in particular, there are a few things you should know about.

!DOCTYPE

First and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. This should be the very top line of your code on each page. Without it, most browsers will be put into something called ‘quirks’ mode, which will sometimes lead to compatibility problems as the browser just sort of guesses what it should do with your code. And, as we all know, different browsers sometimes do different things…

W3C QA – List of valid DTDs has a list of valid DOCTYPES that can be used. Using an XHTML (typically 1.0 or 1.1) is increasingly popular and has real advantages, but do your research first, as certain common HTML code breaks the XHTML standard. One common example of this is the use of a target in links to open in a page other then the one on which the link appears. XHTML is also picky about alt tags, case, quotation marks, etc. If you choose to go with XHTML, the HTML Dog article on Declarations might be useful. You might also notice that the DOCTYPE tag must be written in upper case and that the preceding exclamation mark is not a mistake or optional. It also breaks the rules in that it is the only tag that doesn’t need closing.

In addition to using a valid DOCTYPE, always make sure to use TITLE and META Tags in your header.

Like this content? Why not share it?