Каков правильный способ отображения блока HTML5?
У меня есть следующее:
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<cite>John Doe<br/>ACME Industries</cite>
</blockquote>
Но я не уверен, правильно ли поместить цитату INSIDE в blockquote и захочет правильно ее подстроить, но если я вытащу ее из цитаты, мне нужно будет обернуть ее div, чтобы дать уникальные свойства стиля. Мысли? Благодаря
Также в соответствии с: http://dev.w3.org/html5/spec/Overview.html#the-cite-element Мне нужно использовать теги <b> для имен?
Правильно ли это?
<div class="testimonial">
<blockquote>
<p>The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget</p>
</blockquote>
<p><b>John Doe</b><br />ACME Industries</p>
</div>
Основываясь на недавних изменениях в спецификациях HTML, теперь это правильный способ обработки цитат с цитированием.
<blockquote>
<p>Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
<footer>
— <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
</footer>
</blockquote>
Я думаю, что ваша вторая форма лучше, чем ваша первая. Я не думаю, что атрибуция цитаты должна быть внутри <blockquote>.
Использование тега <b> зависит от вас, оно, вероятно, технически корректно соответствует спецификации, но оно семантически бесполезно для всех практических целей.
С другой стороны, <br/> выглядит неправильно, кажется, трудно обосновать, что для него вызывается разрыв семантической строки. Если вы хотите показать имя и организацию по отдельным строкам, то это презентация и должна быть выполнена с помощью CSS.
В том случае, если бы не использовать элемент <cite>, это было бы неправильно в спецификации HTML5, но см. http://24ways.org/2009/incite-a-riot Джереми Китом для альтернативной точки зрения.
Это очень субъективно, но у меня может возникнуть соблазн сделать что-то вроде
<figure class="testimonial">
<blockquote>
<p>The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget</p>
</blockquote>
<figcaption class="attribution">
<span class="name">John Doe</span> <span class="organisation">ACME Industries</span>
</figcaption>
</figure>
Семантически следующее имеет смысл: используйте атрибут cite внутри элемента blockquote, чтобы ссылаться на конкретный URL-адрес и элемент cite (inline) перед тегом tag blockquote следующим образом:
<div>
<blockquote cite="http://example.com">
<p>The quick brown fox jumps over the lazy dog</p>
<cite>Illustrative Shorthand</cite> by Linda Bronson (1888)
</blockquote>
</div>
Быстрая коричневая лиса прыгает по ленивой собаке.
Иллюстративное сокращение Линды Бронсон
Помните, blockquote для длинных котировок, поэтому, хотя вышеописанное технически правильно, лучше было бы:
<div>
<q>The quick brown fox jumps over the lazy dog</q>
<cite>Illustrative Shorthand</cite> by Linda Bronson (1888)
</div>
"Быстрая коричневая лиса прыгает через ленивую собаку" Иллюстративное сокращение Линга Бронсон
Если вы хотите подчеркнуть имя автора, вы можете использовать b. Обратите внимание, что цитирование используется для названия книги, в данном случае Иллюстративное сокращение.
Атрибуция для цитаты, если она есть, должна быть помещена вне элемента blockquote.
- Рабочая группа HTML W3C
W3C предоставляет множество примеров различных способов присвоить кавычки блоков в этот проект. Вы также можете прочитать эту статью в блоге, которую я прочитал, прежде чем приходить сюда. Следующий пример основан на их рекомендации:
<blockquote>
<p>Attribution for the quotation, if any, must be placed outside the blockquote element.</p>
</blockquote>
<p>— W3C HTML Working Group</p>
Они приводят пример, используя <figure> и <figcaption> точно так же, как @Alohci использует его выше.