Search code examples
htmllaravelanchorblockquote

HTML gets parsed poorly

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!

Solution

  • 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

    1. Block-level tags can contain Inline tags.

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

    3. 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>