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)?

Popularity: 10%