Wrong validation on element <br> in <ul> <li> elements

966 Views Asked by At

I have this situation:

...
<ul>
  <li>Text<br/>Text</li><br />
  <li>Text<br/>Text</li>
</ul>
...

Looking for w3c validation I get:

Error: Element br not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Looking next in validator I read too:

Contexts in which element br may be used:
Where phrasing content is expected.

So, not right if correct or not!

How I can fix this?

1

There are 1 best solutions below

0
Quentin On BEST ANSWER
<ul>
  <li>Text<br/>Text</li><br />
  <li>Text<br/>Text</li>
</ul>

The error message says that you can't have a br element as a child of a ul element.

You have one between the two li elements where it isn't allowed.

Remove it.


Line breaks are supposed to break a line of text and are semantically useful mostly for things like poetry where explicit line breaks are important.

List items are block elements and create line breaks automatically, there is no need to put an explicit break between them.

If you are trying to simulate a margin, then use a real margin (applied to the li element with CSS).

li:not(:first-child) {
  margin-top: 1em;
}
<ul>
  <li>Text<br/>Text</li>
  <li>Text<br/>Text</li>
</ul>