HTML5'te bir paragraf içinde listelerin yerleştirilmesinin doğru yolu nedir?

Question

<p> öğesinin neden bir <ul> öğesi içeremediğinin teknik açıklamasını aldım. Ne yazık ki, bu içeriğin yapısı olduğunda bana yardımcı olmaz.

meta, ben ne

• semantik açıklama, ne de
• Ben aslında normal olan öğeler "satır içi" bir listesini göstermek istiyorum durumlar için önerilen yapı

anlama içeriği.

This page ya paragraflardan listesini ayıran önerir:

<p>For instance, this fantastic sentence has bullets relating to</p> 
<ul> 
<li>wizards, 
<li>faster-than-light travel, and 
<li>telepathy, 
</ul> 
<p>and is further discussed below.</p> 

veya paragraf için alternatif bir etiketi kullanarak:

<div>For instance, this fantastic sentence has bullets relating to 
<ul> 
<li>wizards, 
<li>faster-than-light travel, and 
<li>telepathy, 
</ul> 
and is further discussed below.</div> 

Ama bunların ikisi de bana alay kadar korkunç kesmek grev HTML5'in varsayılan semantik içeriğinin.

İlk durumda, <p> etiketi semantik olarak anlamlı mıdır? Listenin etrafındaki boşlukları ortadan kaldırmak istiyorsanız (ve sonra gerçekten farklı içerik blokları olan başka listeler varsa - oy!) Doğru şekilde şekillendirmenin pratik zorluklarından bahsetmemek gerekirse,

İkinci durumda 'un "bu bir içerik paragrafı" anlamına gelmesi gerekiyor. Paragrafta görünen içeriğe bağlı olarak ileri geri gitmek yerine sadece <p>'u tamamen bırakabilirim.

ISTM en semantik olarak anlamlı versiyonu olabileceğini gibi bir şey: (başka hangi ince ayarlar bilir ve) blok veya liste öğeleri olarak tarz açıklıklı

<p>For instance, this fantastic sentence has bullets relating to 
<span class="li">wizards,</span> 
<span class="li">faster-than-light travel, and</span> 
<span class="li">telepathy,</span> 
and is further discussed below.</p> 

render sağ olsun. Pratik olarak, bu çok kötü bir rahatsızlık gibi geliyor.

Bu tür içeriği oluşturmak için iyi bir öneri var mı?

Bu, tüm bu zor stiline değil aslında Düzenleme

, öyle görünüyor. Ben tüm tarayıcı varsayılan almak için bir yol varsa emin değilim ama (en azından OS X Chrome) varsayılan liste stili çoğaltabilirsiniz: Bana göre

span.li { 
    display: list-item; 
    list-style-type: disc; 
    margin-left: 40px; 
} 

Answer 1

, bu bir örnektir listitis veya her şey sırasını, bu şekilde işaretlenmesi gereken bir liste olarak görmek. Eğer son örnekte olduğu gibi

<p>For instance, this fantastic sentence has bullets relating to wizards, 
faster-than-light travel, and telepathy, and is further discussed below.</p> 

Eğer bu öğelere ortak stil uygulamak gerekiyorsa, daha sonra uygun şekillendirme kanca <span> geçerli:

Benim ilk yaklaşım olarak ne var işaretlemek olacaktır . li'u sınıf adı olarak kullanmazdım; Her bir metin notunun bir liste kalemi oluşturup oluşturmadığı çok anlamlı değildir.Sayfanın genel içeriğini ve içeriğinde nasıl kullanıldığını bilmeden doğru sınıf adlarını seçmek her zaman zordur, ancak muhtemelen topic uygun bir seçim olacaktır. Yani mark-up size etkili bir listelerini iç içe sürece ondan önce paragraf (veya başka eleman) sonlandırıyoruz ol bir ul istihdam veya eğer

<p>For instance, this fantastic sentence has bullets relating to <span 
class="topic">wizards</span>, <span class="topic">faster-than-light 
travel</span>, and <span class="topic">telepathy</span>, and is further 
discussed below.</p> 

Answer 2

Bana öyle geliyor hale gelir. gerçekten cümle ve bu öğeler satır içi (ve önerdiğiniz durumda, gerçekten bir cümle olduğunu tüm düşünüyorum) ise, o zaman sadece sınırlayıcı olarak virgül ile <p> içinde onları dışarı listelemek istiyorum:

<p>For instance, this fantastic sentence has bullets relating to: 
wizards, faster-than-light travel, and telepathy, 
and is further discussed below.</p> 

Eğer gerçekten mermi istiyorsanız

, belki bir başlık daha uygun olacaktır:

<h2>For instance, this fantastic heading has bullets relating to:</h2> 
<ul> 
<li>wizards, 
<li>faster-than-light travel, and 
<li>telepathy, 
</ul>