fix(curriculum): replace self-closing with void element#55342 (freeCodeCamp#56303)

uzma-nazim · web-flow · commit 5bffac9bdd9c · 2024-10-11T16:42:49.000Z
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md
@@ -15,7 +15,7 @@ You can use the `hr` tag to add a horizontal line across the width of its contai
 
 Add an `hr` tag underneath the `h4` which contains the card title.
 
-**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag.
+**Note:** In HTML, `hr` is a void element, and therefore doesn't need a separate closing tag.
 
 # --hints--
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
@@ -16,7 +16,7 @@ An example of this would be:
 <img src="https://www.freecatphotoapp.com/your-image.jpg">
 ```
 
-Note that `img` elements are self-closing.
+Note that `img` is a void element.
 
 All `img` elements **must** have an `alt` attribute. The text inside an `alt` attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
@@ -17,7 +17,7 @@ You can create placeholder text like so:
 <input type="text" placeholder="this is placeholder text">
 ```
 
-**Note:** Remember that `input` elements are self-closing.
+**Note:** Remember that `input` is a void element.
 
 # --instructions--
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
@@ -19,7 +19,7 @@ You can create a text input like this:
 <input type="text">
 ```
 
-Note that `input` elements are self-closing.
+Note that `input` is a void element.
 
 # --instructions--
 
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md b/curriculum/challenges/english/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
@@ -12,7 +12,7 @@ So far, you’ve seen how JSX differs from HTML in a key way with the use of `cl
 
 Another important way in which JSX differs from HTML is in the idea of the self-closing tag.
 
-In HTML, almost all tags have both an opening and closing tag: `<div></div>`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.
+In HTML, almost all tags have both an opening and closing tag: `<div></div>`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called <dfn>void elements</dfn>, or elements that don’t require both an opening and closing tag before another element can start.
 
 For example the line-break tag can be written as `<br>` or as `<br />`, but should never be written as `<br></br>`, since it doesn't contain any content.
 
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/english/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -9,9 +9,9 @@ dashedName: css-foundations-lesson-f
 
 Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
 
-External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a `<link>` element (which is a void element and doesn't require a closing tag):
 
-First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+First, you add a void element `<link>` tag inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
 
 Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white; ` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
 
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -8,7 +8,7 @@ dashedName: html-foundations-lesson-b
 
 You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
 
-There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as void elements or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
 
 HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
 
@@ -18,7 +18,7 @@ Using the correct elements for content is called semantic HTML. You will explore
     
 ## --text--
 
-Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+Why are void elements like `<br/>` or `<img>` essential in HTML?
 
 ## --answers--
 
diff --git a/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -9,7 +9,7 @@ dashedName: links-and-images-lesson-e
 
 Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
 
 Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
 
diff --git a/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -8,7 +8,7 @@ dashedName: links-and-images-lesson-f
 
 Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
 
 Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
 
diff --git a/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -8,7 +8,7 @@ dashedName: links-and-images-lesson-g
 
 Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
 
 Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
 
diff --git a/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/english/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -8,7 +8,7 @@ dashedName: links-and-images-lesson-h
 
 Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
 
 Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
 
