---

Content structure and styling

HTML tag	Example
<h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>	Don't use headings to make your text look big or bold. Use them to indicate the structure of the page.
<strong> </strong>
<em> </em>
<blockquote> </blockquote>
Define an anchor on a page: <a name="anchorname"></a> Link to an anchor within the current page: <a href="#anchorname">...</a> Refer to any anchor from any page on your site, providing you have given the anchor a unique name, e.g., don't have two anchors named "forms"
Line break <br>	A line break <br> inserts a new line but should not be used as a substitute for paragraphs.
Horizontal rule <hr>	A horizontal rule is a line that is 1 pixel in height.   Use this tag sparingly to avoid cluttering up pages.

---

Lists

HTML tag	Example
Ordered list <ol> <li> ... </li> <li> ... </li> ... </ol> See also Other WMS classes
Unordered list <ul> <li> ... </li> <li> ... </li> ... </ul>
Definition list <dl> <dt> ... </dt> <dd> ... </dd> <dt> ... </dt> <dd> ... </dd> <dd> ... </dd> ... </dl>
Grid <ol class="grid"> Enables lists to be used for grid displays

---

Positioning and Layout

HTML tag	Example
Align: left <p style="text-align:left;"> Align: right <p style="text-align:right;"> Align: center <p style="text-align:center;">
Right to left rendering (for non-Roman text) <div class="rtl"> For more information, see Support for non-Roman characters in the WMS.

---

Table classes

To apply a table class, add the class directly in the Source code.

1. Click on Source in the WYSIWYG toolbar
2. Locate the table HTML code
3. Change the <table> tag to include the class (e.g., <table class="no-zebra">)

Class	Example
zebra (default table style) <table class="zebra"> Shades alternate rows of the table and adds a shadow.
no-zebra <table class="no-zebra"> No shading on table rows and no shadow.
zero <table class="zero"> Removes all shading, borders and shadow.
tablesorter <table class="tablesorter"> Allows site users to sort table data in ascending or descending order by clicking on the column headings. Note: In order to use this class, the table must have a header row.	If you are using HTML to create your table, please ensure that the row containing your header cells <th> is placed inside the table header <thead> tags, not in the table body <tbody>. The table code should look like this:  <table class="tablesorter">     <thead>         <tr>             <th scope="col">&nbsp;</th>             <th scope="col">2010</th>             <th scope="col">2011</th>             <th scope="col">2012</th>         </tr>     </thead>     <tbody>         <tr>             <th>Americas</th>             <td>24,498</td>             <td>18,891</td>             <td>9,233</td>        ...     </tbody>  </table>
Collapse <table class="collapse"> Table columns will shrink to fit content instead of displaying at full page width.	Default table style (zebra) without collapse class: with collapse class:

---

Other WMS classes

Beyond standard HTML elements, the WMS also provides custom classes designed for a variety of uses. These classes are tested across a variety of browsers, operating systems, and devices.

Class	Example
highlight-inline <p class="highlight-inline"> Sets a yellow background
highlight-icon <p class="highlight-icon"> Add an information icon over a yellow background. Use sparingly to make key pieces of text stand out.
note <p class="note"> Wraps an element in a yellow box with a red dotted border.
box <p class="box"> Wraps an element in a box with a 1-pixel border.
enhance <ol class="enhance"> Adds graphical styling to the numbers in an ordered list.
pull-quote <p><span class="pull-quote">...</span></p> Lifts a key quote and sets it off from the surrounding text. The span tag is embedded within the paragraph, where it wraps around the text to be pulled.

---

HTML Do’s and Don’ts in the McGill Web Management System (WMS)

This is a non-exhaustive list of HTML Do’s and Don’ts in the McGill Web Management System (WMS).

In order to maintain both the integrity and accessibility for visitors of the overall design of web pages published through the McGill WMS, we strongly advise following the guidelines listed below. Use of unsupported tags may result in broken pages; we reserve the right to remove these tags from web pages in the McGill WMS or replace them with accessible tags.

Do:

• ensure all elements are nested properly
• make all HTML tags lowercase
• use only lowercase attribute names and enclose all attribute values in double quotes
• remove all redundant white spaces within tags and avoid line breaks within attribute values
• close all elements that consist of a start and end tag (<p></p>)
  (Note: An example of an element with no end tag is <br>, which just signifies a line break.)
• use <strong> and <em> in place of <b> and <i>
• use default HTML tags
• use relative links when pointing to web pages internal to the site

Don't:

• enclose heading tags (h2, h3) in <p> tags
• enclose <ul> and <ol> in <p> tags
• use unsupported tags (<font>, <u>, <body>, <blink>, <head>, <link>, <title>); they will be filtered out by the system (See Unsupported tags below.)
  (Note: Regarding <u> tags: the standard web convention is to reserve underlining for links ONLY.)
• make links open in a new window or tab (it's better to let users decide for themselves how to open a link)
• use font tags or <big> tags; these MUST be removed (use <h2> or <h3> tags, <class="smalltype"> for smaller type, or <strong> or <em> tags; nothing else is allowed)

Unsupported tags

The following are tags that are NOT to be used in web pages published in the McGill WMS. Many do not meet accessibility standards, and some have been replaced by newer standard tags (e.g., <strong> is now recommended rather than <b>).

<blink>, <font>, <body>, <head>, <link>, <title>, <center>, <marquee>, <b>, <i>, <u> <!-- -->

---