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://mcmap.net/q/63795/-proper-way-to-make-html-nested-list 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

Havana

[note: untested] Try a variation of the answer in https://mcmap.net/q/66118/-css-set-li-indent. Add a css class that has the extra indent you want. – Penal

Answer 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 }

Penal

Answer 2

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

Robinette