HTML Lists

In modern web design lists are used to group related pieces of information so they are clearly associated with each other and easy to read. Lists are considered workhorse elements as they are frequently used for navigation as well as general content.

In composition, a list is a series of images, details, or facts and may be referred to as a series, a catalog, or an inventory. Lists are often used in works of fiction and creative nonfiction to evoke a sense of place or character and are commonly used in business writing and technical writing to convey factual information succinctly.

 

In modern web design lists are used to group related pieces of information so they are clearly associated with each other and easy to read. Lists are considered workhorse elements as they are frequently used for navigation as well as general content.

 

Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles. Finally, semantically correct lists help visitors read your web site, and they simplify maintenance when your pages need to be updated.

 

List Types

There are three common list styles in HTML.

 

  • unordered list — used to group a set of related items in no particular order
  • ordered list — used to group a set of related items in a specific order
  • description list — used to display name/value pairs such as terms and definitions

 

Each list type has a specific purpose and meaning in a web page. Unordered and ordered lists can be created from the TinyMCE (   ) unordered or (   ) ordered dropdown menu. Description lists and additional styling options will be covered later in this post. 

 

Unordered List

Unordered (bulleted) lists are used when a set of items can be placed in any order.

  • Item 3
  • Item 2
    • Sub  item 1
      • Part a
    • Sub item 2
  • Item 1

 

Ordered List

Ordered (numbered) lists are used to display a list of items that should be in a specific order.

  1. Item
  2. Item
    1. Sub item
      1. Part
    2. Sub item
  3. Item

 

Mix List

If the circumstance warrants, list styles can be mixed.

  1. Item
  2. Item
    • Sub item 1
    • Sub item 2
  3. Item 

 

Other List Styles

Description lists and lists which use font awesome icons need a little tweaking which can be easily handled with a snippet.

 

Description List

A description list is an unordered list with the bullets removed. The following demonstration is a partial list of excerpts from this site.

 

  • Start Here – The goal of the Xidipity WordPress theme is to blend a tasteful design with an appropriate balance of flexibility and ease of use. Xidipity uses advanced web technologies to ensure…
  • Font Awesome Icons – The primary reason for using icons is they share a common visual language which effectively bridges language gaps. They’re instantaneously recognizable and remove open interpretation. This makes them perfect for…
  • Image Slider – In those circumstances where the need arises to present a strong visual experience but a video is too much, a visual slider is the answer. The Xidipity solution is quick…

 

Snippet

<ul class="style-basic dbl-spaced">
  <li>Description 1</li>
  <li>Description 2</li>
  <li>Description 3</li>
</ul>

 

Design Notes

The secret to this design is adding the “style-basic” and “dbl-spaced” classes to the HTML unordered list “ul” element. The style-basic class removes the bullets and the dbl-spaced class adds addition spacing between the elements. I find adding the additional space useful if the items contain multiple sentences.

 

Use Case

In the circumstance when the above choices will not meet your needs, there is the font awesome list. Simply stated a font awesome list is an unordered list with the bullets replaced with font awesome icons.

 

Let’s create a 2017 best movie Oscar Winners list to demonstrate how this works.

 

  1. Highlight the snippet code
  2. Copy contents to clipboard
  3. Open Sandbox editor
  4. Paste clipboard into sandbox
  5. Highlight and copy “<li>Description 3</li>” to clipboard
  6. Paste it until there is a total of nine (screenshot)
  7. Replace description with the corresponding movie titles (screenshot)
  8. In a new tab or window goto font awesome star outline page (link)
  9. Highlight and copy font awesome icon code to clipboard
  10. Return to sandbox editor and paste icon code before titles 1-8
  11. In a new tab or window goto font awesome star page (link)
  12. Return to sandbox editor and paste icon code before title 9 (screenshot)
  13. Finalize design by adding color and spacing (screenshot)
  14. Highlight and copy all of the sandbox content to clipboard
  15. GoTo the content where the list will be placed
  16. Place cursor at the correct position
  17. Click the editor (Insert )menu dropdown
  18. Select “ Media”
  19. Select the “Embed” tab
  20. Paste clipboard content into the text box
  21. Click the “OK” button (result below)
It is suggested the Sandbox editor be opened in a new tab or window as content is not saved if the tab or window is closed.

 

2017 Best movie Oscar Winners
  • Arrival
  • Fences
  • Hacksaw Ridge
  • Hell or High Water
  • Hidden Figures
  • La La Land
  • Lion
  • Manchester by the Sea
  • Moonlight

 

Leave a Reply

Your email address will not be published. Required fields are marked *