Skip to content

A tags and figures are not handled correctly #1158

Open
@humaknlght

Description

@humaknlght

I am trying to minify an HTML fragment with HTML inside an anchor tag. The minifier moves the content from inside the a tag to outside the a tag.

The command used for minifying:

html-minifier --keep-closing-slash --remove-comments --collapse-whitespace --minify-js --minify-css --decode-entities --no-html5 --process-conditional-comments --remove-redundant-attributes --remove-script-type-attributes --remove-style-link-type-attributes --use-short-doctype --trim-custom-fragments -o index.htm.min index.html

Source file
https://github.com/humaknlght/ericperretsinfo/blob/master/src/art/index.html

<div class="artContent" contenteditable="false">
    <a href="/art/img/2.jpg">
        <figure>
            <img src="/art/img/2.jpg" width="552" height="795"/>
            <figcaption>Tetris</figcaption>
        </figure>
    </a>
    <a href="/art/img/3.jpg">
        <figure>
            <img src="/art/img/3.jpg" loading="lazy" width="552" height="795"/>
            <figcaption>Shapes</figcaption>
        </figure>
    </a>
    <a href="/art/img/4.jpg">
        <figure>
            <img src="/art/img/4.jpg" loading="lazy" width="552" height="807"/>
            <figcaption>Boxes and Lines</figcaption>
        </figure>
    </a>
    <a href="/art/img/6.jpg">
        <figure>
            <img src="/art/img/6.jpg" loading="lazy" width="552" height="781"/>
            <figcaption>Maze 1</figcaption>
        </figure>
    </a>
    <a href="/art/img/7.jpg">
        <figure>
            <img src="/art/img/7.jpg" loading="lazy" width="552" height="804"/>
            <figcaption>Maze 2</figcaption>
        </figure>
    </a>
    <a href="/art/img/8.jpg">
        <figure>
            <img src="/art/img/8.jpg" loading="lazy" width="552" height="803"/>
            <figcaption>Concentric Lines</figcaption>
        </figure>
    </a>
    <a href="/art/img/9.jpg">
        <figure>
            <img src="/art/img/9.jpg" loading="lazy" width="552" height="800"/>
            <figcaption>Lines</figcaption>
        </figure>
    </a>
    <a href="/art/img/10.jpg">
        <figure>
            <img src="/art/img/10.jpg" loading="lazy" width="552" height="808"/>
            <figcaption>Concentric Lines ontop of Tetris</figcaption>
        </figure>
    </a>
    <a href="/art/img/11.jpg">
        <figure>
            <img src="/art/img/11.jpg" loading="lazy" width="552" height="786"/>
            <figcaption>Triangles</figcaption>
        </figure>
    </a>
    <a href="/art/img/12.jpg">
        <figure>
            <img src="/art/img/12.jpg" loading="lazy" width="552" height="800"/>
            <figcaption>Concentric ERIC</figcaption>
        </figure>
    </a>
    <a href="/art/img/13.jpg">
        <figure>
            <img src="/art/img/13.jpg" loading="lazy" width="552" height="797"/>
            <figcaption>Boxes and Lines 2</figcaption>
        </figure>
    </a>
    <a href="/art/img/14.jpg">
        <figure>
            <img src="/art/img/14.jpg" loading="lazy" width="552" height="802"/>
            <figcaption>Concentric Lines 2</figcaption>
        </figure>
    </a>
    <a href="/art/img/15.jpg">
        <figure>
            <img src="/art/img/15.jpg" loading="lazy" width="552" height="795"/>
            <figcaption>L Shapes</figcaption>
        </figure>
    </a>
    <a href="/art/img/16.jpg">
        <figure>
            <img src="/art/img/16.jpg" loading="lazy" width="552" height="791"/>
            <figcaption>Boxes with Patterns</figcaption>
        </figure>
    </a>
    <a href="/art/img/17.jpg">
        <figure>
            <img src="/art/img/17.jpg" loading="lazy" width="552" height="792"/>
            <figcaption>Angles</figcaption>
        </figure>
    </a>
    <a href="/art/img/18.jpg">
        <figure>
            <img src="/art/img/18.jpg" loading="lazy" width="552" height="794"/>
            <figcaption>Triangles and Squares</figcaption>
        </figure>
    </a>
    <a href="/art/img/19.jpg">
        <figure>
            <img src="/art/img/19.jpg" loading="lazy" width="552" height="796"/>
            <figcaption>⊔, ⊓, ⊏, and ⊐</figcaption>
        </figure>
    </a>
    <a href="/art/img/20.jpg">
        <figure>
            <img src="/art/img/20.jpg" loading="lazy" width="552" height="802"/>
            <figcaption>Triangles and Diamonds</figcaption>
        </figure>
    </a>
    <a href="/art/img/21.jpg">
        <figure>
            <img src="/art/img/21.jpg" loading="lazy" width="552" height="793"/>
            <figcaption>Tetris Lines with a Box and Triangle Fissure.</figcaption>
        </figure>
    </a>
    <a href="/art/img/5.jpg">
        <figure>
            <img src="/art/img/5.jpg" loading="lazy" width="552" height="811"/>
            <figcaption>Triangles</figcaption>
        </figure>
    </a>
</div>

Actual Minified version

<div class="artContent" contenteditable="false"><a href="/art/img/2.jpg"></a><figure><img src="/art/img/2.jpg" width="552" height="795"/><figcaption>Tetris</figcaption></figure><a href="/art/img/3.jpg"></a><figure><img src="/art/img/3.jpg" loading="lazy" width="552" height="795"/><figcaption>Shapes</figcaption></figure><a href="/art/img/4.jpg"></a><figure><img src="/art/img/4.jpg" loading="lazy" width="552" height="807"/><figcaption>Boxes and Lines</figcaption></figure><a href="/art/img/6.jpg"></a><figure><img src="/art/img/6.jpg" loading="lazy" width="552" height="781"/><figcaption>Maze 1</figcaption></figure><a href="/art/img/7.jpg"></a><figure><img src="/art/img/7.jpg" loading="lazy" width="552" height="804"/><figcaption>Maze 2</figcaption></figure><a href="/art/img/8.jpg"></a><figure><img src="/art/img/8.jpg" loading="lazy" width="552" height="803"/><figcaption>Concentric Lines</figcaption></figure><a href="/art/img/9.jpg"></a><figure><img src="/art/img/9.jpg" loading="lazy" width="552" height="800"/><figcaption>Lines</figcaption></figure><a href="/art/img/10.jpg"></a><figure><img src="/art/img/10.jpg" loading="lazy" width="552" height="808"/><figcaption>Concentric Lines ontop of Tetris</figcaption></figure><a href="/art/img/11.jpg"></a><figure><img src="/art/img/11.jpg" loading="lazy" width="552" height="786"/><figcaption>Triangles</figcaption></figure><a href="/art/img/12.jpg"></a><figure><img src="/art/img/12.jpg" loading="lazy" width="552" height="800"/><figcaption>Concentric ERIC</figcaption></figure><a href="/art/img/13.jpg"></a><figure><img src="/art/img/13.jpg" loading="lazy" width="552" height="797"/><figcaption>Boxes and Lines 2</figcaption></figure><a href="/art/img/14.jpg"></a><figure><img src="/art/img/14.jpg" loading="lazy" width="552" height="802"/><figcaption>Concentric Lines 2</figcaption></figure><a href="/art/img/15.jpg"></a><figure><img src="/art/img/15.jpg" loading="lazy" width="552" height="795"/><figcaption>L Shapes</figcaption></figure><a href="/art/img/16.jpg"></a><figure><img src="/art/img/16.jpg" loading="lazy" width="552" height="791"/><figcaption>Boxes with Patterns</figcaption></figure><a href="/art/img/17.jpg"></a><figure><img src="/art/img/17.jpg" loading="lazy" width="552" height="792"/><figcaption>Angles</figcaption></figure><a href="/art/img/18.jpg"></a><figure><img src="/art/img/18.jpg" loading="lazy" width="552" height="794"/><figcaption>Triangles and Squares</figcaption></figure><a href="/art/img/19.jpg"></a><figure><img src="/art/img/19.jpg" loading="lazy" width="552" height="796"/><figcaption>⊔, ⊓, ⊏, and ⊐</figcaption></figure><a href="/art/img/20.jpg"></a><figure><img src="/art/img/20.jpg" loading="lazy" width="552" height="802"/><figcaption>Triangles and Diamonds</figcaption></figure><a href="/art/img/21.jpg"></a><figure><img src="/art/img/21.jpg" loading="lazy" width="552" height="793"/><figcaption>Tetris Lines with a Box and Triangle Fissure.</figcaption></figure><a href="/art/img/5.jpg"></a><figure><img src="/art/img/5.jpg" loading="lazy" width="552" height="811"/><figcaption>Triangles</figcaption></figure></div>

You can see that the a tags are empty, causing the HTML to be different.

Expected Minified version

<div class="artContent" contenteditable="false"><a href="/art/img/2.jpg"><figure><img src="/art/img/2.jpg" width="552" height="795"/><figcaption>Tetris</figcaption></figure></a><a href="/art/img/3.jpg"><figure><img src="/art/img/3.jpg" loading="lazy" width="552" height="795"/><figcaption>Shapes</figcaption></figure></a><a href="/art/img/4.jpg"><figure><img src="/art/img/4.jpg" loading="lazy" width="552" height="807"/><figcaption>Boxes and Lines</figcaption></figure></a><a href="/art/img/6.jpg"><figure><img src="/art/img/6.jpg" loading="lazy" width="552" height="781"/><figcaption>Maze 1</figcaption></figure></a><a href="/art/img/7.jpg"><figure><img src="/art/img/7.jpg" loading="lazy" width="552" height="804"/><figcaption>Maze 2</figcaption></figure></a><a href="/art/img/8.jpg"><figure><img src="/art/img/8.jpg" loading="lazy" width="552" height="803"/><figcaption>Concentric Lines</figcaption></figure></a><a href="/art/img/9.jpg"><figure><img src="/art/img/9.jpg" loading="lazy" width="552" height="800"/><figcaption>Lines</figcaption></figure></a><a href="/art/img/10.jpg"><figure><img src="/art/img/10.jpg" loading="lazy" width="552" height="808"/><figcaption>Concentric Lines ontop of Tetris</figcaption></figure></a><a href="/art/img/11.jpg"><figure><img src="/art/img/11.jpg" loading="lazy" width="552" height="786"/><figcaption>Triangles</figcaption></figure></a><a href="/art/img/12.jpg"><figure><img src="/art/img/12.jpg" loading="lazy" width="552" height="800"/><figcaption>Concentric ERIC</figcaption></figure></a><a href="/art/img/13.jpg"><figure><img src="/art/img/13.jpg" loading="lazy" width="552" height="797"/><figcaption>Boxes and Lines 2</figcaption></figure></a><a href="/art/img/14.jpg"><figure><img src="/art/img/14.jpg" loading="lazy" width="552" height="802"/><figcaption>Concentric Lines 2</figcaption></figure></a><a href="/art/img/15.jpg"><figure><img src="/art/img/15.jpg" loading="lazy" width="552" height="795"/><figcaption>L Shapes</figcaption></figure></a><a href="/art/img/16.jpg"><figure><img src="/art/img/16.jpg" loading="lazy" width="552" height="791"/><figcaption>Boxes with Patterns</figcaption></figure></a><a href="/art/img/17.jpg"><figure><img src="/art/img/17.jpg" loading="lazy" width="552" height="792"/><figcaption>Angles</figcaption></figure></a><a href="/art/img/18.jpg"><figure><img src="/art/img/18.jpg" loading="lazy" width="552" height="794"/><figcaption>Triangles and Squares</figcaption></figure></a><a href="/art/img/19.jpg"><figure><img src="/art/img/19.jpg" loading="lazy" width="552" height="796"/><figcaption>⊔, ⊓, ⊏, and ⊐</figcaption></figure></a><a href="/art/img/20.jpg"><figure><img src="/art/img/20.jpg" loading="lazy" width="552" height="802"/><figcaption>Triangles and Diamonds</figcaption></figure></a><a href="/art/img/21.jpg"><figure><img src="/art/img/21.jpg" loading="lazy" width="552" height="793"/><figcaption>Tetris Lines with a Box and Triangle Fissure.</figcaption></figure></a><a href="/art/img/5.jpg"><figure><img src="/art/img/5.jpg" loading="lazy" width="552" height="811"/><figcaption>Triangles</figcaption></figure></a></div>

I validated the HTML fragment using https://validator.w3.org/nu/ and the input is valid.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions