Whether you’re setting up a new page or site from scratch, or trying to edit a free template, understanding the basics of the page you’re working on will undoubtedly make life easier for you and give you a greater control over the layout of your web pages.
Just for clarification, when the word ‘tag’ is mentioned, it refers to a HTML tag which is a piece of code contained within diamond brackets eg. <p> for an opening paragraph tag and </p> for the closing paragraph tag.
The DOCTYPE and opening HTML
The DOCTYPE is the first line of markup that should be seen on a rendered page* with the exception of an XML declaration when an XHTML doctype is used, however this is often not recommended when using XHTML 1.0 as it will cause Internet Explorer 6 and below into quirks mode if it encounters the XML declaration in a document being served as text/html.
(*This means that scripting code eg. PHP or ASP, can be placed above it, however when you view the page in a browser and view the source, the first line you see should be the DOCTYPE).
Selecting the correct doctype is important in todays world of markup. If you use an option such as a loose or transitional DTD then you’ll find you have less control over how your browsers interpret your markup and CSS. Your best option is to use either a Strict HTML or XHTML doctype, or use a specific frameset DTD for a frame based website.
To read more about doctypes and how important they are I recommend reading the doctype article on A List Apart from Jeffrey Zeldman.
The root element of both an HTML and XHTML document is the HTML tag, <html>. This should come after the opening doctype and it should be closed at the end of the document, with nothing coming after it. If you’re serving an XHTML document, the HTML tag also requires to have an xmlns attribute to associate it with the XHTML namespace.
The Head
The head section is made up of the page title, meta tags, CSS styles, links to stylesheets/favicons, JavaScript and links to JavaScript files. This is all contained within the <head></head> tags. Script tags for JavaScript are not restricted to the head section, whereas the rest are, however it’s usually assumed that these will be put in there unless the script needs to be included at a specific point on the page.
The information contained within the header is not usually seen on page with the exception of the title tag that goes into the very top of your browser window.
The Body
The body, contained within the <body></body> tags, then contains all of the content that will usually be seen on the page. This can be made up of header tags (h1, h2 etc), paragraphs (p), divisions/sections (div), images (img) and other various tags that are used to control the display and layout of your page.
The Basic Code Structure
So this now gives us a basic code structure of
< !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">
<head>
<title>Your Page Title Goes Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" source="scripts/script.js"></script>
</head>
<body>
<div>
<h1>Welcome to my Site!</h1>
<p>Hello World</p>
</div>
</body>
</html>
The code above is a very basic structure with a strict XHTML doctype (the doctype I recommend). The header contains the page title, the character set defined by the meta tag, a call to a stylesheet called style.css and a call to a JavaScript file called script.js. The body then contains a division with a header and paragraph in it.
For this code, the stylesheet and script call are not necessary, I’ve just put them there as an example. You can easily omit these and have an even more basic set of code.
HTML or XHTML?
I personally use an XHTML Strict doctype. A HTML Strict doctype is just as fine to use, and is favoured by a lot of top HTML developers. Which to use is up to you. Providing you use valid markup suited to your chosen doctype, your site should display in the same way with either doctype. In my opinion however, XHTML forces you to use a stricter form of markup requiring all your tags and attributes to be in lowercase and all tags to be closed, including empty tags (eg. line breaks (br) and images (img)).
Over the forthcoming weeks we’ll go into a greater depth in all aspects of a web page, the various tags available and how and when to use them, along with CSS styling and how to use this too.
Chris | October 16th, 2008 at 9:32 pm #
I’m moving toward strict XHTML. If it makes your blog more SE friendly and load faster, why not?
Kana | October 17th, 2008 at 7:52 am #
Good point Chris, tell me how it goes.
Lee Marriott | October 17th, 2008 at 8:01 am #
good stuff, im looking forward to the follow ups.
Marge Conder | October 19th, 2008 at 11:20 am #
Good stuff - I’ll bookmark this site to read the follow-up…
Professional Logos | October 22nd, 2008 at 10:53 am #
Thanks for the post. Being a Logo Designer I am still on a learning curve when it comes to web design so this has helped highlight some useful points for me.
Staismitale | December 11th, 2008 at 11:20 am #
Just want to let everyone know about a great Website Design company.
I was a sceptical because of the price, but boy did they deliver for about
$200 they did the most amazing work for me. I just wanted to pass that along to
you guys.
you can check them out at: http://www.leadsware.com/renovastar/index.html