Organising your HTML with Comments

With lots of different <div> tags in a page, it can be confusing when looking at your HTML code. Which div starts where, and where does it end? Often, you end up with something similar to:

</div>
</div>
<div>

But how do you know, easily, which one is the wrapper, which one is the navigation, and which one is the footer? By using html comments. The syntax is:

<!--html comment in here-->

So you might have:

<div id="wrapper"><!--start of wrapper div-->
<div id="nav"><!--start of navigation div-->
navigation stuff
</div><!--end of navigation div-->
<div id="main"><!--start of main content div-->
main content
</div><!--end of main content div-->

</div><!--end of wrapper div-->

That way, with just a quick skim through your HTML, you can see where one <div> starts and ends, without spending ages and end up getting confused!

Quicker Updates with PHP Includes

Lets say, you have 10 webpages on your site, and each one has the same navigation of:

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>

<li><a href="work.php">Work</a></li>

(etc, etc.)

Then, suddenly, you realise you have made a mistake in the URL of one link! You now have to change it on all 10 pages! But, by using Includes, it's now quicker to rectify!

Create a new file, and call in 'navigation_include.php'. The _include is there so you know the navigation is used as an include.

Now, take your navigation, and put it in your 'navigation_include.php' file. Once that's done, put '<?php include('navigation_include.php'); ?> where the Navigation is normally placed on your page. Each page will now display the same, but updating is a matter of simply editing one file, not 10!

Adding a Stylesheet to an RSS Feed.

Whether you like it or not, RSS Feeds can look scary to users who have never seen or heard of them. It's easy to add a CSS Stylesheet, just like the one for your normal webpage and the benefits can be massive.

We can add a stylesheet to our RSS Feeds by using an xml-stylesheet tag. Have a look here:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://example.com/feed.css" ?>

Once you have that done - it's just a matter of creating the stylesheet, "feed.css" and adding styles to make it more user friendly.