University Web Services
Best Practices
HTML Coding
There is room for much variety in coding, both in complexity and in terms of technique. We can, however, lay down some basic guidelines, and these are represented in the shell below.
This shell is intended not so much as a template as a common point of departure. Ideally, every web page at Boise State would include the portions shown in black below, many of the pages would include the purple elements with only minor changes, and would include the cyan elements as needed.
A Coding Shell
The structure of any XHTML 1.1 compliant page designed for use at Boise State should contain the following. The portions that should not change are in normal (black) font. The portions that should change are in orange and boldface. The portions that may change under special circumstances are in purple and italics. Portions that are optional and should appear only if that functionality is required are in cyan and smallcaps.
HTML Head
Example <head> section
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4 <title>This specific page title – Department – Boise State University</title>
5 <meta http-equiv="content-type" content="text/html; charset="utf-8">
6 <meta name="description" content="Description of the content of the page in complete sentences. This is what people will see as a short description when they use a search engine. Limit length to two to three lines.">
7 <meta name="keywords" content="Keywords, alternate spellings, abbreviations, jargon, words or phrases that might be searched on but don't appear in the document itself, all as a comma-delimited list">
8 <link href="/dept/styles/main.css" rel="stylesheet" type="text/css" media="screen"/>
9 <link href="/dept/styles/other.css" rel="stylesheet" type="text/css" media="screen" />
10 <link href="/dept/styles/print.css" rel="stylesheet" type="text/css" media="print" />
11 <style type="text/css">
12 <!--
13 any styles specific to this page only go here
14 -->
15 </style>
16 <script language="JavaScript" type="text/javascript">
17 page-wide JavaScript goes here, but external.js is preferred
18 </script>
19 </head>
Commentary on the code
1 – All documents must declare the appropriate DOCTYPE. We prefer XHTML Strict or XHTML Transitional, or HTML5.
2 – The <html> tag is the place to declare the language type.
4 - The <title> tag should have the most specific information first. This makes it easier to read and understand when found in a bookmark or seen on the title bar of a browser.
5 – Use the UTF-8 character set
8 – Always use a media type of "all" and always put this stylesheet first. The standard name for the principal stylesheet is always main.css
9 – If there is need for a secondary stylesheet, then it gets called here
10 – A print stylesheet will normally be used on all sites.
11 – We discourage the use of embedded styles, but if they're used, here's the syntax.
Body Section
The body (and ending html tag) should contain div statements for each of the major sections of the page layout. In most cases the header, leftnav, and footer will all be external files included through a server-side directive.
1 <body>
2 <div id="header">
3 </div>
4 <!-- end header -->
5
6 <div id="leftnav">
7 </div>
8
<!-- end leftnav -->
9
10 <div id="content">
11
12 Content goes in here
13
14 </div>
15
<!-- end content -->
16
17 <div id="footer">
18 </div>
19
<!-- end footer -->
20
21
22 </body>
23 </html>
24
Commentary on body section
2-4 - This section would normally go into an include file.
6-8 - This section would normally go into an include file. This is where the site menu navigation is normally held.
17-19 - This section would normally go into an include file.