Style Guide [part 4] @ W. Frank Steely LIBRARY

Style Guide [part 4]

Editing Content

The section that holds the page's main content looks like this:


<body>
	...
	<div class="main">
		<h2>Page Title</h2>
		<h3>Section Title 1</h3>
		<p>Content goes here</p>
		<h3>Section Title 2</h3>
		<p>Content goes here</p>
	</div>
	...
</body>

There is more than that between the <body> and </body> tags but focus on the main <div>. If you successfully edited the <head>, you already know how to change the page title and date.

To successfully add content, there are a few simple rules to remember:

All tags must be properly nested. For example:
<div><p><span><a> text </a></span></p></div>
Make sure all tags have proper end tags or end markers.
Make sure all tags are lower case.
The indentations in the code are for your reference. The browser doesn't care about them. That said, you'll regret not maintaining the indentations which help you to visualize the nested structure of the document.
Look at other pages in the web site. Look for clues regarding tags and classes. Don't try to reinvent the wheel. As long as the links to style sheets are in place, class and id styles are transportable.
Seek the input, advice, or assistance of your web administrator.

Semantic Markup

XHTML documents need to be logically structured. Tags should provide information about the content. Headers, for instance, should be used and in their proper order. The main header is an <h1> and the next header is an <h2>. Some designers manipulate the font size to create the appearance of a header. This is not allowed.

Lists should be structured as lists. In the past it was not uncommon to use tables to structure items in a list-like fashion. This is not a good practice. Avoid presentational tags and structure your documents in a manner that parallels the content. Documents that are properly structured are said to degrade well. This means that the page still makes sense when all presentational elements are removed. This is a very important issue for interoperability and accessibility. Special formatting can be imported from style sheets to transform simple elements into styled elements.

Marking Up the Content

All content is marked up with tags. In order to edit this web site, you need to know how to use the tags below. This is NOT a comprehensive list.

<div></div>: Name: "div" or "division"; Attributes: class, id; Example: <div class="menu"></div>; Use: Creates a block-level container to which a style can be applied
<h1></h1>: Name: "Headline"; Use: Identifies the site title.
<h2></h2>: Name: "Level 2 Headline"; Use: Identifies a page title.
<h3></h3>: Name: "Level 3 Headline"; Use: Identifies a page subheading. You should as many of these as you need to identify each section of your document.
<p></p>: Name: "paragraph"; Attributes: class; Example: <p class="first"></p>; Use: Contains text. One set per paragraph.
<br />: Name: "line break"; Note: Sometimes line breaks are used to simulate lists. Don't do this. Use list tags if you need a list.
<span></span>: Name: "span"; Attributes: class, id; Use: Selects an area for an inline style to be applied.; Example: <span class="yellow"></span>
<img />: Name: "image"; Attributes: src, alt, width, height, longdesc; Example: <img src="file.jpg" alt="purpose of image" width="20" height="20" /> Many images on this site are in <div>s with either "lt capt" or "rt capt" classname. The easiest way to see how this works is to look at a page with graphics.; Interesting note: Deprecated in the XHTML 2.0 recommendation which prefers "object". As yet, no browsers understand "object."
<a></a>: Name: "anchor"; Attributes: href, id; Example of link: <a href="file.html"></a>; Example of anchor: <a id="anchorname"></a>; Example of link to an anchor: <a href="#anchorname"></a>; Interesting note: Deprecated in the XHTML 2.0 recommendation which prefers "link." As yet, no browsers understand "link."
<hr />: Name: "horizontal rule"; Use: Creates a dividing line between sections.

Some tags, like those for lists, require a more complex construction. For this site, you will need to understand how to create an unordered list, an ordered list, and a definition list. The following demonstrates the types of lists:

An Unordered (or Bulleted) List:

list item 1
list item 2

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
</ul>

An Ordered (or Numbered) List:

list item 1
list item 2

<ol>
	<li>list item 1</li>
	<li>list item 2</li>
</ol>

A Definition List:

definition term: definition definition

<dl>
	<dt>definition term</dt>
	<dd>definition definition</dd>
</dl>

Ordered and/or unordered lists can be nested. Here is an example of nested lists:

list item A
list item B
1. sub list item 1
2. sub list item 2
list item C

<ul>
	<li>list item A</li>
	<li>list item B
	<ol>
		<li>sub list item 1</li>
		<li>sub list item 2</li>
	</ol></li>
	<li>list item C</li>
</ul>

Notice how sub list items 1 and 2 are a part of the structure of list item B. This, in fact, is how this page's menu is constructed. (Really!) This is an important element in making this site work and it degrades well.

Constructing tables is similar to constructing lists. Talk to your web administrator if you think you need a table.

[« previous] [next »]

updated: Wednesday, 24-Aug-2005 11:16:02 EDT

W. Frank Steely Library