jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-13 16:04:36 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): replace self-closing with void element (#55383)

Browse Source
This commit is contained in:
Lasse Jørgensen
2024-07-01 19:39:10 +02:00
committed by GitHub
parent 3f9498120e
commit 464dbf6a28
4 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
View File

@@ -7,7 +7,7 @@ dashedName: step-7
# --description--
You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a <dfn>self-closing tag</dfn>.
You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
Add an `img` element below the `p` element. At this point, no image will show up in the browser.
@@ -19,7 +19,7 @@ Your `img` element should have an opening tag. Opening tags have this syntax: `<
assert(document.querySelector('img'));
```
Your `img` element should not have a closing tag. Closing tags have a `/` just after the `<` character.
Your `img` element should not have a closing tag `</img>`.
```js
assert(!code.match(/<\/img\>/));

2
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
View File

@@ -7,7 +7,7 @@ dashedName: step-37
# --description--
The `input` element allows you several ways to collect data from a web form. Like `img` elements, `input` elements are <dfn>self-closing</dfn> and do not need closing tags.
The `input` element allows you several ways to collect data from a web form. Like `img` elements, `input` elements are a <dfn>void element</dfn> and do not need closing tags.
Nest an `input` element in the `form` element.

2
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
View File

@@ -15,7 +15,7 @@ Here is an example of a radio button with the option of `cat`:
<input type="radio"> cat
```
Remember that `input` elements are <dfn>self-closing</dfn>.
Remember that an `input` element is a void element.
Before the text input, add a radio button with the option set as:

8
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
View File

@@ -7,7 +7,7 @@ dashedName: step-69
# --description--
You can set browser behavior by adding self-closing `meta` elements in the `head`. Here's an example:
You can set browser behavior by adding `meta` elements in the `head`. Here's an example:
```html
<meta attribute="value">
@@ -15,13 +15,13 @@ You can set browser behavior by adding self-closing `meta` elements in the `head
Inside the `head` element, nest a `meta` element with an attribute named `charset`. Set to the value to `utf-8` which tells the browser how to encode characters for the page.
Note that `meta` elements are self-closing.
Note that the `meta` element is a void element.
With that last change, you have completed the Cat Photo App project. Congratulations!
# --hints--
You should create a self-closing `meta` element within the `head` element.
You should create a `meta` element within the `head` element.
```js
assert.exists(document.querySelector('head > meta'));
@@ -33,7 +33,7 @@ You should give the `meta` element a `charset` of `UTF-8`.
assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
```
Your `meta` element should be a self-closing tag, you don't need to add `</meta>`.
Your `meta` element should be a void element, you don't need to add `</meta>`.
```js
assert.notMatch(code, /<\/meta\s*>?/i);