2010-08-04 20 views
3

AFAIK標記標題,沒有專用的元素 - 就像<caption>對錶,爲<figcaption>的數字,等等 - 來標記列表的頭部。應該使用什麼樣的標記1嗎?如何爲HTML列出

在HTML 3.0, there was an element <LH>

但現在已被棄用。

Lorem存有胡蘿蔔,番茄 本科生科研。有沒有必要甚至不是dapibus volutpat 門。 令人驚歎的山谷 開發商。最先味道 籃球設定他們的悲痛和臨牀護理之前; Morbi suscipit nisl生活 ,它是在官方網站上。

愛水果1:

  • 菠蘿

  • 樹莓

  • 蘋果

摩爾人,或直徑抵扣 客戶。 PROIN預期值,也ID華富,歐盟 非常全面。法無。然而, SAPIEN需要投入我跑步,但 治療。甚至孩子很大。 遺憾的是,只有一個色澱層 橙色獅子。 存有悲坐Quisque tempor eleifend aliquet metus。保護者adipiscing普魯斯 很大。

+0

可能重複[什麼是最好的做法爲HTML中的列表提供標題,標題或標籤?](http://stackoverflow.com/questions/1141639/what-is-the-best-practice-for-provding-a-caption-title-or-label -h-list-in-ht) – 2010-08-05 06:49:16

回答

3

它看起來像你想的HTML5答案。如果你所有的名單有頭1將使用<dl>(現在的意描述列表)與單<dt>頭和列表項爲<dd>的:如果混合了許多與/列表的不

<dl> 
    <dt>Fruits I love:</dt> 
    <dd>Ananas</dd> 
    <dd>Strawberry</dd> 
</dl> 

<ul>要堅持頭1/<ol>和正常使用<hX>的。包裹<hX>並在<div>列表保存語義:

<div class="list"> 
    <h2>Fruits I love:</h2> 
    <ul> 
     <li>Ananas</li> 
     <li>Strawberry</li> 
    </ul> 
</div> 
+1

定義列表對於標記語義是很好的,但對於使標記可訪問並不是那麼好。因此,我不得不放棄很多我最喜歡使用的DL。 – 2010-08-04 21:31:52

+0

將列表放在'

'中不是一個好主意,因爲'
'是一個元素「,它可以在不影響文檔含義的情況下從文檔的主流中移走。」在我的情況下,列表是主要流程的一部分。 – 2010-08-05 06:57:34

+0

@Török此評論是否適用於msger? – schot 2010-08-05 07:21:27

1

+1了使用常規的首標,優選地在下方的以前使用的一個電平。

+0

這裏的問題是,直到下一個標題列表後的整個內容都屬於列表的標題,它是semanti cally不正確。 – 2010-08-04 13:47:49

+0

我覺得你,但我很確定你的用戶不會注意到:) – Mickel 2010-08-05 20:54:40

1
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p> 

<p>Fruits I love:</p> 
<ul> 
    <li>Ananas</li> 
    <li>Raspberry</li> 
    <li>Banana</li> 
</ul> 

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p> 

沒有理由用什麼比在這種情況下,一個段落別的。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p> 

<p>I love <a href=#fruits>some fruits</a>!</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p> 

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p> 

<figure id=fruits> 
    <figcaption>List 1: Fruits I love</figcaption> 
    <ul> 
    <li>Ananas</li> 
    <li>Raspberry</li> 
    <li>Banana</li> 
    </ul> 
</figure> 
0

有幾件事情可以做:figcaption會在另一種情況是適當

  1. 使用HTML5,爲schot pointed out
  2. 使用HTML3,因爲你注意到:)
  3. 我'd使用標題,這是非常好的導航和標記頁面的一般語義結構:

    <h3>Things I love</h3>

    <h4>The list</h4>
    <ul>
    <li>Ananas</li>
    <li>Raspberry</li>
    <li>Banana</li>
    </ul>

    <h4>Elaborated description</h4>

    <p>Lorem ipsum…</p>

(對不起,此格式)

如果你使用Firefox,我建議HeadingsMap清晰地看到頁面結構:的

HeadingsMap :: Add-ons for Firefox