Skip to content
Expand self-closing tags in HTML
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

pHTML Self Closing pHTML

NPM Version Build Status Support Chat

pHTML Self Closing lets you use self-closing tags in HTML.

<div><div class="main"/></div>
<template><slot name="title"/></template>

<!-- becomes -->

<div><div class="main"></div></div>
<template><slot name="title"></slot></template>

Note: The <script> and <style> tags are ignored.


Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/self-closing


Add pHTML Self Closing to your project:

npm install @phtml/self-closing --save-dev

Use pHTML Self Closing to process your HTML:

const phtmlSelfClosing = require('@phtml/self-closing');

phtmlSelfClosing.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlSelfClosing = require('@phtml/self-closing');

  phtmlSelfClosing(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML Self Closing runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt



The ignore option defines self-closing elements that will not be expanded.

phtmlSelfClosing({ ignore: 'a' });

<!-- becomes -->


The ignore option accepts a string or an array of strings.

phtmlSelfClosing({ ignore: ['a', 'custom-element'] });

<!-- becomes -->

You can’t perform that action at this time.