Fix issue 28752, part 4: update id and class attribute pages

files/en-us/web/html/global_attributes/class/index.md

@@ -7,10 +7,20 @@ browser-compat: html.global_attributes.class
 
 {{HTMLSidebar("Global_attributes")}}
 
-The **`class`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the [class selectors](/en-US/docs/Web/CSS/Class_selectors) or functions like the DOM method {{domxref("document.getElementsByClassName")}}.
+The **`class`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) is a list of the classes of the element, separated by [ACSII whitespace](/en-US/docs/Glossary/Whitespace#in_html).
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
 
+## Description
+
+Classes allow CSS and JavaScript to select and access specific elements via the [class selectors](/en-US/docs/Web/CSS/Class_selectors) or functions like the {{domxref("document.getElementsByClassName()")}}.
+
+### Syntax
+
+The `class` attribute is a list of class values separated by [ACSII whitespace](/en-US/docs/Glossary/Whitespace#in_html).
+
+Each class value may contain any Unicode characters (except, of course, ASCII whitespace). However, when used in CSS selectors, either from JavaScript using APIs like {{domxref("Document.querySelector()")}} or in CSS stylesheets, class attribute values must be valid [CSS identifiers](/en-US/docs/Web/CSS/ident). This means that if a class attribute value is not a valid CSS identifier (for example, `my?class` or `1234`) then it must be escaped before being used in a selector, either using the {{domxref("CSS.escape_static", "CSS.escape()")}} method or [manually](/en-US/docs/Web/CSS/ident#escaping_characters).
+
 Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element. For example, _attribute_ to describe an attribute rather than _italics_, although an element of this class may be presented by _italics_. Semantic names remain logical even if the presentation of the page changes.
 
 ## Specifications

files/en-us/web/html/global_attributes/id/index.md

@@ -7,25 +7,33 @@ browser-compat: html.global_attributes.id
 
 {{HTMLSidebar("Global_attributes")}}
 
-The **`id`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a [fragment identifier](/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment)), scripting, or styling (with {{glossary("CSS")}}).
+The **`id`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) defines an identifier (ID) which must be unique in the whole document.
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
 
-> [!WARNING]
-> This attribute's value is an opaque string: this means that web authors should not rely on it to convey human-readable information (although having your IDs somewhat human-readable can be useful for code comprehension, e.g. consider `ticket-18659` versus `r45tgfe-freds&$@`).
+## Description
 
-An `id`'s value must not contain {{glossary("whitespace")}} (spaces, tabs, etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the [`class`](/en-US/docs/Web/HTML/Global_attributes#class) attribute, which allows space-separated values, elements can only have one single ID value.
+The purpose of the `id` attribute is to identify a single element when linking (using a [fragment identifier](/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment)), scripting, or styling (with {{glossary("CSS")}}).
 
-Technically, the value for an `id` attribute may contain any character, except {{glossary("whitespace")}} characters. However, to avoid inadvertent errors, only {{glossary("ASCII")}} letters, digits, `'_'`, and `'-'` should be used, and the value for an `id` attribute should start with a letter.
+Elements with `id` attributes are available as global properties. The property name is the `id` attribute, and the property value is the element. For example, given markup like:
 
-For example, `.` has a special meaning in CSS (it starts a [class selector](/en-US/docs/Web/CSS/Class_selectors)). While valid, unless you are careful to escape it when used as part of a CSS selector, it won't be recognized as part of the element's `id`. The same applies to the [`querySelector()`](/en-US/docs/Web/API/Document/querySelector) and [`querySelectorAll()`](/en-US/docs/Web/API/Document/querySelectorAll) parameters, which use the same selector syntax. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect.
+```html
+<p id="preamble"></p>
+```
 
-Similarly, an `id` starting with a digit (E.g., `1234-322-678`) or a hyphen followed by a digit (E.g., `-123`), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs:
+You could access the paragraph element in JavaScript using code like:
 
-- CSS [ID selectors](/en-US/docs/Web/CSS/ID_selectors) accept any CSS identifier. If the `id` starts with a digit or one hyphen immediately followed by a digit, both the hyphen and digit must be escaped in CSS. For example, while `id="544-383-3388"` and `id="-3Pi"` are valid in HTML, the `id` selectors must be escaped. The element with these `id` values can be targeted in CSS with `#\35 44-383-3388` and `#\2D \33 pi`.
-- Any valid HTML `id` value is valid as an attribute selector in CSS and JavaScript. The selectors `[id="544-383-3388"]` and `[id="-3Pi"]` are valid.
-- {{domxref("Document.querySelector()")}} and similar methods using CSS-selector-style queries will not find them unless you escape them. (See this [page](https://codepen.io/estelle/pen/jOvzbgb) for an example.)
-- Such an `id` is not a valid JavaScript identifier. [Elements with IDs become global properties](https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-properties), but you cannot use non-identifier global properties as global variables — `1234` is not a global variable, and you have to use `window[1234]` instead to get the element with `id="1234"`. This is slightly inconvenient as you have to create the variable with an extra step: `const element = window[1234]`.
+```js
+const content = window.preamble.textContent;
+```
+
+### Syntax
+
+An `id`'s value must not contain [ACSII whitespace](/en-US/docs/Glossary/Whitespace#in_html) characters. Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the [`class`](/en-US/docs/Web/HTML/Global_attributes#class) attribute, which allows space-separated values, elements can only have one single ID value.
+
+Technically, the value for an `id` attribute may contain any other Unicode character. However, when used in CSS selectors, either from JavaScript using APIs like {{domxref("Document.querySelector()")}} or in CSS stylesheets, ID attribute values must be valid [CSS identifiers](/en-US/docs/Web/CSS/ident). This means that if an ID attribute value is not a valid CSS identifier (for example, `my?id` or `1234`) then it must be escaped before being used in a selector, either using the {{domxref("CSS.escape_static", "CSS.escape()")}} method or [manually](/en-US/docs/Web/CSS/ident#escaping_characters).
+
+Also, not all valid `id` attribute values are valid JavaScript identifiers. For example, `1234` is a valid attribute value but not a valid JavaScript identifier. This means that the value is not a valid variable name, so you can't access the element using code like `window.1234`. However, you can access it using `window["1234"]`.
 
 ## Specifications