In this post I will be looking at simple HTML structure within a web page. So far we haven’t paid any attention to the structure of the page, and have just stuck a few html tags together. Although a browser can read markup this way and still display your page, it’s not a scalable way to do things. If we were to start developing a proper site this way, we would soon be lost in a mess of tags. Correct structure is vital, and again you may think why bother when it works without, but if you don’t begin as you mean to go on, you will be held up later on as you find you have to come back to do things the proper way!
The bones of a web page
We start by opening up your index.html file from the first post, or you can start from scratch, as I’m just going to ask you to delete everything in the file :) While we are at it, go in delete the contents of your style.css file too. Don’t worry, we’ll be putting together something better in its place.
In your empty file, save the following code:
<!doctype html> <head> <meta charset="utf-8"> <title>My Web Page</title> <link rel="stylesheet" href="CSS/style.css"> </head> <body> <header> <p>This is your header</p> </header> <div id="main"> <p>This is your main content</p> </div> <footer> <p>This is your footer</p> </footer> </body> </html>
Alot more code there than we are used to :) If you now refresh your page you will see three lines of text. Nothing very interesting here, so why all the extra code? It’s what’s going on behind the scenes that is more interesting. Lets got through it line by line.
The first tag we see is a new one –
This tells the browser that the type of doucment it is reading is an html doc. You will also see at the bottom of the page that this tag is closed with a closing </html> tag.
The Head Tag
The next tag we come across is the head tag:
The head tag is where we put information about the web page, and were we usually link to things like stylesheets. In this example, things are keep simple and we only have a few lines of code:
<meta charset="utf-8"> <title>My Web Page</title> <link rel="stylesheet" href="CSS/style.css">
‘Meta’ means information about information, and in this case it gives the browser information about the web page. It can have many other attributes, but charset is the most ubiquitous and should be included in all your pages. It tells the browser what charset we are using. If you do not know what a charset is, I have linked to the wikipedia entry which gives a good overview, and all you really need to know for now. We have set the charset here to UTF-8, which is becoming considered the standard charset for use in web pages..
The next tag, <title> is, funnily enough, the title of the page :) The sharpeyed amongst you may already have noticed the tab in the browser for your page now says “My Web Page”, set in the <title> tag.
You are all familiar with the last tag, the link to the stylesheet, so that will do for the head section.
This is where all the action is, where the meat and bones of the site goes, if you like. In here all the content of the site will be formatted. The body is in itself separated into further sections. the first is the header.
In the header you will usually find the top banner of the site, a navigation bar, a site’s logo, contact links etc.
By now I’m sure you have the gist of this, and you can guess that the footer contains the footer of the site :) Usually you will find contact details, secondary navigation, links to terms and conditions, privacy policies etc.
And there you have it, with the closing body and html tags, we have our first correctly structured web site. Ok, it’s still not a very interesting site, but we shall deal with that in the next post, where I will look at using CSS to lay out a basic stylistic structure ( as opposed to html structure ) for the site.