HTML gets parsed poorly

Question

My HTML somehow gets messed up after being parsed by the browser.

This is my input:

 <a href="/quotes/{{ $quote->id }}" style="text-decoration: none; color: inherit; display: block">
     <blockquote>
         <p id="quote-{{ $quote->id }}-text">{{ $quote->quote }}</p>

         <small class="author" id="quote-{{ $quote->id }}-author">
             <a href="/authors/{{ $quote->author->username }}">{{ $quote->author->name }}</a>
         </small>
     </blockquote>
 </a>

And this is the output I get from Chrome dev tools:

    <body>
<a href="/quotes/{{ $quote->id }}" style="text-decoration: none; color: inherit; display: block">
         </a> <!-- Why is it closing this tag over here? -->
    <blockquote><a href="/quotes/{{ $quote->id }}" style="text-decoration: none; color: inherit; display: block">
             <p id="quote-{{ $quote->id }}-text">{{ $quote->quote }}</p>

             <small class="author" id="quote-{{ $quote->id }}-author">
                 </small></a><small class="author" id="quote-{{ $quote->id }}-author"><a href="/authors/{{ $quote->author->username }}">{{ $quote->author->name }}</a>
             </small>
         </blockquote>
     </body>

The problem is the browser closes the a tag when parsing the html, I think, and the blockquote is not wrapped by a anymore. How can I wrap the blockquote in an a tag?

Thank you!

That's not right semantics also look you have an anchor within an anchor. That's why it's messed up as well as the block quote that has a paragraph tag within it. So you not know how to write proper html??? Asking because tags have an actual role! — EasyBB, Dec 06 '15 at 14:44
Well, I'm not a html expert but that's kind of what I wanted to make. A `blockquote` that is clickable and the author to be wrapped by an `a` tag too. Any other way to achieve this? — Daniel Bejan, Dec 06 '15 at 14:51

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

Yah, you're right. The a tag (is an inline-tag) can not contain the blockquote tag (is a block-level tag). So, I think it's impossible if you want to wrap the blockquote in the a tag.

Take a look at this rule: Block-Level tags versus Inline tags

Block-level tags can contain Inline tags.

The reverse is not true -- inline tags cannot contain block-level tags.

Some block-level elements can contain some other block-level elements.

Or maybe you can use javascript onclick event to redirect:

<blockquote onclick="window.open('/quotes/{{ $quote->id }}')">
     <p id="quote-{{ $quote->id }}-text">{{ $quote->quote }}</p>

     <small class="author" id="quote-{{ $quote->id }}-author">
         <a href="/authors/{{ $quote->author->username }}">{{ $quote->author->name }}</a>
     </small>
 </blockquote>

Thanks a lot. Great idea.. I adapted it a little bit to this: `
` so now it's more like an `anchor` — Daniel Bejan, Dec 06 '15 at 14:59

HTML gets parsed poorly

1 Answers1