Step 2 - Content
As with all webpages (Well I say all...) you need some content to display on your webpage and XHTML is the same, what you didn't think it wrote itself did you? However unlike HTML where as long as everything flowed in a logical way and you sprinkled lovingly with table tags and line breaks, XHTML requires alot more forward thought into content coding and how the stlying is imported. That is why it is important that with XHTML you format the code of your page correctly and you come up with your content before you try and style it.
Basic Code Layout
Well you've gone and typed up your content, or your going to type it as you go along, but just what are the rules when formatting the text? Well just follow this simple tag guide to know how to get the best out of your coding.
<p>...</p> - The Paragraph Tag
This tag is the lowest tag in the chain, it should appear nearly everywhere. Why? Because it represents a paragraph, so any paragraph of text should have the <p>...</p> wrapped around it. Title and Div tags should not be placed within these as it will cause formatting problems later. Due to the way XHTML works closing the Paragraph tag results in a line break.
<h1>...</h1> - The Title Tag
The next tag in the food chain, this tag is usually placed in Div tags above the Paragraph tags and are usually used to represent a title. Due to the way Title Tags work closing them results in a line break. To decide the style and size of the title tag you change the number (In the example its 1) to a value between 1 - 9, where 1 is the largest and 9 is the smallest.
<div>...</div> - The Div Tag
The biggest tag in the XHTML family, the Div tag encompasses everything, titles, paragraphs, images and horizontal lines. Along with this the Div tag is usually used to pass down comman styles to all of the elements inside of it, although any styles within that over-ride the divs.
<span>...</span> - The Span or Layout Tag
The span tag, or sometimes the affectionatly labeled Layout tag is used for just that, splitting up the layout into key components such as menues, content and headers. They work in the same way as div tags, but spans should be around div tags, not the other way around.
An Example
<span><div>
<h1>Title1</h1>
<p>Cats are general of a cat like look, with cat ears.</p>
</div>
<div>
<h1>Title2</h1>
<p>Some cats are known to have tails, this is not conclusive.</p>
</div>
</span>
Adding Classes
As you can see from the above code, the layout is more structured and even without styling would produce an alright looking page, it wouldn't be no looker but better then if you'd used ye olde HTML. However that is not the point of doing this. The point is you can now set classes.
What is a class I hear you ask, it is simply a way of labeling chunks of your code that your style scripts can pick out what style and layout to put on what part of the page. Saying this, not every part of the code needs to be given a class, usually only Divs and Spans, an example is shown below.
Adding Classes Example
<span class="content"><div class="title1">
<h1>Title1</h1>
<p>Cats are general of a cat like look, with cat ears.</p>
</div>
<div class="title2">
<h1>Title2</h1>
<p>Some cats are known to have tails, this is not conclusive.</p>
</div>
</span>
Remember to give classes meaningful names else you'll get confused later on when you get to Step 3, styling your page.