|
HTML/CSS
General standards for using HTML and CSS
We use an HTML format called xHTML Transitional, which is more strict than regular HTML coding. Some of the guidelines below apply to HTML and web coding in general, and some are specificly related to xHTML.
Naming files and folders
When naming files and folders, do not use spaces or special characters such
as hyphens, slashes, ampersands, or periods. Use underscores if needed
to separate words. File and folder names are case-sensitive; lowercase should be used to avoid coding and linking problems.
- Correct: filename.html, file_name.html
- Correct: foldername, folder_name
- Incorrect: file-name.html, file name.html, file.name.html, file&name.html, FileName.html
- Incorrect: folder name, folder-name, folder.name, folder&name, FolderName
Paragraphs and breaks
Each paragraph should be in its own <p></p> tags. Do not use two break <br/> tags instead of a paragraph
<p> tag to separate paragraphs. Break tags create
more space between paragraphs than <p> tags.
- Correct:
<p>Paragraph one.</p>
<p>Paragraph two.</p>
- Incorrect:
<p>Paragraph one.<br />
<br />Paragraph two.</p>
Italics
Use italics as little as possible. There is no such
thing as italics on the web; square pixels can
only represent what italics look like on a printed piece and can be very difficult to read on a computer screen.
Underlines
Avoid using underlined text for emphasis. Underlined
text should only be used for hyperlinks.
Lowercase code
Always write HTML tags and CSS in lowercase. xHTML requires all code to be lowercase.
- Correct:
<body bgcolor="#e5e6ef">
- Incorrect:
<BODY BGCOLOR="#E5E6EF">
<body bgcolor="#E5E6EF">
All tags need a closing tag
Most HTML tags come in pairs with an opening/start tag and a closing/end tag. A few tags don't have a separate closing tag. xHTML dictates that these tags need to be coded as self-closing with a space+forward slash.
- Correct:
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
- Incorrect:
<ul>
<li>Item one
<li>Item two
</ul>
|
- Correct:
<br />
<hr />
<img src="pic.gif" />
- Incorrect:
<br>
<hr>
<img src="pic.gif">
|
No overlapping tags
Tags need to be nested, and cannot be closed out of order.
- Correct:
<p>Good nesting tags <b>don't overlap</b></p>
| |________________| |
|_________________________________________|
- Incorrect:
<p>Bad nesting tags <b>will overlap</p></b>
| |______________|___|
|___________________________________|
Keep the code clean
Tags should butt up against the content, without any extra spaces. Every character takes up memory in the html file. Extra and unnessary spaces/tabs/returns will create a larger file size.
- Correct:
<p>Good code doesn't contain any extra spaces before or after the tags.</p>
- Incorrect:
<p> Bad code has extra spaces in the text and around the html tags. </p>
Also, combine tags when possible, to reduce the amount of code and to keep the code as clean as possible:
- Correct:
<p class="font_bold">Clean code uses as little code as possible.</p>
- Incorrect:
<p><span class="font_bold">Bad code has extra tags.</span></p>
Attribute values need to be in quotes
xHTML requires we always use quotes around any values that follow an equals sign.
- Correct:
<p align="center" class="font_subhead">
- Incorrect:
<p align=center class=font_subhead>
Images need descriptions
All web images must have an alt attribute to be xHTML compliant.
Alt tags must describe the graphic if it pertains to navigation
or links to another page. For decorative images that don't need a specific description, the alt attribute is still necessary, but may be left "empty".
- Correct:
<img src="bookbutton.gif" alt="Book Now" />
<img src="image.gif" alt="" />
- Incorrect:
<img src="image.gif" />
Links
For text links, use words that makes sense when
read out of context. For example, avoid "click here".
Use text that is understandable as a link in the context
of the article. Read the W3C's explanation on this.
|
