What happens if I directly add the `<li>` without adding the `<ul>`?

What happens if I directly add the li without adding the ul

I noticed that creating a list using “li” tags but without the “ul” tag still results in a listed format. But I also found that adding the “ul” tag results in the list becoming indented, while removing it causes the list to appear flush left. So is the function of the “ul” tag more a visual organizer, like “div”, or a formatting tool? Or both? (If someone could also explain how to format a comment so the tags appear properly, I would appreciate it! Can’t seem to figure that out).

The main purpose in using the designated containers is for validity and structure. LI is essentially a DIV with the same ability to contain other block level elements, including tables. We do not expect to see the element outside of a specified container. They have an intended use, with organization being a possible consideration, but not formatting.

HTML is not a presentational language. It is a structural, declarative language aimed at giving meaning to textual content and other media We never choose an element for how it will appear, visually, but for where it appears in the document outline.

```html
Code here
```

Browsers are very good these days at filling in missing bits in order to parse something that can be rendered. When <li> appears in the wild with no <ul>, <ol> or <menu> container, the browser may well fall back to a UL. However, it does not have licence to apply default UL, OL, or MENU styles. Given only an LI, those are the only default styles that can be applied.

2 Likes

Very helpful, thank you!

1 Like

Brand new to html here. Question on lists:
if you don’t want a bullet, can you make a list and just have your list with > br < breaks rather than > li < ?? or does not using > li < take out extra formatting that might be helpful later?

** i used opposite brackets so the commands don’t actually happen in this post! how do you guys show the commands without it actually happening?

<br> is not for creating lists any more than <p> is. Lists are contiguous blocks of related data, as indicated by the markup structure.

If you do not want bullets, then set the padding to zero.

ul {
    padding: 0
}

If that doesn’t work, then try,

ul {
    list-style-type: none;
}

Suggest experiment with margin and padding on the UL to witness the various effects.

You probably figured it out by now, but if anyone is seeing this and wonders how to do it, you have to include the code inside opening “[code]” and closing “[/code]” tags (without the quotes).

For example [code]<br>[/code] will be displayed as <br>.

You can also use the ` character (on my keyboard is on the left of 1). So `<br>` will be displayed as <br>.

Here’s a page with more details on how to format your code in your posts.