Lists

There are three types of lists provided by HTML, and each serves a slightly different function. UL (unordered list) provides a list of items where the order is not important. OL (ordered list) provides a list of items where order is important. DL (definition list) provides a way to pair terms with definitions.

Unordered Lists

The most frequently used type of list is the unordered list – sometimes called a bulleted list. A bulleted list should be used for distinct items that are somehow correlated. On montclair.edu pages, each bullet in an unordered list is styled as a red dash.

Unordered lists should not be used to create large structured documents – heading tags are for document structure. Items in unordered lists should be very short. For example:

Technologies we use:

HTML: This is the basic document format of the web.
CSS: This allows us to describe how a document should look.
JavaScript: This adds functionality to elements in the HTML document.

Ordered Lists

Ordered lists are the same as unordered lists except that – obviously – the content has an order to it. Ordered lists are good for sequential information or for ranking.

Fill out the form.
Mail the form to admissions.
Complete the survey.

Ordered lists can also use letters or roman numerals:

Fill out the form.
Mail the form to admissions.
Complete the survey.

Definition Lists

Definition lists are rarely used but when you have a need for them they can be very helpful. They create a structure that pairs DT element (terms) with DD elements (definitions). For example:

Registrar’s Office: Handles scheduling and class registration, as well as applications for graduation.
Student Accounts: Handles bill payment and financial aid disbursement.
Academic Advising: Helps students choose what classes to register for based on their current degree audit.

Definition lists are not included within the WordPress or TerminalFour visual editor interfaces, so if you want to use one you’ll need to add the code manually.

We’ve also defined a class “compact” for definition lists that have relatively short terms. While these lists appear identical on mobile devices, the compact one will more effectively use the page width.

Registrar’s Office: Handles scheduling and class registration, as well as applications for graduation.
Student Accounts: Handles bill payment and financial aid disbursement.
Academic Advising: Helps students choose what classes to register for based on their current degree audit.

Link Lists

A link list is not a standard HTML component – but it’s a bit of additional HTML you can use on your page to compact a list of links into a smaller two-column format. You can create a link list by making a basic unordered list and then putting that inside a DIV with the class “link-list.”

Code Samples

Unordered List

&lt;ul&gt;
&lt;li&gt;Item A&lt;/li&gt;
&lt;li&gt;Item B&lt;/li&gt;
&lt;li&gt;Item C&lt;/li&gt;
&lt;/ul&gt;

Ordered List

&lt;ol&gt;
&lt;li&gt;Fill out the form.&lt;/li&gt;
&lt;li&gt;Mail the form to admissions.&lt;/li&gt;
&lt;li&gt;Complete the survey.&lt;/li&gt;
&lt;/ol&gt;

Ordered list using uppercase letters


&lt;ol style="list-style-type: upper-alpha"&gt;
&lt;li&gt;Fill out the form.&lt;/li&gt;
&lt;li&gt;Mail the form to admissions.&lt;/li&gt;
&lt;li&gt;Complete the survey.&lt;/li&gt;
&lt;/ol&gt;

Definition List


&lt;dl&gt;
&lt;dt&gt;Registrar's Office&lt;/dt&gt;
&lt;dd&gt;Handles scheduling and class registration, as well as applications for graduation.&lt;/dd&gt;
&lt;dt&gt;Student Accounts&lt;/dt&gt;
&lt;dd&gt;Handles bill payment and financial aid disbursement.&lt;/dd&gt;
&lt;dt&gt;Academic Advising&lt;/dt&gt;
&lt;dd&gt;Helps students choose what classes to register for based on their current degree audit.&lt;/dd&gt;
&lt;/dl&gt;

Compact Definition List

&lt;dl class="compact"&gt;
&lt;dt&gt;Registrar's Office&lt;/dt&gt;
&lt;dd&gt;Handles scheduling and class registration, as well as applications for graduation.&lt;/dd&gt;
&lt;dt&gt;Student Accounts&lt;/dt&gt;
&lt;dd&gt;Handles bill payment and financial aid disbursement.&lt;/dd&gt;
&lt;dt&gt;Academic Advising&lt;/dt&gt;
&lt;dd&gt;Helps students choose what classes to register for based on their current degree audit.&lt;/dd&gt;
&lt;/dl&gt;

Link List

&lt;div class="link-list"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/arts/"&gt;College of the Arts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/cehs"&gt;College of Education and Human Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/chss"&gt;College of Humanities and Social Sciences&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/csam"&gt;College of Science and Mathematics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://business.montclair.edu"&gt;Feliciano School of Business&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/music"&gt;John J. Cali School of Music&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.montclair.edu/school-of-conservation/"&gt;New Jersey School of Conservation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.montclair.edu/school-of-communication-and-media/"&gt;School of Communication and Media&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/nursing/"&gt;School of Nursing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/graduate"&gt;The Graduate School&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.montclair.edu/university-college"&gt;University College&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;