Design decision 15 - Removal of trailing slash for void elements (self-closing tags)

Removal of trailing slash for void elements (self-closing tags) located in Canada.ca templates.

Summary

Design decision number: 15
Expert: @Ricokola
Submited: 2022-11-17
Validated: by @[username] on YYYY-MM-DD
Status: Approved on YYYY-MM-DD
Type: HTML5 Markup validation
Github discussion: Open discussion #9483
History:
- (2022-03-10) Revised: Addition of new section about using XML syntax in HTML.
- (2022-12-16) Revised: Addition of new finding regarding the AEM/Canada.ca wysiwyg.
- (2022-11-21) Revised: Addition of new findings and evidence to help support our recommendation.
- (2022-11-17) Presented
- (2022-11-15) Draft

Scope

In web content, avoiding the usage of trailing slashes for void elements (self-closing tags) to prevent HTML validation info messages and potential conflict with unquoted attribute values.

Issue

Receiving HTML validation info messages when validating a page which include void elements (self-closing tags). There is currenlty two schools of thought:

The first one in favor of removing the trailing slash since it’s only optional in HTML5, it’s not recommended, can conflict with unquoted attribute values and, although it doesn’t prevent the page to render properly, it generates info messages on validation.
The second one is in favor of keeping the trailing slash because it makes the document structer clearer for novice readers and it doesn’t prevent the page to render properly.

Recommendation

Since trailing slashes are no longuer requierd nor recommended for void elements (self-closing tags) in HTML5, we are recommending removing trailing slashes for every void elements (self-closing tags) such as the <meta >, <link >, <img>,<input>, <hr> and other void elements found in the <head> section and global footer of every Canada.ca templates. We have also noticed that Adobe Experience Manager (AEM) when redering pages, remove trailing slashes from void elements (self-closing tags) found in the wiziwig. Validation info messegaes are generated due to the trailing slashes found in the template.

Deprecated

Previously mandatory in XHTML, trailing slashes are now optional and even more, they are strongly not recommended for void elements (self-closing tags) in HTML5.

Migration

Remove the slash at the end of every void elements (self-closing tags) located inside the <head> section and global footer of every Canada.ca templates.

Example

Should:

<meta charset="utf-8">
<link rel="alternate" hreflang="en" href="https://www.canada.ca/en.html">
<img src="/etc/designs/canada/wet-boew/assets/sig-blk-en.svg" alt="Government of Canada" property="logo">
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
<hr>

Was:

<meta charset="utf-8"/>
<link rel="alternate" hreflang="en" href="https://www.canada.ca/en.html"/>
<img src="/etc/designs/canada/wet-boew/assets/sig-blk-en.svg" alt="Government of Canada" property="logo"/>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca"/>
<hr/>

Test

Run the W3 Nu HTML Checker on a Canada.ca page where the slashes have been removed from void elements (self-closing tags) located in the head or global footer sections and expect no info warning messages related to trailing slash.

Nu validation

Canada.ca Home page (English).

Expected result:

To not get the following info warning message:

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

Evidence

The HTML standard states that you can use a trailing slash in a void-element start tag for literally any purpose except to mark the start tag as self-closing.

So, for example, the following are all acceptable reasons for using a trailing slash in a void-element start tag:

I use a trailing slash because I like how it looks.
I use a trailing slash because I run my HTML markup through a formatting tool that’s hardcoded to add trailing slashes to all void-element start tags, without any option for me to prevent the tool from doing that.
I use a trailing slash because I write a lot of JSX code, and JSX requires the trailing slash — without any option for me to prevent JSX from doing that — so for consistency with what I’m accustomed to in JSX, I follow that same style in actual HTML documents.

Ref: W3C Validator Wiki Github - Trailing slashes in void-element start tags do not mark the start tags as self-closing

When learning about HTML, teaching about HTML, and designing HTML tools, it’s important to have and promote the right mental model about how HTML actually works.

And the way HTML works is that there’s a discrete set of void elements, hardcoded into HTML parsers, and people who write HTML must learn and remember which elements those are — without any trailing slash needing to be added to those elements to indicate they are special.

Ref: W3C Validator Wiki Github - Promoting the right mental model for void elements

Background

The reason a trailing slash was used on void elements (self-closing tags) in the first place for conforming with XHTML markup previously used for Canada.ca templates. In HTML5, trailing slashes on void elements(self-closing tags) are now optional and strongly discourage.

Research and findings

Nu HTML Checker from The W3C Markup Validation Service flags trailing slashes on void elements(self-closing tags) as info warnings. Although there are not restraining the page to render properly, since HTML5, it’s strongly recommended to not make use of them anymore.
Google HTML/CSS Style Guide recommends using self-closing tags (void elements) without any addition of trailing slashes.
Trailing slash can interfere with unquoted attributes values.
The MDN Web Docs seems to have a preference of keeping trailing slashes for self-closing tags (void elements) based on the fact that it makes the document structure clearer for novice readers and because the code formatter Prettier.io seems to add trailing slashes to self-closing tags (void elements) when cleaning the code, but on another note, they also said that self-closing tags do not exist in HTML.
The Code Guide in its HTML syntax, states to not include a trailing slash in self-closing elements.
The GoCardless HTML style guide doesn’t include a forward-slash on void elements.
In the Learn HTML - document structure section of the web.dev, examples that have void elements (self-closing tags) don’t use the end forward slash.
As stated in the MDN Github issue #20523, “Trailing slashes for empty elements seem no longer recommended because they’re unnecessary and slow things down”.
Adobe Experience Manager (AEM) wysiwyg clean and remove trailing slashes for void elements (self-closing tags) when rendering pages for Canada.ca. Validation info messages are generated from trailing slahes found in Canada.ca templates.

Usage of XML syntax in HTML

Opinions surounding the usage of trailing slash for void elements in HTML are divided going from making the document structure clearer for novice readers, the info messages generated by the NU validator opinion based and have been implemtentaed to have users stop using trailing slashes, HTML specs hasn’t changed and some of their code examples are still using slashes and so on. Refering to the HTML standard 1.8 HTML vs XML syntax, if a document is transmitted with the text/html MIME type, then it will be processed as an HTML document by web browsers. After a brief investigation, major sites such as: GCWeb, Canada.ca, CRA and they are all transmitted with the text/html MIME type. As well, standard 1.8 reminds us that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent a document labeled as XML from being rendered fully, whereas they would be ignored in the HTML syntax. Although common browsers support XML (XHTML) syntax in an HTML declared document, as minimal as it is, it takes some processing time to do the conversion. Therefore, using XML syntax in an HTML document is considred an error and takes processing time for broswers to support it.

Language selection

Search and menus

Search