Skip to content

DD15 - Content update post review #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ricokola wants to merge 2 commits into
base: master
Choose a base branch
from
Open

DD15 - Content update post review #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad2f5bf
DD15 - Update documentation
Ricokola Apr 17, 2023
d4d69c5
DD15 - Update content post review
Ricokola Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions decision/15-fr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,28 @@ published: true
layout: default-theme-wet-boew-fr
filename_en: 15
title: Décision sur la conception 15 – Suppression de la barre oblique finale pour les éléments vides (balises à fermeture automatique)
description: Suppression de la barre oblique finale pour les éléments vides (balises à fermeture automatique) se trouvant de la section de l'en-tête (```<head>```) des gabarits de Canada.ca.
description: Suppression de la barre oblique finale pour les éléments vides (balises à fermeture automatique) se trouvant dans la section de l'en-tête (```<head>```) des gabarits de Canada.ca.
modified: 2022-11-16
---

Suppression de la barre oblique finale pour les [éléments vides](https://html.spec.whatwg.org/multipage/syntax.html#void-elements) (balises à fermeture automatique) se trouvant de la section de l'en-tête (```<head>```) des gabarits de Canada.ca.

## Sommaire

* **Design decision number:** 15
* **Numéro de décision de conception:** 15
* **Expert:** @Ricokola
* **Submited:** 2022-11-16
* **Validated:** by @[username] on YYYY-MM-DD
* **Status:** Approved on YYYY-MM-DD
* **Soumis le:** 2022-11-16
* **Validé par:** @[username] on YYYY-MM-DD
* **État:** Approuvé le YYYY-MM-DD
* **Type:** Validation du balisage HTML5

## Portée

Dans le contenu Web, éviter l'utilisation de barres obliques finales pour les éléments vides (balises à fermeture automatique) afin d'éviter les erreurs de validation du balisage HTML5.
Codage des éléments vides HTML (balises à fermeture automatique) dans le contenu Web où ils doivent ou non avoir une barre oblique finale.

## Problème

Génère un message d'information lors de la validation d'une page qui inclut des éléments vides (balises à fermeture automatique).
Les messages informatifs sont générés lors de la validation HTML d'une page qui inclut des **éléments vides** (balises à fermeture automatique) lorsqu'ils sont codés à l'aide d'une barre oblique à la fin. Cela n'empêche pas la page de s'afficher correctement. Il existe deux écoles de pensée :
* La première est en faveur de l'omission de la barre oblique finale car elle facultative en HTML5, elle n'est pas recommandée, peut entrer en conflit avec des valeurs d'attributs sans guillemets et qu'elle génère des messages d'information lors de la validation HTML.
* La seconde est en faveur du maintien de la barre oblique finale car elle rend la structure du document plus claire pour les lecteurs novices et rend le code plus rigide et structuré de fa (voir l'avantage de Typescript vs JS pur).

## Recommandation

Expand Down
81 changes: 36 additions & 45 deletions decision/15.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ layout: default-theme-wet-boew-en
filename_fr: 15-fr
title: Design decision 15 - Removal of trailing slash for void elements (self-closing tags)
description: Removal of trailing slash for void elements (self-closing tags) located in any Canada.ca templates.
modified: 2023-03-10
modified: 2023-08-22
---

Removal of trailing slash for [void elements](https://html.spec.whatwg.org/multipage/syntax.html#void-elements) (self-closing tags) located in Canada.ca templates.
Expand All @@ -13,8 +13,8 @@ Removal of trailing slash for [void elements](https://html.spec.whatwg.org/multi

* **Design decision number:** 15
* **Expert:** @Ricokola
* **Submited:** 2022-11-17
* **Validated:** by @[username] on YYYY-MM-DD
* **Submitted:** 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](https://github.com/wet-boew/wet-boew/discussions/9483)
Expand All @@ -27,31 +27,21 @@ Removal of trailing slash for [void elements](https://html.spec.whatwg.org/multi

## 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.
Coding HTML void elements (self-closing tags) in web content where they should or not have a trailing slash.

## 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.

## 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](https://html.spec.whatwg.org/#html-vs-xhtml), 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.
HTML validation information messages are generated when validating a page which include **void elements** (self-closing tags) and when they are codded using a trailing slash at the end. This doesn’t prevent the page to render properly. There is two schools of thought:
* The first one in favor of leaving out the trailing slash since it's only optional in HTML5, it's not recommended, can conflict with unquoted attribute values and, it generates info messages on validation.
* The second one is in favor of keeping the trailing slash, like in XHTML strict 1.1, because it makes the document more structered (more rigid) and usualy clearer for novice readers (refer to the advantage of Typescript vs pure JS).

## 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](https://html.spec.whatwg.org/multipage/syntax.html#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.
Since trailing slashes are no longer requierd nor recommended for void elements (self-closing tags) in HTML5 and because information messages are reported by W3C HTML5 validation, we are recommending removing trailing slashes for every void elements such as the ```<meta >```, ```<link >```, ```<img>```,```<input>```, ```<hr>``` and other [void elements](https://html.spec.whatwg.org/multipage/syntax.html#void-elements).

### 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
Example: 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.

Should:
```HTML5
Expand All @@ -71,40 +61,19 @@ Was:
<hr/>
```

## Test

Run the [W3 Nu HTML Checker](https://validator.w3.org/nu/) 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.
### How to test

### Nu validation
Run the [W3 Nu HTML Checker](https://validator.w3.org/nu/) on a Web page where the slashes have been removed from void elements and expect no info warning messages related to trailing slash.

[Canada.ca Home page (English).](https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.canada.ca%2Fen.html)
Example: [Canada.ca Home page (English).](https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.canada.ca%2Fen.html)

**Expected result:**

To **not** get the following info warning message:

> Info: Trailing slash on void elements [has no effect](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-in-void-element-start-tags-do-not-mark-the-start-tags-as-self-closing) and [interacts badly with unquoted attribute values](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-directly-preceded-by-unquoted-attribute-values).

## Evidence

The [HTML standard](https://html.spec.whatwg.org/multipage/syntax.html#start-tags) 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.

<strong>Ref:</strong> [W3C Validator Wiki Github - Trailing slashes in void-element start tags do not mark the start tags as self-closing](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#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](https://html.spec.whatwg.org/multipage/syntax.html#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](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#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.
## Evidences

### Research and findings

Expand All @@ -118,13 +87,35 @@ The reason a trailing slash was used on void elements (self-closing tags) in the
* As stated in the [MDN Github issue #20523](https://github.com/mdn/content/issues/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.

### With self-closing

The [HTML standard](https://html.spec.whatwg.org/multipage/syntax.html#start-tags) 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.

The following are all acceptable reasons for using a trailing slash in a [void-element](https://html.spec.whatwg.org/multipage/syntax.html#void-elements) start tag:
* Some users like how it looks.
* Some users run their HTML markup through a formatting tool that’s hardcoded to add trailing slashes to all void-element start tags, without any option for them to prevent the tool from doing that.
* Some users write a lot of JSX code, and JSX requires the trailing slash — without any option for them to prevent JSX from doing that — so for consistency with what they're accustomed to in JSX, they follow that same style in actual HTML documents.

### Without 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](https://html.spec.whatwg.org/multipage/syntax.html#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.

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

## 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 HTML5 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](https://html.spec.whatwg.org/#html-vs-xhtml), 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 and CRA 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, when the content type is not explexitely set to ```text/xhtml``` is considred an error.

### References

* [HTML Standard - void elements](https://html.spec.whatwg.org/multipage/syntax.html#void-elements)
* [Prettier and closing slashes in HTML · Discussion #242 · mdn](https://github.com/orgs/mdn/discussions/242#discussioncomment-3749398)
* [Prettier and closing slashes in HTML · Discussion #242 - 3749398](https://github.com/orgs/mdn/discussions/242#discussioncomment-3749398)
* [Prettier and closing slashes in HTML · Discussion #242 - 3759664](https://github.com/orgs/mdn/discussions/242#discussioncomment-3759664)
* [Getting started with HTML - Learn web development - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#void_elements)
* [Void element - MDN Web Docs Glossary: Definitions of Web-related terms](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)
* [https://github.com/validator/validator/issues/1433](https://github.com/validator/validator/issues/1433)
* [https://github.com/mdn/content/issues/20523](https://github.com/mdn/content/issues/20523)
* [https://github.com/mdn/content/pull/20528](https://github.com/mdn/content/pull/20528)
* [https://github.com/mdn/content/pull/21036](https://github.com/mdn/content/pull/21036)
* [W3C Validator Wiki Github - Trailing slashes in void-element start tags do not mark the start tags as self-closing](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-in-void-element-start-tags-do-not-mark-the-start-tags-as-self-closing)
* [W3C Validator Wiki Github - Promoting the right mental model for void elements](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#promoting-the-right-mental-model-for-void-elements)