- Basic HTML markup in the WMS

OVERVIEW

Target audience: Site Administrators, Site Managers, Site Editors

This article covers the basic supported HTML tags that you can use to publish content in the Web Management System.

NOTICE:

To learn more about HTML, W3Schools provides a comprehensive tutorial.

In this article:

Content structure and styling
Lists
Positioning and layout
Table classes
Other WMS classes

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

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.

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.

Click on Source in the WYSIWYG toolbar
Locate the table HTML code
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"> </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.