Подтвердить что ты не робот

Правильный HTML-комментарий

Каков правильный способ отображения блока 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>
4b9b3361

Ответ 1

Основываясь на недавних изменениях в спецификациях 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>

Ответ 2

Я думаю, что ваша вторая форма лучше, чем ваша первая. Я не думаю, что атрибуция цитаты должна быть внутри <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>

Ответ 3

Семантически следующее имеет смысл: используйте атрибут 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. Обратите внимание, что цитирование используется для названия книги, в данном случае Иллюстративное сокращение.

Ответ 4

Атрибуция для цитаты, если она есть, должна быть помещена вне элемента 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 использует его выше.