Add examples for replacements of string HTML methods (mdn#29039)

* Add examples for replacements of string HTML methods

* Apply suggestions

* Update files/en-us/web/javascript/reference/global_objects/string/strike/index.md

---------

Co-authored-by: Estelle Weyl <[email protected]>

files/en-us/web/javascript/reference/global_objects/string/anchor/index.md

@@ -34,16 +34,29 @@ A string beginning with an `<a name="name">` start tag (double quotes in `name`
 
 ### Using anchor()
 
+The code below creates an HTML string and then replaces the document's body with it:
+
 ```js
-const myString = "Table of Contents";
+const contentString = "Hello, world";
 
-document.body.innerHTML = myString.anchor("contents_anchor");
+document.body.innerHTML = contentString.anchor("hello");
 ```
 
-will output the following HTML:
+This will create the following HTML:
 
 ```html
-<a name="contents_anchor">Table of Contents</a>
+<a name="hello">Hello, world</a>
+```
+
+> **Warning:** This markup is invalid, because `name` is no longer a valid attribute of the {{HTMLElement("a")}} element.
+
+Instead of using `anchor()` and creating HTML text directly, you should use DOM APIs such as [`document.createElement()`](/en-US/docs/Web/API/Document/createElement). For example:
+
+```js
+const contentString = "Hello, world";
+const elem = document.createElement("a");
+elem.innerText = contentString;
+document.body.appendChild(elem);
 ```
 
 ## Specifications
@@ -57,4 +70,5 @@ will output the following HTML:
 ## See also
 
 - [Polyfill of `String.prototype.anchor` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.link()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("a")}}

files/en-us/web/javascript/reference/global_objects/string/big/index.md

@@ -11,7 +11,7 @@ browser-compat: javascript.builtins.String.big
 
 The **`big()`** method of {{jsxref("String")}} values creates a string that embeds this string in a {{HTMLElement("big")}} element (`<big>str</big>`), which causes this string to be displayed in a big font.
 
-> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `big()`, the `<big>` element itself has been removed in [HTML5](/en-US/docs/Glossary/HTML5) and shouldn't be used anymore. Web developers should use [CSS](/en-US/docs/Web/CSS) properties Instead.
+> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `big()`, the `<big>` element itself has been removed from the HTML specification and shouldn't be used anymore. Web developers should use [CSS](/en-US/docs/Web/CSS) properties instead.
 
 ## Syntax
 
@@ -31,17 +31,23 @@ A string beginning with a `<big>` start tag, then the text `str`, and then a `</
 
 ### Using big()
 
-The following example uses string methods to change the size of a string:
+The code below creates an HTML string and then replaces the document's body with it:
 
 ```js
-const worldString = "Hello, world";
+const contentString = "Hello, world";
 
-console.log(worldString.small()); // <small>Hello, world</small>
-console.log(worldString.big()); // <big>Hello, world</big>
-console.log(worldString.fontsize(7)); // <font size="7">Hello, world</font>
+document.body.innerHTML = contentString.big();
 ```
 
-With the {{domxref("HTMLElement/style", "element.style")}} object you can get the element's `style` attribute and manipulate it more generically, for example:
+This will create the following HTML:
+
+```html
+<big>Hello, world</big>
+```
+
+> **Warning:** This markup is invalid, because `big` is no longer a valid element.
+
+Instead of using `big()` and creating HTML text directly, you should use CSS to manipulate fonts. For example, you can manipulate {{cssxref("font-size")}} through the {{domxref("HTMLElement/style", "element.style")}} attribute:
 
 ```js
 document.getElementById("yourElemId").style.fontSize = "2em";
@@ -58,5 +64,5 @@ document.getElementById("yourElemId").style.fontSize = "2em";
 ## See also
 
 - [Polyfill of `String.prototype.big` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.fontsize()")}}
-- {{jsxref("String.prototype.small()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("big")}}

files/en-us/web/javascript/reference/global_objects/string/blink/index.md

@@ -9,7 +9,7 @@ browser-compat: javascript.builtins.String.blink
 
 {{JSRef}} {{Deprecated_Header}}
 
-The **`blink()`** method of {{jsxref("String")}} values creates a string that embeds this string in a (`<blink>str</blink>`), which used to cause a string to blink in old browsers.
+The **`blink()`** method of {{jsxref("String")}} values creates a string that embeds this string in a `<blink>` element (`<blink>str</blink>`), which used to cause a string to blink in old browsers.
 
 > **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `blink()`, the `<blink>` element itself is removed from modern browsers, and blinking text is frowned upon by several accessibility standards. Avoid using the element in any way.
 
@@ -31,17 +31,24 @@ A string beginning with a `<blink>` start tag, then the text `str`, and then a `
 
 ### Using blink()
 
-The following example uses deprecated string methods to change the formatting of a string:
+The code below creates an HTML string and then replaces the document's body with it:
 
 ```js
-const worldString = "Hello, world";
+const contentString = "Hello, world";
 
-console.log(worldString.blink()); // <blink>Hello, world</blink>
-console.log(worldString.bold()); // <b>Hello, world</b>
-console.log(worldString.italics()); // <i>Hello, world</i>
-console.log(worldString.strike()); // <strike>Hello, world</strike>
+document.body.innerHTML = contentString.blink();
 ```
 
+This will create the following HTML:
+
+```html
+<blink>Hello, world</blink>
+```
+
+> **Warning:** This markup is invalid, because `blink` is no longer a valid element.
+
+You should avoid blinking elements altogether.
+
 ## Specifications
 
 {{Specifications}}
@@ -53,6 +60,4 @@ console.log(worldString.strike()); // <strike>Hello, world</strike>
 ## See also
 
 - [Polyfill of `String.prototype.blink` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.bold()")}}
-- {{jsxref("String.prototype.italics()")}}
-- {{jsxref("String.prototype.strike()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)

files/en-us/web/javascript/reference/global_objects/string/bold/index.md

@@ -31,15 +31,27 @@ A string beginning with a `<b>` start tag, then the text `str`, and then a `</b>
 
 ### Using bold()
 
-The following example uses deprecated string methods to change the formatting of a string:
+The code below creates an HTML string and then replaces the document's body with it:
 
 ```js
-const worldString = "Hello, world";
+const contentString = "Hello, world";
 
-console.log(worldString.blink()); // <blink>Hello, world</blink>
-console.log(worldString.bold()); // <b>Hello, world</b>
-console.log(worldString.italics()); // <i>Hello, world</i>
-console.log(worldString.strike()); // <strike>Hello, world</strike>
+document.body.innerHTML = contentString.bold();
+```
+
+This will create the following HTML:
+
+```html
+<b>Hello, world</b>
+```
+
+Instead of using `bold()` and creating HTML text directly, you should use DOM APIs such as [`document.createElement()`](/en-US/docs/Web/API/Document/createElement). For example:
+
+```js
+const contentString = "Hello, world";
+const elem = document.createElement("b");
+elem.innerText = contentString;
+document.body.appendChild(elem);
 ```
 
 ## Specifications
@@ -53,6 +65,5 @@ console.log(worldString.strike()); // <strike>Hello, world</strike>
 ## See also
 
 - [Polyfill of `String.prototype.bold` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.blink()")}}
-- {{jsxref("String.prototype.italics()")}}
-- {{jsxref("String.prototype.strike()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("b")}}

files/en-us/web/javascript/reference/global_objects/string/fixed/index.md

@@ -9,9 +9,9 @@ browser-compat: javascript.builtins.String.fixed
 
 {{JSRef}} {{Deprecated_Header}}
 
-The **`fixed()`** method of {{jsxref("String")}} values creates a string that embeds this string in a {{HTMLElement("tt")}} element (`<tt>str</tt>`), which causes this string to be displayed in a fixed-pitch font.
+The **`fixed()`** method of {{jsxref("String")}} values creates a string that embeds this string in a {{HTMLElement("tt")}} element (`<tt>str</tt>`), which causes this string to be displayed in a fixed-width font.
 
-> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. Use [DOM APIs](/en-US/docs/Web/API/Document_Object_Model) such as [`document.createElement()`](/en-US/docs/Web/API/Document/createElement) instead.
+> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `fixed()`, the `<tt>` element itself has been removed from the HTML specification and shouldn't be used anymore. Web developers should use [CSS](/en-US/docs/Web/CSS) properties instead.
 
 ## Syntax
 
@@ -31,11 +31,26 @@ A string beginning with a `<tt>` start tag, then the text `str`, and then a `</t
 
 ### Using fixed()
 
-The following example uses the `fixed` method to change the formatting of a string:
+The code below creates an HTML string and then replaces the document's body with it:
 
 ```js
-const worldString = "Hello, world";
-console.log(worldString.fixed()); // "<tt>Hello, world</tt>"
+const contentString = "Hello, world";
+
+document.body.innerHTML = contentString.fixed();
+```
+
+This will create the following HTML:
+
+```html
+<tt>Hello, world</tt>
+```
+
+> **Warning:** This markup is invalid, because `tt` is no longer a valid element.
+
+Instead of using `fixed()` and creating HTML text directly, you should use CSS to manipulate fonts. For example, you can manipulate {{cssxref("font-family")}} through the {{domxref("HTMLElement/style", "element.style")}} attribute:
+
+```js
+document.getElementById("yourElemId").style.fontFamily = "monospace";
 ```
 
 ## Specifications
@@ -49,6 +64,5 @@ console.log(worldString.fixed()); // "<tt>Hello, world</tt>"
 ## See also
 
 - [Polyfill of `String.prototype.fixed` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.bold()")}}
-- {{jsxref("String.prototype.italics()")}}
-- {{jsxref("String.prototype.strike()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("tt")}}

files/en-us/web/javascript/reference/global_objects/string/fontcolor/index.md

@@ -11,7 +11,7 @@ browser-compat: javascript.builtins.String.fontcolor
 
 The **`fontcolor()`** method of {{jsxref("String")}} values creates a string that embeds this string in a {{HTMLElement("font")}} element (`<font color="...">str</font>`), which causes this string to be displayed in the specified font color.
 
-> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `fontcolor()`, the `<font>` element itself has been removed in [HTML5](/en-US/docs/Glossary/HTML5) and shouldn't be used anymore. Web developers should use [CSS](/en-US/docs/Web/CSS) properties instead.
+> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `fontcolor()`, the `<font>` element itself has been removed from the HTML specification and shouldn't be used anymore. Web developers should use [CSS](/en-US/docs/Web/CSS) properties instead.
 
 ## Syntax
 
@@ -36,21 +36,23 @@ The `fontcolor()` method itself simply joins the string parts together without a
 
 ### Using fontcolor()
 
-The following example uses the `fontcolor()` method to change the color of a string by producing a string with the HTML `<font>` element.
+The code below creates an HTML string and then replaces the document's body with it:
 
 ```js
-const worldString = "Hello, world";
+const contentString = "Hello, world";
 
-console.log(`${worldString.fontcolor("red")} is red in this line`);
-// '<font color="red">Hello, world</font> is red in this line'
+document.body.innerHTML = contentString.fontcolor("red");
+```
+
+This will create the following HTML:
 
-console.log(
-  `${worldString.fontcolor("FF00")} is red in hexadecimal in this line`,
-);
-// '<font color="FF00">Hello, world</font> is red in hexadecimal in this line'
+```html
+<font color="red">Hello, world</font>
 ```
 
-With the {{domxref("HTMLElement/style", "element.style")}} object you can get the element's `style` attribute and manipulate it more generically, for example:
+> **Warning:** This markup is invalid, because `font` is no longer a valid element.
+
+Instead of using `fontcolor()` and creating HTML text directly, you should use CSS to manipulate fonts. For example, you can manipulate {{cssxref("color")}} through the {{domxref("HTMLElement/style", "element.style")}} attribute:
 
 ```js
 document.getElementById("yourElemId").style.color = "red";
@@ -67,4 +69,5 @@ document.getElementById("yourElemId").style.color = "red";
 ## See also
 
 - [Polyfill of `String.prototype.fontcolor` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.fontsize()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("font")}}

files/en-us/web/javascript/reference/global_objects/string/fontsize/index.md

@@ -11,7 +11,7 @@ browser-compat: javascript.builtins.String.fontsize
 
 The **`fontsize()`** method of {{jsxref("String")}} values creates a string that embeds this string in a {{HTMLElement("font")}} element (`<font size="...">str</font>`), which causes this string to be displayed in the specified font size.
 
-> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `fontsize()`, the `<font>` element itself has been removed in [HTML5](/en-US/docs/Glossary/HTML5) and shouldn't be used anymore. Web developers should use [CSS](/en-US/docs/Web/CSS) properties instead.
+> **Note:** All [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods) are deprecated and only standardized for compatibility purposes. For the case of `fontsize()`, the `<font>` element itself has been removed from the HTML specification and shouldn't be used anymore. Web developers should use [CSS](/en-US/docs/Web/CSS) properties instead.
 
 ## Syntax
 
@@ -36,20 +36,26 @@ The `fontsize()` method itself simply joins the string parts together without an
 
 ### Using fontsize()
 
-The following example uses string methods to change the size of a string:
+The code below creates an HTML string and then replaces the document's body with it:
 
 ```js
-const worldString = "Hello, world";
+const contentString = "Hello, world";
 
-console.log(worldString.small()); // <small>Hello, world</small>
-console.log(worldString.big()); // <big>Hello, world</big>
-console.log(worldString.fontsize(7)); // <font size="7">Hello, world</font>
+document.body.innerHTML = contentString.fontsize(7);
 ```
 
-With the {{domxref("HTMLElement/style", "element.style")}} object you can get the element's `style` attribute and manipulate it more generically, for example:
+This will create the following HTML:
+
+```html
+<font size="7">Hello, world</font>
+```
+
+> **Warning:** This markup is invalid, because `font` is no longer a valid element.
+
+Instead of using `fontsize()` and creating HTML text directly, you should use CSS to manipulate fonts. For example, you can manipulate {{cssxref("font-size")}} through the {{domxref("HTMLElement/style", "element.style")}} attribute:
 
 ```js
-document.getElementById("yourElemId").style.fontSize = "0.7em";
+document.getElementById("yourElemId").style.fontSize = "7pt";
 ```
 
 ## Specifications
@@ -63,5 +69,5 @@ document.getElementById("yourElemId").style.fontSize = "0.7em";
 ## See also
 
 - [Polyfill of `String.prototype.fontsize` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.big()")}}
-- {{jsxref("String.prototype.small()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("font")}}

files/en-us/web/javascript/reference/global_objects/string/italics/index.md

@@ -31,14 +31,27 @@ A string beginning with an `<i>` start tag, then the text `str`, and then an `</
 
 ### Using italics()
 
-The following example uses deprecated string methods to change the formatting of a string:
+The code below creates an HTML string and then replaces the document's body with it:
 
 ```js
-const worldString = "Hello, world";
-console.log(worldString.blink()); // <blink>Hello, world</blink>
-console.log(worldString.bold()); // <b>Hello, world</b>
-console.log(worldString.italics()); // <i>Hello, world</i>
-console.log(worldString.strike()); // <strike>Hello, world</strike>
+const contentString = "Hello, world";
+
+document.body.innerHTML = contentString.italics();
+```
+
+This will create the following HTML:
+
+```html
+<i>Hello, world</i>
+```
+
+Instead of using `italics()` and creating HTML text directly, you should use DOM APIs such as [`document.createElement()`](/en-US/docs/Web/API/Document/createElement). For example:
+
+```js
+const contentString = "Hello, world";
+const elem = document.createElement("i");
+elem.innerText = contentString;
+document.body.appendChild(elem);
 ```
 
 ## Specifications
@@ -52,6 +65,5 @@ console.log(worldString.strike()); // <strike>Hello, world</strike>
 ## See also
 
 - [Polyfill of `String.prototype.italics` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.blink()")}}
-- {{jsxref("String.prototype.bold()")}}
-- {{jsxref("String.prototype.strike()")}}
+- [HTML wrapper methods](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("i")}}