What happens if we put raw text directly in the <ul> element?

Question

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.

33 Likes

Thank U ! Proceeding the course on CODEACADEMY made a lot of thoughts obsolete. Stil learning and loving it ! … Or is this ‘off’ tapioca ?

6 Likes

Question! Why do we have to add < UL > in front of < li > when the HTML will show the lists regardless?

List have three categories…

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.

40 Likes

What is the difference then between an unordered list and an ordered list?

2 Likes

Unordered lists have no particular order, and by default will have bullet characters,

  • bullet point

Ordered lists do have order, so are numbered by default.

  1. numbered point

Nested lists have some built in behavior, as well.

  • bullet point
    • bullet point
      • bullet point
        • bullet point
  1. numbered point
    1. numbered point
      1. numbered point
        1. numbered point

The documentation will describe all the different forms of numbering, lettering, etc.

lists html mdn - Google Search

16 Likes

Thanks so much. I understand now.

1 Like

can we use other HTML elements in < ul > or < li > tags?

1 Like

<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.

Note the nested list below:

<ul>
  <li>
    <h2>Ordered list one</h2>
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>
    <h2>Ordered list two</h2>
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
</ul>

Notice the OL is inside the LI?

6 Likes

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.

4 Likes

its awesome how

creates power points automatically for your list…

1 Like