What happens if we put raw text directly in the <ul> element?
Answer
Browsers are designed to be very lenient and highly error tolerant so in this case the text would display on the page. However, it would not be displayed as a list and this is not best practice as it defies the HTML5 specification.
To ensure that our HTML adheres to standards, we should run it through a validator.
UL => unordered list
OL => ordered list
DL => definition list
If we write LI by itself, the browser doesn’t know how to categorize it as a list, and it also doesn’t actually know it IS a list. The LI is akin to being a P, at that point. The category wrapper is a container with all the list items as child elements. The browser now knows what styles to give them by default such as, margin, padding, list-style-type (bullets, numbers, letters), etc.
<ul/> takes only list items, else it will be malformed. HTML is very forgiving and does not throw errors. It merely does its best to parse and render elements. That means a malformed block of markup may render in some form, though it may not match our expectations.
Ideally, a UL, OL, or MENU will have only LI as direct children. LI is a block level element equivalent to a DIV, though it has built in default style rules that would not be associated with a DIV. We can put anything we like inside an LI: paragraphs, forms, divs, blockquotes, or other list constructs, UL, OL, MENU.
Cool so the nesting of list is possible as well as adding other element is possible. Could the div or span element also be added to style each list separately? and can the element be used as well?
We could, for instance, wrap each H2 and OL in its own DIV and then style those divs separately. We can also use traversal to style each UL LI separately. The sky is the limit.
A design team will have a common goal and likely follow a common outline and structure for the sake of the project. A lot of modern web content is portable, meaning it can be removed and plugged in somewhere else. This is where sectioning comes into play. Think of sectioning as a shelf full of shoe boxes, or a shelf full of books. Apart from arbitrary rules there is no one way to order the boxes (or books) and removing one has no effect on the others, apart from leaving an empty space, which may not be evident.
A good document outline follows along that idea. Containerize content and make it independent but able to share common rules. Say we have an article on widgets that appears on a page with straw background and navy text color. We move it to a new page with smoke background and charcoal text color. In theory all we need to do is plug in the section and voila, it fits that page like it has always been there. That is the goal of portability. Don’t worry, this will all make sense as you progress.