[wp-trac] [WordPress Trac] #63824: button is not a self-closing HTML element and needs a closing tag

[WordPress Trac]

#63824: button is not a self-closing HTML element and needs a closing tag
-----------------------------+-------------------------
 Reporter:  kkmuffme         |       Owner:  (none)
     Type:  defect (bug)     |      Status:  closed
 Priority:  normal           |   Milestone:
Component:  Media            |     Version:  4.8
 Severity:  trivial          |  Resolution:  maybelater
 Keywords:  has-patch close  |     Focuses:
-----------------------------+-------------------------
Changes (by jonsurrell):

 * status:  new => closed
 * version:   => 4.8
 * resolution:   => maybelater
 * milestone:  Awaiting Review =>


Comment:

 Practically, the way this is authored works fine and doesn't cause
 problems today. **I recommend not accepting the change.**

 I'd like to see movement on #59883 to remove support for XHTML before
 considering this. I agree with the idea of this change, but this is a
 single isolated case of a common pattern. If this moves ahead it
 establishes a precedent that the HTML used in similar jQuery snippets
 should be normative HTML, but the question "what is normative HTML?" is
 surprisingly complicated.

 -----

 I agree with the assessment that there's no issue right now with the code
 as authored using `<button type="button" class="browser" />`.

 However, it's also true that `BUTTON` is not a self-closing element, and
 the self-closing flag `/>` has no impact in HTML5. It's the same as
 passing `<button type="button" class="browser">` to jQuery.

 I agree with [https://github.com/WordPress/wordpress-develop/pull/9458 the
 change provided]. It's normative HTML5 and unlikely to be confused with
 JSX where self-closing elements do exist.

 `<button />` was added in [40021] along with another example that I
 haven't found in the codebase today.

 -----

 There are many examples of this pattern:

 - [https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/admin
 /user-profile.js#L166 Several] in `src/js/_enqueues/admin/user-profile.js`
 -
 [https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/wp/customize/controls.js#L6330
 Several] in `src/js/_enqueues/wp/customize/controls.js`
 -
 [https://core.trac.wordpress.org/browser/trunk/src/js/media/views/embed/url.js#L25
 Several] in `src/js/media/views/embed/url.js`
 - etc.

 Should all of these be updated to use normative HTML5? Making this change
 would set a precedent to update many of those JavaScript examples to use
 normative HTML5.


 This is an interesting question and is related to HTML4 and XHTML support
 (see #59883). The self-closing flag is completely redundant in HTML5 and
 void elements are established by the standard. This means that normative
 HTML5 would use `<input>` and `<br>`, both self-closing elements.
 Unfortunately, those are a problem in XHTML where the self-closing flag
 `/>` or a close tag is required.


 Some notes:

 - Correctly closed elements ''are'' important in XHTML, unlike HTML5.
 `<button />` and `<button></button>` are acceptable in both XHTML and
 HTML5. `<button>` is the same as `<button />` in HTML5 but invalid in
 XHTML (note that this is only true because the HTML ends after
 `<button>`).
 - I believe jQuery relies on `innerHTML`. That will throw a `SyntaxError`
 on XHTML pages in examples like `el.innerHTML = '<button>'`.
 - It's not easy to serve XHTML today, it requires some combination of the
 correct HTTP headers, DOCTYPE declaration, and `xmlns` on the `HTML`
 element. [https://github.com/GoogleChromeLabs/wpp-research/pull/74 Data
 suggests that the vast majority of pages are not XHTML].

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63824#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform