信息框的HTML5語義元素？

請幫我找到合適的HTML5標記爲信息的消息框：信息框的HTML5語義元素？

<div class="info-box"> 
    <div class="info-box-icon"> 
     <i class="fa fa-exclamation"></i> 
    </div> 

    <div class="info-box-message"> 
     <p>In the case of questions or problems, please contact us at the email address <a href="mailto:[email protected]">[email protected]</a></p> 
    </div> 

</div>

我可以用這個例子嗎？

<details class="info-box"> 
    <div class="info-box-icon"> 
     <i class="fa fa-exclamation"></i> 
    </div> 

    <summary="info-box-message"> 
     <p>In the case of questions or problems, please contact us at the email address <a href="mailto:[email protected]">[email protected]</a></p> 
    </summary> 

</details>

來源

2015-04-12 marefly

您的具體問題是什麼？ –

我想在html5中完全創建我的網頁。我的問題是我可以使用信息框的元素細節？ – marefly

有一個在HTML5（這是HTML5草案的組成部分，但在此之前HTML5已作爲建議得到了刪除）沒有details元素。

有沒有一般的答案是什麼元素用於「信息框」，因爲它不清楚這樣的信息框是什麼，以及在哪個上下文中它被用於你的具體情況。

您似乎只爲樣式/腳本原因添加了div元素，所以在決定使用哪個標記時可以忽略它們，因爲它們毫無意義。

看來您已經添加了i元素來顯示圖標，它是not appropriate。如果必須爲添加一個空HTML元素（而不是使用CSS或現有元素），請改爲使用span。

因此，對於您的示例語義標記可能是：

<p class="info-box"> 
    In the case of questions or problems, please contact us at the email address <a href="mailto:[email protected]">[email protected]</a> 
</p>

如果這是它的部分標題的一部分，將其放置在header;如果它的部分頁腳，將它放在footer;如果它與該部分的主要內容無關，請將其放入aside。
如果它代表家長article（如果有）或body的聯繫信息，則將其放入address（可能本身位於header/footer）。
否則，它只是其部分主要內容的一部分。

來源

2015-04-12 16:24:40 unor

信息框的HTML5語義元素？

回答

相關問題