Web School
good HTML standards, practices, and guidelines
This is a short run down on the "correct" way to write HyperText Markup Language code. It lists common standards, best (relative) practices, and general guidelines.
The World Wide Web Consortium (W3C) is an independent standards setting organisation. W3C was created in October 1994 to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its inter operability. This is the best site to go to see what the current standards are. Previous protocols and standards are available at the W3C site for reference.
Some aspects of writing Web documents are not standards but are just good practices. Below is a list of the HTML fundamentals.
HTML is the lingua franca for publishing hypertext on the World Wide Web. It is a non-proprietary format based upon SGML, and can be created and processed by a wide range of tools, from simple plain text editors - you type it in from scratch- to sophisticated WYSIWYG authoring tools. HTML uses tags such as <h1> and </p> to structure text into headings, paragraphs, lists, hypertext links etc.
For a full run down on the W3C specifications for HTML 4.01 go to http://www.w3.org/TR/html401/.
Specifications for previous versions of HTML can be found at:
HTML 4.0 Specification
HTML 3.2 Reference Specification
HTML 2.0 Materials
Top of Page | Fundamentals
HTML coding is very simple if you know how. It is essentially a programming language but because all it is really designed for is document layout it is a simple language with a relatively small and simple vocabulary.
HTML coding is mostly made up of CONTENT, COMMENTS, and TAGS.
Content is what is seen on a web page. This is all the text and images. When writing content it is important to note that HTML code ignores all line breaks and carriage returns within the coded document. Spaces are only ever counted as one space no matter how many you put in the code. So too is a tab. If you want multiple spaces in your document layout then use the symbol. If you want text laid out in an exact format then use the <PRE> tag.
Basics of HTML code
Comments are neither code nor content. They will not be seen on a web site and they do not effect the layout in any way. Comments are a good idea to write in your code to explain to future possible authors, and even yourself, what a certain part of your code is for or about.
Comments are written like this: <!-- comment goes here --> They can span multiple lines in your code.
Basics of HTML code
Tags (often referred to as "elements") are what truly make up an HTML document. Without them they would be a simple text document with no formatting whatsoever. Using the various tags within HTML are what gives the layout control that HTML is designed for. All HTML tags are contained between the < and > symbols. e.g. <I>italic text</I> Some tags allow attributes to be set for them. Attributes are written inside the tag. e.g.
<DIV ALIGN="center">sample tag and attribute</DIV>
Be sure to quote all attribute data.
HTML code is NOT case sensitive. It is however, good practice to use the same casing throughout your document within your tags.
Top of Page | Fundamentals
For the sake of interpretation and ease of use it is recommended to close all TAGS that can be closed.
Some tags do not require a closing tag in most browsers, if any, but should be used anyway. e.g. <P> and </P>
Top of Page | Fundamentals
Although a lot of browsers are intelligent enough now to interpret errors or mistakes as they should be it is good practice to get it right the first time so that it is not up to the browser to make its best guess. An important yet often overlooked part of this is keeping your tags in the correct order.
Closing tags should happen in the reverse order in which they were opened. e.g. <B><I>bold, italic text</I></B> will always work and is the correct way to order tags. <B><I>bold, italic text</B></I> is wrong and may generate an error in some browsers.
Top of Page | Fundamentals
For most people the look of a document - the color, the font, the margins - are as important as the textual content of the document itself. But make no mistake! HTML is not designed to be used to control these aspects of document layout. What you should do is to use HTML to mark up headings, paragraphs, lists, hypertext links, and other structural parts of your document, and then add a style sheet to specify layout separately, just as you might do in a conventional Desk Top Publishing Package. That way, not only is there a better chance of all browsers displaying your document properly, but also, if you want to change such things as the font or color, it's really simple to do so. See the Style Sheets section.
Top of Page | Fundamentals
Cross-Browser compatibility has become one of the most controversial issues of website design. The two major browsers, Netscape Navigator and Microsoft Internet Explorer, have major differences in the way they interpret and present HTML and Javascript coding. Add in another dozen different browsers. The complexity of compatibility becomes a time-consuming task for the website designer.
It has become necessary to check pages in at least the two major browsers, Netscape and Internet Explorer. Download at least one version of each. If you choose to venture beyond the majors, AOL and Opera browsers would be logical choices. Lynx is a text-based, non-graphical browser.
Top of Page | Fundamentals
A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements may become obsolete in future versions of HTML.
User agents (internet browsers) should continue to support deprecated elements for reasons of backward compatibility.
Deprecated elements are relevant to the likely browser level of your intended target audience. Style sheets, for example, are for level 4 browsers and above so should be used to replace deprecated elements prior to HTML 4.01.
In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist.
Do NOT use these depricated elements if at all possible for level 4 targeted browsers and above but instead use the listed alternative.
<APPLET> replace with <OBJECT> element
<BASEFONT> use style sheet font-size, use other style sheet font elements to replace attribute definitions
<CENTER> use ALIGN="CENTER" within elements that support ALIGN (e.g. <DIV>)
<DIR> replace with <UL> element
<FONT> use style sheet font-size, use other style sheet font elements to replace attribute definitions
<ISINDEX> replace with <INPUT> element with type="TEXT"
<MENU> replace with <UL> element
<S> use style sheet text-decoration: line-through
<STRIKE> use style sheet text-decoration: line-through
<U>use style sheet text-decoration: underline
Almost all attributes that specify the presentation of an HTML document (e.g., colors, alignment, fonts, graphics, etc.) have been deprecated in favor of style sheets.
Top of Page | Fundamentals
An obsolete element or attribute is one for which there is no guarantee of support by a user agent.
Although some of the target audience may be using browsers of a low enough level to support these elements it can not be garuanteed that higher level browsers will.
Do NOT use these elements under ANY circumstances. They have been discontinued as at HTML 4.01 and it can not be guaranteed that a users browser will support the element.
<LISTING> <PALINTEXT> <XMP> should all be replaced with <PRE>.
Top of Page | Fundamentals
Writing your own code is the best way to learn but it is just as important to get help from those that have already been through it all. The following links are just some of the sites around the web that have invaluable information.
http://www.w3.org/MarkUp HTML standards.
http://www.blooberry.com/indexdot/html/index.html THE Advanced HTML Resource.
http://www.w3schools.com/html/default.asp HTML School.
http://www.echoecho.com/html.htm HTML Tutorial.
http://www.devguru.com/Technologies/html/quickref/html_intro.html DevGuru HTML resource.
Top of Page | Fundamentals |
