Какой тег HTML5 лучше всего использовать для разметки фрагментов блога? - PullRequest
25 голосов
/ 21 декабря 2010

Для блогов характерно использование архивных страниц (например, по дате или категории), в которых перечислены соответствующие сообщения блога, а также выдержки (параграф или) и ссылка. Однако я не могу понять, какой из элементов HTML5 лучше использовать для отдельных сообщений.

Тег <article> может показаться подходящим (и, безусловно, будет, если бы вы отображали весь контент), но я не уверен, подходит ли он для выдержек. спецификация гласит:

Элемент article представляет собой автономную композицию в документе, странице, приложении или сайте и, в принципе, может независимо распространяться или использоваться повторно, например, в синдикации.

Является ли отрывок действительно отдельным и независимо распространяемым фрагментом контента? Я не так уверен.

Другими вариантами могут быть тег <blockquote> (но было бы странно цитировать ваши собственные сообщения) или просто список <ol> (упорядоченный по дате публикации), содержащий заголовки и абзацы.

Есть мысли?

Ответы [ 4 ]

11 голосов
/ 04 февраля 2013

Я бы использовал:

 <li>
    <blockquote cite="original URL">
    </blockquote>
 </li>

<blockquote>. Наиболее подходит для этого:

Элемент blockquote представляет секцию в кавычкахиз другого источника.

Цитировать себя не странно.Определение элемента не говорит, что вы должны цитировать кого-то еще.Вы цитируете документ, который живет по другому URL.

Я думаю, что <article> (вместо <li>) будет приемлемым, но это не обязательно (определение статьи довольно слабое, этодолжен был называться <infolump>;)

Мой лакмусовый тест для <article> заключается в том, будет ли он полезен в ленте RSS / Atom, и вы можете найти фиды только с выдержками из статьи.


Элемент <summary> является только частью <details>, имеющей другое назначение.

<aside> описывает роль содержимого на странице.Когда выдержки являются основной частью страницы архива, это не совсем тангенциальный контент.OTOH, если бы это был раздел «Смотри также» на странице поста, то <aside> было бы идеально.

2 голосов
/ 10 августа 2013

Я полагаю, что наиболее смысловым способом сделать это является использование <article> И <blockquote> в сочетании с <h1>:

<article>
    <h1>Post title here</h1>
    <div class="meta">author, date, categories, tags, whatever</div>
    <blockquote>
        Excerpt
    </blockquote>
    <a href="/full/article">Read full Post</a>
</article>

Статья, представленная здесь, состоит из того, чтовы можете ожидать: заголовок, содержание и некоторые мета.Так что эта часть довольно проста, я думаю.Тем не менее, он также ссылается на статью, поэтому содержание заключено в цитату.Он цитирует часть статьи, на которую ссылается.Отрывок является частью статьи.Кусок, который просто находится в начале.

Этот метод - то, что я смог вывести из всей документации и спецификаций, в любом случае.

И да, вы можете использоватьнесколько тегов <h1> на одной странице, если это имеет смысл.Взгляните на http://html5doctor.com/html5-seo-search-engine-optimisation/:

Новый алгоритм выделения HTML5 позволяет использовать несколько <h1> на странице.Мы получаем много вопросов о том, будут ли разработчики наказаны Google, который, согласно мифу, запретил это.Я говорю «миф», потому что Google всегда допускает несколько <h1> на странице, при условии, что это органично, а не пытается играть в систему.

0 голосов
/ 21 ноября 2011

Определенно не в стороне, поскольку выдержки не относятся к чему-то другому на странице.Это должна быть статья, я думаю.

А как насчет <article><summary>Excerpt here</summary></article>?

0 голосов
/ 21 декабря 2010

<aside> кажется подходящим. Согласно спецификации:

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

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

...