Rewrite: CSS namespace module and add CSS & HTML to glossary

files/en-us/glossary/namespace/index.md

@@ -8,8 +8,14 @@ page-type: glossary-definition
 
 Namespace is a context for identifiers, a logical grouping of names used in a program. Within the same context and same scope, an identifier must uniquely identify an entity.
 
-In an operating system a directory is a namespace. Each file or subdirectory has a unique name, but one file may use the same name multiple times.
+In an operating system, a directory is a namespace. Each file or subdirectory within a directory has a unique name; the same name can be used multiple times across subdirectories."
+
+In HTML, CSS, and XML-based languages, a namespace is the explicitly declared or implied dialect to which an element (or attribute) belongs.
 
 ## See also
 
+- [Namespaces crash course](/en-US/docs/Web/SVG/Namespaces_Crash_Course)
+- [CSS namespaces](/en-US/docs/Web/CSS/CSS_namespaces) module
+- CSS {{CSSXref("@namespace")}}
+- [`Document.createElementNS()`](/en-US/docs/Web/API/Document/createElementNS) method
 - [Namespace](https://en.wikipedia.org/wiki/Namespace) on Wikipedia

files/en-us/web/css/css_namespaces/index.md

@@ -7,18 +7,62 @@ browser-compat: css.at-rules.namespace
 
 {{CSSRef}}
 
-The **CSS namespaces** allows authors to specify [XML namespaces](/en-US/docs/Web/SVG/Namespaces_Crash_Course) in CSS.
+The **CSS namespaces** module defines the syntax for using {{glossary("namespace", "namespaces")}} in CSS.
+
+CSS isn't just for styling HTML. A stylesheet may be used to style SVG, MathML, XML, or HTML, each of which has a different namespace or a document containing multiple namespaces.
+
+The [`@namespace`](/en-US/docs/Web/CSS/@namespace) at-rule defined in this module enables distinguishing between same-named elements in different namespaces. Element tag names are not unique to a single language. For example, the `<a>` element isn't limited to HTML. You may want to style the `<a>`s within your SVGs differently than links in your HTML. You also likely want to ensure that {{domxref("Document.querySelectorAll", "querySelectorAll(\"a\")")}} selects the right kind of element. Namespacing can help.
+
+The `@namespace` rule is used for declaring a default namespace and for binding namespaces to namespace prefixes. The namespaces module also defines the syntax for using these prefixes to represent namespace-qualified names. That's it. What a name means or if the name is even valid depends on the context and host language.
 
 ## Reference
 
 ### At-rules
 
 - {{cssxref("@namespace")}}
 
+## Guides
+
+- [Namespaces crash course](/en-US/docs/Web/SVG/Namespaces_Crash_Course)
+
+  - : Deep dive into what a namespace is and how they are used in XML and XML-based markup languages.
+
+## Related concepts
+
+- CSS [namespace separator (`|`)](/en-US/docs/Web/CSS/Namespace_separator) combinator
+- CSS [type selectors](/en-US/docs/Web/CSS/Type_selectors)
+- CSS [universal selector](/en-US/docs/Web/CSS/Universal_selectors)
+- {{DOMXRef("CSSNamespaceRule")}} interface
+  - {{DOMXRef("CSSNamespaceRule.namespaceURI")}} property
+  - {{DOMXRef("CSSNamespaceRule.prefix")}} property
+- [`Document.createAttributeNS()`](/en-US/docs/Web/API/Document/createAttributeNS) method
+- [`Document.createElementNS()`](/en-US/docs/Web/API/Document/createElementNS) method
+- [`Document.getElementsByTagNameNS()`](/en-US/docs/Web/API/Document/getElementsByTagNameNS) method
+- [`Element.getAttributeNodeNS()`](/en-US/docs/Web/API/Element/getAttributeNodeNS) method
+- [`Element.getAttributeNS()`](/en-US/docs/Web/API/Element/getAttributeNS) method
+- [`Element.getElementsByTagNameNS()`](/en-US/docs/Web/API/Element/getElementsByTagNameNS) method
+- [`Element.hasAttributeNS()`](/en-US/docs/Web/API/Element/hasAttributeNS) method
+- [`Element.namespaceURI`](/en-US/docs/Web/API/Element/namespaceURI) property
+- [`Element.removeAttributeNS()`](/en-US/docs/Web/API/Element/removeAttributeNS) method
+- [`Element.setAttributeNS()`](/en-US/docs/Web/API/Element/setAttributeNS) method
+- [`Element.setAttributeNodeNS()`](/en-US/docs/Web/API/Element/setAttributeNodeNS) method
+- [`NamedNodeMap.getNamedItemNS()`](/en-US/docs/Web/API/NamedNodeMap/getNamedItemNS) method
+- [`NamedNodeMap.removeNamedItemNS()`](/en-US/docs/Web/API/NamedNodeMap/removeNamedItemNS) method
+- [`NamedNodeMap.setNamedItemNS()`](/en-US/docs/Web/API/NamedNodeMap/setNamedItemNS) method
+- {{glossary("Namespace")}} glossary term
+
 ## Specifications
 
 {{Specifications}}
 
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- [`<a>`](/en-US/docs/Web/SVG/Element/a#example) SVG element
+- [CSS `url()` function](/en-US/docs/Web/CSS/url)
+- [CSS at-rules](/en-US/docs/Web/CSS/At-rule)
+- [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions)
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)