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.
//This is a php single line comment /* This is a php comment when you are commenting on many lines. */ /* This is a css comment */ <!-- This is an html comment -->
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.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div class="container"> <header> <h1>My Website Name <h1> </header><!-- The header ends here --> <section class="article-list"> <article> <h2>Some Heading Here</h2> <p>Some random paragraph here</p> </article><!-- article ends here --> </section><!-- The article-list section ends here --> </div><!-- The main container ends here --> </body><!-- The body tag ends here --> </html>
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.