Skip to content Skip to sidebar Skip to footer
Home / Figure / Html / W3c Validation

Getting An Error In W3C Markup Validation When Trying To Get A Whole
Element As A Link In A Page

Post a Comment
I am trying to get whole
element as a link so i wrote these line of code :-
i</div> <h2 id="solution_1">Solution 1: </h2> <div class="answer-desc"><p>From <a rel="nofollow noreferrer noopener" href="https://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element">the spec</a>:</p> <blockquote> <p>Contexts in which this element can be used: As the first or last child of a figure element.</p> </blockquote> <p>You are trying to use it as a child element of an <code><a></code> not a <code><figure></code></p></div> <br> <h2 id="solution_2">Solution 2: </h2> <div class="answer-desc"><p>Better to do this:</p> <pre><code id="code_2" class="hljs language-xml"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> <span class="hljs-tag"><<span class="hljs-name">figure</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"images/product-image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"image "</span> /></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rotate"</span>></span>40%<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"curle-label_bg"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"product-brand"</span>></span>Brand of product<span class="hljs-tag"></<span class="hljs-name">span</span>></span> Main Caption here <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"save-money"</span>></span>Save 395.05<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"product-price"</span>></span>€169.30<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> <span class="hljs-tag"></<span class="hljs-name">a</span>></span> </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,Copy

Now the figure is enclosed within the a tag, and the figcaption is a child of the figure, not the <a>

You may like these posts

Post a Comment for "Getting An Error In W3C Markup Validation When Trying To Get A Whole
Element As A Link In A Page"