8 Best Practices to Write Clean HTML Code
Have you ever looked at your HTML and wondered…
Am I writing good code?!
Does it look professional enough? Am I doing things right? Is this how clean HTML code looks like?
Having those questions is normal and good, specially if you don’t wanna end up writing messy, jumbled, sloppy, spaghetti code that looks like:
Writing clean code should be one of your biggest concerns because most web pages are presented via HTML. You don’t want to mess up the foundations of your site. It’s just wrong and embarrassing.
Here you’ll find 8 great practices to forget about those doubts and write clean correct HTML that will impress everyone who reads it.
1. Give a f**k
Seriously. The most important thing you need to write good code is your desire to do things right. Writing clean HTML code is easy, but you need to care and pay a lot of attention.
“Clean code is a code that is written by someone who cares” — Michael Feathers
Your code reflects the kind of developer you are. You can tell if someone is passionate about coding or if he doesn’t give a f**k just by reading a few lines of his HTML code. It’s not a coincidence that lazy unprofessional people are the ones who write bad and unorganized code.
2. Indent
Indented code is easier to read, easier to understand, easier to modify, and easier to maintain. Just take a look at how difficult is to understand the parent-child relationships between elements when the code isn’t indented correctly:
Bad HTML Code: <footer id="footer-bottom">
<div class="container">
<div class="row">
<div id="footer-copyrights" class="col-md-6">
<p> © 2018 All Rights Reserved.</p>
</div>
<div id="footer-menu" class="col-md-6">
<ul><li>Home</li>
<li>Team</li>
<li>Pricing</li></ul>
</div>
</div>
</div>
</footer>Better HTML Code:<footer id="footer-bottom">
<div class="container">
<div class="row">
<div id="footer-copyrights" class="col-md-6">
<p> © 2018 All Rights Reserved.</p>
</div>
<div id="footer-menu" class="col-md-6">
<ul>
<li>Home</li>
<li>Team</li>
<li>Pricing</li>
</ul>
</div>
</div>
</div>
</footer>
How many spaces should you use for indentation? Many people say 4 spaces, many others say 2, and almost everyone hates tabs.
My advice? Don’t over think it, it’s not really important to use a specific space value. What really matters is…
3. Just Be Consistent
Writing clean HTML code isn’t always about choosing good practices and avoiding bad ones. Many times you can use different approaches to write the same line of code.
For example:
- You can use dash or underscore for ids and classes
- You can use single quote or double quote argument
- You can indent with 2 or 4 spaces
Just be consistent. When you find a specific practice that you like, stick to it and use it everywhere. Inconsistency makes your code extremely confusing for you and for the poor soul who has to read it.
4. Exterminate “Divitis”
“Divitis” is a funny name for a common problem in HTML. We often overuse divs, mainly because we want to wrap and target all elements for styling in CSS. Then we end up having an eternal list of divs that are completely unnecessary:
Bad HTML Code:<div id="content">
<div class="headline">Headline</div>
<div class="subtitle">Subtitle</div>
<div class="post">Post Content</div>
<div class="list">
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
</div>
</div> <!-- end content div -->Better HTML Code:<div id="content">
<h1>Headline</h1>
<h2>Subtitle</h2>
<p>Post Content</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
</div>
Just as writers edit their draft many times during the writing process, you should constantly refactor or rewrite your HTML. Reduce the number of divs and clean up your code deleting all the unnecessary elements.
5. Avoid Comments
HTML is not a programming language, comments aren’t necessary because HTML markup is very much self-explanatory. If you find yourself commenting your HTML a lot, you should review the HTML elements reference.
“Don’t comment bad code. Rewrite it.” — Brian W. Kernighan
Your code won’t be easier to understand just because you add comments everywhere. You can use them to make things a bit more clear (for example, to show you’re closing a div after many lines of code). But don’t comment things that are obvious or code that is badly written.
6. Class = “clear-name”
What does class=“wpr” means?
Width Paragraph? WordPress? Whopper?! Clean HTML code shouldn’t look like a trivia game.
Use meaningful names for your Ids and Classes. They should be short, descriptive and represent only one concept. It’ll make your HTML clearer and the styling process easier.
Don’t you think it’d be better if you named your class “wrapper” instead of “wpr”?
7. Use Whitespace
Many people write smashed-together code without using white spaces. The result? It’s like reading a book with no punctuation or paragraphs:
Hell:<body>
<h1>Table</h1><table><tr><th>Data 1</th><th>Data 2</th></tr>
<tr><td>Calcutta</td><td>Orange</td></tr></table></body>Better Code:<body><h1>Table</h1><table>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
</table></body>
Use whitespace: indentation, empty lines, line breaks. Other humans (including you) should be able to read your code in the future without having headache. It’s ok to minify your files to make them smaller AFTER you’ve written clean readable HTML code.
8. Copy From the Best
The best artists in the world learned their craft by replicating the work of people they admired. You can use the same strategy to write clean HTML code (which is also quite a creative process). The easiest way to learn how to write beautiful clean code is simple: read beautiful clean code, and then replicate it.
“Those who do not want to imitate anything, produce nothing. “— Salvador Dalí
You can:
- Explore Open Source projects. One of the reasons they exist is, so we can all learn and improve looking at each other job.
- Read blogs and articles that teach you the best coding practices.
- Take Udemy Developer Courses. Choose the ones that have amazing reviews.
You’ll find that there’s not a definitive right way to do things… but you’ll also discover that there’s a HUGE difference between clean and messy HTML code.
And you don’t want your code to look like a complete mess, right? ;)
