Mainpage
After moving our code (on old pages or in our mind) from old HTML4 to XHTML, writing well formed code and all, we have to get ready for applying CSS styles.
But before that I have to get philosophical again. Once more, designing our new web pages is about separation of Content and Design.
The trick is, to look at the information you want to present before laying it down in code. What kind of information do you have? You want to write a text about something?
Okay, so look at it more closely. That's not just Text
and bang! there you go throwing it between <body> tags on your page.
Your text has many different kinds of information types. It has titles, subtitles, paragraphs, quite possible even a few pictures for illustration. It's all in your head, right?
You know which sentence will be a title, what will be in one paragraph and what will be in a completely different paragraph. You might even want to change the looks of those different information pieces?
Don't be so secretive, share your ideas with the browser ☺. Tell him which section is one paragraph, which section will be a title, which section will contain an illustration.
You do that by putting different types of information in different containers
in your code. Be neat, clear up your mess, put the things in labeled boxes - Yes Mommy!
You might have used <p> already, more often than not, even without the closing tag. For what did you use it? To separate paragraphs, because the <p> already made an empty line above the text. There you go, that's already a Container
.
Other tags might be <div> (defining a block) or <span> (defining a section within a line):
So far, everything we did affected all instances of tags in the same way. When we say
<p> should be red, then all paragraphs would have the text in red, no matter if we just take the whole
256 pages of text and put it in one single <p> or if we actually do our homework, identify the small
content atoms, and put them in different boxes (say <p>aragraphs). They will all look the same. But we can,
and should, give different containers different names and then we have control over each single container.
The names can be picked by you, and you can make them as meanful or as meaningless as you wish... The naming is done by class="classnamehere" but more about that in the CSS part.
Now it should be quite clear that it's very important to first think about how one can break down the whole idea that's becoming a page, what can be broken down into smaller chunks of content. When we prepare our HTML code like that, we will have it very easy to apply different looks on different sections.
