• Jump to →

• Creating Basic Lists
• Creating Advanced Lists

Using lists in web pages offers several benefits that enhance both the structure and usability of web-based content. Lists help group related items together, making the content easier to read and understand. This is especially useful for content like feature lists, steps in a process or point-form information.

Creating Basic Lists

Creating basic lists is very simple and similar to how you would do this in your word processor. You can use the list buttons on the WYSIWYG editor to your basic text either into a bulleted list or a numbered list. The numbered list has additional options to start the numbering at a specific number or reversing the number order. Indented number lists will follow a basic pattern for labelling indented values.

Creating Advanced lists

We have provided several other list styles that you may want to use. For each of these list styles, please start by creating a basic  bullet list and then apply the styles by selecting the list and choosing the desired style under the "Styles" drop down in the WYSIWYG editor.

Please note: The lists don't always display properly in the WYSIWYG editor, but they will display properly on your web page.

List with no Bullets

This is a basic bullet list, but the bullets don't show. This has all of the benefits of lists including enhanced accessibility, but with a simpler style. Choose: List with no Bullets

• Yellow Banana
• Red Apple
• Green Avocado
• Orange Orange
• Blue Berries

Horizontal List

This list style will display your list items horizontally and remove the bullets. This has all of the benefits of lists including enhanced accessibility. There is nothing separating the list items. Choose: Horizontal List

• Yellow Banana
• Red Apple
• Green Avocado
• Orange Orange
• Blue Berries

List Separated by Commas

This list style will display your list items horizontally and remove the bullets. Commas are added to separate the list items.This has all of the benefits of lists including enhanced accessibility.  Choose: List Separated by Commas

• Yellow Banana
• Red Apple
• Green Avocado
• Orange Orange
• Blue Berries

Horizontal Navigation List

This is a specialized list that will take linked content in the list and have it appear as a horizontal navigation with specific styled links. This can be used to link to areas lower on the page or a small menu for other content in your site section. Choose: Horizontal Navigation List

Note: If you would like to add something like this to every page in your site section, please contact the Webteam — there are much easier ways for us to do this!

• Yellow Banana
• Red Apple
• Green Avocado
• Orange Orange
• Blue Berries

Did you know…
Lists also enhance the accessibility of your content. Screen readers and other assistive technologies can identify lists and convey their structure to users with disabilities, improving the overall accessibility of the page. Well-structured lists also help users scan and digest information quickly, which is especially important for mobile users or those skimming content.