5 Simple Ways to Cleanup Your HTML

Move It Away: The first step to cleaning up your HTML code is to move things out that don’t actually belong in the HTML source.  This means that if you have CSS or JavaScript directly within your HTML code, it’s time to put those in their own external files.  There are a couple of benefits to giving these two elements their own location.  First, the most obvious is the fact that your HTML source code will be cleaner.  Second, because this reduces the size of your HTML file, it will be able to load faster (which will  make your visitors happy).  Finally, when you move CSS out of a single HTML file, you can apply it to all the pages of a website (instead of needing to paste the same CSS into every HTML file).

Indent Logically: Every keyboard has a tab key, and when you are creating or cleaning up an HTML file, you shouldn’t be afraid to use that key.  Without changing a single line of code, properly using the tab key can take your HTML code from a cluttered mess to a file that is easy to read and understand.

Get Checked for divitis: While the div tag can be your best friend, it can also be the downfall of your HTML code.  Because it can easily accomplish so much, most people have a tendency to overuse this tag, which is why the term “divitis” was born.  So, in order to cleanup your code, you need to look at all of the div tags you have used and see where you can use a standard HTML tag instead of automatically wrapping everything in divs.

Think Before Naming: When it comes to naming, I’ve found that there are two common mistakes that many people make.  The first is failing to even think about naming.  If you are assigning names in your code without a single thought, you really need to break that bad habit.

The second mistake I’ve noticed is people putting thought into their names, but not thinking broadly enough.  The example I like to use is naming your menu.  While you may think that it’s okay to name your menu verticalBlueMenu, what happens when you change your menu to red with a horizontal layout?  A much better name would simply be mainMenu or topNav, which would both still make sense regardless of what changes you make to the look of your menu.

Double Check Your Work: Just like Word Processors have spell checking tools that allow you to proofread and correct your writing, when it comes to HTML pages, your best friend for checking your work should be the W3C Markup Validation Service.  By running your HTML through this validator, you can find any mistakes that you may have made and quickly correct them.  Not only will validating your code ensure that it is clean and easy to understand, but having valid HTML will ensure that people are able to access your website without encountering any errors or problems.

No related posts.