CSS and HTML comments tutorial for absolute beginners

I recently got some work to upgrade certain features on a local website, so i talked to the owner about the sort of improvements he wanted to see. He gave me a description and it was the sort of work i don’t usually spend a lot of time on so we agreed on a price and i assured him that i was going to be done in a matter of hours, boy was i wrong. I managed to get a copy of the website to work on my local server but what i found in the was just a mess, the mark-up was all over the place, there were no comments at all, there was inline, internal and external style sheets all in one document, to cut a long story short it was messy code you could tell a beginner had worked on it.

That got me thinking really most of the developers locally are self taught including myself to some extent and they do not realise that we actually co-exist with other developers and we have to play nice, maybe i am fortunate enough to have worked in teams before but there are common best practice which cannot be ignored by any serious web designer or developer.

I thought it could be nice if i could give you just three tips on how to maintain  cleaner markup. I mainly use html, css and php so my example will be in those languages.


Commenting is good for you as developer to keep track of the changes you make and for future developers who will work on the code.



Below i have placed a sample document with indented mark-up and comments, this a good example of best practice when writing you html markup.

Naming Conventions

Another area were new website developers mess up is the naming of objects be it variables or css classes and Id’s. My tip for you is give your classes or variables names of their specific purposes for instances in the code above the section tag with the class article-list already gives you have an idea of what information is in that particular tag.

Got any questions you want me to answer or feedback please leave a comment below.

Ransome Mpini
Ransome Mpini

i honestly dont think comments such as <!-- The body tag ends here --> add any value to your code. On the contrary i am of the school of thought that your code should be self explaining. Markup aught to be semantic and classnames/ids chosen to describe the page elements correctly. In scripts php/javascript function and variable names should be given appropriate names to represent what they do or in case of variables...what they hold. functions should also do one thing and one thing alone...that way they are easy to name


I agree with you, i just used that as a rough example for complete beginners to coding, just to show them the importance of commenting. Thanks for the feedback! You are right that comment doesn't make any sense at all, am laughing right now! Spot on!