Overview

This group presents Elements included in the Living Standard §4.12 plus SVG and MathML inclusions.

  1. script and noscript provide, respectively, a Javascript inclusion and fallback when disabled.
  2. template and slot provide a mechanism to define modular mark-up to augment the page through JS.
  3. canvas, svg and math are graphical results. The former from its Javascript API, the latter two from their own external namespace dialect. In the Living Standard they are briefly mentioned in §4.8 and mainly discussed in their respective specifications.

noscript Noscript

Fallback content displayed when javascript is disabled, similar to the markup of objects showing when the embedding fails to resolve.

script Script

Code or metadata using another syntax, or reference to. With src, must be empty; used to link external Javascript. The type interprets the content.

Scripts are considered javascript with the default type='text/javascript'; its omission is encouraged in this case. Types using the x- prefix are deprecated per RFC-6648. More media types are found on the relevant IANA registry. Setting it to something different disables the script, which can later be eval(textContent). Other uses include text/ld+json for crawler metadata, or using it as a flag to make a script inert.

template Content Template

Contains content to be retrieved and inserted via Javascript. Template itself not rendered onto the page. Can be used to store innerHTML for a later use. Can be associated with a registered custom element. Provides style scoping and slot substitution via the shadow DOM. Using web components for headers / footers.

slot Web Component Slot

Defines locations in the template tree, that can later be substituted with instance sub-trees. To substitute slot marked name='someName', the subtitution should match attribute slot='someName'.

canvas Graphics Canvas

Rendering Element targeted via the Javascript API.

svg Scalable Vector Graphics

When the root element of an SVG file, must specify xlmns. Can then be embedded in HTML via img, object, etc. Should specifiy viewBox, its viewport relative its coordinate system, with syntax x0 y0 width height. The top can also be included directly in an HTML root, which lifts the xlmns requirement.

math Math Mark-up Language

Mark-up for Math formulas. MathML2 (W3)

x= −b± b2 − 4⁢a⁢c 2⁢a x = \frac{-b\pm\sqrt{b^2-4ac}}{2a} x = {-b plusminus sqrt {b^2 - 4 ac}} over {2 a} 

    <math 
    xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow><mi>a</mi><mo>&InvisibleTimes;</mo>
      <msup><mi>x</mi><mn>2</mn></msup>
      <mo>+</mo><mi>b</mi><mo>&InvisibleTimes;</mo>
      <mi>x</mi><mo>+</mo><mi>c</mi>
    </mrow></math>

Editable script

Using display: block and contenteditable lets users read and write the script. This can be used to create some kind of notebooks, with the script offered to the user to see, and potentially change. The document carries a currentScript reference, to the script being interpreted. Evaluating on event via eval makes it null, unless providing this using (s => eval(s.textContent))(script).