Does valid markup matter?

[Ricky55]

Hi guys

Just working on something at the moment where I have a sub menu in a ul element that I need to set to display none and flex at the same time.

I know its not valid to wrap the li in a span but does it really matter? is it going to break anything other than validation?

So I’d have: https://codepen.io/qwerty-design/pen/qoVWmM

[JeroenR]

I guess the question is what you want to achieve by doing this.
I wonder for example why you want to set a list be a flex container when also set to display none. If you can’t see it, why would it have any other CSS properties? Except for when you want to toggle the display or something.

And why would you want to wrap the list items in another container when you already have the unordered list as a container?

So maybe you can add some explanation on what you want it to do?

[Ricky55]

Hi thanks for replying Jeroen.

I want to set to display none and flex because its a sub menu thats hidden by default until the user clicks to see it.

It is the UL that Im wanting to use as the flex container. This does reside within another UL but I can’t use that as a flex container as the li’s I’m wanting to target wont be the flex children if that makes sense.

I’ve decided to re-structure my code now anyway but just wondered what the consensus was on this.

Thanks

Richard

[bearhead]

You shouldn’t need the invalid span to get the functionality you are looking for. I would just set the ul to display:none when the menu is closed and the display:flex when it is open.

Most modern browsers can interpret invalid html, but they do so in ways that you might not expect, and are not consistent between browsers.

[Ricky55]

Yeah I tried that bearhead but it created an odd looking jump in the content as the menu appeared.

Anyway I didn’t explore it any further I changed my mark up.

Thanks for the help though guys I really appreciate it.

[Author]

Posts