Every web page has a structure. No matter what message you are trying to put across you will always have a basic structural model to your page. At the simplest level this might be a main heading (the subject of the page or a headline) and the information (normally pargraphs of text and pictures). XHTML is a way of structuring this information so it has meaning. As an example, here is an extract from my CV.
David Howe Curriculum Vitae Skill Sets Here is a list of my skillsets Visual Design Creation of logos, iconography, layout and aesthetic imagery using Adobe Photoshop, Macromedia Fireworks and Flash, AutoCAD and Corel Graphics packages. Web Design Creative use of an extensive knowledge of HTML combined with JavaScript to either build Web sites from scratch or amend and update Web pages created by others. Proficient in the use of Macromedia Dreamweaver and other proprietary Web authoring software.
This information has no contextual information at all, its just words. There is no distinction between headings, subheadings and paragraph text. XHTML provides markup code commonly referred to as "tags" to help make some distinctions. Each tag has a name enclosed by chevrons < > and comprises a start and an end tag, the end tag is the same as the start tag but with a preceding forward slash / before the tag name. Any content between the start and end tag is given a context by the tag surrounding it. For example some text in a paragraph would appear between the start and end tags of the named 'p' tag within the rules of XHTML
<p>Some text in a paragraph </p>
There are 6 levels of heading tags in XHTML and a <p> tag for paragraph text. <h1> is defined as the most important (top level) heading, <h2> would be a subheading of <h1>, <h3> a subheading of <h2> and so on. There are six levels, you really don't need six except in the rarest of circumstances. If your web page needs sub-sub-sub-sub-subheadings then you probably need to think again about the content of your page. It should already be apparent that the tag names are fairly intuituve with headings 1 - 6 represented by 'h' tags and paragraphs represented by 'p' tags. Applying some of these tags to the original sample extract might result in the following.
<h1>David Howe Curriculum Vitae</h1> <h2>Skill Sets</h2> <p>Here is a list of my skillsets</p> <h3>Visual Design</h3> <p>Creation of logos, iconography, layout and aesthetic imagery using Adobe Photoshop, Macromedia Fireworks and Flash, AutoCAD and Corel Graphics packages.</p> <h3>Web Design</h3> <p>Creative use of an extensive knowledge of HTML combined with JavaScript to either build Web sites from scratch or amend and update Web pages created by others. Proficient in the use of Macromedia Dreamweaver and other proprietary Web authoring software.</p>
The tags around each of the separate pieces of information give a context. The main title of the page is "David Howe Curriculum Vitae" so this has been enclosed by the highest level of heading tag <h1></h1>. The extract is from the "Skill Sets" subsection of the page this has been enclosed by <h2></h2> tags. "Visual Design" design and "Web Design" are two subsections of "Skill Sets" and are equal in stature within the page so have both been enclosed by <h3></h3> tags as sub-subheadings of the page. The rest of the content of the page is paragraph text ans is enclosed by <p></p> tags.
Structure adds semantics or significant meaning to the content of the page. I have only briefly explained the very simple rules and now you can look at any other document and understand which parts are more important than others and, more significantly, how each relates to the others. When reading the code you apply the rules you now know and every item within the page makes more sense than simply reading the words. When a web browser reads the document it also applies a default set of rules that are built into it in order to display the content on the screen. The name given to a collection of these rules is "style sheet" and these will be covered in more detail later on but for now all you need to understand is that Firefox, Mozilla, Internet Explirer, Safari, Opera and all other browsers have a default style sheet built into them. The default or internal style sheet varies slightly from one web browser to the next but generally they all follow the same basic rules and will display all paragraph and heading tags in a fixed width font (usually courier font). Without exception all browsers make text inside heading tags bold and self contained within a line. In order to know to do this the page content needs to be slotted into a standard basic structure for a web page.
Click here to find out how to build a basic web page >>>