哪些HTML5標籤用於包裝字典中的定義和示例？

什麼是HTML5ify這個最好的方法？哪些HTML5標籤用於包裝字典中的定義和示例？

follow: Go or come after (a person or thing proceeding ahead); move or travel behind. 

"She went back into the house, and Ben followed her."

This？

<article> 
<dfn>follow</dfn>: Go or come after (a person or thing proceeding ahead); move or travel behind. 
<q>"She went back into the house, and Ben followed her."</q> 
</article>

來源

2013-03-26 whySoSerious

除非你的定義更廣泛的像一個百科全書的文章（例如，維基），我不會把它因爲<article>標籤的物品：

Represents a section of a page that consists of a composition that forms an  
independent part of a document, page, or site. This could be a forum post, 
a magazine or newspaper article, a Web log entry, a user-submitted comment, 
or any other independent item of content.

對於一系列的，你可能有短期的定義一本書或白皮書的附錄，我建議使用數據定義列表：<dl>寬度<dt>和<dd>分別標記術語和定義。

參考：http://html5doctor.com

有一個關於如何最好地利用HTML5標籤得沸沸揚揚，引發了有趣的閱讀。

我可能樣式該

如果我是一個詞彙做一個簡單的定義列表，我可能會開始：

<dl> 
    <dt><dfn>follow</dfn>:</dt> 
    <dd> 
     <p>Go or come after (a person or thing proceeding ahead); move or travel 
      behind.</p> 
     <q>She went back into the house, and Ben followed her.</q> 
    </dd> 
</dl>

和應用一些造型如下：

dl { 
    border: 1px solid #989898; 
    border-radius: 10px; 
    padding: 1.00em; 
} 
dt { 
    margin-left: 1.00em; 
} 
dfn { 
    font-weight: bold; 
    font-size: 1.25em; 
} 
dd { 
    margin-left: 2.00em; 
    margin-bottom: 3.00em; 
} 
dd p { 
    margin: 0 0 0.50em 0; 
} 
dd q { 
    display: block; 
    margin: 0 0 0.50em 0; 
    font-style: italic; 
}

這只是對佈局中各種元素的靈活性和控制力的說明。

小提琴參考：http://jsfiddle.net/audetwebdesign/H6593/

來源

2013-03-26 11:02:34

我真的很感激，如果你也可以提供一個關於如何在這種情況下標記例句的見解。也許這不是什麼大問題，但我仍然希望從一開始就設計好它。 – whySoSerious 2013-03-26 11:52:54

我提供了一個示例HTML/CSS來說明如何接近佈局和樣式。 – 2013-03-26 14:42:03

非常感謝，這是一個完整的答案。 – whySoSerious 2013-03-26 14:46:14

HTML5元素不需要，它是美好的舊dl，dt和dd的情況下。

例如

<dl> 
    <dt>Thing one</dt> 
    <dd> 
     <p>This defines thing one.</p> 
    </dd> 

    <dt>Thing two</dt> 
    <dd> 
     <p>This defines thing two.</p> 
    </dd> 
</dl>

dl是一個定義列表，dt是一個定義的術語，dd是定義描述。

來源

2013-03-26 11:00:03

OK，問題有所改變，但是這是你對這種情況的基本標記。 – 2013-03-26 11:00:28

這個例子（tag-wise）呢？但是，有人編輯我的問題 – whySoSerious 2013-03-26 11:01:29

儘管HTML5稍微改變了'dl'，'dt'和'dd'的含義。第一個'd'現在通常意味着「描述」，而不僅僅是「定義」，所以你的'dt's需要包含'dfn's，其中又包含了術語。 – BoltClock 2013-03-26 11:03:51

哪些HTML5標籤用於包裝字典中的定義和示例？

回答

相關問題