★ wanayoo — archive 1999 http://wdvl.com/Authoring/HTML/Tutorial/coding_style.html

Coding Style

Selena Sol

As you begin coding documents for your company or for yourself, it will benefit you greatly if you define your own standards and style that you apply without question to every page you build.
This will help immensely when you 1) rewrite all your pages and can use a script to replace one set of standard text with another set of standard text instead of doing all the changes by hand and 2) when someone else tries to modify or add to your collection of web pages.
Style is a personal thing, but there are a few standards that have become...well...standard.
- Use capital letters for tags, arguments and values.
- Use a space before and after equal signs within tags.
- Use quotes around tag attribute values whether or not they include white space.
- Use embedded spacing in your HTML code so that the code itself looks similar to how it will be formatted by a browser. In other words, use indentation and paragraph markings in the code when you specify paragraphs in the code.
- Keep your line width to 80 characters so that UNIX editors will be able to read your code. If a tag goes beyond 80 characters, indent continuing attributes.
- Follow HTML standards even if browsers will let you slide. This means, use closing tags like </HTML>
- Include no extra spaces in anchors and only anchor meaningful words

Coding Style by Example

Here is an example of "bad" code.
<HTML ><head><Title>Hello World</TITLE></Head><Body bgcolor=white text=black> This is a very simple web page. Notice that the browser does not pay attention to spaces that we add to our document unless you specify what type of spacing you want<p>Like when you use a paragraph tag or a <br> break line tag. <A HREF = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fnext.html&y=1999"> click here to go on to the next page </A></BODY>

Here is an example of good code:

<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY BGCOLOR = "FFFFFF" TEXT = "000000"
                VLINK = "AAAAAA" ALINK = "564345">

<!-- BEGINNING OF PAGE BODY -->

This is a very simple web page.  Notice that the 
browser does not pay attention to spaces that we 
add to our document unless you specify what 
type of spacing you want

<P>
Like when you use a paragraph tag or a 
<BR>break line tag.

<P>
Click <A HREF = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fnext.html&y=1999">here</A> to go to the next page.

<!-- ENDING OF PAGE BODY -->

</BODY>
</HTML>

Notice how the example of "good" code is VERY easy to read. Putting white space above the <P> made the new paragraph look like a new paragraph.
As your code gets more and more complex, good coding standards will become more and more important.
Finally, take some time to get familiar with an HTML Validation Program that you can use to check your code against the various HTML standards.
Clicking on the black and white WebTechs button at the bottom of the page will illustrate a validator at work.