### Install htmlnano

Source: https://htmlnano.netlify.app/usage

Install htmlnano using npm. This is the first step before using it in your project.

```bash
npm install htmlnano  

```

--------------------------------

### Install Dependencies for minifyUrls

Source: https://htmlnano.netlify.app/modules

Instructions for installing the necessary npm packages to use the minifyUrls module.

```bash
npm install --save-dev relateurl terser srcset
# if you prefer yarn
# yarn add --dev relateurl terser srcset
# if you prefer pnpm
# pnpm install --save-dev relateurl terser srcset
```

--------------------------------

### Install cssnano and postcss

Source: https://htmlnano.netlify.app/modules

Installs cssnano and postcss development dependencies using npm, yarn, or pnpm.

```bash
npm install --save-dev cssnano postcss  
# if you prefer yarn  
# yarn add --dev cssnano postcss  
# if you prefer pnpm  
# pnpm install --save-dev cssnano postcss  

```

--------------------------------

### Install uncss for htmlnano

Source: https://htmlnano.netlify.app/modules

Install the `uncss` package as a development dependency using npm, yarn, or pnpm to enable its use with htmlnano.

```bash
npm install --save-dev uncss
# if you prefer yarn
# yarn add --dev uncss
# if you prefer pnpm
# pnpm install --save-dev uncss
```

--------------------------------

### Install gulp-posthtml

Source: https://htmlnano.netlify.app/usage

Install gulp-posthtml for Gulp integration. This package allows using PostHTML plugins, including htmlnano, within Gulp tasks.

```bash
npm i -D gulp-posthtml  

```

--------------------------------

### Install html-minimizer-webpack-plugin

Source: https://htmlnano.netlify.app/usage

Install the html-minimizer-webpack-plugin for Webpack. This plugin integrates htmlnano into the Webpack build process.

```bash
npm install html-minimizer-webpack-plugin --save-dev  

```

--------------------------------

### Collapse Whitespace Example

Source: https://htmlnano.netlify.app/modules

Demonstrates how collapseWhitespace affects HTML structure with different options.

```html
<div>  
    hello  world!  
    <a href="#">answer</a>  
    <style>div  { color: red; }  </style>  
    <main></main>  
</div>  
```

```html
<div>hello world!<a href="#">answer</a><style>div  { color: red; }  </style><main></main></div>  
```

```html
<div>hello world! <a href="#">answer</a><style>div  { color: red; }  </style><main></main></div>  
```

```html
<div> hello world! <a href="#">answer</a> <style>div  { color: red; }  </style> <main></main> </div>  
```

--------------------------------

### Configure minifyJs Options

Source: https://htmlnano.netlify.app/modules

Example of passing Terser options to htmlnano's `minifyJs` module, such as setting quote style.

```javascript
htmlnano.process(html, {  
    minifyJs: {  
        output: { quote_style: 1 },  
    },  
});  

```

--------------------------------

### Configure minifyUrls with String Base URL

Source: https://htmlnano.netlify.app/modules

Example of configuring the minifyUrls module with a string representing the base URL for relative URL resolution.

```javascript
htmlnano.process(html, {
    minifyUrls: 'https://example.com' // Valid configuration
});
```

--------------------------------

### Install Terser for JavaScript Minification

Source: https://htmlnano.netlify.app/modules

Installs Terser development dependency using npm, yarn, or pnpm for JavaScript minification.

```bash
npm install --save-dev terser  
# if you prefer yarn  
# yarn add --dev terser  
# if you prefer pnpm  
# pnpm install --save-dev terser  

```

--------------------------------

### Example of CSS Optimization

Source: https://htmlnano.netlify.app/modules

Demonstrates the removal of unused CSS rules from a style tag within an HTML structure.

```html
<div class="b">
    <style>
        .a {
            margin: 10px 10px 10px 10px;
        }
        .b {
            color: #ff0000;
        }
    </style>
</div>
```

```html
<div class="b">
    <style>
        .b {
            color: #ff0000;
        }
    </style>
</div>
```

--------------------------------

### Configure minifyUrls with URL Object

Source: https://htmlnano.netlify.app/modules

Example of configuring the minifyUrls module with a URL object representing the base URL for relative URL resolution.

```javascript
htmlnano.process(html, {
    minifyUrls: new URL('https://example.com') // Valid configuration
});
```

--------------------------------

### Merge Styles Example

Source: https://htmlnano.netlify.app/modules

Demonstrates merging multiple style tags with the same normalized media and type attributes into a single tag. Other attributes must also match strictly.

```html
<style>h1 { color: red }</style>  
<style media="print">div { color: blue }</style>  
  
<style type="text/css" media="print">a {}</style>  
<style>div { font-size: 20px }</style>  

```

```html
<style>h1 { color: red } div { font-size: 20px }</style>  
<style media="print">div { color: blue } a {}</style>  

```

--------------------------------

### Configure Gulp with htmlnano

Source: https://htmlnano.netlify.app/usage

Set up a Gulp task to minify HTML using htmlnano via gulp-posthtml. This example defines a default task to process HTML files.

```javascript
const gulp = require('gulp');  
const posthtml = require('gulp-posthtml');  
const htmlnano = require('htmlnano');  
const options = {  
  removeComments: false  
};  
  
gulp.task('default', function () {  
    return gulp  
        .src('./index.html')  
        .pipe(posthtml([  
            // Add `htmlnano` as a final plugin  
            htmlnano(options)  
        ]))  
        .pipe(gulp.dest('./build'));  
});  

```

--------------------------------

### Collapse Boolean Attributes Example

Source: https://htmlnano.netlify.app/modules

Illustrates the transformation of HTML boolean attributes and empty string attributes before and after minification.

```html
<button disabled="disabled">click</button>
<script defer=""></script>
<a href=""></a>
<script src="example-framework.js" crossorigin="anonymous"></script>
<video preload="auto"></video>
<a-entity visible="false"></a-entity>
```

```html
<button disabled>click</button>
<script defer></script>
<a href></a>
<script src="example-framework.js" crossorigin></script>
<video preload></video>
<a-entity visible="false"></a-entity>
```

--------------------------------

### Install PurgeCSS for CSS Removal

Source: https://htmlnano.netlify.app/modules

Installs PurgeCSS as a development dependency for the `removeUnusedCss` module in htmlnano. This is the recommended tool for removing unused CSS.

```bash
npm install --save-dev purgecss  
# if you prefer yarn  
# yarn add --dev purgecss  
# if you prefer pnpm  
# pnpm install --save-dev purgecss  

```

--------------------------------

### Configure minifyCss Options

Source: https://htmlnano.netlify.app/modules

Example of configuring htmlnano's `minifyCss` module with custom cssnano options, such as disabling comment removal.

```javascript
htmlnano.process(html, {  
    minifyCss: {  
        preset: ['default', {  
            discardComments: {  
                removeAll: true,  
            },  
        }]  
    }  
});  

```

--------------------------------

### Minify Attributes Example

Source: https://htmlnano.netlify.app/modules

Demonstrates the minification of meta http-equiv="refresh" content attributes, including removing 'url=' prefixes and trimming whitespace.

```html
<meta http-equiv="refresh" content="5; url=">
<meta http-equiv="refresh" content="5; url=http://example.com/">
```

```html
<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5; http://example.com/">
```

--------------------------------

### Deduplicate Attribute Values Example

Source: https://htmlnano.netlify.app/modules

Shows how the deduplicateAttributeValues module removes duplicate tokens from list-like attributes while preserving whitespace.

```html
<link rel="nofollow NoFoLlOw noopener">
<a class="foo  foo   bar">click</a>
```

```html
<link rel="nofollow noopener">
<a class="foo    bar">click</a>
```

--------------------------------

### CommonJS JavaScript API for htmlnano

Source: https://htmlnano.netlify.app/usage

Integrate htmlnano using CommonJS modules. This example shows how to process HTML and handle potential errors.

```javascript
const htmlnano = require('htmlnano');  
  
const options = {  
    removeEmptyAttributes: false,  
    collapseWhitespace: 'conservative'  
};  
  
htmlnano  
    .process(html, options)  
    .then((result) => {  
        // result.html is minified  
    })  
    .catch((err) => {  
        console.error(err);  
    });  

```

--------------------------------

### Omit Optional Tags Example

Source: https://htmlnano.netlify.app/modules

Demonstrates how htmlnano can omit optional HTML tags like html, head, and body when their omission is valid according to HTML standards and htmlnano's rules.

```html
<html><head><title>Title</title></head><body><p>Hi</p></body></html>  

```

```html
<title>Title</title><p>Hi</p>  

```

--------------------------------

### Collapse Boolean Attributes Side Effect Example

Source: https://htmlnano.netlify.app/modules

Demonstrates a potential side effect of the collapseBooleanAttributes module on CSS selectors that rely on specific attribute string values.

```css
button[disabled="disabled"] {
    color: red;
}
```

--------------------------------

### Minify SVG Content

Source: https://htmlnano.netlify.app/modules

Minifies SVG content within `<svg>` tags using SVGO. The example shows a complex SVG structure being reduced to a more compact form, including attribute optimization.

```html
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">  
    <rect width="100%" height="100%" fill="red" />  

    <circle cx="150" cy="100" r="80" fill="green" />  

    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  
</svg>  

```

```html
<svg baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="red"/><circle cx="150" cy="100" r="80" fill="green"/><text x="150" y="125" font-size="60" text-anchor="middle" fill="#fff">SVG</text></svg>  

```

--------------------------------

### Remove Attribute Quotes Example

Source: https://htmlnano.netlify.app/modules

Shows how htmlnano removes quotes around attribute values when possible, adhering to HTML Standard's unquoted attribute value syntax.

```html
<div class="foo" title="hello world"></div>  

```

```html
<div class=foo title="hello world"></div>  

```

--------------------------------

### Remove Redundant Attributes - HTML

Source: https://htmlnano.netlify.app/modules

Removes attributes that match default HTML values, such as `method="get"` on `<form>` or `type="text"` on `<input>`. This module is disabled by default.

```html
<form method="get">  
    <input type="text">  
</form>  
<script type="module"></script>  
<script type="text/javascript" charset="utf-8"></script>  
<script src="app.js" charset="utf-8"></script>  

```

```html
<form>  
    <input>  
</form>  
<script type="module"></script>  
<script></script>  
<script src="app.js" charset="utf-8"></script>  

```

--------------------------------

### Create and Use a Custom Preset by Extending 'safe'

Source: https://htmlnano.netlify.app/presets

Demonstrates creating a custom preset by extending the built-in 'safe' preset and adding or modifying configurations. This allows for reusable custom minification pipelines.

```javascript
const htmlnano = require('htmlnano');
const emailPreset = {
    ...htmlnano.presets.safe,
    mergeStyles: true,
    minifyCss: {
        safe: true
    }
};

htmlnano.process(html, { removeComments: false }, emailPreset)
    .then((result) => {
        // result.html is minified
    })
    .catch((err) => {
        console.error(err);
    });

```

--------------------------------

### htmlnano CLI Help

Source: https://htmlnano.netlify.app/usage

Display help information for the htmlnano command-line interface. This is useful for understanding available commands and options.

```bash
npx htmlnano --help  

```

--------------------------------

### htmlnano CLI with Configuration File

Source: https://htmlnano.netlify.app/usage

Use htmlnano via the CLI with options specified in a JSON configuration file. This allows for persistent and shareable configurations.

```bash
echo '{"collapseWhitespace": "all", "removeComments": "all"}' > config.json  
npx htmlnano test.html -c config.json  

```

--------------------------------

### Use htmlnano with Custom Options (No Preset)

Source: https://htmlnano.netlify.app/presets

Illustrates how to process HTML with custom options without applying any preset by passing an empty object as the preset argument. This is useful for fine-grained control.

```javascript
const htmlnano = require('htmlnano');
const options = {
    // Your options
};

htmlnano
    .process(html, options, {})
    .then(function (result) {
        // result.html is minified
    })
    .catch(function (err) {
        console.error(err);
    });

```

--------------------------------

### Use ampSafe Preset with htmlnano (CommonJS)

Source: https://htmlnano.netlify.app/presets

Demonstrates how to use the 'ampSafe' preset with htmlnano using CommonJS modules. Ensure htmlnano is imported and the preset is accessed via htmlnano.presets.

```javascript
const htmlnano = require('htmlnano');
const ampSafePreset = require('htmlnano').presets.ampSafe;

htmlnano.process(html, { collapseWhitespace: 'conservative' }, ampSafePreset)
    .then((result) => {
        // result.html is minified
    })
    .catch((err) => {
        console.error(err);
    });

```

--------------------------------

### Import and Use ampSafe Preset with htmlnano (ESM)

Source: https://htmlnano.netlify.app/presets

Shows how to import the 'ampSafe' preset directly for use with htmlnano in an ES Module environment. This method allows for cleaner imports.

```javascript
import htmlnano from 'htmlnano';
import ampSafe from 'htmlnano/presets/ampSafe';

const result = await htmlnano.process(html, {}, ampSafe);

```

--------------------------------

### Configure htmlnano with a JSON preset

Source: https://htmlnano.netlify.app/config

Use a JSON configuration file to set presets and specific options. This configuration is overridden by direct options passed to htmlnano.

```json
{
    "preset": "max",
    "collapseWhitespace": "conservative",
    "removeComments": false
}
```

--------------------------------

### Add multiple custom minification modules

Source: https://htmlnano.netlify.app/modules

Provide a list of custom minification functions to be applied sequentially by htmlnano.

```javascript
const options = {
    custom: [
        function (tree, options) {
            // Some minification
            return tree;
        },

        function (tree, options) {
            // Some other minification
            return tree;
        }
    ]
};
```

--------------------------------

### Minify URLs with htmlnano.process

Source: https://htmlnano.netlify.app/modules

Use the minifyUrls option to shorten URLs. Provide a base URL to enable this feature. The module handles relative paths effectively.

```javascript
htmlnano.process(html, {
    minifyUrls: 'https://example.com'
});
```

```html
<a href="https://example.com/foo/bar/baz">bar</a>
```

```html
<a href="foo/bar/baz">bar</a>
```

```javascript
htmlnano.process(html, {
    minifyUrls: 'https://example.com/foo/baz/'
});
```

```html
<a href="https://example.com/foo/bar">bar</a>
```

```html
<a href="../bar">bar</a>
```

```javascript
htmlnano.process(html, {
    minifyUrls: 'https://example.com/foo/baz/'
});
```

```html
<img srcset="https://example.com/foo/bar/image.png 1x, https://example.com/foo/bar/image2.png.png 2x">
```

```html
<img srcset="../bar/image.png 1x, ../bar/image2.png.png 2x">
```

--------------------------------

### Specify custom configuration file path

Source: https://htmlnano.netlify.app/config

Pass a custom configuration file path to htmlnano.process using the 'configPath' option.

```javascript
htmlnano.process(html, {
    configPath: 'config.json'
})
```

--------------------------------

### Silence optional dependency warnings

Source: https://htmlnano.netlify.app/config

Set 'skipInternalWarnings' to true to suppress warnings about missing optional peer dependencies.

```javascript
htmlnano.process(html, {
    skipInternalWarnings: true
})
```

--------------------------------

### Configure uncss with htmlnano

Source: https://htmlnano.netlify.app/modules

Pass uncss options directly to the `removeUnusedCss` module. The `stylesheets` and `ignoreSheets` options are ignored when passed this way.

```javascript
htmlnano.process(html, {
    removeUnusedCss: {
        ignore: ['.do-not-remove']
    }
});
```

--------------------------------

### Invalid minifyUrls Configuration

Source: https://htmlnano.netlify.app/modules

Illustrates an invalid configuration for the minifyUrls module where setting it to true disables the module.

```javascript
htmlnano.process(html, {
    minifyUrls: true // Invalid configuration, the module will be disabled
});
```

--------------------------------

### Disable configuration file loading

Source: https://htmlnano.netlify.app/config

Prevent htmlnano from loading any configuration files by setting 'skipConfigLoading' to true.

```javascript
htmlnano.process(html, {
    skipConfigLoading: true
})
```

--------------------------------

### Configure Webpack with htmlnano

Source: https://htmlnano.netlify.app/usage

Configure Webpack to use htmlnano for HTML minification. This involves setting up the HtmlMinimizerWebpackPlugin in the optimization.minimizer array.

```javascript
// webpack.config.js  
const HtmlMinimizerWebpackPlugin = require('html-minimizer-webpack-plugin');  
const htmlnano = require('htmlnano');  
  
module.exports = {  
    optimization: {  
        minimize: true,  
        minimizer: [  
                // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`).  
                // `...`,  
                new HtmlMinimizerWebpackPlugin({  
                    // Add HtmlMinimizerWebpackPlugin options here.  
                    // test: /\.html(\?.*)?$/i,  
  
                    // Use htmlnano as HtmlMinimizerWebpackPlugin's minimizer.  
                    minify: htmlnano.htmlMinimizerWebpackPluginMinify,  
                    minimizerOptions: {  
                        // Add htmlnano options here.  
                        removeComments: false,  
                        collapseWhitespace: 'conservative'  
                    }  
                })  
            ]  
    }  
}  

```

--------------------------------

### Configure SVGO Options for SVG Minification

Source: https://htmlnano.netlify.app/modules

Configures htmlnano's SVG minification module using SVGO. Options are passed directly to SVGO, including plugin presets and specific plugin parameters.

```javascript
htmlnano.process(html, {  
    minifySvg: {  
        plugins: [  
            {
                name: 'preset-default',
                params: {
                    overrides: {
                        builtinPluginName: {
                            optionName: 'optionValue'
                        },
                    },
                },
            }
        ]
    }
});  

```

--------------------------------

### Collapse Boolean Attributes Configuration

Source: https://htmlnano.netlify.app/modules

Configure the collapseBooleanAttributes module to handle AMP-specific boolean attributes when their value is empty, true, or matches the attribute name.

```json
"collapseBooleanAttributes": {
    "amphtml": true
}
```

--------------------------------

### Configure PurgeCSS with htmlnano

Source: https://htmlnano.netlify.app/modules

Pass PurgeCSS options directly to the `removeUnusedCss` module. The `content` and `css` options are ignored when passed this way.

```javascript
htmlnano.process(html, {
    removeUnusedCss: {
        tool: 'purgeCSS',
        safelist: ['.do-not-remove']
    }
});
```

--------------------------------

### Add a single custom minification module

Source: https://htmlnano.netlify.app/modules

Integrate a custom minification function into htmlnano's processing pipeline.

```javascript
const options = {
    custom: function (tree, options) {
        // Some minification
        return tree;
    }
};
```

--------------------------------

### Disable minifyUrls Module

Source: https://htmlnano.netlify.app/modules

Shows how to disable the minifyUrls module by setting its option to false.

```javascript
htmlnano.process(html, {
    minifyUrls: false // The module will be disabled
});
```

--------------------------------

### Integrate htmlnano with PostHTML

Source: https://htmlnano.netlify.app/usage

Add htmlnano as a final plugin in your PostHTML pipeline. This allows htmlnano to process HTML after other PostHTML plugins.

```javascript
const posthtml = require('posthtml');  
const options = {  
    removeComments: false,  
    collapseWhitespace: 'conservative'  
};  
const posthtmlPlugins = [  
    /* other PostHTML plugins */  
  
    require('htmlnano')(options)  
];  
  
const posthtmlOptions = {  
    // See PostHTML docs  
};  
  
posthtml(posthtmlPlugins)  
    .process(html, posthtmlOptions)  
    .then((result) => {  
        // result.html is minified  
    })  
    .catch((err) => {  
        console.error(err);  
    });  

```

--------------------------------

### Sort attributes alphabetically

Source: https://htmlnano.netlify.app/modules

Sorts attributes within HTML elements alphabetically. This can improve gzip/brotli compression ratios.

```html
<input type="text" class="form-control" name="testInput" autofocus="" autocomplete="off" id="testId">
```

```html
<input autocomplete="off" autofocus="" class="form-control" id="testId" name="testInput" type="text">
```

--------------------------------

### Configure Minify HTML Template Rules

Source: https://htmlnano.netlify.app/modules

Minifies HTML within template containers like `<script type='text/x-handlebars-template'>` or `<template>`. Custom rules can be provided as an array of objects, or defaults can be extended.

```javascript
htmlnano.process(html, {  
    minifyHtmlTemplate: [  
        { tag: 'template', attrs: { id: 'my-template' } },  
        { tag: 'script', attrs: { type: 'text/x-handlebars-template' } },  
    ]
});  

```

```javascript
import { modules } from 'htmlnano';  

htmlnano.process(html, {  
    minifyHtmlTemplate: [  
        ...modules.minifyHtmlTemplate.defaultRules,  
        { tag: 'script', attrs: { id: 'my-template' } }  
    ]
});  

```

--------------------------------

### Sort list-like attribute values alphabetically

Source: https://htmlnano.netlify.app/modules

Sorts values in list-like attributes (e.g., class, rel) alphabetically. This can improve compression ratios.

```html
<div class="foo baz bar">click</div>
```

```html
<div class="bar baz foo">click</div>
```

--------------------------------

### Minify HTML in Template Tags

Source: https://htmlnano.netlify.app/modules

Demonstrates minification of HTML content within a script tag designated for Handlebars templates. The minified output removes unnecessary whitespace.

```html
<script type="text/x-handlebars-template">  
    <div class="entry">  
        <h1>{{title}}</h1>  
    </div>  
</script>  

```

```html
<script type="text/x-handlebars-template"><div class="entry"><h1>{{title}}</h1></div></script>  

```

--------------------------------

### Minify CSS within Style Tags

Source: https://htmlnano.netlify.app/modules

Demonstrates minification of CSS within `<style>` tags. Only tags with `text/css` or no `type` attribute are processed.

```html
<div>  
    <style>  
        h1 {  
            margin: 10px 10px 10px 10px;  
            color: #ff0000;  
        }  
    </style>  
</div>  

```

```html
<div>  
    <style>h1{margin:10px;color:red}</style>  
</div>  

```

--------------------------------

### Remove Empty Elements (Basic)

Source: https://htmlnano.netlify.app/modules

Removes empty HTML elements that do not have any attributes.

```html
<div>hello<span><b></b></span></div>  
<div><span class="icon"></span></div>  
```

```html
<div>hello</div>  
<div><span class="icon"></span></div>  
```

--------------------------------

### ESM JavaScript API for htmlnano

Source: https://htmlnano.netlify.app/usage

Use htmlnano with ECMAScript Modules (ESM) for processing HTML. You can pass custom options and PostHTML options.

```javascript
import htmlnano, { presets } from 'htmlnano';  
  
const options = {  
    removeEmptyAttributes: false,  
    collapseWhitespace: 'conservative'  
};  
  
// See PostHTML docs  
const postHtmlOptions = {  
    sync: true,  
    lowerCaseTags: true,  
    quoteAllAttributes: false  
};  
  
// "preset" arg might be skipped (see "Presets" section below for more info)  
// "postHtmlOptions" arg might be skipped  
const result = await htmlnano.process(html, options, presets.safe, postHtmlOptions);  
// result.html is minified  

```

--------------------------------

### Sort list-like attribute values by frequency

Source: https://htmlnano.netlify.app/modules

Sorts values in list-like attributes by their frequency across the document. Preserves duplicates and ignores redundant whitespace.

```html
<div class="foo baz bar"></div><div class="bar foo"></div>
```

```html
<div class="foo bar baz"></div><div class="foo bar"></div>
```

--------------------------------

### Normalize Attribute Values - HTML

Source: https://htmlnano.netlify.app/modules

Normalizes casing and applies default values for specific case-insensitive attributes like `method`, `loading`, and `type`. Trims whitespace from normalized values.

```html
<form method="GET"></form>  
<img loading="">  
<button type="EXAMPLE"></button>  

```

```html
<form method="get"></form>  
<img loading="eager">  
<button type="submit"></button>  

```

--------------------------------

### Minify JSON in Script Tags

Source: https://htmlnano.netlify.app/modules

Processes `<script>` tags with an explicit JSON MIME type. Tags without a type attribute, with an integrity attribute, or with invalid/JSON-like suffixes are skipped.

```html
<script type="application/json">  
{  
    "user": "me"  
}
</script>  

```

```html
<script type="application/json">{"user":"me"}</script>  

```

```html
<script type="application/ld+json; charset=UTF-8">  
{
    "id": 1  
}
</script>  

```

```html
<script type="application/ld+json; charset=UTF-8">{"id":1}</script>  

```

--------------------------------

### Sort attributes by frequency

Source: https://htmlnano.netlify.app/modules

Sorts attributes based on their frequency across the document. Preserves original casing and uses alphabetical order for ties.

```html
<input type="text" class="form-control" name="testInput" id="testId">
<a id="testId" href="#" class="testClass"></a>
<img width="20" src="../images/image.png" height="40" alt="image" class="cls" id="id2">
```

```html
<input class="form-control" id="testId" type="text" name="testInput">
<a class="testClass" id="testId" href="#"></a>
<img class="cls" id="id2" alt="image" height="40" src="../images/image.png" width="20">
```

--------------------------------

### Remove HTML Comments via JSON Config

Source: https://htmlnano.netlify.app/modules

Demonstrates configuring comment removal using a JSON configuration file with a regular expression.

```json
{
    "removeComments": "/<!--(\/)?noindex-->/"
}
```

--------------------------------

### Remove Empty Elements (With Attributes)

Source: https://htmlnano.netlify.app/modules

Removes empty HTML elements, even if they possess attributes. This can affect elements used for styling or scripting.

```html
<div>hello</div>  
<div></div>  
```

--------------------------------

### Force Remove Attribute Quotes

Source: https://htmlnano.netlify.app/modules

Illustrates how to force the removal of attribute quotes using the `force` option, even when `quoteAllAttributes` is set to true in PostHTML.

```javascript
posthtml([  
    htmlnano({  
        removeAttributeQuotes: true  
    })
]).process(html, {  
    quoteAllAttributes: true  
})

```

```javascript
posthtml([  
    htmlnano({  
        removeAttributeQuotes: { force: true }  
    })
]).process(html, {  
    quoteAllAttributes: true  
})

```

--------------------------------

### Minify Conditional Comments

Source: https://htmlnano.netlify.app/modules

Minifies the HTML content within IE conditional comments while preserving the comment wrappers.

```html
<!--[if lte IE 7]>  
    <style type="text/css">  
        .title {  
            color: red;  
        }  
    </style>  
<![endif]-->  
```

```html
<!--[if lte IE 7]><style type="text/css">.title{color:red}</style><![endif]-->  
```

--------------------------------

### Merge Inline JavaScript Snippets

Source: https://htmlnano.netlify.app/modules

Merges inline JavaScript snippets with mergeable types (`text/javascript`, `application/javascript`). Scripts with `src` or `integrity` attributes, or different boolean attributes (`async`, `defer`, `nomodule`), are not merged.

```html
<script>const foo = 'A:1';</script>  
<script class="test">foo = 'B:1';</script>  
<script type="text/javascript">foo = 'A:2';</script>  
<script defer>foo = 'C:1';</script>  
<script>foo = 'A:3';</script>  
<script defer="defer">foo = 'C:2';</script>  
<script class="test" type="text/javascript">foo = 'B:2';</script>  

```

```html
<script>const foo = 'A:1';foo = 'A:2';foo = 'A:3';</script>  
<script defer="defer">foo = 'C:1';foo = 'C:2';</script>  
<script class="test" type="text/javascript">foo = 'B:1';foo = 'B:2';</script>  

```

--------------------------------

### Remove Empty Attributes - HTML

Source: https://htmlnano.netlify.app/modules

Removes attributes that are empty or contain only whitespace. Event handlers are always removed when empty. Some attributes are removed only on specific tags.

```html
<div id="" class="" title=""></div>  
<button onclick="" onfocus=" "></button>  
<textarea cols=""></textarea>  
<img src="foo.jpg" alt="" style="">  

```

```html
<div></div>  
<button></button>  
<textarea></textarea>  
<img src="foo.jpg" alt="">  

```

--------------------------------

### Minify JavaScript within Script Tags

Source: https://htmlnano.netlify.app/modules

Minifies JavaScript code within `<script>` tags. Skips scripts with `integrity` attributes and preserves CDATA wrappers in SVG.

```html
<div>  
    <script>  
        /* comment */  
        const foo = function () {  
  
        };  
    </script>  
</div>  

```

```html
<div>  
    <script>const foo=function(){};</script>  
</div>  

```

--------------------------------

### Collapse Attribute Whitespace - HTML

Source: https://htmlnano.netlify.app/modules

Collapses redundant whitespace within attribute values for list-like attributes (e.g., `class`, `rel`) and trims whitespace for single-value attributes (e.g., `href`, `style`).

```html
<a class=" content  page  " style="  display: block;    " href="   https://example.com"></a>  

```

```html
<a class="content page" style="display: block;" href="https://example.com"></a>  

```

--------------------------------

### Remove All HTML Comments

Source: https://htmlnano.netlify.app/modules

Configures htmlnano to remove all HTML comments, including conditional ones.

```javascript
{
    removeComments: 'all'
}
```

```html
<div><!-- test --></div>  
```

```html
<div></div>  
```

--------------------------------

### Remove HTML Comments Matching RegExp

Source: https://htmlnano.netlify.app/modules

Removes HTML comments that match a specified regular expression. Non-matching comments are retained.

```javascript
{
    removeComments: /<!--(\/)?noindex-->/  
}
```

```html
<div><!--noindex-->this text will not be indexed<!--/noindex-->Lorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>  
```

```html
<div>this text will not be indexedLorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>  
```

--------------------------------

### Merge Adjacent Script Tags

Source: https://htmlnano.netlify.app/modules

Merges adjacent inline script tags that share the same normalized attributes (excluding src, integrity, and type). Content is appended to the last script.

```html
<script>console.log('hello');</script>
<script>alert('world');</script>
```

```html
<script>console.log('hello');alert('world');</script>
```

--------------------------------

### Remove Safe HTML Comments

Source: https://htmlnano.netlify.app/modules

Configures htmlnano to remove only standard HTML comments, preserving special types like conditional comments and excerpt markers.

```javascript
{
    removeComments: 'safe'
}
```

```html
<!--noindex-->indexed?<!--/noindex-->  
<!--[if IE 8]><link href="ie8only.css" rel="stylesheet"><![endif]-->  
Lorem ipsum <!-- more --> dolor sit amet <!-- comment -->  
```

```html
<!--noindex-->indexed?<!--/noindex-->  
<!--[if IE 8]><link href="ie8only.css" rel="stylesheet"><![endif]-->  
Lorem ipsum <!-- more --> dolor sit amet  
```

--------------------------------

### Attribute Selector Side Effect - CSS

Source: https://htmlnano.netlify.app/modules

Demonstrates a potential side effect of removing empty attributes, where CSS rules targeting empty attributes might be broken.

```css
img[style=""] {
    margin: 10px;
}

```

--------------------------------

### Attribute Selector Side Effect - CSS

Source: https://htmlnano.netlify.app/modules

Illustrates a potential side effect of removing redundant attributes, where CSS rules targeting specific default attribute values might become ineffective.

```css
form[method="get"] {
    color: red;
}

```

--------------------------------

### Remove HTML Comments via Function

Source: https://htmlnano.netlify.app/modules

Removes HTML comments based on a custom function's return value. Comments for which the function returns true are removed.

```javascript
{
    removeComments: (comment) => {
        if (comment.includes('noindex')) return true;
        return false;
    }
}
```

```html
<div><!--noindex-->this text will not be indexed<!--/noindex-->Lorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>  
```

```html
<div>this text will not be indexedLorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>  
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.