Skip to Main Content

LibGuides Standards and Best Practices

What is HTML?

Guides and pages in LibGuides are all made with Rich Text —  text that includes text formatting, such as bold, italics, and underlining, as well as different fonts, font sizes, and colors. Rich text can also include formatting options, such as custom page margins, line spacing, and tab widths. All of these stylings are enocded using  

HTML stands for Hypertext Markup Language. It is used to describe the structure of that content on a web page. It consists of a series of elements that tell the web browser how to display the content. Elements are represented by a series of tags which label pieces of content such as headings, paragraphs, images, tables, and many more. Browsers do not display these HTML tags, but use them to determine how the content of the page is displayed, or rendered.

HTML looks something like this:

HTML markup

 HTML and constructed using the Rich Text Editor.

What is the Rich Text Editor?

The Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that works much like a word processor. When editing a Rich Text/HTML content item, the editor allows you to easily add and format text, images, and tables. To make advanced customizations, you can even switch to the Source mode to view the underlying HTML code that is used to style the rich textLibGuides Rich Text Editor exampleHow the different tags render the text in terms of font, color, padding etc. is determined by the Cascading Style Sheet.

The Cascading Style Sheet

The Cascading Style Sheet (CSS) describes how HTML elements are to be displayed . CSS saves a lot of work; it can control the layout of multiple web pages all at once. The name cascading comes from a specified priority scheme to determine which style rule applies if more than one rule matches a particular element.

This cascading priority scheme is predictable, and display ultimately works from the top down, with the most-specific tags taking precedence.

In the PMA LibGuides, the CSS has been customized to support optimal display across most devices and browsers.

Because of the two points listed above, one point must be emphasized:

Avoid using font choices, colors, and sizes in the Rich Text Editor

As often as you can, let the CSS do the work for you. Don't override the default choices unless it is for a specific purposes.

HTML and CSS Best Practices

Do:

  • Use Headings from the Paragraph Format option in your text blocks per best practices
    • These can be inserted using the Paragraph Format drop-down list

Libguides rich text editor paragraph format option

  • Use Font Awesome icons to add visual variety to your text, navigation, and other areas.
  • Break your text up into easily-digestible bits. Think about navigation in terms of pages, and boxes (headers) on pages.
  • Use special characters, block quotes, and other text options
    • Special characters can be inserted into guides using the "Omega" symbol:

Rich Text Editor Special Character insert

LibGuides rich text editor special character menu

Don't

  • Use the font choice and size to override the style sheet
    • You can remove formatting choices using the "Remove Format" tool in the rich text editor:

LibGuides Rich Text Editor with "Remove Format"

  • Choose font colors that are not in line with overall branding guidelines