Dividing your web page into sections

In the previous articles of this series, we learned how to create a very basic web page, from the original text we wanted to publish to a full web page with the text, a graph, a link, and some highlighted information in it. Now I am going to describe how to make it more professional.

Sections for HTML and XHTML users

To start with, you need to know that professional web designers divide their work into five large sections: header, navigation, content, sidebar, and footer. In the old days, they did this using table sections. Later, they changed to <div> tags.

The <div> tag tells the browser that what is within it is just information which goes together, as if it were a box. They use an id="" to specify a name for each of section and separates them accordingly.

<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>

Inserting these four into the <body> of a web page, you have five sections clearly established, and next you proceed to fill in each of these sections with its respective content. If you are using HTML or XHTML, you can safely stick to this format to make your web page more complete.

Sections for HTML 5 users

HTML 5 users have a surprise. The <div> tag is still around, but now you have specific tags for the sections of your web page:

+ <header></header>, for the top of your site, usually the logo
+ <nav></nav>, for your main navigation links
+ <section></section>, for your articles
+ <article></article>, for referral and quotes from other articles in a section of your web document
+ <aside></aside>, for sidebars and other tangentially-related content for your web page
+ <footer></footer>, for your contact information, copyright notice, and the like

It's the same theory, just modified a little. Eventually, it will help the browser understand better how you are organizing your site.

Mind, though, HTML 5 tags are not backwards compatible with old browsers without an enabling script. We will cover that in a future article.

Learn + Computers and the Internet + Web development