Nest는 html의 문단에 나열되어 있습니다

Question

html은 <p> 안에 비 인라인 요소를 중첩하는 것을 허용하지 않지만 목록을 포함하는 단락을 렌더링하는 방법은 무엇입니까? 자연 텍스트). 모든 대답이 만족스럽지 않은 세 가지 답변을 보았습니다.

• 목록은 단락 안에 있으면 안됩니다. (나는 문화적 논쟁에 나서지 않을 것이지만, html이 글쓰기 스타일을 지시하는 장소가되지 않기를 바랄 것이다.)
• 텍스트를 단락으로, 목록으로, 그리고 두 번째로 구분한다. 포스트 텍스트와 단락. 이 문단이 부분 인 인 <p> 청크가 있고 의미가 더 큰 방향으로 이동하려고하는 마크 업에 좋지 않은 것 같습니다.
• 가짜 단락 일부를 사용하여 <div class="mypara"> - 모든 것을 우회하고 텍스트에 대한 적절한 의미로 마크 업을 포기하는 나쁜 방법처럼 보입니다.

의미 상으로 정확하고 유효한 다른 방법이 있습니까?

Answer 1

최신 작업 초안의 HTML 5 단락은 표현 요소 만 포함 할 수있는 흐름 요소로 정의됩니다. 목록은 또한 흐름 요소로 정의되며 단락에 묶을 수 없습니다. 단락의 정의가 무엇이되어야한다고 생각하든, 이것은 HTML의 용어에 대한 공식적인 정의이며, 변경 가능성은 거의 없다고 생각합니다.

당신이 언급 한이 두 가지 외에 고려해 두 가지 가능성이 있습니다,

• 단락이 적용되는 경우보다 더 광범위한 도달 흐름 요소에 도달 고려 등 section, nav, header, footer 또는 article
• 하이브리드 방식을 사용하십시오. 일반적인 형식을 적용하는 div으로 p – ol – p 시퀀스를 래핑하십시오.

지금까지 div이가는대로 HTML 5 스펙은 분명히 그것은 다른 HTML 요소를 수행하는 방식에 의미 론적 의미를 부담하지 않기 때문에 "최후의 수단"요소를해야하고, 같이하지 않을 수 있습니다 것이 좋습니다 대체 사용자 에이전트에서 사용자 친화적입니다. 이 조언에 따르면, 나는 의미론이 당신에게 중요한 경우 p의 비용으로 div을 사용하지 않을 것입니다. 그러나 여러 단락의 사용이 너무 시각적으로 고르지 않게하는 데 유용 할 수 있습니다.

Answer 2

html <p> 태그는 실제 글쓰기 스타일의 관용구를 제어하기위한 것이 아닙니다. 질서 정연한 방식으로 텍스트 덩어리를 표시하는 것은 간단합니다. 나는 그것이 인쇄 된 자료를 시뮬레이트하기위한 것이라는 것을 믿지 않는다. 당신은 이것을 위해 사업부를 사용해야 할 것입니다.

Answer 3

사양은 사용자가 할 수 없다고 말하기 때문에 질문에 대한 대답은 분명히 아니오입니다. 너와 마찬가지로, 나는 의미론을 유지하기를 좋아한다. 그래서 나는 보통 두 번째 옵션 (단락, 목록, 다른 단락)을 사용한다. 그러나 내 머리 꼭대기에서 나는 목록이 실제로 텍스트의 흐름을 어 기지 않는 텍스트를 생각할 수 없다. 그래서리스트 이후에 새로운 단락을 시작하는 것은 상처를 입힐 수 없다.

Answer 4

나는 당신이 "단락"이라고 생각하는 것에 달려 있다고 생각한다. HTML 디자이너는 목록을 단락의 일부로 간주하지 않습니다.그리고 어느 해석에 대해서도 논쟁이있을 수 있다고 생각하지만, 나는 그 스펙이 옳았다 고 생각합니다.

목록은 생각의 틈을 나타내지 않지만 확실히 음성 또는 사고 방식의 변화를 나타내며 이는 새로운 의미 컨테이너에 적합하다고 생각합니다.

같은 맥락에서 단락은 한 부분의 논리적 파티션을 나타냅니다. 리스트는 논리적 파티션의 순서를 나타내며, 하나의 논리적 파티션이 더 많은 파티션으로 분할 될 수있는 것은 상상할 수 있지만, 단순히 새로운 파티션을 생성하는 것이 더 합리적입니다 (특히 음성/방법의 그러한 큰 중단의 경우).

의미는 크게 주관적 일 수 있습니다. 그리고 괜찮습니다. 그러나이 경우에는 HTML 스펙이 의미를 올바르게 나타냅니다.

Answer 5

시각적 스타일의 이유는 무엇입니까? 다른 말로하면, 다음과 같은 것이있을 때, 이상적이지 않은 방식으로 시각적으로 렌더링되는 것입니까? 문제가 너무 많은 마진은 P 후와 UL 이전 인 경우

<p>Some paragraph text.</p> 
<ul> 
    <li>First list item</li> 
    <li>Second list item</li> 
    <li>Third list item</li> 
</ul> 
<p>Another paragraph.</p> 

, 당신은 보상이 같은 인접 형제 선택을 시도 할 수 있습니다 : 일반적인 워크를 지적

p + ul { margin-top: -1em; }