LightCMS Blog Seven Tips for Writing Clean HTML Code Clients Will Love

Editor's Note: This is the first post in a two-part series on clean coding. Be sure to check out our post where we discuss the three tips to polish your CSS work and delight your clients.I like to think of our role as developers as similar to that of craft furniture makers. They spend time working on design elements that the ultimate owner of the piece may never notice, but that enhance its durability and quality. At the same time, it's clear at a glance what the item is and what purpose it serves. I apply the same principles to writing HTML code.Writing clean code is a matter of taking pride in what you do in the craft of web development.Clean code translates to faster running websites, teams that work more efficiently together, and clients that are happier down the line because they can understand and amend the language to their needs.The most talented developers code with those readers in mind - here are my tips for ensuring they'll be clamoring for more of your writing.1. Get Smart About GroupingConsider how you put elements together in your code as a way of aiding navigation. Keep your code linear with a clear flow from the header at the top to the footer at the end.2. Be General, But Consistent in NamingUse naming conventions that are not overly specific. The danger in opting for a column name, for example, that references a particular color, font style or position in relation to other code elements is that all of the above are likely to change at some point in the life of your code. Overly specific names may no longer make sense in the long term, so choose wisely. Ensure that your developer team all use the same style for class names so there's no variance, for instance, in how a name might be capitalized, hyphenated or underscored.3. Use Div Tags SparinglyUse the correct tag or attribute and, in particular, think about whether you are overusing divs as you group block-level code elements like paragraphs of text and images.4. Give Your Code Some SpaceOne simple thing you can do to make your code more readable is to indent your code so it's clear when you've introduced a new code element that is a child element of the tag above it. Be consistent if you apply indentation within your code so the hierarchy within your code is clearly delineated and readers can use your indentation as a way to navigate through your code. Overly dense code is hard to read - white space is your friend.5. Recognize Differences in ID vs. ClassWhen you're applying a particular style to one or more code elements, you'll look to use IDs or classes. An ID is for a unique element so it should only occur once in your code, ideally in the sections for website logo or header or footer. You may use a class, like 'quote,' over and over again.6. Give Clients a GuideWrite code with the expectation that your clients will go into your code at some point to make their own changes to it. For instance, plan on including an index at the top of your code to let your clients know where particular code elements can be found.7. Be Open to CorrectionsOnce you've written and reviewed your code, run it through a third-party validation tool to pick up any lingering errors which, if not identified and corrected, might negatively impact the running or rendering of the website you've created.Clean Code Polishes Work, Pays DividendsClean HTML code forms the building blocks of well-designed websites, and establishes you as a talented coder in your field. While writing cluttered and poorly organized code might seem like a quick fix at the time, you'll end up creating extra work for yourself. Imagine returning to fix, maintain, update, or build upon code that you wrote that uses bad naming conventions and lacks structure.Remember: clean code is reusable code.As you code, think about clear and uncluttered layouts, easily comprehensible navigation, and all the potential readers who may visit your work. Writing clean, readable, and accessible code benefits you, your peers and partners and your clients.