HTML global attributes

content/data/specifications.yaml

@@ -5,3 +5,4 @@ html.spec.whatwg.org: 'WHATWG HTML Living Standard'
 w3c.github.io/webappsec-cspee: 'Content Security Policy: Embedded Enforcement'
 w3c.github.io/webappsec-feature-policy: 'Feature Policy'
 wicg.github.io/priority-hints: 'Priority Hints'
+w3c.github.io/contentEditable: 'ContentEditable'

content/html/HTML.md

@@ -11,6 +11,7 @@ link_lists:
   - title: Reference
     pages:
       - "/content/html/reference/elements"
+      - "/content/html/reference/global_attributes"
 ---
 **HTML** (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ([CSS](/en-US/docs/Web/CSS)) or functionality/behavior ([JavaScript](/en-US/docs/Web/JavaScript)).
 

content/html/reference/global_attributes/contenteditable/contenteditable.md

@@ -0,0 +1,40 @@
+---
+title: 'contenteditable attribute'
+mdn_url: /en-US/docs/Web/HTML/Global_attributes/contenteditable
+interactive_example:
+  url: https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-contenteditable.html
+  height: html-short
+browser_compatibility: html.global_attributes.contenteditable
+specifications: 
+ - https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable
+ - https://w3c.github.io/contentEditable/#contenteditable
+examples: 
+  - examples/using-contenteditable
+recipe: html-global-attribute
+---
+
+## Short description
+
+The `contenteditable` global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
+
+## Values
+
+The attribute must take one of the following values:
+
+- `true` or the *empty string*, which indicates that the element must be editable;
+- `false`, which indicates that the element must not be editable.
+
+If this attribute is not set, its default value is inherited from its parent element.
+
+## Usage notes
+
+This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values `true`, `false` or the *empty string* is mandatory and that a shorthand like `<label contenteditable>Example Label</label>` is not allowed. The correct usage is `<label contenteditable="true">Example Label</label>`.
+
+You can set the color used to draw the text insertion [caret](https://developer.mozilla.org/docs/Glossary/caret) with the CSS [`caret-color`](https://developer.mozilla.org/docs/Web/CSS/caret-color) property.
+
+## See also
+
+- [Making content editable](https://developer.mozilla.org/docs/Web/Guide/HTML/Editable_content)
+- [`HTMLElement.contentEditable`](https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable) and [`HTMLElement.isContentEditable`](https://developer.mozilla.org/docs/Web/API/HTMLElement/isContentEditable)
+- The CSS [`caret-color`](https://developer.mozilla.org/docs/Web/CSS/caret-color) property
+- `HTMLElement` [`input` event](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event) which also fires for `contenteditable` elements

content/html/reference/global_attributes/contenteditable/contributors.md

@@ -0,0 +1,16 @@
+[SphinxKnight](/en-US/profiles/SphinxKnight),
+[estelle](/en-US/profiles/estelle),
+[mdnwebdocs-bot](/en-US/profiles/mdnwebdocs-bot),
+[mfuji09](/en-US/profiles/mfuji09),
+[wbamberg](/en-US/profiles/wbamberg),
+[Wryn](/en-US/profiles/Wryn),
+[jpreuss](/en-US/profiles/jpreuss),
+[ExE-Boss](/en-US/profiles/ExE-Boss),
+[genezx](/en-US/profiles/genezx),
+[sideshowbarker](/en-US/profiles/sideshowbarker),
+[DragMeToProgramming](/en-US/profiles/DragMeToProgramming),
+[jpmedley](/en-US/profiles/jpmedley),
+[Sheppy](/en-US/profiles/Sheppy),
+[mfluehr](/en-US/profiles/mfluehr),
+[chrisdavidmills](/en-US/profiles/chrisdavidmills),
+[teoli](/en-US/profiles/teoli)

content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/description.md

@@ -0,0 +1,3 @@
+You can set the `contenteditable` attribute on nearly any HTML element to make it editable.
+
+Here's a simple example which creates a `<div>` element whose contents the user can edit.

content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/example.html

@@ -0,0 +1,3 @@
+<div contenteditable="true">
+  This text can be edited by the user.
+</div>

content/html/reference/global_attributes/global_attributes.md

@@ -0,0 +1,10 @@
+---
+title: HTML global attributes
+mdn_url: /en-US/docs/Web/HTML/Global_attributes
+recipe: landing-page
+related_content: /content/related_content/html.yaml
+link_lists:
+  - title: Index of HTML global attributes
+    directory: "/content/html/reference/global_attributes"
+---
+This page lists all the HTML global attributes, which are created using tags...

content/related_content/html.yaml

@@ -9,3 +9,5 @@
   children:
   - title: Elements
     directory: "/content/html/reference/elements"
+  - title: Global attributes
+    directory: "/content/html/reference/global_attributes"

recipes/html-global-attribute.yaml

@@ -0,0 +1,10 @@
+related_content: /content/related_content/html.yaml
+body:
+- prose.short_description
+- meta.interactive_example?
+- prose.values
+- prose.*
+- meta.examples
+- meta.specifications
+- meta.browser_compatibility
+- prose.see_also

scripts/build-json/build-page-json.js

@@ -52,6 +52,7 @@ function buildPageJSON(docsPath) {
                 body = landingPage.buildLandingPageJSON(docsDirectory, data, content);
                 break;
             case 'html-element':
+            case 'html-global-attribute':
             case 'html-input-element': {
                     const cached = recipeCache[data.recipe];
                     let recipe;