Я начинаю с Twitter Bootstrap и наткнулся на вопрос.
Недавно просмотрели некоторые учебники по HTML5 и выяснили, что семантические элементы, такие как header, nav, footer и т.д., должны использоваться вместо Div.
Теперь, изучая Bootstrap, большинство из них используют тег Div.
Итак, каков хороший подход к тегам Bootstrap Div или семантическим тегам HTML5 и почему?
Спасибо.
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
Вы должны использовать семантические теги 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, чтобы явно определить его как ориентир для пользователей вспомогательных технологий.