This valid HTML fails validation

johnywhy

New member
Look fine to me, but i'm getting unexpected warnings.

Here's my code:

HTML:
<div class='art-item' id='item-demo'>
    <p>
        <a class='art-link' target='_blank' href='${link}'>
            <img class='art-img' src='${img}'>
            <div class='art-caption'>
                ${caption}
            </div>
        </a>
    </p>
</div>

jsonformatter.org says:
Error on-> Line :3 Column :1 Message :Extra content at the end of the document

freeformatter.com says:

Found 12 issues!​


The character encoding was not declared. Proceeding using “windows-1252”.

Code Extract:


Start tag seen without seeing a doctype first. Expected e.g. “<!DOCTYPE html>”.
From line 1, column 1 to line 1, column 37
Code Extract:
<div class='art-item' id='item-demo'>
↩ <p>


Element “head” is missing a required instance of child element “title”.
From line 1, column 1 to line 1, column 37
Code Extract:
<div class='art-item' id='item-demo'>
↩ <p>


Bad value “${link}” for attribute “href” on element “a”: Illegal character in path segment: “{” is not allowed.
From line 3, column 3 to line 3, column 53
Code Extract:

'>↩ <p>↩ <a class='art-link' target='_blank' href='${link}'>↩ <


Bad value “${img}” for attribute “src” on element “img”: Illegal character in path segment: “{” is not allowed.
From line 4, column 4 to line 4, column 37
Code Extract:

ink}'>↩ <img class='art-img' src='${img}'>↩ <


An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
From line 4, column 4 to line 4, column 37
Code Extract:

ink}'>↩ <img class='art-img' src='${img}'>↩ <


End tag “p” implied, but there were open elements.
From line 5, column 4 to line 5, column 28
Code Extract:

img}'>↩ <div class='art-caption'>


Unclosed element “a”.
From line 3, column 3 to line 3, column 53
Code Extract:

'>↩ <p>↩ <a class='art-link' target='_blank' href='${link}'>↩ <


Bad value “${link}” for attribute “href” on element “a”: Illegal character in path segment: “{” is not allowed.
At line 5, column 29
Code Extract:

-caption' $


End tag “div” seen, but there were open elements.
From line 7, column 4 to line 7, column 9
Code Extract:

ption}↩ </div>↩ </


Bad value “${link}” for attribute “href” on element “a”: Illegal character in path segment: “{” is not allowed.
At line 7, column 10
Code Extract:

↩ </div </a


No “p” element in scope but a “p” end tag seen.
From line 9, column 2 to line 9, column 5
Code Extract:

>↩ </a>↩</p>↩</di
 
Fixed

HTML:
<div class="art-item" id="item-demo">
    <p style="text-align: center;">
        <a href="https://boom.org" target="_blank">
            <img src="https://tinyurl.com/bwmkf8c2" alt="" />
            My-Caption
        </a>
    </p>
</div>
 
Back
Top