Change Details

We should use `<span>` rather than `<div>` for things that are not meant to be block elements. Rule of thumb: if we set the 'display' in CSS to anything other than 'block' or 'table', it should probably be a `<span>`. Benefits: * Better usability in text browsers * Better compatibility with tools with none or limited support for CSS (for example: copy-paste into a text editor) * Better flexibility of PHP widgets To elaborate on last point – HTML enforces some element nesting rules, for example defining some elements as block or inline, and defining that some elements can only have block or inline content. For example, a `<p>` element contains inline content and thus can't have block elements like `<div>` nested inside. (This doesn't matter for JS, where you can put anything inside anything using DOM operations.) Currently, a ButtonWidget generates a `<div>`, which means you can't display an OOjs UI PHP button inside a HTML paragraph (if you try, complicated rules kick in during HTML parsing, and the effect is that essentially the paragraph gets split in two). This is annoying and not obvious to debug. I ran into this myself when working on {T101666}.

We should use `<span>` rather than `<div>` for things that are not meant to be block elements. Rule of thumb: if we set the 'display' in CSS to anything other than 'block' or 'table', it should probably be a `<span>`. Benefits: * Better usability in text browsers * Better compatibility with tools with none or limited support for CSS (for example: copy-paste into a text editor) * Better flexibility of PHP widgets * Users can just kill the styles if they [[ https://www.mediawiki.org/wiki/Topic:Tls0dpofyexl6l6y | really really hate it ]] ;) To elaborate on last point – HTML enforces some element nesting rules, for example defining some elements as block or inline, and defining that some elements can only have block or inline content. For example, a `<p>` element contains inline content and thus can't have block elements like `<div>` nested inside. (This doesn't matter for JS, where you can put anything inside anything using DOM operations.) Currently, a ButtonWidget generates a `<div>`, which means you can't display an OOjs UI PHP button inside a HTML paragraph (if you try, complicated rules kick in during HTML parsing, and the effect is that essentially the paragraph gets split in two). This is annoying and not obvious to debug. I ran into this myself when working on {T101666}.

We should use `<span>` rather than `<div>` for things that are not meant to be block elements. Rule of thumb: if we set the 'display' in CSS to anything other than 'block' or 'table', it should probably be a `<span>`. Benefits: * Better usability in text browsers * Better compatibility with tools with none or limited support for CSS (for example: copy-paste into a text editor) * Better flexibility of PHP widgets * Users can just kill the styles if they [[ https://www.mediawiki.org/wiki/Topic:Tls0dpofyexl6l6y | really really hate it ]] ;) To elaborate on last point – HTML enforces some element nesting rules, for example defining some elements as block or inline, and defining that some elements can only have block or inline content. For example, a `<p>` element contains inline content and thus can't have block elements like `<div>` nested inside. (This doesn't matter for JS, where you can put anything inside anything using DOM operations.) Currently, a ButtonWidget generates a `<div>`, which means you can't display an OOjs UI PHP button inside a HTML paragraph (if you try, complicated rules kick in during HTML parsing, and the effect is that essentially the paragraph gets split in two). This is annoying and not obvious to debug. I ran into this myself when working on {T101666}.