{"id":3517,"date":"2024-12-11T11:53:30","date_gmt":"2024-12-11T16:53:30","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3517"},"modified":"2024-12-11T12:29:25","modified_gmt":"2024-12-11T17:29:25","slug":"lists","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/html-tips-and-accessibility\/lists\/","title":{"rendered":"Lists"},"content":{"rendered":"<p>There are three types of lists provided by HTML, and each serves a slightly different function. <strong>UL <\/strong>(unordered list) provides a list of items where the order is not important. <strong>OL<\/strong> (ordered list) provides a list of items where order <em>is <\/em>important. <strong>DL <\/strong>(definition list) provides a way to pair terms with definitions.<\/p>\n<h2>Unordered Lists<\/h2>\n<p>The most frequently used type of list is the unordered list &#8211; 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.<\/p>\n<p>Unordered lists should not be used to create large structured documents &#8211; heading tags are for document structure. Items in unordered lists should be very short. For example:<\/p>\n<p><strong>Technologies we use:<\/strong><\/p>\n<ul>\n<li><strong>HTML<\/strong>: This is the basic document format of the web.<\/li>\n<li><strong>CSS<\/strong>: This allows us to describe how a document should look.<\/li>\n<li><strong>JavaScript<\/strong>: This adds functionality to elements in the HTML document.<\/li>\n<\/ul>\n<h2>Ordered Lists<\/h2>\n<p>Ordered lists are the same as unordered lists except that &#8211; obviously &#8211; the content has an order to it. Ordered lists are good for sequential information or for ranking.<\/p>\n<ol>\n<li>Fill out the form.<\/li>\n<li>Mail the form to admissions.<\/li>\n<li>Complete the survey.<\/li>\n<\/ol>\n<p>Ordered lists can also use letters or roman numerals:<\/p>\n<ol>\n<li>Fill out the form.<\/li>\n<li>Mail the form to admissions.<\/li>\n<li>Complete the survey.<\/li>\n<\/ol>\n<h2>Definition Lists<\/h2>\n<p>Definition lists are rarely used but when you have a need for them they can be very helpful. They create a structure that pairs <strong>DT<\/strong> element (terms) with <strong>DD<\/strong> elements (definitions). For example:<\/p>\n<dl>\n<dt>Registrar&#8217;s Office<\/dt>\n<dd>Handles scheduling and class registration, as well as applications for graduation.<\/dd>\n<dt>Student Accounts<\/dt>\n<dd>Handles bill payment and financial aid disbursement.<\/dd>\n<dt>Academic Advising<\/dt>\n<dd>Helps students choose what classes to register for based on their current degree audit.<\/dd>\n<\/dl>\n<p>Definition lists are not included\u00a0within the WordPress or TerminalFour visual editor interfaces, so if you want to use one you&#8217;ll need to add the code manually.<\/p>\n<p>We&#8217;ve also defined a class &#8220;compact&#8221; 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.<\/p>\n<dl class=\"compact\">\n<dt>Registrar&#8217;s Office<\/dt>\n<dd>Handles scheduling and class registration, as well as applications for graduation.<\/dd>\n<dt>Student Accounts<\/dt>\n<dd>Handles bill payment and financial aid disbursement.<\/dd>\n<dt>Academic Advising<\/dt>\n<dd>Helps students choose what classes to register for based on their current degree audit.<\/dd>\n<\/dl>\n<h2>Link Lists<\/h2>\n<p>A <strong>link list<\/strong> is not a standard HTML component &#8211; but it&#8217;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 <strong>unordered list<\/strong> and then putting that inside a <strong>DIV <\/strong>with the <strong>class<\/strong> &#8220;link-list.&#8221;<\/p>\n<div class=\"link-list\">\n<ul>\n<li><a href=\"http:\/\/www.montclair.edu\/arts\/\">College of the Arts<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/cehs\">College of Education and Human Services<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/chss\">College of Humanities and Social Sciences<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/csam\">College of Science and Mathematics<\/a><\/li>\n<li><a href=\"http:\/\/business.montclair.edu\">Feliciano School of Business<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/music\">John J. Cali School of Music<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/nursing\/\">School of Nursing<\/a><\/li>\n<li><a href=\"https:\/\/www.montclair.edu\/school-of-communication-and-media\/\">School of Communication and Media<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/nursing\/\">School of Nursing<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/graduate\">The Graduate School<\/a><\/li>\n<li><a href=\"http:\/\/www.montclair.edu\/university-college\">University College<\/a><\/li>\n<\/ul>\n<\/div>\n<h2>Code Samples<\/h2>\n<h3>Unordered List<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&amp;lt;ul&amp;gt;\r\n&amp;lt;li&amp;gt;Item A&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;Item B&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;Item C&amp;lt;\/li&amp;gt;\r\n&amp;lt;\/ul&amp;gt;\r\n<\/pre>\n<h3>Ordered List<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&amp;lt;ol&amp;gt;\r\n&amp;lt;li&amp;gt;Fill out the form.&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;Mail the form to admissions.&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;Complete the survey.&amp;lt;\/li&amp;gt;\r\n&amp;lt;\/ol&amp;gt;\r\n<\/pre>\n<h3>Ordered list using uppercase letters<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n&amp;lt;ol style=&quot;list-style-type: upper-alpha&quot;&amp;gt;\r\n&amp;lt;li&amp;gt;Fill out the form.&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;Mail the form to admissions.&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;Complete the survey.&amp;lt;\/li&amp;gt;\r\n&amp;lt;\/ol&amp;gt;\r\n<\/pre>\n<h3>Definition List<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n&amp;lt;dl&amp;gt;\r\n&amp;lt;dt&amp;gt;Registrar's Office&amp;lt;\/dt&amp;gt;\r\n&amp;lt;dd&amp;gt;Handles scheduling and class registration, as well as applications for graduation.&amp;lt;\/dd&amp;gt;\r\n&amp;lt;dt&amp;gt;Student Accounts&amp;lt;\/dt&amp;gt;\r\n&amp;lt;dd&amp;gt;Handles bill payment and financial aid disbursement.&amp;lt;\/dd&amp;gt;\r\n&amp;lt;dt&amp;gt;Academic Advising&amp;lt;\/dt&amp;gt;\r\n&amp;lt;dd&amp;gt;Helps students choose what classes to register for based on their current degree audit.&amp;lt;\/dd&amp;gt;\r\n&amp;lt;\/dl&amp;gt;\r\n<\/pre>\n<h3>Compact Definition List<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&amp;lt;dl class=&quot;compact&quot;&amp;gt;\r\n&amp;lt;dt&amp;gt;Registrar's Office&amp;lt;\/dt&amp;gt;\r\n&amp;lt;dd&amp;gt;Handles scheduling and class registration, as well as applications for graduation.&amp;lt;\/dd&amp;gt;\r\n&amp;lt;dt&amp;gt;Student Accounts&amp;lt;\/dt&amp;gt;\r\n&amp;lt;dd&amp;gt;Handles bill payment and financial aid disbursement.&amp;lt;\/dd&amp;gt;\r\n&amp;lt;dt&amp;gt;Academic Advising&amp;lt;\/dt&amp;gt;\r\n&amp;lt;dd&amp;gt;Helps students choose what classes to register for based on their current degree audit.&amp;lt;\/dd&amp;gt;\r\n&amp;lt;\/dl&amp;gt;\r\n\r\n<\/pre>\n<h3>Link List<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&quot;link-list&quot;&amp;gt;\r\n&amp;lt;ul&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/arts\/&quot;&amp;gt;College of the Arts&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/cehs&quot;&amp;gt;College of Education and Human Services&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/chss&quot;&amp;gt;College of Humanities and Social Sciences&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/csam&quot;&amp;gt;College of Science and Mathematics&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/business.montclair.edu&quot;&amp;gt;Feliciano School of Business&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/music&quot;&amp;gt;John J. Cali School of Music&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;https:\/\/www.montclair.edu\/school-of-conservation\/&quot;&amp;gt;New Jersey School of Conservation&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;https:\/\/www.montclair.edu\/school-of-communication-and-media\/&quot;&amp;gt;School of Communication and Media&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/nursing\/&quot;&amp;gt;School of Nursing&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/graduate&quot;&amp;gt;The Graduate School&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;li&amp;gt;&amp;lt;a href=&quot;http:\/\/www.montclair.edu\/university-college&quot;&amp;gt;University College&amp;lt;\/a&amp;gt;&amp;lt;\/li&amp;gt;\r\n&amp;lt;\/ul&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":411,"featured_media":3785,"parent":3510,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3517","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3517"}],"version-history":[{"count":2,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3517\/revisions"}],"predecessor-version":[{"id":3732,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3517\/revisions\/3732"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3785"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}