Skip to content

Commit aff319c

Browse files
Josh-Cenachrisdavidmills
Josh-Cena
and
chrisdavidmills
authored
Lint: HTML conformance/style fixes (2) (#41771)
* HTML conformance/style fixes (2) * Apply suggestions from code review Co-authored-by: Chris Mills <chrisdavidmills@gmail.com> * Update files/en-us/web/api/htmlimageelement/usemap/index.md --------- Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
1 parent 3b3c67e commit aff319c

74 files changed

Lines changed: 351 additions & 345 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎files/en-us/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ To make sure that Vue can accurately compare the `key` attributes, they need to
124124

125125
3. Now, add the `v-for` directive and `key` attribute to the `<li>` element in your `App.vue` template, like so:
126126

127-
```html
127+
```vue
128128
<ul>
129129
<li v-for="item in ToDoItems" :key="item.id">
130130
<to-do-item label="My ToDo Item" :done="true"></to-do-item>
@@ -136,7 +136,7 @@ To make sure that Vue can accurately compare the `key` attributes, they need to
136136

137137
4. Update the `label="My ToDo Item"` attribute to `:label="item.label"`, and the `:done="true"` attribute to `:done="item.done"`, as seen in context below:
138138

139-
```html
139+
```vue
140140
<ul>
141141
<li v-for="item in ToDoItems" :key="item.id">
142142
<to-do-item :label="item.label" :done="item.done"></to-do-item>
@@ -176,7 +176,7 @@ export default {
176176

177177
Now, over in your `App.vue` component, pass `item.id` as a prop to the `ToDoItem` component. Your `App.vue` template should now look like this:
178178

179-
```html
179+
```vue
180180
<template>
181181
<div id="app">
182182
<h1>My To-Do List</h1>

‎files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -292,15 +292,15 @@ We should apply the button CSS classes to the `<button>` in our `ToDoForm` compo
292292

293293
Add `class="btn btn__primary btn__lg"` to your form's `<button>` element:
294294

295-
```html
295+
```vue
296296
<button type="submit" class="btn btn__primary btn__lg">Add</button>
297297
```
298298

299299
While we're here, there's one more semantic and styling change we can make. Since our form denotes a specific section of our page, it could benefit from an `<h2>` element. The label, however, already denotes the purpose of the form. To avoid repeating ourselves, let's wrap our label in an `<h2>`. There are a few other global CSS styles which we can add as well. We'll also add the `input__lg` class to our `<input>` element.
300300

301301
Update your `ToDoForm` template so that it looks like this:
302302

303-
```html
303+
```vue
304304
<template>
305305
<form @submit.prevent="onSubmit">
306306
<h2 class="label-wrapper">
@@ -324,7 +324,7 @@ Let's also add the `stack-large` class to the `<ul>` tag in our `App.vue` file.
324324

325325
Update it as follows:
326326

327-
```html
327+
```vue
328328
<ul aria-labelledby="list-summary" class="stack-large">
329329
…
330330
</ul>
@@ -459,11 +459,11 @@ Now we need to add some CSS classes to our template to connect the styles.
459459

460460
To the root `<div>`, add a `custom-checkbox` class. To the `<input>`, add a `checkbox` class. Last of all, to the `<label>` add a `checkbox-label` class. The updated template is below:
461461

462-
```html
462+
```vue
463463
<template>
464464
<div class="custom-checkbox">
465465
<input type="checkbox" :id="id" :checked="isDone" class="checkbox" />
466-
<label :for="id" class="checkbox-label">\{{label}}</label>
466+
<label :for="id" class="checkbox-label">\{{ label }}</label>
467467
</div>
468468
</template>
469469
```

‎files/en-us/learn_web_development/core/structuring_content/general_embedding_technologies/index.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,6 @@ If you were to add the code below into one of your pages, you might be surprised
7979
height="500"
8080
allowfullscreen
8181
sandbox>
82-
<p>
83-
<a href="/en-US/docs/Glossary">
84-
Fallback link for browsers that don't support iframes
85-
</a>
86-
</p>
8782
</iframe>
8883
```
8984

‎files/en-us/learn_web_development/core/structuring_content/including_vector_graphics_in_html/index.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -171,16 +171,14 @@ You can open SVG images in your browser just like webpages. So embedding an SVG
171171
Here's a quick review:
172172

173173
```html
174-
<iframe src="triangle.svg" width="500" height="500" sandbox>
175-
<img src="triangle.png" alt="Triangle with three unequal sides" />
176-
</iframe>
174+
<iframe src="triangle.svg" width="500" height="500" sandbox></iframe>
177175
```
178176

179177
This is definitely not the best method to choose:
180178

181179
#### Cons
182180

183-
- `iframe`s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for `iframe`s altogether.
181+
- `<iframe>` elements can include fallback content between their opening and closing tags, but this is only displayed in browsers that don't support `<iframe>`s, not when the image fails to load.
184182
- Moreover, unless the SVG and your current webpage have the same {{glossary('origin')}}, you cannot use JavaScript on your main webpage to manipulate the SVG.
185183

186184
## Playing with SVG

‎files/en-us/web/api/cspviolationreportbody/blockedurl/index.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -122,14 +122,14 @@ The policy also uses the `trusted-types` directive to specify that a {{domxref("
122122
<script src="main.js"></script>
123123
</head>
124124

125-
<body></body>
126-
127-
<script>
128-
const policy = trustedTypes.createPolicy("somePolicy", {
129-
// Some (insufficient) sanitization code
130-
createHTML: (string) => string.replace(/</g, "&lt;"),
131-
});
132-
</script>
125+
<body>
126+
<script>
127+
const policy = trustedTypes.createPolicy("somePolicy", {
128+
// Some (insufficient) sanitization code
129+
createHTML: (string) => string.replace(/</g, "&lt;"),
130+
});
131+
</script>
132+
</body>
133133
</html>
134134
```
135135

‎files/en-us/web/api/geolocation_api/using_the_geolocation_api/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ button {
133133
```html
134134
<button id="find-me">Show my location</button><br />
135135
<p id="status"></p>
136-
<a id="map-link" href="" target="_blank"></a>
136+
<a id="map-link" href="" target="_blank">Location unknown</a>
137137
```
138138

139139
### JavaScript

‎files/en-us/web/api/htmlareaelement/ping/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ It reflects the `ping` attribute of the {{HTMLElement("area")}} element.
1818
## Example
1919

2020
```html
21-
<map>
21+
<map name="example-map" id="example-map">
2222
<area
2323
href="https://example.com"
2424
ping="https://example-tracking.com https://example-analytics.com"
@@ -27,7 +27,7 @@ It reflects the `ping` attribute of the {{HTMLElement("area")}} element.
2727
```
2828

2929
```js
30-
const areaCollection = document.getElementsByTagName("map")[0].areas;
30+
const areaCollection = document.getElementById("example-map").areas;
3131
console.log(areaCollection[0].ping); // Output: "https://example-tracking.com https://example-analytics.com"
3232
```
3333

‎files/en-us/web/api/htmlareaelement/referrerpolicy/index.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ A string; one of the following:
5151
## Examples
5252

5353
```html
54-
<img usemap="#mapAround" width="100" height="100" src="/img/logo@2x.png" />
55-
<map id="myMap" name="mapAround"></map>
54+
<img usemap="#my-map" width="100" height="100" src="/img/logo@2x.png" />
55+
<map id="my-map" name="my-map"></map>
5656
```
5757

5858
```js
@@ -61,7 +61,7 @@ elt.href = "/img2.png";
6161
elt.shape = "rect";
6262
elt.referrerPolicy = "no-referrer";
6363
elt.coords = "0,0,100,100";
64-
const map = document.getElementById("myMap");
64+
const map = document.getElementById("my-map");
6565

6666
map.appendChild(elt);
6767
// When clicked, the area's link will not send a referrer header.

‎files/en-us/web/api/htmldialogelement/close/index.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ From there you can click the _X_ button to close the dialog (via the `HTMLDialog
3636
<!-- Simple pop-up dialog box, containing a form -->
3737
<dialog id="favDialog">
3838
<form method="dialog">
39-
<button id="close" aria-label="close" formnovalidate>X</button>
39+
<button type="button" id="close" aria-label="close">X</button>
4040
<section>
4141
<p>
4242
<label for="favAnimal">Favorite animal:</label>
@@ -49,15 +49,17 @@ From there you can click the _X_ button to close the dialog (via the `HTMLDialog
4949
</p>
5050
</section>
5151
<menu>
52-
<button type="reset">Reset</button>
53-
<button type="submit">Confirm</button>
52+
<li>
53+
<button type="reset">Reset</button>
54+
</li>
55+
<li>
56+
<button type="submit">Confirm</button>
57+
</li>
5458
</menu>
5559
</form>
5660
</dialog>
5761

58-
<menu>
59-
<button id="updateDetails">Update details</button>
60-
</menu>
62+
<button id="updateDetails">Update details</button>
6163
```
6264

6365
```js

‎files/en-us/web/api/htmldialogelement/requestclose/index.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,7 @@ Once open you can click the **X** button to request to close the dialog (via the
4545
<!-- Simple pop-up dialog box, containing a form -->
4646
<dialog id="favDialog">
4747
<form method="dialog">
48-
<button type="button" id="close" aria-label="close" formnovalidate>
49-
X
50-
</button>
48+
<button type="button" id="close" aria-label="close">X</button>
5149
<section>
5250
<p>
5351
<label for="favAnimal">Favorite animal:</label>
@@ -60,15 +58,17 @@ Once open you can click the **X** button to request to close the dialog (via the
6058
</p>
6159
</section>
6260
<menu>
63-
<button type="reset">Reset</button>
64-
<button type="submit">Confirm</button>
61+
<li>
62+
<button type="reset">Reset</button>
63+
</li>
64+
<li>
65+
<button type="submit">Confirm</button>
66+
</li>
6567
</menu>
6668
</form>
6769
</dialog>
6870

69-
<menu>
70-
<button id="updateDetails">Update details</button>
71-
</menu>
71+
<button id="updateDetails">Update details</button>
7272
```
7373

7474
#### JavaScript

0 commit comments

Comments
 (0)