Can the <li> element contain content other than text?

Question

Can the <li> element contain content other than text? For example, can we have lists of videos or songs or hyperlinks or some combination of all three?

Answer

Yes we can! The <li> element can contain any element which is valid within the <body> tag. This means that we can have lists of videos, images, songs, hyperlinks, or any combination thereof. In fact, we can even have lists of lists!

55 Likes

Wow! I didn’t know the li element is so versatile.

35 Likes

yes, MDN always has good documentation so for example about <li>:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

we can see: permitted content flow content, then you can see what tags are flow content. Which are a lot

19 Likes

You can create an unordered list containing an ordered referencing an image of an ordered list containing an unordered list.

19 Likes

If this is possible then, does that mean the li element will contain attributes representing the song or image within its tag, or instead place the song or image contents outside its tag?

1 Like

Newbie here: does the formatting of text (like in word with bold, italics, size, font, bullets, etc) carry over to html setup? or do you need to change it all again? I ask this because in the lesson example, it seems like terming each line or bolded word is extra work if it’s already been done before in another program. Help me understand!

3 Likes

No. Any character formatting will be lost on paste in unless by some fluke all the unrevealed markup is still embedded. One would expect that to not be the case. All the text will need to be marked up as required.

4 Likes

Sometimes when pasting from word doc to wordpress for example, the formatting is converted into html automatically. In that case you could copy the html code from there and use it elsewhere if needed. The converting isn’t always perfect though. I’d assume there are probably some online converters as well, as there are converters for excel to html table.

7 Likes

I had no idea <li> could be used for things other then text.

1 Like

Technically all of HTML is text, whether in terms of markup, or the content itself. The MIME type for a web document is, type="text/html"

5 Likes

@mtf Hello, I see that you are the most pro here, so here goes my question. I was wondering if in HTML you could render mathematical formulae or other stuff. It’s because I’ve worked with LaTeX which is also a markup language and thanks to Knuth and his invention of TeX I can easily type beautiful math and physics (if I insert the package). The thing is that I’ve heard about other math rendering in the computers that was before Knuth invented LaTeX (that’s why he invented it, bc he did not like the previous form of rendering maths on the computer). I think it was through UNICODE or something like that.

Sorry for my iliteracy and my bad english. I may be using incorrect terms and maybe the information is not 100% accurate. What you do think about all this?

1 Like

If we want web facing pages to render math it’s likely we would need a license to use LaTeX or MathML since it does not come with browsers.

1 Like

Which is the worst advice to give to any aspiring web developer. All word processors process the text differently.

For anyone reading this: DO NOT USE CONVERTERS. They’ll be the bane of your existence

5 Likes

This is a discovery for me! Thanx!

Good question thanks for asking this helped me.

As mentioned above, the li element is designed to contain text and/or elements that are valid within the <body> tag, but it’s not designed to have the attributes of these elements. The content we want to be listed has to be nested between the opening <li> tag and the ending </li> tag.

For example, something like <li src="#"></li> is incorrect or invalid.

The correct form is:

<li>
  <img src="#" />
</li>
3 Likes

I am in love with Coding!

1 Like

wow so useful elemet

This is helpful. I have no idea that

  • is so versatile

  • li is the real deal