Proper Content and Page Structure

The following tips are meant to help CMS liaisons with day-to-day maintenance of basic content on their websites.

Paste as Text

If you paste content from a document or email into OU Campus, you will likely get a bunch of bad code added behind the scenes that will effect how your webpage will look at function. To avoid issues, try clicking the “Paste as Text” button before pasting your content or use the Ctrl + Shift + V key combination.

Paste as Text shortcut
Paste as Text shortcut

The negative to pasting as text is that you will have to do some formatting manually (adding bold, adding links, etc). However, this will ensure that your website meets brand standards as works correctly on all devices.

Headings

It is important to use proper HTML headings instead of bold paragraphs or single lines of text. To apply a heading style to a line of text, put your cursor inside of the line of text and then select a heading level from the left-most dropdown menu in OU Campus. The same method working in other online applications, such as Google Docs.

Heading Order

Headings must follow a logical order to be compliant with web accessibility requirements. Your page’s title is automatically the H1 of the webpage. Any headings that you use should begin with H2. If you “nest” headings—in other words if you have a subheading of a heading—you should not skip heading levels. If you have an H2 and you want to follow it with with a subheading, use an H3. If you follow that with a subheading of “equal weight”—use an H3 again. A subhead of a subhead would be an H4. Once you are done with subheadings, you can return to the H2 level. For example:


Heading 2 Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 3 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 3 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 4 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 2 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.


You should not use headings to achieve visual-only results. For instance, if you have an announcement that you want to stand out, but which is not a heading for the content afterward—you should not use a heading. Always think of screen reader users when you are adding headings to your webpage.

Headings Inside of Right Sidebars and Sliders

When using a right sidebar or slider, please consider the title of the sidebar or slider to be an H2. Any headings that you add should begin with the H3 heading, because any content added would be considered a subheading of the title of the sidebar or slider.

Ordered / Unordered /Bulleted Lists

If you want to list items or links, with or without numbers, please use an unordered or ordered list. This helps screen readers used by those with disabilities and helps search engines understand your content. When creating an unordered or numbered list, you do not need to also include paragraph tags.

Correct Code

<ul class="none">
     <li>Bullet 1</li>
     <li>Bullet 2</li>
     <li>Bullet 3</li>
</ul>

Incorrect Code

<ul class="none">
     <li><p>Bullet 1</p></li>
     <li><p>Bullet 2</p></li>
     <li><p>Bullet 3</p></li>
</ul>

If you do not want to use bullets, you can add a class of “none” to your unordered list.

Correct Code

<ul class="none">
     <li>Shortcut/Link 1</li>
     <li>Shortcut/Link 2</li>
     <li>Shortcut/Link 3</li>
</ul>

Incorrect Code

<p>Shortcut/Link 1</p>
<p>Shortcut/Link 2</p>
<p>Shortcut/Link 3</p>

Use of ALL CAPS

We have systematically removed the use of ALL CAPS from our web design due to growing concerns that it is difficult to read. Please keep this in mind as you create headings on your websites. If you must use ALL CAPS, please do so sparingly.

Replace & with “and”

Do not use ampersands where they are not appropriate—spell out the word ‘and’ instead. This includes in headings, titles, and sentences. The official name of most departments and buildings do not include an ampersand. In addition to improving readability and professionalism, avoiding using “&” will also ensure that your webpage content is compatible with other technologies.