Семантическая разметка для карты блоков


Я использую Bootstrap. Я стараюсь работать с более семантической разметки и уйти от divitis.

Некоторые из этих "карт" блоки появляются на странице, как это.

Оригинал:

<div class="col-lg-4 mb-4">
      <div class="card h-100">
        <h4 class="card-header">Card Title</h4>
        <div class="card-body">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
</div>

Переписать:

<section class="col-lg-4 mb-4">
      <div class="card h-100">
        <header>
          <h4 class="card-header">Card Title</h4>
        </header>
        <section class="card-body">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </section>
        <footer class="card-footer">
          <a href="#" class="btn btn-primary">Learn More</a>
        </footer>
      </div>
</section>

Я мог бы улучшить в HTML?



690
4
задан 1 марта 2018 в 02:03 Источник Поделиться
Комментарии
2 ответа

200_success' комментарий правильно, что контекст и содержание компонентов имеет важное значение для семантики. Я предполагаю, из связанных страниц, которые вы хотите отобразить список коротких статей, что приведет к более подробной информации.


Это, как говорится. Давайте посмотрим на вашем перезаписи:

Внешний section-элемент.

А section может быть хорошо, для меня это больше похоже на список коротких статей. Так что я бы использовать article-элемент здесь.


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

От w3.org 4.4.4 статьи элемент

Также интересное на сайте StackOverflow: семантический HTML-кода статьи список

header-элемент

Если у вас есть только heading-элемент и никакой другой контент для заголовка срезания элемента, необходимо сбросить лишние header-элемент, как:


Эти элементы [Н1 ... Н6] представляю заголовки для своих разделов.

От w3.org 4.3.6 Н1, Н2, Н3, Н4, Н5 и Н6 элементов

Вложенные section-элемент

Этот пункт является фактическое содержание этого элемента. Его контекст-это не самостоятельный раздел, как это подразумевается, когда, заворачивая ее в другой section-элемент:


Элемент HTML, представляет собой самостоятельный раздел

От МДН <section>общий раздел элемент

Так что бросай section как хорошо.

footer-элемент

С помощью footer-элемент тут спорно (как и все остальные пункты тоже). С точки зрения докторов, это абсолютно нормально:


Нижний колонтитул обычно содержит информацию о разделе, например, кто это писал, ссылки на соответствующие документы, авторские данные, и тому подобное.

От w3.org 4.4.9 элементу footer

Однако, лично я бы бросил его для простоты.


Наконец, мы убираем все что не нужно для укладки – в отношении связанного макет – и в конечном итоге с этим:

 <article>
<h1>Card heading</h1>
<p>Some teaser …</p>
<a href="">Learn more …</a>
</article>

3
ответ дан 2 марта 2018 в 10:03 Источник Поделиться

Одно наблюдение у меня есть, заключается в том, что две внешние элементы должны быть заменены:

Внешний section не имеет смыслового использования, он просто содержит макет классы. С другой стороны фактические карты, которые не имеют смыслового значения, но это просто div. Я бы поменяла их:

<div class="col-lg-4 mb-4">
<section class="card h-100">
<!-- ... -->
</section>
</div>

1
ответ дан 1 марта 2018 в 03:03 Источник Поделиться