For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don’t care solely about the presentation of the site understand your content better.
the nav element and the list provide different semantical information: The nav element communicates that we’re dealing with a major navigation block The list communicates that the links inside this navigation block form a list of items At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose. So yes, having a list … Read more
If you need the functionality to start an ordered list (OL) at a specific point, you’ll have to specify your doctype as HTML 5; which is: <!doctype html> With that doctype, it is valid to set a start attribute on an ordered list. Such as: <ol start=”6″> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol>
As Felipe Alsacreations has already said, the first option is fine. If you want to ensure that nothing below the list is interpreted as belonging to the heading, that’s exactly what the HTML5 sectioning content elements are for. So, for instance you could do <h2>About Fruits</h2> <section> <h3>Fruits I Like:</h3> <ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul> … Read more
$(“ul”).empty() works fine. Is there some other error? $(‘input’).click(function() { $(‘ul’).empty() }); <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <ul> <li>test</li> <li>test</li> </ul> <input type=”button” value=”click me” /> http://jsfiddle.net/infernalbadger/D5ss8/
TL;DR: an <li> can contain any element that is valid in <body>. In the HTML 4.01 spec for lists you’ll find the relevant extract of the DTD: <!ELEMENT LI – O (%flow;)* — list item –> This specifies that an <li> may contain flow content, which is the collection of all block and inline elements. … Read more
The CSS solution is: http://www.w3.org/TR/css3-multicol/ The browser support is exactly what you’d expect.. It works “everywhere” except Internet Explorer 9 or older: http://caniuse.com/multicolumn ul { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; } See: http://jsfiddle.net/pdExf/ If IE support is required, you’ll have to use JavaScript, for example: http://welcome.totheinter.net/columnizer-jquery-plugin/ Another solution … Read more
Yes it is valid according to xhtml1-strict.dtd. The following XHTML passes the validation: <?xml version=”1.0″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Test</title> </head> <body> <ul> <li><div>test</div></li> </ul> </body> </html>
You can use margin. See the example: http://jsfiddle.net/LthgY/ li{ margin: 10px 0; }
Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item. Using a combination of background and padding styles can create something that looks similar e.g. li { background: url(images/bullet.gif) no-repeat left top; /* <– change `left` & `top` too for extra control … Read more