«Правильный» способ разметки отзывов в HTML

Question

Я думал, что это будет достаточно легко найти в Интернете, но, похоже, нет. Я пытаюсь выяснить, что можно считать правильным способом разметки списка отзывов - цитат с авторами - на странице.

, например

«Это то, что я думаю»
- Мое имя, моя компания

Я полагаю, цитата должна быть в цитате. Я также видел некоторое использование cite, чтобы показать, откуда взялась цитата, но HTML-ссылка, кажется, показывает, что это следует использовать для указания URL-адреса веб-страницы, с которой взята цитата, а не имени человека.

У кого-нибудь есть какие-либо предложения о том, как это должно быть отмечено?

Answer 1

«Старый» способ:

Возможно, я перезвонил в очень поздно, но я думаю, что следующий способ является правильным способом пометить отзыв:

<figure>
    <blockquote>
        "This is what I think"
    </blockquote>
    <footer>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </footer>
</figure>

Согласно спецификации W3C:

... цитата содержится в нижнем колонтитуле элемента рисунка, она группирует и связывает информацию о цитате с цитатой ...

.

.

.

Элемент figure представляет некоторое содержимое потока, необязательно с заголовком, которое является автономным (например, полное предложение) ...

Обновление:

Как указал @ MCTaylor17, передовая практика изменилась в отношении цитирования цитаты. Вот новая спецификация (по состоянию на декабрь 2017 года): https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element

Теперь элемент <cite> ожидается везде, где вы ожидаете Phrasing Content . Это означает, что он должен идти в пределах <p>, <blockquote> и т. Д.

Пример 17 в спецификации демонстрирует использование <cite> в <blockquote>:

  <blockquote>"Money is the real cause of poverty,"
  <footer>
  <cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>
  </footer>
  </blockquote>

Чтобы применить это к вашей собственной цитате:

<blockquote>
    "This is what I think"
    <footer>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </footer>
</blockquote>

Answer 2

Вы правы, предполагая, что кавычка должна входить в элемент blockquote и что для URI должен использоваться атрибут cite. Лично я обращаюсь к автору цитаты с отдельной div или p внизу цитаты, вот так:

<blockquote cite="http://a.uri.com/">
    <p>This is a really insightful sentence.</p>
    <p class="quoteCite">Darko Z</p>
</blockquote>

Тогда я просто использую CSS, чтобы он выглядел красиво. Довольно простой. Возможно, вы захотите посмотреть на Microformats.org и поискать идеи.

Надеюсь, это поможет

РЕДАКТИРОВАТЬ: Уже поздно, и это ускользнуло от меня, но вы также можете использовать cite элемент

<blockquote cite="http://a.uri.com/">
    <p>This is a really insightful sentence.</p>
    <cite>Darko Z</cite>
</blockquote>

но я не уверен на 100%, насколько хорошо он поддерживается, если честно

РЕДАКТИРОВАТЬ 2: Согласно черновику HTML 5, цитирование не должно быть именем автора , поэтому для проверки на будущее вам, вероятно, не следует использовать для этой цели цитирование. *

Answer 3

Вещи изменились. Я думаю, что правильная структура в этом веке должна выглядеть так:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>
       <cite title="Source Title">
          <a href="http://www.thelorem.com">Bill Gates</a>
       </cite>
    </footer>
</blockquote>

Answer 4

Вас может заинтересовать использование формата hReview - по слухам, Google поддерживает его, и он в значительной степени применим к вашей ситуации, в зависимости от того, интересуетесь ли вы только внешним видом или Вы также хотите улучшить машинную читаемость.

Answer 5

В соответствии с Mozilla Developer API это правильный способ пометить отзыв:

<figure>
    <blockquote>
        "This is my testimonial"
    </blockquote>
    <figcaption>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </figcaption>
</figure>

Answer 6

HTML5 включает тег <figcaption>. Брать:

<figure>
    <blockquote cite="http://example.com/page">
        Nevermore
    </blockquote>
    <figcaption>
        The Raven
    </figcaption>
</figure>

Answer 7

<!DOCTYPE html>
<blockquote>
  <p>Quote
</blockquote>
<p>Author

будет наиболее правильным.

Answer 8

Если вы спрашиваете, как это должно быть помечено семантически, да, используйте блочную кавычку, и да, атрибут cite предназначен для URL. Что касается презентации, вы можете использовать все, что вы хотите и стилизовать его соответственно.

Посетители никогда не увидят разницы, если не посмотрят на исходный код, и я не могу представить, что это также повлияет на SEO.