Code that is neatly organized is much easier to read, easier to fix, and just better overall for you and anyone else that might be looking over your code. Whether you are using Adobe's Dreamweaver or just Notepad, keeping things organized is essential.

For starters

One thing that you can do to help the building process of a website is to simply add HTML comments at the end of div tags, at the start of a major section on your site, etc..

Here's an example:

<!--start header-->
<div id="header">
     <div id="menu">
          <ul>
               <li><a href="home.html">Home</a></li>
               <li><a href="blog.html">Blog</a></li>
          </ul>
     </div><!--end menu-->
</div><!--end header-->
<!--start content-->
<div id="content"></div>

Comments help us understand code better. We can define clear lines in our code that state where items begin and end. In the example above, we have three comments:

  • <!--header-->
  • <!--end menu-->
  • <!--end header-->
  • <!--start content-->

These comments are separating the HTML into different sections so we can quickly identify where in the HTML we are. If you have any experience with server-side programming languages, this is similar to the multi-line comment /* Commented out code here */

CSS Comments

The same principles may also apply to CSS as well. Lets say that you have..

body {
     background-color: #3b3b3b; /*rgb(59, 59, 59)*/
     margin: 0px;
     padding: 0px;
     line-height: 1.4em !important; /*do not change!*/
}

For CSS the same principles apply to HTML. We create comments to indicate where we are in the style sheet and also to make notes on our style sheet. In this example, we have a few notes that we left ourselves or anyone else that looks at our style sheet. Our first comment has the corresponding rgb values of our color and the second comment is to tell other people that the value should not be changed under any circumstances.

Commented out code

body {
     margin: 0px;
     padding: 0px;
     line-height: 1.1em !important;
     width: 1000px;
     /*min-width: 900px;*/
}

Commenting out HTML, CSS, PHP, JavaScript, etc... can be an easy and painless way of testing whether or not you have an error in your coding. You can easily comment out a segment of code and then test your project to see if the error still occurs.

Summary

These comments can be useful for you and anyone else that you are building a website with, for homework assignments if you happen to be learning web design in a class, or for any computer language really. They are not necessary to keep after the building and refining process is complete, however, they won't hurt anything if you decide to leave the comments there.

Be Sociable, Share!