Parse processing instructions in HTML

at a glance

why it exists

Processing instructions (PIs) are an established DOM primitive in XML: they appear as ProcessingInstruction nodes and carry an arbitrary target and data string that tooling can act on while leaving element structure untouched. Until this feature, the HTML parser silently discarded PIs. The motivation is to enable two new use-cases without adding new element types that would affect CSS layout:

• Range markers — <?start id?> / <?end id?> pairs delimit DOM regions (used by out-of-order streaming and syntax-highlighting tools).
• Parser directives — targets can signal to a streaming parser how to buffer or flush content.

syntax

A processing instruction in HTML markup follows the XML grammar:

<?target data?>

where target is a name token and data is an arbitrary string that does not contain ?>. The parser creates a ProcessingInstruction node with .target and .data properties.

DOM interface (existing)

example

Inserting a PI in HTML and reading it from JS

<!-- HTML source -->
<div>
  <?highlight start="1" end="3"?>
  <p>Line one</p>
  <p>Line two</p>
  <p>Line three</p>
  <?highlight end?>
</div>

<script>
// Walk childNodes and collect PIs
const pis = [];
document.body.querySelectorAll('*').forEach(el => {
  for (const child of el.childNodes) {
    if (child.nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
      pis.push({ target: child.target, data: child.data });
    }
  }
});
console.log(pis);
// [{ target: "highlight", data: "start=\"1\" end=\"3\"" },
//  { target: "highlight", data: "end" }]
</script>

Using createProcessingInstruction from JS

const pi = document.createProcessingInstruction('stream', 'flush-before');
document.body.prepend(pi);
// <?stream flush-before?>

browser support

see also

• whatwg/html PR #12118 — spec pull request
• DOM Standard: ProcessingInstruction
• Out of order streaming — related feature using PI range markers
• chromestatus: Parse processing instructions in HTML
• chrome-platform-showcase: demos