Bootstrap和HTML5語義標記

我開始使用Twitter Bootstrap並遇到問題。Bootstrap和HTML5語義標記

最近瀏覽了一些關於HTML5的教程，發現了關於如header，nav，footer等語義元素應該用來代替Div。

現在，雖然學習Bootstrap大多數都使用Div標記。

那麼，哪種方法是Bootstrap Div標籤或HTML5語義標籤的好方法？爲什麼？

謝謝。

來源

2014-03-02 Jatin

Bootstrap使用Divs來顯示應該如何使用框架。這是因爲div是幾乎所有容器中都可以使用的通用塊元素。但是，使用bootstrap的元素並不重要，因爲它使用類來呈現元素。

例如，你將使用時對屏幕相同的結果：使用

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

時

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

不是真正的差別將是機器人和輔助功能的讀者，因爲如你所說， HTML5元素是語義。

每個開發人員都會選擇他感覺最舒服的元素。但我的觀點是：如果您信任html5元素的語義方法（並且您應該:)），最好的方法是使用html5元素作爲具有特殊含義的標記（如頁眉，頁腳，導航，... ）並且對所有不存在html5元素的情況使用div。

這裏是它們的含義的所有元素的列表：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

來源

2014-03-10 12:29:51 ylerjen

我有點不清楚你說的是什麼意思：「但你用的bootstrap元素不重要......」_無所謂_for what_？這些新標籤在HTML5中的重要性不在於這些語義_do_重要嗎？例如，在[

我的意思是「風格渲染無關緊要」。（除了像'.table'中的td之類的一些子元素...）。所以是的，選擇正確的tagName對於語義來說很重要（就像你說的那樣，你的'nav'例子），但是如果你真的不關心語義（就像bootstrap團隊在他的例子中做的那樣，因爲沒有有用的標記，它只是編碼示例），只是想嘗試使用bootstrap設計一個塊元素，選擇一個div元素就足夠了。希望現在更清楚。順便說一句：http://www.w3fools.com/;） – ylerjen

您應該使用HTML5語義標記，因爲它們可以同時幫助搜索引擎和屏幕閱讀器。

您使用的Bootstrap文檔和/或模板（在撰寫本文時）看起來落後了。我無法找到爲什麼不用HTML5語義標籤來包裝引導程序div元素（正確應用於樣式）的動機。

例如，在navthe following is recommended的情況：

<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 navigation for navbar指出的一樣：

請務必使用一個元素或者，如果使用的是更通用的元素這樣作爲一個，添加一個角色=「導航」到每個導航欄明確確定它作爲輔助技術用戶的地標區域。

來源

2017-02-14 14:59:28

Bootstrap和HTML5語義標記

回答

相關問題