Basic XHTML document structure (X)HTML syntax is not rocket science, and as such it is accessible to most people. To prove this point, let’s look at a basic web page to see how it is structured:
1 <?xml version=”1.0″ encoding=”iso-8859-1″?>
2 <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
3 <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
5 <title>Joe’s website – Home</title>
6 <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
7 <meta name=”description” content=”Joe Bloggs’s homepage.” />
8 <meta name=”keywords” content=”keyword 1, keyword 2″ />
10 <body><!– content starts here –>
11 <h1>Joe Blogg’s homepage</h1>
12 <p>Welcome to my world!</p>
13 <hr size=”1″ />
14 <p>Maintained by <a href=”mailto:email@example.com”>Joe Blogg</a></p>
Basic XHTML document structure – The rather cryptic lines 1 and 2 tell the browser what versions of XML and XHTML your pages are written in.
The XML declaration (line 1) is optional, but the XHTML declaration (line 2) is compulsory for your pages to validate against the standards as set by the World Wide Web Consortium (W3C).
Basic XHTML document structure – You will see many web page that do not include a <!DOCTYPE> and still work, however it MUST be included at the top of each page to ensure your pages will function properly in all browsers. The whole document is contained between the opening <html> tag (line 3) and the closing </html> tag (line 16).
An (X)HTML document has two main parts: the head and the body.
The head (enclosed between the opening <head> and closing </head> tags – lines 4 to 9) contains information about the file, including the title (between the opening <title> and closing </title> tags – line 5) of the page – displayed in the bar at the top of the web browser. The information contained in the body (between the <body> and </body> tags – lines 10 to 15) is what is actually displayed in the browser’s main window.
TIP Be consistent in naming the title of each page. For example, if your site is called Joe’s website then it would be a good idea to give your CV page the title Joe’s website – CV.
The line <!– content starts here –> (line 10) is a comment and is ignored by browsers.
Comments act as signposts to help you (or whoever might contribute to your site) make sense of your code, especially if you haven’t looked at it for a while! They begin with <!– and end with –>. The <html> </html>, <head> </head>, and <body> </body> tags are the only required structural elements of an (X)HTML document.
As we have already said, the contents (text, images, links, etc) of your document are enclosed between the <body> and </body> tags. This means that other (X)HTML tags comprised between these two structural tags will modify the way contents display in a browser. In our example, the <h1> … </h1> tags (line 11) tell the browser to display the text Joe Blogg’s Homepage as a level 1 heading (there are 6 levels) – that is, bold, larger font size with spacing before and after. The <p> and </p> tags (lines 12 and 14) form paragraphs; they insert a blank line before and after the paragraph, thus setting it apart from other elements. Finally, <a href=”mailto:firstname.lastname@example.org”>Joe Blogg</a> (line 14) creates a hyperlink to an email address.