Skip to content

Commit

Permalink
Tag example-bad blocks with html-nolint (mdn#20630)
Browse files Browse the repository at this point in the history
* 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 <jypenator@gmail.com>

* 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 <jypenator@gmail.com>
  • Loading branch information
2 people authored and Himanshu Garg committed Sep 27, 2022
1 parent 29ee5f6 commit 4f2f4e8
Show file tree
Hide file tree
Showing 6 changed files with 20 additions and 14 deletions.
3 changes: 2 additions & 1 deletion files/en-us/learn/accessibility/html/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand Down Expand Up @@ -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>
```

Expand All @@ -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>
```

Expand All @@ -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>
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand All @@ -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"
```

Expand All @@ -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>
```

Expand All @@ -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>
```

Expand Down
10 changes: 7 additions & 3 deletions files/en-us/web/html/element/a/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: '<a>: The Anchor element'
title: "<a>: The Anchor element"
slug: Web/HTML/Element/a
tags:
- Content
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 4f2f4e8

Please sign in to comment.