when is it not acceptable to change an elements display?
Hey, when is it not acceptable/valid to change an elements display property? For example, changing an inline to block. Thanks in advance.
13 Replies
that's a very open-end question that will just foster opinionated back and forth without any concensus
do you have an actual example you are wondering about?
I don’t have an actual example, but just like css has rules, for example, you can’t put a block element inside an inline element. I was wondering if there’s anything similar with changing the display of elements, perhaps some should stay as what they are etc
i mean, there are guidelines
a span is supposed to be inline, but there's nothing stopping you from using a display: block on it
yeah, it's more best practice than "you can't"
don't break the semantics of elements, if there's a closer element that's either semantically better or the same, use that instead (like, if you're adding display: block to a span, and I review your code, I'll bap you with a rolled up newspaper)
Ah okay I see, so you use the elements for what they’re used for essentially. And given your example, I assume it’s best practice to change a span to inline-block rather than block
eh, depends on what you're using it for
but yeah, I'd personally do that over using a div and making it inline-block
there's no hard and fast answer for this one, it's a big old massive
if you're thinking about putting display:block on a span, you need a <p> instead
also, the "cant put block elements inside inline elements" isnt 100% strictly true, as you are allowed (by the spec) to put divs inside <a> elements
and guess what? <a> isnt a block element
oh that's interesting, do you know why that's an exception?
that surely must mean you can put other block elements in there?
i dont know, but if i had to guess it is because it was pretty hard to, for example, make a clickable card or slide with content in html 4.01, so, that was added to html 5
inside an <a>? yes, you can
the answer to a lot of weird exceptions in the spec for HTML is often that it used to work for random reasons in the past, and people abused it enough that it ended up in the spec because the internet has to be backwards compatible
thats a very broad and accurate answer
You can also put block level element inside
<button>syes, and sometimes it is useful