web-dev-qa-db-ja.com

BootstrapおよびHTML5セマンティックタグ

Twitterを始めようとしていますBootstrapで質問を見つけました。

最近HTML5に関するいくつかのチュートリアルを実行し、ヘッダー、ナビゲーション、フッターなどのセマンティック要素が判明したため、Divの代わりに使用する必要があります。

今、学習中Bootstrap彼らのほとんどはDivタグを使用しています。

Bootstrap DivタグとHTML5セマンティックタグのどちらが良いアプローチですか、それはなぜですか？

ありがとう。

htmltwitter-bootstraptags
26
Jatin

ブートストラップはDivsを使用して、フレームワークの使用方法を示します。これは、divがコンテナのほとんどすべてのケースで使用できる一般的なブロック要素であるためです。ただし、bootstrapで使用している要素は、要素をレンダリングするためにクラスを使用するため、重要ではありません。

たとえば、次のコマンドを使用すると、画面に同じ結果が表示されます。

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

使用時より

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

あなたが言ったように、HTML5要素はセマンティクスであるため、本当の違いはロボットとアクセシビリティリーダーにあります。

各開発者は、自分が最も快適に感じる要素を選択します。しかし、私の見方は次のとおりです：html5要素のセマンティックアプローチを信頼する場合（そして、そうする必要があります:)）最善の方法は、特別な意味を持つタグ（ヘッダー、フッター、ナビゲーションなど）に対してhtml5要素を使用することです。 ）、html5要素が存在しないすべての場合にdivを使用します。

以下に、すべての要素とその意味のリストを示します。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

25
ylerjen

検索エンジンとスクリーンリーダーの両方に役立つので、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>

current bootstrap navbarのナビゲーション は同じことを示しています：

要素を必ず使用するか、などのより一般的な要素を使用する場合は、すべてのナビゲーションバーにrole = "navigation"を追加して、支援技術のユーザーにとってランドマーク領域であることを明示的に識別します。

3
Steven Jeuris