Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>No</strong>, it isn't valid HTML5 according to the <a href="http://w3c.github.io/html/textlevel-semantics.html#the-a-element" rel="noreferrer">HTML5 Spec Document from W3C</a>:</p> <blockquote> <p><strong>Content model:</strong> <a href="http://dev.w3.org/html5/spec/Overview.html#transparent" rel="noreferrer">Transparent</a>, but there must be no <a href="http://dev.w3.org/html5/spec/Overview.html#interactive-content" rel="noreferrer">interactive content</a> descendant.</p> <p>The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).</p> </blockquote> <p>In other words, you can nest any elements inside an <code>&lt;a&gt;</code> except the following:</p> <ul> <li><p><code>&lt;a&gt;</code></p></li> <li><p><code>&lt;audio&gt;</code> (if the <em>controls</em> attribute is present)</p></li> <li><p><code>&lt;button&gt;</code></p></li> <li><p><code>&lt;details&gt;</code></p></li> <li><p><code>&lt;embed&gt;</code></p></li> <li><p><code>&lt;iframe&gt;</code></p></li> <li><p><code>&lt;img&gt;</code> (if the <em>usemap</em> attribute is present)</p></li> <li><p><code>&lt;input&gt;</code> (if the <em>type</em> attribute is not in the <em>hidden</em> state)</p></li> <li><p><code>&lt;keygen&gt;</code></p></li> <li><p><code>&lt;label&gt;</code></p></li> <li><p><code>&lt;menu&gt;</code> (if the <em>type</em> attribute is in the <em>toolbar</em> state)</p></li> <li><p><code>&lt;object&gt;</code> (if the <em>usemap</em> attribute is present)</p></li> <li><p><code>&lt;select&gt;</code></p></li> <li><p><code>&lt;textarea&gt;</code></p></li> <li><p><code>&lt;video&gt;</code> (if the <em>controls</em> attribute is present) </p></li> </ul> <hr> <p>If you are trying to have a button that links to somewhere, wrap that button inside a <code>&lt;form&gt;</code> tag as such:</p> <pre><code>&lt;form style="display: inline" action="http://example.com/" method="get"&gt; &lt;button&gt;Visit Website&lt;/button&gt; &lt;/form&gt; </code></pre> <p>However, if your <code>&lt;button&gt;</code> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <code>&lt;a&gt;</code> tag and style it the same way.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload