HTML5 nested lists: Indented list item without parent possible?

Question

I'm working on a text editor based on a contenteditable DIV. I'd like to produce valid HTML5, but ran into problems with nesting lists.

The following two formatting examples seem to be impossible to create using valid HTML5 because they would require nesting a <ul> element as a direct child of the parent <ul>:

Scenario 1: Empty parent item

●

○ nested item with empty parent

Scenario 2: Nested item without parent list item

○ nested item without parent

I read https://stackoverflow.com/a/5899394/901334 and according to the HTML spec, the <ol> and <ul> elements must only contain <li> elements, but not other <ol> and <ul> elements.

However, it is possible to create such a formatting inside a contenteditable DIV (see jsbin below). So how do browsers do it?

They do nest <ul|ol> inside the parent <ul> list! HTML produced like this results in a validation error.

Now if browser vendors resort to this workaround, I conclude that there really is no way to produce this formatting with valid HTML5 and hence it will be ok for me to use the same workaround of including <ul> as direct children of other <ul> elements.

Feel free to try it ourself here:

https://jsbin.com/cuyumovaga/1/edit?html,output

[note: untested] Try a variation of the answer in stackoverflow.com/questions/11445453/css-set-li-indent. Add a css class that has the extra indent you want. — DwB
– DwB, Commented Apr 8, 2020 at 15:13

DwB · Accepted Answer · 2020-04-08 15:31:18Z

1

I believe you want a variation of the answer in CSS set li indent.

Specifically, add a css class that has the extra indent you want.

Here is an example:

            li { margin-left:10px }

            li.bonus { margin-left:100px }

You can change the bullet at the list level. For example:

            ul.bonus { list-style: none }

            ul.bonus li::before {content: "*"; color: red }

answered Apr 8, 2020 at 15:31

DwB

38.5k11 gold badges62 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rmaxx · Accepted Answer · 2020-04-08 11:09:49Z

0

Interesting find. It seems indeed impossible this way.

First of all, i don't have a conclusive answer, but i can't add comments, i dont expect this is the right answer for you :). It seems indeed impossible this way. So here goes my 2ct:

Either indent first (creates blockqoute), then add the ul/ol (up to user)
If you could use the command insertHTML or insertOrderedList maybe that could work, but you would need a designated button/action for ul's

Aside: the Exec command is consided obsolete

Maybe this can help, a JS lib that seems to have just made it impossible to indent the first UL:

getcontenttools.com

answered Apr 8, 2020 at 11:09

Rmaxx

1,20713 silver badges23 bronze badges

Collectives™ on Stack Overflow

HTML5 nested lists: Indented list item without parent possible?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related