Как семантически правильно уложить тег address и копирайт внутри footer?

Question

[Кот Учёный]

<footer>
    <address>
        <h1>Контакты</h1>
        <ul>...</ul>
    </address>
    <WHAT_A_TAG?>
        <p>&copy; Вася Пупкин</p>
        <p>И ещё чьи-то права</p>
    </WHAT_A_TAG?>
</footer>

<WHAT_A_TAG?> div? section? ..?

Answer 1

[nkorobkov]

div

Answer 2

[Кот Учёный]

Спасибо за внимание к моему вопросу. Разобрался. Решение придётся показать в контексте упрощённого общего шаблона. Возможно, это поможет кому-нибудь в построении своей структуры документа.

<header class="header">
  <!-- Название сайта -->
  {% if page.layout == 'page' %}
  <p class="title">Вася Пупкин</p>
  {% elsif page.layout == 'intro' %}
  <h1 class="title">Вася Пупкин</h1>
  {% endif %}

  <p class="description">Кто такой Вася</p>
</header>

<main>
  <!-- Название страницы -->
  {% if page.layout == 'page' %}
  <h1 class="title">Заголовок страницы</h1>
  {% elsif page.layout == 'intro' %}
  <h2 class="title">Портфолио</h2>
  {% endif %}

  {{ content }}
</main>

<footer class="footer">
  <div class="contacts">
    {% if page.layout == 'page' %}
    <h1 class="title">Вася Пупкин</h1>
    {% elsif page.layout == 'intro' %}
    <h2 class="title">Контакты</h2>
    {% endif %}

    <!-- Кстати да, в <address> нельзя помещать заголовки и секционные элементы -->
    <address>
      <ul>...</ul>
    </address>
  </div>
  <div class="copy">
    <h1 class="title">Авторские права</h1>
    <p>&copy; Вася Пупкин</p>
    <p>И ещё чьи-то права</p>
  </div>
</footer>

Тогда при page.layout == 'page' W3C валидатор генерирует следующий outline:

- Заголовок страницы (h1)
    - Раздел1 (h2)
        - Подраздел1 (h3)
        - Подраздел2 (h3)
    - Раздел2 (h2)
- Вася Пупкин (h1)
- Авторские права (h1)

А если page.layout == 'intro', то:

- Вася Пупкин (h1)
    - Портфолио (h2)
        - Раздел1 (h3)
        - Раздел2 (h3)
    - Контакты (h2)
- Авторские права (h1)

Для Сергей Сунцев:
А по поводу злоупотребления <section> уже писали на Хабре, и в данном случае я думаю, что <footer> внутри <section> — это взаимоисключающие вещи. И, более того, тэг <section> априори подразумевает вложенность. То есть контент внутри него не может быть верхнего уровня. Даже валидатор напрягается по поводу присутствия <h1> внутри <section>, а в outline отображает такой заголовок как вложенный.

Comments

[Сергей Сунцев]

Вполне логично, спасибо за правку

Answer 3

[Сергей Сунцев]

<section>
  <footer>
    <address>
      <h1>Контакты</h1>
      <ul>...</ul>
    </address>
    <p>&copy; Вася Пупкин</p>
    <p>И ещё чьи-то права</p>
  </footer>
</section>

Так будет семантически верно, для удобства параграфы можно в div поместить.
подробней тут: frontender.info/the-art-of-html-semantics-pt1