{"appState":{"pageLoadApiCallsStatus":true},"articleState":{"article":{"headers":{"creationTime":"2016-03-26T14:03:52+00:00","modifiedTime":"2016-03-26T14:03:52+00:00","timestamp":"2022-02-24T16:50:50+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Programming & Web Design","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33592"},"slug":"programming-web-design","categoryId":33592},{"name":"HTML5","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33601"},"slug":"html5","categoryId":33601}],"title":"How to Create Bulleted Lists in HTML5","strippedTitle":"how to create bulleted lists in html5","slug":"how-to-create-bulleted-lists-in-html5","canonicalUrl":"","seo":{"metaDescription":"","noIndex":0,"noFollow":0},"content":"<p>A <i>bulleted list</i> contains one or more items each prefaced by a <i>bullet </i>(often a big dot)<i>.</i> Use this kind of list on your web page if the items’ order isn’t necessary for understanding the information it presents.</p>\n<p>A bulleted list requires the following:</p>\n<ul class=\"level-one\">\n <li><p class=\"first-para\">The unordered list element (<span class=\"code\"><ul></span>) specifies a bulleted list.</p>\n </li>\n <li><p class=\"first-para\">A list item element (<span class=\"code\"><li></span>) marks each item in the list.</p>\n </li>\n <li><p class=\"first-para\">The closing tag for the unordered list element (<span class=\"code\"></ul></span>) indicates that the list has come to its end.</p>\n </li>\n</ul>\n<p>An <i>unordered list</i> (another name for bulleted list) with three items requires elements and content in the following order:</p>\n<ol class=\"level-one\">\n <li><p class=\"first-para\"><span class=\"code\"><ul></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"><li></span></p>\n </li>\n <li><p class=\"first-para\">Content for the first list item</p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></li></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"><li></span></p>\n </li>\n <li><p class=\"first-para\">Content for the second list item</p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></li></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"><li></span></p>\n </li>\n <li><p class=\"first-para\">Content for the third list item</p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></li></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></ul></span></p>\n </li>\n</ol>\n<p>The following markup formats a three-item list as a bulleted list:</p>\n<pre class=\"code\"><!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <title>Bulleted Lists</title>\n </head>\n <body>\n <h1>Things to do today</h1>\n <ul>\n <li>Feed cat</li>\n <li>Wash car</li>\n <li>Grocery shopping</li>\n </ul>\n </body>\n</html></pre>\n<p>This figure shows how a browser renders this with bullets.</p>\n<img src=\"https://www.dummies.com/wp-content/uploads/398566.image0.jpg\" width=\"466\" height=\"341\" alt=\"image0.jpg\"/>\n<p class=\"Tip\">Use CSS to exert more control over the formatting of your lists, including the ability to use your own graphics as bullet symbols.</p>","description":"<p>A <i>bulleted list</i> contains one or more items each prefaced by a <i>bullet </i>(often a big dot)<i>.</i> Use this kind of list on your web page if the items’ order isn’t necessary for understanding the information it presents.</p>\n<p>A bulleted list requires the following:</p>\n<ul class=\"level-one\">\n <li><p class=\"first-para\">The unordered list element (<span class=\"code\"><ul></span>) specifies a bulleted list.</p>\n </li>\n <li><p class=\"first-para\">A list item element (<span class=\"code\"><li></span>) marks each item in the list.</p>\n </li>\n <li><p class=\"first-para\">The closing tag for the unordered list element (<span class=\"code\"></ul></span>) indicates that the list has come to its end.</p>\n </li>\n</ul>\n<p>An <i>unordered list</i> (another name for bulleted list) with three items requires elements and content in the following order:</p>\n<ol class=\"level-one\">\n <li><p class=\"first-para\"><span class=\"code\"><ul></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"><li></span></p>\n </li>\n <li><p class=\"first-para\">Content for the first list item</p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></li></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"><li></span></p>\n </li>\n <li><p class=\"first-para\">Content for the second list item</p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></li></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"><li></span></p>\n </li>\n <li><p class=\"first-para\">Content for the third list item</p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></li></span></p>\n </li>\n <li><p class=\"first-para\"><span class=\"code\"></ul></span></p>\n </li>\n</ol>\n<p>The following markup formats a three-item list as a bulleted list:</p>\n<pre class=\"code\"><!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <title>Bulleted Lists</title>\n </head>\n <body>\n <h1>Things to do today</h1>\n <ul>\n <li>Feed cat</li>\n <li>Wash car</li>\n <li>Grocery shopping</li>\n </ul>\n </body>\n</html></pre>\n<p>This figure shows how a browser renders this with bullets.</p>\n<img src=\"https://www.dummies.com/wp-content/uploads/398566.image0.jpg\" width=\"466\" height=\"341\" alt=\"image0.jpg\"/>\n<p class=\"Tip\">Use CSS to exert more control over the formatting of your lists, including the ability to use your own graphics as bullet symbols.</p>","blurb":"","authors":[{"authorId":9135,"name":"Ed Tittel","slug":"ed-tittel","description":"Ed Tittel is a 30-year veteran of the technology industry, with more than 140 computing books to his credit, including the bestselling HTML For Dummies.","_links":{"self":"https://dummies-api.dummies.com/v2/authors/9135"}},{"authorId":9070,"name":"Chris Minnick","slug":"chris-minnick","description":"Chris Minnick is an author, trainer, and web developer who has worked on web and mobile projects for both small and major businesses. Learn more at watzthis.com.","_links":{"self":"https://dummies-api.dummies.com/v2/authors/9070"}}],"primaryCategoryTaxonomy":{"categoryId":33601,"title":"HTML5","slug":"html5","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33601"}},"secondaryCategoryTaxonomy":{"categoryId":34324,"title":"CSS3","slug":"css3","_links":{"self":"https://dummies-api.dummies.com/v2/categories/34324"}},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[],"relatedArticles":{"fromBook":[{"articleId":207867,"title":"Beginning HTML5 & CSS3 For Dummies Cheat Sheet","slug":"beginning-html5-css3-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/207867"}},{"articleId":204301,"title":"10 Stellar Web Resources for HTML5 and CSS3","slug":"10-stellar-web-resources-for-html5-and-css3","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/204301"}},{"articleId":163221,"title":"CSS Property Reference","slug":"css-property-reference","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/163221"}},{"articleId":163220,"title":"Know Your Elements!","slug":"know-your-elements","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/163220"}},{"articleId":163158,"title":"Named Colors and Hex Values in HTML","slug":"named-colors-and-hex-values-in-html","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/163158"}}],"fromCategory":[{"articleId":207867,"title":"Beginning HTML5 & CSS3 For Dummies Cheat Sheet","slug":"beginning-html5-css3-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/207867"}},{"articleId":207816,"title":"HTML5 & CSS3 For Dummies Cheat Sheet","slug":"html5-css3-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/207816"}},{"articleId":207788,"title":"HTML5 and CSS3 All-in-One For Dummies Cheat Sheet","slug":"html5-and-css3-all-in-one-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/207788"}},{"articleId":204537,"title":"How to Create a New JavaScript File in Komodo Edit","slug":"how-to-create-a-new-javascript-file-in-komodo-edit","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/204537"}},{"articleId":204532,"title":"How to Create Cascading Style Sheets (CSS) Simply and Easily","slug":"how-to-create-cascading-style-sheets-css-simply-and-easily","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/204532"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281635,"slug":"beginning-html5-and-css3-for-dummies","isbn":"9781118657201","categoryList":["technology","programming-web-design","html5"],"amazon":{"default":"https://www.amazon.com/gp/product/1118657209/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"https://www.amazon.ca/gp/product/1118657209/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"http://www.tkqlhce.com/click-9208661-13710633?url=https://www.chapters.indigo.ca/en-ca/books/product/1118657209-item.html&cjsku=978111945484","gb":"https://www.amazon.co.uk/gp/product/1118657209/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"https://www.amazon.de/gp/product/1118657209/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"https://www.dummies.com/wp-content/uploads/beginning-html5-and-css3-for-dummies-cover-9781118657201-205x255.jpg","width":205,"height":255},"title":"Beginning HTML5 and CSS3 For Dummies","testBankPinActivationLink":"","bookOutOfPrint":false,"authorsInfo":"\n <p><b data-author-id=\"9135\">Ed Tittel</b> is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling <i>HTML For Dummies</i>. </p>\n<p><b data-author-id=\"9070\">Chris Minnick</b> runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including <i>WebKit For Dummies</i>. </p>","authors":[{"authorId":9135,"name":"Ed Tittel","slug":"ed-tittel","description":"Ed Tittel is a 30-year veteran of the technology industry, with more than 140 computing books to his credit, including the bestselling HTML For Dummies.","_links":{"self":"https://dummies-api.dummies.com/v2/authors/9135"}},{"authorId":9070,"name":"Chris Minnick","slug":"chris-minnick","description":"Chris Minnick is an author, trainer, and web developer who has worked on web and mobile projects for both small and major businesses. Learn more at watzthis.com.","_links":{"self":"https://dummies-api.dummies.com/v2/authors/9070"}}],"_links":{"self":"https://dummies-api.dummies.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{"key":"cat","values":["technology","programming-web-design","html5"]},{"key":"isbn","values":["9781118657201"]}]\" id=\"du-slot-6217b76a823ac\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{"key":"cat","values":["technology","programming-web-design","html5"]},{"key":"isbn","values":["9781118657201"]}]\" id=\"du-slot-6217b76a82d5f\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":161122},"articleLoadedStatus":"success"},"listState":{"list":{},"objectTitle":"","status":"initial","pageType":null,"objectId":null,"page":1,"sortField":"time","sortOrder":1,"categoriesIds":[],"articleTypes":[],"filterData":{},"filterDataLoadedStatus":"initial","pageSize":10},"adsState":{"pageScripts":{"headers":{"timestamp":"2022-05-16T12:59:10+00:00"},"adsId":0,"data":{"scripts":[{"pages":["all"],"location":"header","script":"\r\n<script src=\"https://cdn.optimizely.com/js/10563184655.js\"></script>","enabled":false},{"pages":["all"],"location":"header","script":"\r\n<script>var _comscore = _comscore || [];_comscore.push({ c1: \"2\", c2: \"15097263\" });(function() {var s = document.createElement(\"script\"), el = document.getElementsByTagName(\"script\")[0]; s.async = true;s.src = (document.location.protocol == \"https:\" ? \"https://sb\" : \"http://b\") + \".scorecardresearch.com/beacon.js\";el.parentNode.insertBefore(s, el);})();</script><noscript><img src=\"https://sb.scorecardresearch.com/p?c1=2&c2=15097263&cv=2.0&cj=1\" /></noscript>\r\n","enabled":true},{"pages":["all"],"location":"footer","script":"\r\n<script type='text/javascript'>\r\n(function(){var g=function(e,h,f,g){\r\nthis.get=function(a){for(var a=a+\"=\",c=document.cookie.split(\";\"),b=0,e=c.length;b<e;b++){for(var d=c[b];\" \"==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};\r\nthis.set=function(a,c){var b=\"\",b=new Date;b.setTime(b.getTime()+6048E5);b=\"; expires=\"+b.toGMTString();document.cookie=a+\"=\"+c+b+\"; path=/; \"};\r\nthis.check=function(){var a=this.get(f);if(a)a=a.split(\":\");else if(100!=e)\"v\"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(\":\"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case \"v\":return!1;case \"r\":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(\":\")),!c}return!0};\r\nthis.go=function(){if(this.check()){var a=document.createElement(\"script\");a.type=\"text/javascript\";a.src=g;document.body&&document.body.appendChild(a)}};\r\nthis.start=function(){var t=this;\"complete\"!==document.readyState?window.addEventListener?window.addEventListener(\"load\",function(){t.go()},!1):window.attachEvent&&window.attachEvent(\"onload\",function(){t.go()}):t.go()};};\r\ntry{(new g(100,\"r\",\"QSI_S_ZN_5o5yqpvMVjgDOuN\",\"https://zn5o5yqpvmvjgdoun-wiley.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_5o5yqpvMVjgDOuN\")).start()}catch(i){}})();\r\n</script><div id='ZN_5o5yqpvMVjgDOuN'></div>\r\n","enabled":false},{"pages":["all"],"location":"header","script":"\r\n<script>\r\n (function(h,o,t,j,a,r){\r\n h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\r\n h._hjSettings={hjid:257151,hjsv:6};\r\n a=o.getElementsByTagName('head')[0];\r\n r=o.createElement('script');r.async=1;\r\n r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\r\n a.appendChild(r);\r\n })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\r\n</script>","enabled":false},{"pages":["article"],"location":"header","script":" <script src=\"//get.s-onetag.com/bffe21a1-6bb8-4928-9449-7beadb468dae/tag.min.js\" async defer></script>","enabled":true},{"pages":["homepage"],"location":"header","script":"<meta name=\"facebook-domain-verification\" content=\"irk8y0irxf718trg3uwwuexg6xpva0\" />","enabled":true},{"pages":["homepage","article","category","search"],"location":"footer","script":"\r\n<noscript>\r\n<img height=\"1\" width=\"1\" src=\"https://www.facebook.com/tr?id=256338321977984&ev=PageView&noscript=1\"/>\r\n</noscript>\r\n","enabled":true}]}},"pageScriptsLoadedStatus":"success"},"searchState":{"searchList":[],"searchStatus":"initial","relatedArticlesList":{"term":"161122","count":5,"total":354,"topCategory":0,"items":[{"objectType":"article","id":161122,"data":{"title":"How to Create Bulleted Lists in HTML5","slug":"how-to-create-bulleted-lists-in-html5","update_time":"2016-03-26T14:03:52+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"HTML5","slug":"html5","categoryId":33601}],"description":"A bulleted list contains one or more items each prefaced by a bullet (often a big dot). Use this kind of list on your web page if the items’ order isn’t necessary for understanding the information it presents.\nA bulleted list requires the following:\n\n The unordered list element () specifies a bulleted list.\n \n A list item element () marks each item in the list.\n \n The closing tag for the unordered list element () indicates that the list has come to its end.\n \n\nAn unordered list (another name for bulleted list) with three items requires elements and content in the following order:\n\n \n \n \n \n Content for the first list item\n \n \n \n \n \n Content for the second list item\n \n \n \n \n \n Content for the third list item\n \n \n \n \n \n\nThe following markup formats a three-item list as a bulleted list:\n\n\n \n \n Bulleted Lists\n \n \n Things to do today\n \n Feed cat\n Wash car\n Grocery shopping\n \n \n\nThis figure shows how a browser renders this with bullets.\n\nUse CSS to exert more control over the formatting of your lists, including the ability to use your own graphics as bullet symbols.","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null,"categoryList":["technology","programming-web-design","html5"],"title":"How to Create Bulleted Lists in HTML5","slug":"how-to-create-bulleted-lists-in-html5","articleId":161122},{"objectType":"article","id":161042,"data":{"title":"How to Create Numbered Lists in HTML5","slug":"how-to-create-numbered-lists-in-html5","update_time":"2016-03-26T14:02:52+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"HTML5","slug":"html5","categoryId":33601}],"description":"Lists are powerful tools to group similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links. A numbered list consists of at least two items, each prefaced by a number. Use a numbered list when the order or priority of items is important.\nYou use two kinds of elements for a numbered list:\n\n The ordered list element () specifies a numbered list.\n \n List item elements () mark each item in the list.\n \n\nA numbered list with three items requires elements and content in the following order:\n\n \n \n \n \n Content for the first list item\n \n \n \n \n \n Content for the second list item\n \n \n \n \n \n Content for the third list item\n \n \n \n \n \n\nThe following markup defines a three-item numbered list:\n\n\n \n \n Numbered Lists\n \n \n Things to do today\n \n Feed cat\n Wash car\n Grocery shopping\n \n \n\nThis figure shows how a browser renders this markup. You don’t have to specify a number for each item in a list; the browser identifies list items from the markup and adds numbers, including a period after each one by default.\n\nIf you swap the first two items in the list, they’re still numbered in order when the page appears, as shown in this figure.\n\n \n Wash car\n Feed cat\n Grocery shopping\n ","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null,"categoryList":["technology","programming-web-design","html5"],"title":"How to Create Numbered Lists in HTML5","slug":"how-to-create-numbered-lists-in-html5","articleId":161042},{"objectType":"article","id":140309,"data":{"title":"How to Make a Bulleted List in Word 2016","slug":"how-to-make-a-bulleted-list-in-word-2016","update_time":"2016-03-26T07:22:11+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Software","slug":"software","categoryId":33618},{"name":"Microsoft Products","slug":"microsoft-products","categoryId":33642},{"name":"Word","slug":"word","categoryId":33651}],"description":"Whenever you have more than two items to describe in your document, consider using one of Word 2016's automatic list-formatting commands to make a bulleted list or a numbered list. In typesetting, a bullet is a graphical element, such as a ball or a dot, which highlights items in a list.\nThe word bullet comes from the French word boulette, which has more to do with food than with round pieces of lead quickly exiting a firearm, like this:\n\n Bang!\n \n Bang!\n \n Bang!\n \n\nTo apply bullets to your text, highlight the paragraphs you want to shoot and click the Bullets button, shown here. Instantly, your text is not only formatted with bullets but also indented and made all neat and tidy.\n\n\n To choose a different bullet style, click the menu triangle next to the Bullets command. Select a new bullet graphic from the list, or use the Define New Bullet command to concoct a unique bullet style.\n \n Bullets are a paragraph format. As such, the bullets stick to the paragraphs you type until you remove that format. To do so, click the Bullet command button again and the bullets are removed from the paragraph format.\n \n","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null,"categoryList":["technology","software","microsoft-products","word"],"title":"How to Make a Bulleted List in Word 2016","slug":"how-to-make-a-bulleted-list-in-word-2016","articleId":140309},{"objectType":"article","id":161119,"data":{"title":"How to Create Nested Lists in HTML5","slug":"how-to-create-nested-lists-in-html5","update_time":"2016-03-26T14:03:49+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"HTML5","slug":"html5","categoryId":33601}],"description":"Just about anything fits in a list, from sets of instructions to collections of links. You can create subcategories by nesting lists within lists. Some common uses for nested lists include the following:\n\n Site maps and other navigation tools\n \n Tables of content for online books and papers\n \n Outlines\n \n\nYou can combine any of the three kinds of lists to create nested lists, such as a multilevel table of contents or an outline that mixes numbered headings with bulleted list items as the lowest outline level.\nThe following example starts with a numbered list that defines a list of things to do for the day and uses three bulleted lists to break down those items further into specific tasks:\n\n\n \n \n Nested Lists\n \n \n Things to do today\n \n Feed cat\n \n Rinse bowl\n Open cat food\n Mix dry and wet food in bowl\n Deliver on a silver platter to Pixel\n \n Wash car\n \n Vacuum interior\n Wash exterior\n Wax exterior\n \n Grocery shopping\n \n Plan meals\n Clean out fridge\n Make list\n Go to store\n \n \n \n\nAll nested lists follow the same markup pattern:\n\n Each list item in the top-level ordered list is followed by a complete second-level list.\n \n The second-level lists sit inside the top-level list, not in the list items.\n \n\nThis figure shows how a browser reflects this nesting in its display.\n\nWhile you build nested lists, watch opening and closing tags carefully. “Close first what you opened last” is an important axiom. If you don’t open and close tags properly, lists might not use consistent indents or numbers, or text might be indented incorrectly because a list somewhere was never properly closed.","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null,"categoryList":["technology","programming-web-design","html5"],"title":"How to Create Nested Lists in HTML5","slug":"how-to-create-nested-lists-in-html5","articleId":161119},{"objectType":"article","id":193063,"data":{"title":"How to Use HTML Lists on Your Web Page","slug":"how-to-use-html-lists-on-your-web-page","update_time":"2016-03-26T21:27:06+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"HTML","slug":"html","categoryId":33600}],"description":"Using HTML lists is a great way to present information to readers on your Web pages. Lists make information on your Web page easy to parse. Here are some other reasons to use lists on your Web pages:\n\n Lists are interesting to look at: Web pros are always telling people to use lots of white space to vary the appearance of their pages so they’re not just featureless blobs of text. Lists do this; they break up text.\n \n Lists are easy to scan: People are more likely to scan text on the Web than to read it carefully. \n \n Lists make the writer get to the point: When you write a list, you may end up editing a page of boring, monotonous text down to three or four points in a bulleted list, which greatly benefits your readers.\n \n\nHTML and Web-page editing programs based on HTML (such as CoffeeCup) offer three kinds of lists, but only two are used much:\n\n Bulleted lists: Bulleted lists are by far the most widely used kind of list on the Web. Bulleted lists are flexible and fun, and easy to read. You start a bulleted list with the tag, which stands for unordered list. You end it with the tag. Each list item is preceded with , which stands for list item.\nList items don’t have to have an ending tag, though you can add one (it’s >). After your text, the browser expects to see either another tag, for the next list item, or the tag to end the list.\nYou can convert many long blocks of text into a bulleted list and make the text shorter, easier to read, and more interesting. If you have to move existing text to the Web, consider converting parts of it to bulleted lists as a quick way to make it more Web friendly.\n \n Numbered lists: Numbered lists are very useful, but are found much less often on the Web. Numbered lists begin with for ordered list, end with , and, like bulleted lists, use the tag to mark the beginning of each list item.\nAny time you have a list that has an order of importance, or a sequence in time make it a numbered list. \n \n Definition lists: These lists give a term and then a definition for the term. They’re rarely used. A definition list starts with and ends with . Each term is preceded by , for definition term, and each definition is preceded by , for definition data. \nUse definition lists where you can, or use bold text and bulleted or numbered lists to create your own definition-type list.\n \n Lists within lists: You can insert or nest one list inside another. The nested list can be the same kind of list, or a different kind, than the list that contains it.\nIn the limited view offered on most users’ screens, users have a hard time keeping track of where they are in the overall list if you start throwing sublists at them as well. \n \n","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null,"categoryList":["technology","programming-web-design","html"],"title":"How to Use HTML Lists on Your Web Page","slug":"how-to-use-html-lists-on-your-web-page","articleId":193063}]},"relatedArticlesStatus":"success"},"routeState":{"name":"Article3","path":"/article/technology/programming-web-design/html5/how-to-create-bulleted-lists-in-html5-161122/","hash":"","query":{},"params":{"category1":"technology","category2":"programming-web-design","category3":"html5","article":"how-to-create-bulleted-lists-in-html5-161122"},"fullPath":"/article/technology/programming-web-design/html5/how-to-create-bulleted-lists-in-html5-161122/","meta":{"routeType":"article","breadcrumbInfo":{"suffix":"Articles","baseRoute":"/category/articles"},"prerenderWithAsyncData":true},"from":{"name":null,"path":"/","hash":"","query":{},"params":{},"fullPath":"/","meta":{}}},"dropsState":{"submitEmailResponse":false,"status":"initial"},"sfmcState":{"newsletterSignupStatus":"initial"}}

How to Create Bulleted Lists in HTML5

By: Ed Tittel and Chris Minnick and

Updated: 03-26-2016

From The Book: Beginning HTML5 and CSS3 For Dummies

Beginning HTML5 and CSS3 For Dummies

Explore Book Buy On Amazon

A bulleted list contains one or more items each prefaced by a bullet (often a big dot). Use this kind of list on your web page if the items’ order isn’t necessary for understanding the information it presents.

A bulleted list requires the following:

The unordered list element (
- A list item element (
- ) marks each item in the list.
- The closing tag for the unordered list element (
) indicates that the list has come to its end.

An unordered list (another name for bulleted list) with three items requires elements and content in the following order:

- Content for the first list item
- Content for the second list item
- Content for the third list item

The following markup formats a three-item list as a bulleted list:

  
    
    Bulleted Lists
  
  
    Things to do today
    
      Feed cat
      Wash car
      Grocery shopping

This figure shows how a browser renders this with bullets.

Use CSS to exert more control over the formatting of your lists, including the ability to use your own graphics as bullet symbols.

About This Article

This article is from the book:

Beginning HTML5 and CSS3 For Dummies ,

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category:

HTML5 ,