Ответы пользователя по тегу Вёрстка
  • Как семантически правильно уложить тег address и копирайт внутри footer?

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

    <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 отображает такой заголовок как вложенный.
    Ответ написан
    1 комментарий
  • Почему в семантичной верстке html порядок тегов table thead, tfoot, tbody?

    eruditecat
    @eruditecat
    Красноглазик
    Семантика здесь не при чём. Сначала загружаются верхние и нижние заголовки таблицы, а потом уже — между ними её тело.
    Ответ написан
    Комментировать