Neat HTML Coding
|
|
In this lesson, we will learn how to achieve a neat HTML coding methodology which will be easy to comprehend by the original coder after a few months as well as by another coder who might take over from the original guy. Neat HTML coding is also considered necessary for following certain international standards on coding methodology, like ISO standards.
Remember looking at the View | Page Source? It's really hard to look in here and find the code you're looking for, especially with the additional stuff most pages contain like Javascript and CSS and sometimes even Perl and other coding languages. One way you can make things easier on yourself is by keeping your code neat, and by documenting things you think you may forget in the future.
Remember first that every coder does things a little differently. I'm going to give you the most generic advice, and you can apply it how you will. You'll notice almost immediately that I don't always follow my own advice here, but I always have a specific reason for breaking rules.
Start with neat code. For the best possible results, each command and each element should get its own line:
<HTML>
|
Make sure you close things out properly, with the end codes nesting the way they're supposed to be.
Elements that start sections (HTML, HEAD, TABLE, FORM) should get their own line every single time, and their closing tags should get their own lines as well. This helps you to quickly scan and see where things begin and end. When you have tags that refer to specific blocks of text, go ahead and insert the tag in-line. Always put the element in all caps to make it easier to find, and to ensure its later compatibility with XML.
Some examples:
Same Line
<HTML>
|
Closing Tag Not On The Same Line
<HTML>
|
Now, many people take their coding a step further and use indents or blank lines to create a neat code. For instance:
<HTML>
|
Some web designers will put these spaces in between blocks of elements to better organize their text. Most also indent elements inside other elements, like this:
<HTML>
|
This creates a neater code because it will indent following certain commands.
Documenting Your HTML
You can make notes right inside your own HTML text that will not display. All you have to do is this:
<!--This is a comment.-->
Comments can be made anywhere in your HTML, in any line, at any spot, and they will not display. It's better overall, however, to put them on their own lines, as this makes it easier for you to spot them.
What can go inside a comment? Anything you like: your name, a change date, a note on where you got a certain piece of information. This is just a way for you, personally, to keep track of your code and what you've done and intend to do with it.
Try This:
Clean up your own code in your own way using the directions in this tutorial section.
In this lesson, you have learnt neat HTML coding of your web pages. It is essential to learn the correct coding methodology right from the beginning.
| HTML PROGRAMMING TUTORIAL LESSONS | |||
| |||
|
|
| Goto HTML Programming Tutorial Home Page | Goto Computer Training Home Page |
