So you want to make a website. That’s all cheese and crackers, but do you really know what you’re getting into?

If you don’t know any HTML, I suggest you go do some research before this article will be of help to you. If you know the basic idea of HTML and the tags then read on!

First things first- semantic code. The concept is simple, and the results benefit not only you but also anybody who will inherit your site should it ever be passed on.

What is semantic code?

Semantic code sounds easy to write, but so many people pass it by. Suppose you’re writing a simple web page. What does the code look like to begin with? Well something like this:

<body>
<h1>Heading 1</h1>
<p>Some paragraph content.</p>
<h2>Heading 2</h2>
<p>Some sub-paragraph content</p>
</body>

See how it’s in order? The h1 tag comes first, and then some content, followed by the h2 tag and some more content that is probably not as important. It’s just like the newspaper- the biggest, most important headline is big on the top and the rest of the headings section off the articles but they aren’t as important.

For every h1 tag, h2 is a subheader. The subheader for an h2 would be h3, and so on down the line. Got it? Good.

HTML is structure!

The difference between HTML and CSS is the that HTML is the structure and content, while CSS simply styles the look and feel. If you view an HTML document structured correctly without its CSS, the content should be in semantic order viewed as plain text in the document with no images other than what you would want a user to see in the content. Images for backgrounds shouldn’t be showing up.

How do you structure a site? Using div tags! I may go on about div tags later but for now just work with me. Tables are of the past, and while they may have their uses, it is NOT for structuring the layout of a site.

Example of creating a web page with div tags:

<body>
<div id="wrapper">
    <div id="header">
        <h1>Your main page headline with keywords</h1>
    </div>
    <ul id="navigation">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <div id="content">
        <h2>Page Title</h2>
        <p>Some paragraph content</p>
    </div>
    <div id="footer">
        Anne Dorko © 2007
    </div>
</div>