Cách thích hợp để đặt danh sách trong một đoạn trong HTML5 là gì?

Question

Tôi nhận được giải thích kỹ thuật cho lý do tại sao phần tử <p> không được chứa phần tử <ul>. Thật không may, điều này không giúp tôi khi đó là cấu trúc của nội dung.

Trong meta, tôi hiểu không phải

• lời giải thích ngữ nghĩa, cũng không
• đề nghị cấu trúc

đối với trường hợp mà tôi thực sự muốn hiển thị một danh sách các mục "inline" với bình thường Nội dung.

This page đề nghị hoặc tách các danh sách từ các khoản:

<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> 

hoặc sử dụng thẻ thay thế cho đoạn:

<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> 

Nhưng cả hai tấn công tôi hacks như khủng khiếp mà làm cho một sự nhạo báng về nội dung ngữ nghĩa được cho là của HTML5.

Trong trường hợp đầu tiên, thẻ <p> có ý nghĩa ngữ nghĩa như thế nào? Chưa kể đến những khó khăn thực tế của việc tạo kiểu này nếu tôi muốn loại bỏ khoảng cách xung quanh danh sách (và sau đó nếu tôi có các danh sách khác thực sự là khối nội dung riêng biệt - oy!)

Trong trường hợp thứ hai, nếu Tôi cần phải có một <div> có nghĩa là "đây là một đoạn nội dung" Tôi cũng có thể chỉ cần thả <p> hoàn toàn, thay vì phải chuyển đổi qua lại tùy thuộc vào nội dung xuất hiện trong đoạn văn.

ISTM rằng phiên bản ngữ nghĩa có ý nghĩa nhất có thể là một cái gì đó như:

<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> 

với nhịp theo kiểu như khối hoặc danh sách các mục (và ai biết được những gì tinh chỉnh khác) để có được render đúng. Thực tế, điều này nghe có vẻ khủng khiếp khủng khiếp.

Có đề xuất nào tốt để hiển thị loại nội dung này không?

Sửa

này thực ra không phải tất cả những gì khó để phong cách, vẻ bề ngoài. Tôi không chắc chắn nếu có một cách để nhận tất cả các giá trị mặc định của trình duyệt, nhưng tôi có thể sao chép phong cách danh sách mặc định (trên OS X Chrome, ít nhất) với:

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

Answer 1

Đối với tôi, đây là một ví dụ của listitis, hoặc nhìn thấy mọi chuỗi các thứ như một danh sách cần đánh dấu như vậy.

tiếp cận đầu tiên của tôi sẽ là để đánh dấu những gì bạn có như:

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

Nếu bạn cần phải áp dụng một phong cách phổ biến đối với những mặt hàng, sau đó móc phong cách thích hợp là <span> là bạn có trong ví dụ cuối cùng của bạn . Tôi sẽ không sử dụng li như một tên lớp mặc dù; cho dù mỗi mẩu tin của văn bản cấu thành một mục danh sách hay không không phải là rất có ý nghĩa.Nó luôn luôn khó khăn để chọn tên lớp chính xác mà không biết nội dung tổng thể của trang và làm thế nào nó được sử dụng trong bối cảnh, nhưng có thể topic sẽ là một sự lựa chọn thích hợp. Vì vậy, mức tăng giá trở

<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

Dường như với tôi nếu bạn đang sử dụng một ul hoặc ol bạn đang có hiệu quả kết thúc đoạn văn (hoặc thành phần khác) đứng trước trừ khi bạn đang làm tổ danh sách. Nếu nó thực sự là một câu và những mặt hàng là inline (và trong trường hợp bạn đề xuất, tôi nghĩ rằng tất cả những gì thực sự là một câu), sau đó tôi chỉ muốn liệt kê chúng ra trong <p> bằng dấu phẩy như delimiters:

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

Nếu bạn thực sự muốn đạn, có lẽ một nhóm sẽ là phù hợp hơn:

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