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

Question

Как часть проекта, упомянутого в связи с another question Мне нужно разметки вложенных статей в семантическом 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 выглядит не совсем правильно. A footer возможно с некоторым другим элементом (?) В нем?

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

Answer 1

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

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

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

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

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

• (с) редактор комментариев в section, который имеет article, как ребенок

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

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

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

definition of article предполагает, что (б) уместно:

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

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

Информация об авторстве может быть размещена в footer. Only if Эта информация содержит контактные данные автора, используйте только элемент 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>