Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- CSS Trick: Target only IE with an if statement
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- Open source Dreamweaver alternatives
- CSS fix for the double margin float bug in IE6
- Popular fonts with their Mac OSX, Windows and Linux equivalents
Categories
How you can better organize your HTML with comments
Posted on Wednesday, March 12th, 2008 under CSS, XHTML by Dustin Brewer.There are a lot of different ways to organize your HTML to ensure that others, and yourself, are able to easily navigate their ways around your code. One of the best methods for helping to order your code for others is using comment tags to show where certain tags end. The best tag to use this for are divs, at the end of each div assigning a <!-- divName --!> to show that it is ending here can help others to understand what is going on and where it is ending within code. This becomes even more helpful when you are dealing with dynamic sites (as most of us strictly deal with), especially those in content management systems.
It can be difficult when approaching someone else’s code, especially if that person isn’t available for questioning. I find it frustrating when coming upon open source systems and finding a mess of divs and programming that are difficult to sort through. It can be a daunting task when you need to remove and customize various aspects of others programming when you can’t tell where one div ends and another begins.
It also helps when you are visually searching through the code and simply looking for one section of the programming or markup to see where it ends easily.
We’re all perfect CSS designers, But…
We all make mistakes. It’s true, even I make a mistake every century or so. When looking for stray markup that may be breaking your site, knowing where a div ends (or if it ends) can be impossibly helpful. It can save you a ton of time that could be spent on finishing a project.
What really helps me narrow down broken site’s issues is using the HTML Validator plugin for Firefox with this. You can easily check to see if there are any errors in the page that may be breaking the site. The HTML Validator will typically tell you where a tag starts, but there is no way for it to know where the tag is supposed to end. Having comments at the end of your divs can help you to determine what divs are closed and which are not.
This methodology for divs can be expanded, just keep in mind it renders the same as any other portion of your code. The more you use it the bigger your file will get. I am a strong believer that sacrificing a little file size for readability (and findability[sic]) is well worth it.
I typically won’t use a comment ending tag at the end of every div, some divs just don’t need it because they are extremely short markup collections. Mostly I stick with divs that are part of the structure of the web site, where divs are most commonly used (or at least should be most commonly used).
Not everyone is a programmer, but we can adapt to their methodologies
Any programmer worth anything will tell you that code that isn’t commented is messy and unprofessional. They will complain about it endlessly, trust me. So taking the way that programmers will typically comment their code, we can use that towards our markup. Not as excessively as some would— we’re not writing a novel, but we should still comment a little liberally.
You can use this practice even when it comes to commenting your CSS. Only in reverse. It is also helpful to others to add comment headings in your CSS to identify various generalized areas of the CSS. This means having more organization of where you put CSS selectors in your files.
What other methods do you find help to organize your HTML and CSS files (with or without commenting)?
Whats Next?
8 Responses to “How you can better organize your HTML with comments”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
check out the way how I manage my css..
http://www.cssaglobal.com/demos/html/cssdemo/layout.css
Great article i never thoguht about doing this, it would probably help my cleanliness a lot. thanks!
“Any programmer worth anything will tell you that code that isn’t commented is messy and unprofessional. ”
I disagree with this 100%. When programming, code should be readable and therefore require no comments. Naming a method updateArticle() is better than naming it u() or something pointless.
The same goes with web programming. Using indenting and also good id/class values helps. I’ve seen a design where there was . That doesn’t tell me anything! Something like makes more sense and helps me navigate code.
The way I and others work is, if it needs a comment, refactor.
Good points Dustin. I know exactly what you mean about the open source issue. One of the reasons I like using MODx (opensource CMS) is that it gives you ultimate control over things like code commenting in it’s templating system. I also (mostly) use div commenting on top level structural elements for the reasons you mention.
As for the programming issue, every software development and programming course I’ve ever been on has stressed the importance of commenting. Yes, code should be readable but why not make life easier for yourself and others by commenting?
I definetly agree with what Mike said! Self-commented variable is better than actually commenting it.
But, viewing things as Dustin is writing, CSS and HTML are not really programming languages and hence needs a different approach. In this context comments are definetly useful!
(Though ids and classes should definetly be self-commented 
)
Yours,
- Wakish -
When I’m working with PHP, instead of HTML comments with <!– –>, I stick with the PHP comments /* */. The upside to is that these comments “disappear” (PHP comments aren’t outputted) and aren’t seen by anyone else.
I find it’s extremely rare that developers comment the end of their DIV tags. I thought I was the only one that did this, until I found this article! I actually blogged about this same topic on my own site. Check out the article Do you comment your DIVs?. Thanks.
Hello. I think you are eactly thinking like Sukrat. I really loved the post.