HTML Lists
HTML lists are used to present information in a structured and easy-to-read format. There are three main types of lists in HTML: unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>).
In Sitefinity
Within the Sitefinity Content Management System we’ve adopted a consistent use of the same fonts, sizing, color and formatting options so as users are building the website content, there is a cohesive, recognizable brand-standard.
Every content module is carefully crafted to support and reflect these styles.
The Basics
HTML lists are crucial for organizing content on text-heavy websites. Their benefits include:
- Semantic HTML: Lists provide meaningful structure to your content, improving both accessibility and SEO.
- Consistency: Consistent use of lists throughout your website helps users understand and navigate the content.
- Accessibility: Properly marked-up lists can be easily navigated by screen readers, enhancing the experience for visually impaired users.
Each type of list works for specific use cases:
Ordered List
Use Case: When the order of items does not matter.
- Examples:
- Lists of items in a shopping list.
- Features of a product.
- Bullet points in a presentation.
- Ordered list item 1
- Ordered list item 2
- Child ordered list item 1
- Child ordered list item 2
- Ordered list item 3
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2
<ol>
<li>Child ordered list item 1</li>
<li>Child ordered list item 2</li>
</ol>
</li>
<li>Ordered list item 3</li>
</ol>
Unordered Lists
Use Case: When the order of items does not matter.
- Examples:
- Lists of items in a shopping list.
- Features of a product.
- Bullet points in a presentation.
List Class: no bullet
Default- Unordered list item 1
- Unordered list item 2
- Child unordered list item 1
- Child unordered list item 2
- Unordered list item 3
<ul>
<li>Ordered list item 1</li>
<li>Ordered list item 2
<ul>
<li>Child ordered list item 1</li>
<li>Child ordered list item 2</li>
</ul>
</li>
<li>Ordered list item 3</li>
</ul>
List Class: no bullet
CSS Classes:list
- List item 1
- List item 2
- List item 3
<ul class="list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Numbered List
CSS Classes:list list-numbered
- Numbered list item 1
- Numbered list item 2
- Numbered list item 3
<ul class="list list-numbered">
<li>Numbered list item 1</li>
<li>Numbered list item 2</li>
<li>Numbered list item 3</li>
</ul>
Bullet List
CSS Classes:list list-bullet
- Bullet list item 1
- Bullet list item 2
- Bullet list item 3
<ul class="list list-bullet">
<li>Bullet list item 1</li>
<li>Bullet list item 2</li>
<li>Bullet list item 3</li>
</ul>
List Divider
CSS Classes:list list-divider
- List item 1
- List item 2
- List item 3
<ul class="list list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Striped List
CSS Classes:list list-striped
- List item 1
- List item 2
- List item 3
<ul class="list list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Large List
CSS Classes:list list-large
- List item 1
- List item 2
- List item 3
<ul class="list list-large">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Small List
CSS Classes:list list-small
- List item 1
- List item 2
- List item 3
<ul class="list list-small">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Description List
Use Case: When you want to list terms and their corresponding definitions or descriptions.
- Examples:
- Glossaries.
- FAQs where each question is followed by its answer.
- Lists of terms and explanations in documentation.
Description List
Default- Description lists
- A description list defines terms and their corresponding descriptions.
- This is a term
- This is a description.
- This is a term
- This is a description.
<dl>
<dt>Description lists</dt>
<dd>A description list defines terms and their corresponding descriptions.</dd>
<dt>This is a term</dt>
<dd>This is a description.</dd>
<dt>This is a term</dt>
<dd>This is a description.</dd>
</dl>
Description List: Data Right
CSS Classes:list-inline dt-right
- Description lists
- A description list defines terms and their corresponding descriptions.
- This is a term
- This is a description.
- This is a term
- This is a description.
<dl class="list-inline dt-right">
<dt>Description lists</dt>
<dd>A description list defines terms and their corresponding descriptions.</dd>
<dt>This is a term</dt>
<dd>This is a description.</dd>
<dt>This is a term</dt>
<dd>This is a description.</dd>
</dl>
Sitefinity Modules
Content modules create collections of content that can be displayed on web pages and in templates. The following modules allow users to manipulate the typography on the websites through either the WYSIWYG editor, writing HTML or applying pre-written classes to the widgets or content items: Content Blocks, Lists, Blogs and Events modules. Learn more about adding content and classes to each of these modules by clicking on the provided links.
The WYSIWYG editor helps keep websites in-brand by allowing users to add html tags and classes to text without needing to edit the HTML by using the formatting options in the dropdown. Learn how to use the WYSIWYG editor.
HTML & pre-written classes
Manipulating the pre-written styles requires a solid knowledge of HTML and CSS and is discouraged unless you have spoken with a member of the web branding team. The fonts are to never be overridden with different fronts, and any changes made must pass AAA compliance for web accessibility.
Custom work can be applied to any content type which provides a WYSIWYG editor or has a “more options” area where a custom class can be added and has a display option of full HTML given the changes are not conflicting with other work on the page.