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 © 2007
</div>
</div>
You have to remember that when you open tags, you must think of them like putting smaller boxes into bigger boxes. If you have a large box and arrange four boxes inside, that represents the div and ul tags for header, navigation, content, and footer. In each of those you place the smaller boxes (h1, h2, p, a, etc.) and in each of those boxes you place your content. You can’t overlap boxes, it just wouldn’t work. In other words if you open h1 and put a link inside, you need to close the link before you close the h1 tag.
Other thoughts and tips
This post is not meant to help you create a website, it is simply here to make you aware of the need to write good code. There are so many good reasons to write HTML the right way- as you will read in a later post, it will be so much easier to write CSS and style your HTML. It is also important that your content is written right so that Google and everyone who views your site to get the right information in the right order. If you can view your HTML file in plain text in a browser and still be able to understand what is going on, then you know you have done a great job.
There isn’t much to writing semantic code, it’s just that most people aren’t even aware of how it’s done. Using lists for the navigation is important too, but I’ll be writing a whole separate post on that in and of itself so keep your eye out if you want to learn.
So, thank you for reading, feel free to comment if you found this helpful, or ask questions if you feel I didn’t cover everything, and if you liked it be sure to pass it on as well!