WebCodeBench
PHP, CSS, HTML and other web code stuff

How To Create a Basic HTML Framework That You Can Use Anywhere

Basic HTML Structure

As a web programmer (like any other programmer), it is important to get the basics right, to build up a toolkit of robust, re-usable code. In these days of templates, frameworks, and object-oriented use of CSS classes, there is plenty of technology at your disposal, and it would be silly not to take advantage of it and have to re-invent lots of wheels every time. However, let’s not jump the gun! We start right at the very beginning, with the core HTML that is the foundation of any website, regardless of platform.

The first step is to consider the universal elements that go to make up the parts of the vast majority of websites, and then to put them together into a flexible-enough structure, that they can be re-used, time and again. There is a fine balance to be found here, between simplicity and collapsing under the bloat of ‘over preparation’!

As a rule, content management systems (such as WordPress or Joomla) will allow you to output content into a number of appropriately labelled areas, which are then visually arranged (via CSS) to create the whole page layout. When manually coding a site it is a good idea to follow a similar principle, for ease of styling later. So the principles here apply universally. As we progress into more detailed areas, it will become apparent how a little work here can save a LOT of effort later on when working on multiple projects.

Step 1: Identify The Basic Content-Output ‘Slots’

Most websites fall into similar patterns of familiar screen areas that everyone expects (such as a primary navigation area, possible ‘breadcrumb’ trail, footer area with copyright notices etc, and primary content loosely in the ‘middle’ of the display) It is a good idea to broadly follow convention, because this will immediately put the reader at ease, and allow them to find their way around without having to think. This is not to impose any stylistic restrictions, but sets a general pattern.

Let’s go with a fairly simple set of output ‘slots’:

  • Toolbar – allows for supplementary buttons or links perhaps across the very top of the page
  • Branding – for logo and strapline, usually prominently placed at the top of the page
  • Navigation – highly prominent buttons or links to quickly access the main areas of the site, and also provide visual feedback to show the reader’s current location.
  • Breadcrumb – not always used, but some websites show a series of labelled links indicating the reader’s current page and how it fits into the general page heirarchy.
  • Column1 – for ‘primary’ page content.
  • Column2 – often used for ‘secondary’ page content, perhaps sidebar links, widgets, search boxes, news feeds, adverts etc. There may be additional columns too.
  • Footer – for (usually static) information to appear at the bottom of every page, for example supplementary page links, company information, usage notices etc.
  • Gutter – a sometimes used area beneath the very bottom of the normal page, perhaps reserved for minor information such as theme-name, link to software system or theme or designer’s website.

 Step 2: Identify The Top-Level Screen Areas

To make things easier, the areas above are often grouped into high-level areas, Usually this is pretty simple, lets go with:

  • Head – contains all static information above the columns, such as branding and navigation.
  • Body – contains the columns.
  • Foot – contains everything beneath the columns.

Step 3: Translate This Into Outline HTML

There are two parts to this, really. Creating a DIV tag for each identified slot, and then wrapping them with the minimal amount of extra DIV tags to which we can apply CSS styling to produce any feasible design we might want. Now, with the advent of HTML5 there are now some new HTML tags that can be used, but I plan to cover that in a later post, so I’ll stick to DIV’s for now.

3a: The Top Level Wrapper

Web designs generally fall into two categories: ‘fluid’ (which stretches to fit any window size) or ‘fixed-width’ (which has a set size, very commonly 960 pixels wide to fit comfortably within the still common screen resolution of 1024 pixels across). A particular design may also require certain universal margins to be wrapped around the whole site, so whatever we do, we will need some kind of ‘wrapper’.

One option is to have a single wrapper for the whole page, a canvas, so to speak (which we could indeed give a CSS id of: ‘canvas’) which encloses all the slots. Like so:

<body>
	<div id="canvas">
		<div id="head"> ... </div>
		<div id="body"> ... </div>
		<div id="foot"> ... </div>
	</div><!-- #canvas -->
</body>

The only problem with this choice, is that on fixed-width designs it doesn’t easily allow any kind of horizontal full-width ‘colour-bleed’ from the header and footer areas, so I prefer the following, which uses an inner and and outer wrapper for each of the three main areas of head, body, foot. Like this:

<body>
	<div id="head-outer">
		<div id="head-inner">
		...
		</div>
	</div>

	<div id="body-outer">
		<div id="body-inner">
		...
		</div>
	</div>

	<div id="foot-outer">
		<div id="foot-inner">
		...
		</div>
	</div>
</body>

There are two more things I’m going to do to this before I’m happy with it. One, add comments to the end of each DIV tag, as these tags will be spanning a lot of content it is important to keep track of which tag is which. Two, I’m going to create two CSS classes, “inner-wrapper” and “outer-wrapper” so that I can style all the tags simultaneously:

<body>
	<div id="head-outer" class="outer-wrapper">
		<div id="head-inner" class="inner-wrapper">
		...
		</div><!-- #head-inner .inner-wrapper -->
	</div><!-- #head-outer .outer-wrapper -->

	<div id="body-outer" class="outer-wrapper">
		<div id="body-inner" class="inner-wrapper">
		...
		</div><!-- #body-inner .inner-wrapper -->
	</div><!-- #body-outer .outer-wrapper -->

	<div id="foot-outer" class="outer-wrapper">
		<div id="foot-inner" class="inner-wrapper">
		...
		</div><!-- #foot-inner .inner-wrapper -->
	</div><!-- #foot-outer .outer-wrapper -->
</body>

3b: The Header Section

Now, we need to fill out the structure a little. First we look at the header section – it needs to contain a DIV tag for each ‘content slot’ that we decide to include. Let’s go for a minimal list of just two: ‘branding’ and ‘navigation’. Since these two slots are almost certainly going to require unique styling and positioning, we can assign them a custom CSS id each, and insert them both into the header wrappers, like this:

	<div id="head-outer" class="outer-wrapper">
		<div id="head-inner" class="inner-wrapper">

			<div id="branding"> ... </div><!-- #branding -->
			<div id="navigation"> ... </div><!-- #navigation -->

		</div><!-- #head-inner .inner-wrapper -->
	</div><!-- #head-outer .outer-wrapper -->

Feel free to add any other slots to the header that you desire, such as a toolbar, breadcrumb, newsflash, etc. But for the time being, these two will be just fine.

3c: The Body Section

The body section works in exactly the same way, it’s just a question of “how many columns do you need?”. Remember, you can always switch off temporarily unwanted columns via your CSS, and they don’t have to appear onscreen (left to right) in the same order they appear in the source code. So, in this case ‘column1′ refers to the primary column, not necessarily the left-most one. Lets keep it simple, with two columns:

	<div id="body-outer" class="outer-wrapper">
		<div id="body-inner" class="inner-wrapper">

			<div id="column1" class="column"> ... </div><!-- #column1 .column -->
			<div id="column2" class="column"> ... </div><!-- #column2 .column-->

		</div><!-- #body-inner .inner-wrapper -->
	</div><!-- #body-outer .outer-wrapper -->

Nothing too complex there. Just, note that I added a CSS class of “column” to both columns – there may be some styling we want to apply universally to all columns and this gives us an easy way to do it.

3d: The Footer Section

Now we’ve got this far, the footer section is very easy, it basically follows the same general pattern as the other sections, I’ve chosen to add two slots to it:

	<div id="foot-outer" class="outer-wrapper">
		<div id="foot-inner" class="inner-wrapper">

			<div id="footer"> ... </div><!-- #footer -->
			<div id="copyright"> ... </div><!-- #copyright -->

		</div><!-- #foot-inner .inner-wrapper -->
	</div><!-- #foot-outer .outer-wrapper -->

Step 4: Cleaning Up

All that remains is to tidy up the HTML to make it a valid document by adding some essential baggage at the top (which can be filled out later):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
	<title> ... </title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
</head>
<body>

… and wrap it up at the end:

</body>
</html>

So, we have an outline HTML page. The only problem is, it has no content. That’s our next task!

This entry was posted in HTML. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Hello

    My name is Vin. I'm a coder who is interested in discovering the best ways to do things on the web. With a little bit of thought, we can do lots of interesting things, and it often isn't nearly as hard as one might think.

    This site is my chance to share with you what I've learned.