Бутстрап и HTML5 Семантические теги

Недавно просмотрели некоторые учебники по HTML5 и выяснили, что семантические элементы, такие как header, nav, footer и т.д., должны использоваться вместо Div.

Теперь, изучая Bootstrap, большинство из них используют тег Div.

Итак, каков хороший подход к тегам Bootstrap Div или семантическим тегам HTML5 и почему?

Ответы

Ответ 1

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

Например, вы будете иметь тот же результат на экране при использовании:

<section class="col-md-4">Hello</section>

чем при использовании

<div class="col-md-4">Hello</div>

Реальная разница будет для роботов и читателей доступности, поскольку, как вы сказали, элементы HTML5 являются семантикой.

Каждый разработчик выберет тот элемент, который ему больше всего нравится. Но моя точка зрения: если вы доверяете семантическому подходу элементов html5 (и вы должны:)), лучшим способом было бы использовать элементы html5 для тега, которые имеют особое значение (например, header, footer, nav,... ) и использовать div для всех случаев, в которых не существует элемента html5.

Вот список всех элементов с их значениями: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Ответ 2

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

Документация Bootstrap и/или шаблон, который вы использовали (в момент написания), просто, казалось, отставали. Я не могу найти мотивации относительно того, почему бы не окружать элементы bootstrap div (которые правильно применяются для стилизации) с семантическими тегами HTML5.

Например, в случае nav рекомендуется следующее:

<nav role="navigation">
    <ul class="nav navbar-nav">
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
    </ul>
</nav>

текущая загрузочная навигация для навигатора указывает то же самое:

Обязательно используйте элемент или, если используете более общий элемент например, a, добавьте роль = "навигация" к каждому navbar, чтобы явно определить его как ориентир для пользователей вспомогательных технологий.