[HTML] 기본문법: p태그 내부에 블록태그 작성

인라인 태그 내부에는 블록태그를 작성할 수 없고,
flow content로 분류되는 p태그의 사용법

 

<p>
    <ul>
        <li></li>
        <li></li>
    </ul>
</p>

p 태그 내부에 ul > li 태그를 작성하니 Prettier 에러 발생

 

OUTPUT 결과:

p 닫힘태그가 문제라고 뜸 (이미 다른 태그에 의해 닫혔을 수 있음)

 

자세한 내용: 

https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

HTML Standard

 

자세한 내용을 보고싶으면 링크로 들어가라고 되어있는데, 아래 링크가 더 이해하기 쉽게 나와있음

https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-p-element

4.4 Grouping content — HTML5

 

p태그 바로 뒤에 (닫힘태그 전에) 아래 요소들이 오면 p태그의 닫힘태그가 생략될 수 있음

address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, 

nav, ol, p, pre, section, table, or ul

 

에러가 난 코드처럼 작성하면, 브라우저는 

<p>
<p/>
<ul>
    <li></li>
    <li></li>
</ul>

위처럼 p태그를 읽고 ul태그를 읽기전에 자동으로 p태그를 닫아버림