html 中的语义分割报价

Question

What is the best practice to make block quote but the text is not all in one line here is an image to clarify what i mean

how to achieve this layout? and is it also possible if i use h1 for the text inside the block quote since this is the main header of the website?

here is what i did

 div { font-size: 5vw; } img { position: relative; top: -2vw; z-index: -1; }.bottom { position: relative; top: -5.5vw; }

 <blockquote> <div class="top"> the quick <br> brown fox </div> <img src="https://images.unsplash.com/photo-1560809451-9e77c2e8214a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> <div class="bottom"> jumps over <br> the lazy dog. </div> </blockquote>

Answer 1

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

I'm not sure why you want to use a blockquote if this is the main header of the website .

 header { font-size: 2rem; line-height: 0.8; max-width: 200px; } header * { display: block; } header.top, header.bottom { position: relative; } header.top { top: 0.5em; } header.bottom { bottom: 0.5em; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

 <header class="page-header"> <h1 class="sr-only">The quick brown fox jumps over the lazy dog.</h1> <span class="top" aria-hidden="true">The quick brown fox</span> <img src="https://images.unsplash.com/photo-1560809451-9e77c2e8214a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60" alt="Cool but very serious fox getting ready to jump"> <span class="bottom" aria-hidden="true">Jumps over the lazy dog.</span> </header> <main> <p>Other content</p> </main>