Семантическая разметка нескольких статей внутри статьи с преамбулами/постскриптумом

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

<div id="article">
    <h1>Main heading - a collection of texts</h1>

    <p id="intro">
        A general introduction to the whole collection by the editor.
    </p>

    <p class="preamble">
        A few words from the editor about the first text.
    </p>

    <h2>First text heading</h2>

    <p>First text. Lorem ipsum ...</p>

    <p class="author">
        Name of author of first text.
    </p>

    <div>*</div>

    <p class="preamble">
        A few words from the editor about the second text.
    </p>

    <h2>Second text heading</h2>

    <p>Second text. Dolorem ipsum ...</p>

    <p class="author">
        Name of author of second text.
    </p>

    <p id="postscript">
        Some final words about the whole collection by the editor.
    </p>
<div>

Я рассматривал что-то подобное в HTML5, но есть некоторые элементы, где я просто не знаю, что лучше:

<article>
    <header>
        <h1>Main heading</h1>
        <ELEMENT>
            General introduction
        </ELEMENT>
    </header>

    <article>
        <header>
            <ELEMENT>
                Preamble
            </ELEMENT>
            <h2>
                Article heading
            </h2>
        </header>
        <p>
            Article text
        </p>
        <ELEMENT>
            Name of author
        </ELEMENT>
    </article>

    <div>*</div>

    <article>
        Second article ...
    </article>

    <ELEMENT>
        Postscript by editor
    </ELEMENT>
</article>

Должен ли я использовать элемент p с именами классов для различных вступлений и постскриптума или, может быть, элементы aside? Что-то другое? И тот же вопрос по фамилиям авторов. Элемент address кажется не совсем правильным. footer возможно с каким-то другим элементом (?) внутри него?

Редактировать: иногда также есть несколько изображений, а фотограф упоминается мелким шрифтом в конце статьи («Фото: Джон Доу»). Элемент x внутри footer?


html article semantic-markup
person linurb    schedule 29.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

  • (a) комментарий редактора в header из article

    <article class="author-text">
  <header class="editor-comment"></header>
</article>

  • (b) комментарий редактора в article, который вложен в article

    <article class="author-text">
  <article class="editor-comment"></article>
</article>

  • (c) комментарий редактора в section, у которого article является дочерним

    <section class="editor-comment">
  <article class="author-text"></article>
</section>

Вы используете (a) в своем вопросе. Я не думаю, что это лучший выбор, в основном потому, что этот article будет содержать контент от разных авторов (которые не работают вместе), поэтому концепция «ближайший article предок элемента» для обозначения авторства не сработает. Например, он используется author тип ссылки и address элемент.

(b) и (c) этой проблемы нет. В (b) каждый редактор может иметь свою собственную информацию об авторстве, в (c) информация об авторстве для редактора будет браться из родительского article (который включает в себя все сборник статей), поэтому редактор должен быть всегда один и тот же.

определение article предполагает, что (b) подходит:

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

Было бы разумно включить этот комментарий редактора article в файл header.

Информация об авторстве может быть помещена в файл footer. Только если эта информация содержит контактную информацию автора, используйте дополнительно элемент address (и только для этих частей контактной информации) .

Таким образом, один короткий текст может выглядеть так:

<article class="author-text">
  <h1>First text heading</h1>
  <header>
    <article>
      <p>Editor comment</p>
    </article>
  </header>
  <p>First paragraph of the text …</p>
  <footer>
    <!-- text author information -->
    <!-- use 'address' here if appropriate -->
  </footer>
</article>

Вся коллекция может быть структурирована следующим образом:

<article class="text-collection">

  <h1>Main heading</h1>

  <p>General introduction</p>

  <article class="author-text"></article>
  <article class="author-text"></article>
  <article class="author-text"></article>
  <article class="author-text"></article>

  <p>Postscript by editor</p>

</article>
person unor    schedule 29.01.2015
comment
Еще раз спасибо за информативный ответ. Да, я согласен с тем, что h1 (а не h2) - это то, что я должен использовать для каждого заголовка подстатьи (первый текстовый заголовок в вашем примере), но я не понимаю, почему вы помещаете его перед заголовком, а не внутри него. Неуместно ли это в данном случае? - person linurb; 29.01.2015
comment
@linurb: вам не обязательно использовать h1 (на самом деле HTML5 рекомендует использовать заголовки соответствующего ранга для уровень вложенности раздела). -- Относительно header: да, включение заголовка в header является уместным и общепринятым. - person unor; 29.01.2015