So at my new position at the main company I work for I’m now working with other front-end/back-end developers and designers on a regular basis. The biggest lesson I’ve learned is about how much easier a project goes if you have clean easy to read source code.
For those not in the html world it means making sure all of your tags line up and are indented properly and easy to follow. As everyone uses different tools from various text editors to code editors (if your like me Dreamweaver, I know I’m not a purest yet using sublime….).
So this is something I had never really thought about before and some tools even offer a source formatting function such as Dreamweaver. There is the problem is that you need to make sure you customize how that function works to get the results that match the standard your fellow developers can follow.
Formatting your Source
So the first thing I wanted as to make sure that any of the following tags h1, h2, h3, p, div were changed.
By default they will show up as
<tag>Your content<tag>
when I want them to be
<tag>
Your Content
<tag>
In Dreamweaver go – Preferences > Code Format > Advanced Formatting: Tag Libraries
Select the tag such as h1 and int he drop down change the Line Breaks to Before, Inside, After
That will give us the structure I’m looking for on those individual tags.
Now the next big thing is indentation, we want the group of tags to line up with each other and indent one tab over so that we can easily read the code. Now if you work on any larger site your going to be grateful someone took the time to do this.
Before
<div>
<h3>
Your Title
</h3>
<p>
This is our content that will need to be edited.
</p>
</div>
After
.<div>
…..<h3>
……….Your Title
…..</h3>
…..<p>
………. This is our content that will need to be edited.
…..</p>
.</div>
To accomplish this
In Dreamweaver go – Preferences > Code Format
Check off Indent than change the number to 1 and select tabs in the drop down.
I set my tab size to 4 and left the rest as default.
So now anytime I get an html document I can apply the source formatting which will standardize the formatting and tags to make nice clean easy to read code.
Just by going Commands > Apply Source Formatting
As you can see there are loads of options and one thing I suggest if you haven’t already is turning on hidden characters so that you can see the tabbed indentation.
View > Code View Options > Hidden Characters
I hope you find this helpful and it helps you like it has helped me to write cleaner better code.
