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

#1

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!

37 Likes
FAQ: Learn HTML Elements - Intro to HTML - Ordered Lists
#4

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

3 Likes
#5

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

3 Likes
#6

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

4 Likes
#7

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?

#8

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!

#9

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.

#10

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.

1 Like