Best Practices In HTML

General HTML Issues
1. The basic structure is: <html><head></head><body></body></html>
2. HTML Code (tags and attributes) should be in all lowercase these days
3. All HTML tags that are opened should always be closed
4. All HTML attributes should be given in quotes
5. Best to have no spaces between the attribute name and its value
6. When needed, nest one pair of tags completely within another pair instead of overlapping them. For example, nest the b's inside the p's like this <p><b>Hi</b></p> instead of overlapping them like this <p><b>Hi</p></b>
7. Use indenting to help clarify the structure of your tags, especially when creating lists, tables, and forms (opening and closing tags should line up above and below one another, as demonstrated in the "Table Issues" section below)
List Issues
1. In a list with <li> elements, the list must start with <ol> or <ul> and end with </ol> or </ul>. The list elements themselves are then nested inside the list tags as indicated below:
2. Note that all <li> tags should be closed with </li> tags. Here is an example of an ordered list (and suggested indentation):
  <ol>
  <li>First Item</li>
  <li>Second Item</li>
  </ol>
3. Basic definition list structure (and suggested indentation) is:
  <dl>
     <dt></dt>
     <dd></dd>
     <dt></dt>
     <dd></dd>
  </dl>
Image Issues
1. Basic image structure: <img src="myfile.gif"> where myfile.gif is in the same folder as the document.
2. Image tags should be closed even though there is no closing tag </img> for images since there isn't any content to place between the tags. So the opening image tag can also close itself properly, add a space and a slash at the end:
  <img src="myfile.gif" />
3. You should specify alternative text for images:
  <img src="moon.jpg" alt="Photo of moon at sunset" />
4. It is generally a good idea to add "width" and "height" attributes to image tags so that the browser knows its dimensions (in pixels) and can better lay out the page content as it awaits the arrival of the image file itself:
  <img src="logo.gif" alt="Acme logo" width="200" height="75" />
5. If an image map is used with an image, add a usemap attribute with a # sign in front of the name of the associated map:
  <img src="globe.gif" usemap="#world" />
6. The image mapping itself is done with a map tag using the same usemap name (in this case "world") and as many "area shapes" as needed, one per hotspot on the image. Shapes can be rectangles, circles, or polygons (as shown). Their coordinates (coords) are given in pixels to outline the clickable area of the image and the href attribute indicates the associated page it links to:
  <map name="world">
     <area shape="rect" coords="200,130,250,280" href="california.htm">
     <area shape="circle" coords="400,800,75" href="southpole.htm">
     <area shape="poly" coords="10,22,25,40,28,90,15,86" href="hawaii.htm">
  </map>
Link Issues
1. Basic link structure:
  <a href="samplepage.html">Sample Page</a>
2. Note in the above link, samplepage.html must be in the same folder as the html document. To link to a document in a subfolder of the document folder:
  <a href="foldername/samplepage.html">Sample Page</a>
3. To link to a document in a different folder at the same level as the document folder:
  <a href="../otherfolder/samplepage.html">Sample Page</a>
4. To link to an external URL:
  <a href="http://www.google.com">Go to Google</a>
5. To create a named location to scroll to within a document:
  <h1 id="top">Main Page Heading</h1>
6. Then, elsewhere in that document, to link to that named location:
  <a href="#top">Go to Top of page</a>
7. To open a new browser window:
  <a href="whatever.html" target="_blank">Whatever</a>
8. To create a link that sends email use "mailto:" with no spaces:
  <a href="mailto:joe@aol.com">Send Joe Some Mail</a>
Design Issues
1. Be mindful to use as small a total file size for your page as you can so it displays quickly (add the file sizes of all the graphics and text). This is especially true if your target audience includes dial-up users, less critical if broadband connections can be assumed.
2. Make sure that all of the text on the page is easy to read, including links (before and after being visited). Be particularly mindful not to use background images for text that have contrast problems with the text in some areas or in any other way make the text difficult to read.
3. Always specify a background color for your page, even if it is white and even if you also have a background image
4. When specifying colors for your pages, use color names only when it is one of the 16 standard colors -- otherwise use color numbers:
  <body style="background: yellow; color: #252040">
5. Try not to use too many different colors and fonts on a page. That way when you do use a different one, it has a real impact (other than to distract and annoy).
6. Use fonts and colors to help achieve a clear and consistent organization to each page: for example all subheadings are done with the same text size, color, and font face.
7. Within a site, pages should generally show consistency in backgrounds, color, fonts, etc. so that it looks like an integrated whole, not a bunch of independent pieces.
8. Using a clear and consistent placement, formatting, and identification for your main page links really helps users to quickly become familiar and comfortable with navigating your site and finding what they want.
9. To really control your fonts, give a list possible fonts (not just one) of the same type, and end the list with a generic font family of that same type (either serif, sans-serif, monospace, cursive, or fantasy):
  <p style="font-family: Georgia, Times, serif">
Table Issues
1. Basic table structure and suggested indentation appears below:
  <table>
      <tr>
          <td>1st row 1st col data goes here</td>
          <td>1st row 2nd col data goes here</td>
      </tr>
      <tr>
          <td>2nd row 1st col data goes here</td>
          <td>2nd row 2nd col data goes here</td>
      </tr>
  </table>
2. There are many attributes that can be applied to the <table> tag to layout a table, such as:
  <table align="center" width="75%" height="400" cellpadding="2" cellspacing="1">
3. Keep in mind that "cellspacing" is the blank space between cells and "cellpadding" is the blank space inside the cells (between the cell walls and the content inside the cell).
4. There are also some attributes that can be applied to all cells within a particular row (tr tag), such as:
  <tr valign="top" style="text-align: center">
5. There are also attributes that can be applied to a single cell (td tag), such as:
  <td colspan="2" rowspan="3" width="200" valign="bottom">
6. All cells within the same column must have the same width and all cells within the same row must have the same height. If you think about how a table looks, this is obvious, but when setting <td> attributes it is often violated.
7. All rows of a table must have the same number of columns accounted for, either by actual <td> elements or by colspan or rowspan attributes. For example, row 1 can have 3 <td> elements, and row 2 can have 2 <td> elements one of which has a colspan="2" attribute to account for the "missing cell".
8. If your table has headings, like across the first row, for example, you should use <th> tags instead of <td> tags for those cells. They will be automatically bolded and centered by the browser and noted as headings for screen readers. This is recommended. You can also use them on the cells that appear down a column if those entries act as headings. Just do <th>Whatever</th> instead of <td>Whatever</td>.
9. If you are nesting one table inside another, nest the entire inner table inside a single cell of the outer table. Here is a sample of the structure and suggested indentation:
  <table>
     <tr>
        <td>
           <table>
              <tr>
                 <td>inner</td>
              </tr>
           </table>
        </td>
        <td>outer</td>
      </tr>
  </table>
10. There are a lot more tags and attributes associated with tables and with making tables accessible, but too many to detail here (and not all are cross browser compatible anyway). Tags worth looking into include table caption <caption>, table header <thead>, table body <tbody>, and table footer <tfoot>. Attributes include "summary".
Frame Issues
1. Basic document structure and suggested indentation for a 2 column frameset (left frame is 200 pixels, right frame is the rest of the available space) is:
  <html>
  <head><title>the usual</title></head>
  <frameset cols="200,*">
  <frame src="left.htm" />
  <frame src="right.htm" />
  </frameset>
  </html>
2. Note that there is no <body> tag in the above document. There is an optional "noframes" section that can be added to indicate what should be displayed by (old) browsers that don't support frames. In that case, the structure would look like this:
  <html>
  <head><title>the usual</title></head>
  <frameset cols="200,*">
     <frame src="left.htm" />
     <frame src="right.htm" />
     <noframes>
        <body>
           html code for older browsers to display goes here
        </body>
     </noframes>
  </frameset>
  </html>
3. Framesets can be nested to produce more complex designs:
  <frameset rows="200, *">
     <frame src="top.htm" />
     <frameset cols="150,*">
        <frame src="left.htm" />
        <frame src="right.htm" />
     </frameset>
  </frameset>
4. There are several frameset attributes:
  <frameset rows="30%, 20%, 50%" frameborder="yes" border="2" bordercolor="red" framespacing="3">
5. There are also many frame attributes:
  <frame src="right.htm" name="right" frameborder="1" noresize scrolling="auto" marginheight="10" marginwidth="5">
6. Use targets to specify into which frame a linked page is to appear. For example, a link in a left frame might open up a document in the (target) right frame, assuming that the right frame has been named "right" in its own <frame> tag as shown above:
  <a href="right2.htm" target="right">Page 2</a>
7. In addition to your own named frames, there are also some built-in (magic) target frame names that can be used with links: _blank (new window), _self (same frame as link itself), _parent (the containing frame, if nested), and _top (replaces current frameset with full window)
8. If several links on a page will use the same target, a <base target="aframename"> tag can be placed in that page's <head> to set up a default target for all links on that page. For example, this would be most helpful when building a nav bar that loads pages into some other frame.
Form Issues
1. Basic sample form structure is:
  <form>
  <input type="text" />
  <input type="submit" />
  <input type="reset" />
  </form>
2. The form tag itself has some important attributes, but they come into play only when your form is on a server. Three samples follow, showing different types of actions a submitted form can have:
  1. <form action="http://www.myserver.com/cgi-bin/process" method="post">
    When the user clicks "submit" the form sends its data in "post" format (as opposed to "get" format) to a script on the server for processing, which might store the info in a database and/or send an email message out as confirmation.
  2. <form action="confirm.asp" method="get">
    When the user clicks "submit" the form sends its data in "get" format to a page (script) that processes it and displays the next page in the browser with that form data appended to the URL.
  3. <form action="mailto:whoever@wherever.com" method="post" enctype="text/plain">
    When the user clicks "submit" the form sends an email to the specified address that includes the form data in post format for that person to process. Good as a last resort when no automated server processing is available.
3. The following is a list of form elements and basic examples of their tags and typical attributes. Note that none of these are valid unless they appear between a <form> and </form> tag. Note also that the <input> tag does not usually have anything in it and doesn't formally have a closing tag defined, so is often ended with a space and slash, such as <input type="reset" />:
  1. Textbox, used to accept short one line typed info, such as name or quantity:
    <input type="text" name="firstName" size="20" maxlength="20" />
  2. Text Area, used to accept multi-line typed info, such as general feedback comments:
    <textarea rows="5" cols="20" wrap="soft" name="comments">Default text</textarea>
  3. Checkbox, when used in a group, allows user many yes/no choices of which 0 or more can be chosen:
    <input type="checkbox" name="giftWrap" value="Yes">Want Gift Wrapping</input>
  4. Radio (option) buttons, which should always come in a group of 2 or more, each with the same name, allows user many choices of which only 1 is chosen:
    <input type="radio" name="shipping" value="2day">2-Day Shipping</input>
    <input type="radio" name="shipping" value="standard" checked>Standard Shipping</input>
  5. Select List (Drop-down list), used to give many options which are hidden until the user clicks the down arrow:
    <select name="shipping">
       <option>1-day</option>
       <option>2-day</option>
       <option>Standard</option>
    </select>
  6. Buttons, submit, reset, and generalized. Most all forms should have submit and reset buttons. The regular type of button is rarely used by straight HTML coders but more often by programmers writing JavaScripts that can make them do something useful:
    <input type="submit" value="Send form data" />
    <input type="reset" value="Clear form" />
    <input type="button" name="refresh" value="Click to refresh page" />
  7. Other form elements exist, such as the following, but they are more often used by programmers and not discussed further here:
    <input type="password" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />