HTML: better documentation for 'Void element' (mdn#21195)

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
mfuji09 · Nov 27, 2023 · 2021053 · 2021053
1 parent fc1fed0
commit 2021053
Show file tree

Hide file tree

Showing 24 changed files with 82 additions and 66 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -3596,6 +3596,7 @@
 /en-US/docs/Glossary/Content_type	/en-US/docs/Glossary/MIME_type
 /en-US/docs/Glossary/DTD	/en-US/docs/Glossary/Doctype
 /en-US/docs/Glossary/Distributed_DenialofService	/en-US/docs/Glossary/Distributed_Denial_of_Service
+/en-US/docs/Glossary/Empty_element	/en-US/docs/Glossary/Void_element
 /en-US/docs/Glossary/Error	/en-US/docs/Glossary/Exception
 /en-US/docs/Glossary/Global_attribute	/en-US/docs/Web/HTML/Global_attributes
 /en-US/docs/Glossary/Hash_function	/en-US/docs/Glossary/Cryptographic_hash_function

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -2140,22 +2140,6 @@
       "teoli"
     ]
   },
-  "Glossary/Empty_element": {
-    "modified": "2019-03-23T23:13:31.023Z",
-    "contributors": [
-      "yisibl",
-      "sideshowbarker",
-      "rudijuri",
-      "chrisdavidmills",
-      "joshcartme",
-      "ThatGlennD",
-      "jtojnar",
-      "cvrebert",
-      "Andrew_Pfeiffer",
-      "klez",
-      "teoli"
-    ]
-  },
   "Glossary/Encapsulation": {
     "modified": "2019-03-23T23:05:09.108Z",
     "contributors": [
@@ -5185,6 +5169,22 @@
     "modified": "2019-03-23T22:58:50.586Z",
     "contributors": ["hbloomer", "klez", "chrisdavidmills", "ravi_pro"]
   },
+  "Glossary/Void_element": {
+    "modified": "2019-03-23T23:13:31.023Z",
+    "contributors": [
+      "yisibl",
+      "sideshowbarker",
+      "rudijuri",
+      "chrisdavidmills",
+      "joshcartme",
+      "ThatGlennD",
+      "jtojnar",
+      "cvrebert",
+      "Andrew_Pfeiffer",
+      "klez",
+      "teoli"
+    ]
+  },
   "Glossary/W3C": {
     "modified": "2020-10-05T12:31:52.600Z",
     "contributors": [

diff --git a/files/en-us/glossary/empty_element/index.md b/files/en-us/glossary/empty_element/index.md
diff --git a/files/en-us/glossary/tag/index.md b/files/en-us/glossary/tag/index.md
@@ -9,7 +9,7 @@ tags:
 
 In {{Glossary("HTML")}}, a **tag** is used for creating an {{Glossary("element")}}.
 
-The name of an HTML element is the name used in angle brackets such as `<p>` for paragraph. Note that the end tag's name is preceded by a slash character, `</p>`, and that in {{glossary("empty element", "empty elements")}}, the end tag is neither required nor allowed. If {{Glossary("attribute", "attributes")}} are not mentioned, default values are used in each case.
+The name of an HTML element is the name that appears at the beginning of the element's start tag and at the end of the element's end tag (if the element has an end tag). For example, the `p` in the `<p>` start tag and `</p>` end tag is the name of the HTML paragraph element. Note that an element name in an end tag is preceded by a slash character: `</p>`, and that for {{glossary("void element", "void elements")}}, the end tag is neither required nor allowed.
 
 ## See also
 

diff --git a/files/en-us/glossary/void_element/index.md b/files/en-us/glossary/void_element/index.md
@@ -0,0 +1,43 @@
+---
+title: Void element
+slug: Glossary/Void_element
+tags:
+  - CodingScripting
+  - HTML
+  - Intermediate
+---
+
+A **void element** is an {{Glossary("element")}} in HTML that **cannot** have any child nodes (i.e., nested elements or text nodes). Void elements only have a start tag; end tags must not be specified for void elements.
+
+In HTML, a void element must not have an end tag. For example, `<input type="text"></input>` is invalid HTML. In contrast, SVG or MathML elements that cannot have any child nodes may use an end tag instead of XML self-closing-tag syntax in their start tag.
+
+The [HTML](https://html.spec.whatwg.org/multipage/), [SVG](https://www.w3.org/TR/SVG2/), and [MathML](https://www.w3.org/TR/MathML3/) specifications define very precisely what each element can contain. So, some combinations of tags have no semantic meaning.
+
+Although there is no way to mark up a void element as having any children, child nodes can be added programmatically to the element in the DOM using JavaScript. But that is not a good practice, as the outcome will not be reliable.
+
+The void elements in HTML are as follows:
+
+- {{HTMLElement("area")}}
+- {{HTMLElement("base")}}
+- {{HTMLElement("br")}}
+- {{HTMLElement("col")}}
+- {{HTMLElement("embed")}}
+- {{HTMLElement("hr")}}
+- {{HTMLElement("img")}}
+- {{HTMLElement("input")}}
+- {{HTMLElement("keygen")}}(HTML 5.2 Draft removed)
+- {{HTMLElement("link")}}
+- {{HTMLElement("meta")}}
+- {{HTMLElement("param")}}
+- {{HTMLElement("source")}}
+- {{HTMLElement("track")}}
+- {{HTMLElement("wbr")}}
+
+## The curious case of self-closing tags
+
+_Self-closing tags (`<tag />`) do not exist in HTML._\
+However, the start tags of SVG and MathML elements that cannot have any child nodes are allowed to be marked as self-closing. In such cases, if an element's start tag is marked as self-closing, the element must not have an end tag.
+
+If a trailing `/` (slash) character is present in the start tag of an HTML element, HTML parsers ignore that slash character. However, some code formatters add a trailing slash character to the start tags of void elements to make them XHTML compatible and more readable. For example, some code formatters will convert `<input type="text">` to `<input type="text" />`.
+
+> **Note:** If a trailing `/` (slash) character in a start tag is directly preceded by an unquoted attribute value — with no space between — the slash becomes a part of the attribute value rather than being discarded by the parser. For example, the markup `<img src=http://www.example.com/logo.svg/>` results in the `src` attribute having the value `http://www.example.com/logo.svg/` — which makes the URL wrong.
diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -52,7 +52,9 @@ In the beginning, the Web was just text, and it was really quite boring. Fortuna
 
 ## How do we put an image on a webpage?
 
-In order to put a simple image on a webpage, we use the {{htmlelement("img")}} element. This is an {{glossary("empty element")}} (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — `src` (sometimes spoken as its full title, _source_). The `src` attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL, in the same way as `href` attribute values in {{htmlelement("a")}} elements.
+In order to put a simple image on a web page, we use the {{htmlelement("img")}} element. This is a {{Glossary("void element")}} (meaning, it cannot have any child content and cannot have an end tag) that requires two attributes to be useful: `src` and `alt`. The `src` attribute contains a URL pointing to the image you want to embed in the page. As with the`href` attribute for {{htmlelement("a")}} elements, the `src` attribute can be a relative URL or an absolute URL. Without a `src` attribute, an `img` element has no image to load.
+
+The [`alt` attribute is described below](#Alternative_text).
 
 > **Note:** You should read [A quick primer on URLs and paths](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#a_quick_primer_on_urls_and_paths) to refresh your memory on relative and absolute URLs before continuing.
 

diff --git a/files/en-us/web/css/replaced_element/index.md b/files/en-us/web/css/replaced_element/index.md
@@ -59,6 +59,7 @@ Certain CSS properties can be used to specify how the object contained within th
 ## See also
 
 - [HTML Spec](https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)
+- {{glossary("void element", "Void elements")}}
 - CSS key concepts:
   - [CSS syntax](/en-US/docs/Web/CSS/Syntax)
   - [At-rules](/en-US/docs/Web/CSS/At-rule)

diff --git a/files/en-us/web/html/element/area/index.md b/files/en-us/web/html/element/area/index.md
@@ -34,7 +34,7 @@ This element is used only within a {{HTMLElement("map")}} element.
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/base/index.md b/files/en-us/web/html/element/base/index.md
@@ -28,7 +28,7 @@ A document's used base URL can be accessed by scripts with {{domxref('Node.baseU
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/br/index.md b/files/en-us/web/html/element/br/index.md
@@ -80,7 +80,7 @@ Use `<p>` elements, and use CSS properties like {{cssxref("margin")}} to control
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/col/index.md b/files/en-us/web/html/element/col/index.md
@@ -31,7 +31,7 @@ The **`<col>`** [HTML](/en-US/docs/Web/HTML) element defines a column within a t
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/colgroup/index.md b/files/en-us/web/html/element/colgroup/index.md
@@ -31,7 +31,7 @@ The **`<colgroup>`** [HTML](/en-US/docs/Web/HTML) element defines a group of col
       <th scope="row">Permitted content</th>
       <td>
         If the {{htmlattrxref("span", "colgroup")}} attribute is
-        present: none, it is an {{Glossary("empty element")}}.<br />If
+        present: none.<br />If
         the attribute is not present: zero or more {{HTMLElement("col")}}
         element
       </td>

diff --git a/files/en-us/web/html/element/embed/index.md b/files/en-us/web/html/element/embed/index.md
@@ -46,7 +46,7 @@ Keep in mind that most modern browsers have deprecated and removed support for b
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/hr/index.md b/files/en-us/web/html/element/hr/index.md
@@ -33,7 +33,7 @@ Historically, this has been presented as a horizontal rule or line. While it may
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/img/index.md b/files/en-us/web/html/element/img/index.md
@@ -366,7 +366,7 @@ The value of the `title` attribute is usually presented to the user as a tooltip
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md
@@ -1204,7 +1204,7 @@ Firefox uses the following heuristics to determine the locale to validate the us
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/keygen/index.md b/files/en-us/web/html/element/keygen/index.md
@@ -50,7 +50,7 @@ The **`<keygen>`** [HTML](/en-US/docs/Web/HTML) element exists to facilitate gen
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/link/index.md b/files/en-us/web/html/element/link/index.md
@@ -406,7 +406,7 @@ You can find a number of `<link rel="preload">` examples in [Preloading content
     </tr>
     <tr>
       <th>Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th>Tag omission</th>

diff --git a/files/en-us/web/html/element/menuitem/index.md b/files/en-us/web/html/element/menuitem/index.md
@@ -36,7 +36,7 @@ A command can either be defined explicitly, with a textual label and optional ic
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/meta/index.md b/files/en-us/web/html/element/meta/index.md
@@ -41,7 +41,7 @@ The **`<meta>`** [HTML](/en-US/docs/Web/HTML) element represents {{Glossary("Met
     </tr>
     <tr>
       <th>Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th>Tag omission</th>

diff --git a/files/en-us/web/html/element/param/index.md b/files/en-us/web/html/element/param/index.md
@@ -26,7 +26,7 @@ The **`<param>`** [HTML](/en-US/docs/Web/HTML) element defines parameters for an
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/source/index.md b/files/en-us/web/html/element/source/index.md
@@ -30,7 +30,7 @@ The **`<source>`** [HTML](/en-US/docs/Web/HTML) element specifies multiple media
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/track/index.md b/files/en-us/web/html/element/track/index.md
@@ -34,7 +34,7 @@ The **`<track>`** [HTML](/en-US/docs/Web/HTML) element is used as a child of the
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
-      <td>None, it is an {{Glossary("empty element")}}.</td>
+      <td>None, it is an {{Glossary("void element")}}.</td>
     </tr>
     <tr>
       <th scope="row">Tag omission</th>

diff --git a/files/en-us/web/html/element/wbr/index.md b/files/en-us/web/html/element/wbr/index.md
@@ -40,7 +40,7 @@ The **`<wbr>`** [HTML](/en-US/docs/Web/HTML) element represents a word break opp
     <tr>
       <th scope="row">Tag omission</th>
       <td>
-        It is an {{Glossary("empty element")}}; it must have a start
+        It is an {{Glossary("void element")}}; it must have a start
         tag, but must not have an end tag.
       </td>
     </tr>