Tag example-bad blocks with html-nolint (#20630)

* Tag `example-bad` blocks with html-nolint - Updating example-bad code blocks with the new tag. Refer: mdn/yari#7017 * Update files/en-us/learn/accessibility/html/index.md * Update files/en-us/learn/accessibility/html/index.md * Removed suggested no nolints Co-authored-by: Jean-Yves Perrier <[email protected]> * remove a trailing space * Update files/en-us/learn/accessibility/html/index.md * Update files/en-us/learn/accessibility/html/index.md Co-authored-by: Jean-Yves Perrier <[email protected]>
mdn · Sep 15, 2022 · 3f4c471 · 3f4c471
1 parent 7fa992e
commit 3f4c471
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 14 deletions.
diff --git a/files/en-us/learn/accessibility/html/index.md b/files/en-us/learn/accessibility/html/index.md
@@ -127,7 +127,8 @@ We've prepared a version with longer text for you to try out with a screen reade
 People sometimes write headings, paragraphs, etc. using line breaks and adding HTML elements purely for styling, something like the following:
 
 ```html example-bad
-<span style="font-size: 3em">My heading</span> <br /><br />
+<span style="font-size: 3em">My heading</span>
+<br /><br />
 This is the first section of my document.
 <br /><br />
 I'll add another paragraph here too.

diff --git a/files/en-us/learn/getting_started_with_the_web/html_basics/index.md b/files/en-us/learn/getting_started_with_the_web/html_basics/index.md
@@ -66,7 +66,7 @@ You can put elements inside other elements too — this is called **nesting**. I
 
 You do however need to make sure that your elements are properly nested. In the example above, we opened the {{htmlelement("p")}} element first, then the {{htmlelement("strong")}} element; therefore, we have to close the {{htmlelement("strong")}} element first, then the {{htmlelement("p")}} element. The following is incorrect:
 
-```html example-bad
+```html-nolint example-bad
 <p>My cat is <strong>very grumpy.</p></strong>
 ```
 

diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
@@ -213,7 +213,7 @@ There is a right and wrong way to do nesting. In the example above, we opened th
 
 The following is an example of the _wrong_ way to do nesting:
 
-```html example-bad
+```html-nolint example-bad
 <p>My cat is <strong>very grumpy.</p></strong>
 ```
 
@@ -454,7 +454,7 @@ If you look at code for a lot of other sites, you might come across a number of
 
 However, as soon as we add the `title` attribute in this way, there are problems:
 
-```html example-bad
+```html-nolint example-bad
 <a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
 ```
 
@@ -476,7 +476,7 @@ In this article you will also notice that the attributes are wrapped in double q
 
 Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing quotes that will go wrong:
 
-```html example-bad
+```html-nolint example-bad
 <a href="https://www.example.com'>A link to my example.</a>
 ```
 
@@ -488,7 +488,7 @@ However, if you use one type of quote, you can include the other type of quote _
 
 To use quote marks inside other quote marks of the same type (single quote or double quote), use [HTML entities](#entity_references_including_special_characters_in_html). For example, this will break:
 
-```html example-bad
+```html-nolint example-bad
 <a href='https://www.example.com' title='Isn't this fun?'>A link to my example.</a>
 ```
 

diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -81,7 +81,8 @@ Semantic HTML (where the elements are used for their correct purpose) is accessi
 The most important quick win in semantic HTML is to use a structure of headings and paragraphs for your content; this is because screen reader users tend to use the headings of a document as signposts to find the content they need more quickly. If your content has no headings, all they will get is a huge wall of text with no signposts to find anything. Examples of bad and good HTML:
 
 ```html example-bad
-<font size="7">My heading</font> <br /><br />
+<font size="7">My heading</font>
+<br /><br />
 This is the first section of my document.
 <br /><br />
 I'll add another paragraph here too.

diff --git a/...en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md b/...en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
@@ -73,7 +73,7 @@ You should put all attribute values in double quotes. It is tempting to omit quo
 
 …than this:
 
-```html example-bad
+```html-nolint example-bad
 <img src=images/logo.jpg alt=A circular globe icon class=no-border>
 ```
 
@@ -89,7 +89,7 @@ required
 
 This is perfectly understandable and works fine; the longer version with the value is supported but not necessary:
 
-```html example-bad
+```html-nolint example-bad
 required="required"
 ```
 
@@ -101,7 +101,7 @@ Use lowercase for all element names and attribute names/values because it looks
 <p class="nice">This looks nice and neat</p>
 ```
 
-```html example-bad
+```html-nolint example-bad
 <P CLASS="WHOA-THERE">Why is my markup shouting?</P>
 ```
 
@@ -125,7 +125,7 @@ Use double quotes for HTML, not single quotes, like so:
 <p class="important">Yes</p>
 ```
 
-```html example-bad
+```html-nolint example-bad
 <p class='important'>Nope</p>
 ```
 

diff --git a/files/en-us/web/html/element/a/index.md b/files/en-us/web/html/element/a/index.md
@@ -1,5 +1,5 @@
 ---
-title: '<a>: The Anchor element'
+title: "<a>: The Anchor element"
 slug: Web/HTML/Element/a
 tags:
   - Content
@@ -370,15 +370,19 @@ Using `target="_blank"` without [`rel="noreferrer"`](/en-US/docs/Web/HTML/Link_t
 A sadly common mistake is to only link the words "click here" or "here":
 
 ```html example-bad
-<p>Learn more about our products <a href="/products">here</a>.</p>
+<p>
+  Learn more about our products <a href="/products">here</a>.
+</p>
 ```
 
 #### Strong link text
 
 Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!
 
 ```html example-good
-<p>Learn more <a href="/products">about our products</a>.</p>
+<p>
+  Learn more <a href="/products">about our products</a>.
+</p>
 ```
 
 Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.