Space Out HTML Source Code
It is so much easier to look at your HTML source code if you space out your HTML code, putting each part of the HTML code on a separate line. HTML code errors and page content are much easier to find with HTML coding spaced out.
This HTML source code much easier to read:
<caption>Caption/Title of the table</caption>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
<td>Column 1 Row 2 content</td>
<td>Column 2 Row 2 content</td>
<td>Column 3 Row 2 content</td>
Than this condensed HTML source code:
<table><caption>Caption/Title of the
table</caption><tr><th>Column 1 heading</th><th>Column
2 heading</th><th>Column 3 heading</th></tr><tr><td>Column
1 Row 2 content</td><td>Column 2 Row 2 content</td><td>Column
3 Row 2 content</td></tr></table>
The condensed version does reduce the html file size but is very hard to read when looking for HTML code errors and the right spot to insert content.
Benefits of Spacing Out HTML Source Code
There a number of benefits to spacing out HTML source code:
Tables Constructed Properly
You can check that your tables are constructed properly. If the table rows and cells are not opened and closed properly, the web page can break in certain browsers.
Lists Constructed Properly
Check that each list point is opened and closed properly. As of HTML 4.01 each list item requires an opening tag and a closing tag. This was not required in previous versions of HTML.
Learning now to open and close tags will make your coding upgradable in the future.
Find Coding Errors Easier
If you space out your source coding then it will be easier to find the errors that the validator finds.
Some HTML editors will show line numbers. When the validator tells you that you have an error in a line number it will be much easier to locate the error in the line if the source coding is spaced out.
Paragraphs Opened and Closed Properly
Check that each paragraph is opened and closed. As of HTML 4.01, paragraphs are to have a closing tag. This was not required in previous HTML versions.
Insertion of Code Easier
With the source code spaced out nicely, it will be easier to find just the right spot to insert additional code.
Related Source Code Articles and Tips
- Lower Case HTML Tags and HTML Tag Attributes When entering your basic HTML tags and HTML tag attributes use lower case in preparation for future web technologies, consistent web page rendering and search engine optimization.
- Learn to Design HTML Tables with Less Code When starting off in HTML coding beginners are very tempted to design HTML tables when creating web pages. Learn how to use rowspan and colspan.
- Basic HTML Code Tips Our complete list of HTML Code Tips.