Recommended Document Structure
University Web site pages should be coded according to modern Web standards. Every Web page should be made up of meaningful structural elements. The most common elements to include are:
- Headings
- Paragraphs
- Tables
- Lists
Headings
Each page section should have a meaningful, written heading, and marked using appropriate heading elements in HTML.
All Web pages will have at least one section of text.
Page title text within the <body> element should always be designated with a <h1> element.
Example:
<body>
<h1>About the Project</h1>
<p>This project is managed by Information Technology at 海角社区 Channel Islands.</p>
<h2>Project Teams</h2>
<p>Two project teams provide support to the University community.</p>
Sub-headings <h2>, <h3>, <h4>, <h5>, <h6>, <h7>
Example 1:
Page sections using the same sub-heading element have the same level of importance in the document structure.
In this example, the page sections "Project Teams", "Contact Us" and "Related Links" have the same level of importance because they all use the <h2> heading element.
<h2>Project Teams</h2>
<h2>Contact Us</h2>
<h2>Related Links</h2>
Example 2:
Items using the next higher numbered sub-heading represent a subsection.
In this example, "Strategy Team" and "Design Team" are both sub-sections of the "Project Teams" section.
<h2>Project Teams</h2>
<h3>Strategy Team</h3>
<h3>Design Team</h3>
<h2>Contact Us</h2>
<h2>Related Links</h2>
Headings cannot be used out of sequence.
Example 3 (Incorrect Code):
<h1>About this project</h1>
<h2>Project Teams</h2>
<h4>Strategy Team</h4>
The <h4> element in the above example implies that a prior subheading marked with <h3> must be previously specified in the HTML code. Because there is no <h3> element, this code is not semantic.
Paragraphs
Paragraph text should be surrounded with paragraph elements <p>
Example:
<p>The quick brown fox jumped over the lazy dog.</p>
will display:
The quick brown fox jumped over the lazy dog.
Paragraphs can be split into multiple lines using line break <br /> elements.
Example:
<p>The quick brown fox jumped<br /> over the lazy dog.</p>
will display:
The quick brown fox jumped
over the lazy dog.
Tables
Tables should be used to format data as a grid, in rows and columns.
Data tables must not contain non-tabular data or table headings. For example, do not include directions or instructions on table interpretation in any table cell.
The "summary" attribute must be used within the <table> element in data tables to provide a short but meaningful summary of the table.
Example: <table summary="Lists names and email addresses of contacts">
Data tables must contain appropriate row and column headings.
Example Table #1:
| Name | Email Address | Building Location |
|---|---|---|
| Help Desk | helpdesk@csuci.edu | Broome Library |
| Police Department | police@csuci.edu | Placer Hall |
Example Table Code:
<table border="1" summary="Example table showing contact information and how to use table header elements and table summary attribute correctly" width="100%">
<tbody>
<tr>
<th scope="col">Name </th>
<th scope="col">Email Address </th>
<th scope="col">Building Location </th>
</tr>
<tr>
<td>Help Desk</td>
<td>helpdesk@csuci.edu</td>
<td>Broome Library</td>
</tr>
<tr>
<td>Police Department</td>
<td>police@csuci.edu</td>
<td>Placer Hall</td>
</tr>
</tbody>
</table>
Data table headings must be marked using <th> elements
Table <th> elements must use the scope attribute
- Use "row" for row headings
- Use "col" for column headings
Example: <th scope="col">Email Address</th>
Complex data tables (which have more than 2 logical levels of information) should be formatted using the "headers" and "id" attributes.
Use of layout tables is strongly discouraged. Instead, design using <div> and <span> container elements, and format layout using Cascading Style Sheets.
The look of tables (cell padding, cell spacing, table border colors/styles, cell widths, etc.) should be modified using Cascading Style Sheets.
Lists
The appropriate list elements should be used to mark any bulleted and numbered lists.
<ul> and <li> elements should be used for bulleted lists.
<ol> and <li> elements should be used for numbered lists.
Example #1 - unordered (bulleted) list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
will be displayed as
- Item 1
- Item 2
- Item 3
Example #2 - ordered (numbered) list:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
will be displayed as
- Item 1
- Item 2
- Item 3
Special HTML Elements
Blockquotes
The <blockquote> element is used only to provide text which represents a long quotation.
The <blockquote> element must not be used to create indents for content which is not a quotation, or to "indent" any other text- or non-text elements of a Web page.
Inline elements
The <em> and <strong> elements can be used to provide italic and bold emphasis, respectively.
Examples:
<p>This service is for <em>CI students only.</em></p>
will display
This service is for CI students only.
Examples:
<p>The deadline is <strong>January 2nd</strong> at 4pm.</p>
will display
The deadline is January 2nd at 4pm.
Acronyms and abbreviations
Both acronyms and abbreviations should be specified using the <abbr> element. The definition for the abbreviation or acronym must be added to the title attribute.
Example:
<abbr title="Channel Islands">CI</abbr>
<abbr title="Osher Lifelong Learning Institute">OLLI</abbr>
Deprecated elements
The <font> element should not be used in any Web pages. Font formatting should be applied using Cascading Style Sheets (CSS).
Character entities
HTML entities must be used to represent special characters within tag and attribute values within a Web page. This includes page body text, page <titles>, and link URLs.
Either the Entity Number or Entity Name can be used to embed these characters within the HTML code.
Common HTML entities
| Character | Entity Number | Entity Name | Description |
|---|---|---|---|
| " | " | " | quotation mark |
| ' | ’ | ’ | apostrophe |
| & | & | & | ampersand |
| < | < | < | less-than |
| > | > | > | greater-than |
| ( ) empty space |   | | non-breaking space |