P태그요소 안에 div 넣지 마세요. HTML 기본기 박살내기

HTML5의 등장으로 태그를 인라인/블록으로 나누는 시대는 지났다.

그러나 HTML를 공부할 때 인라인/블록의 개념을 반드시 알고 지나가야 한다고 생각한다.

 

HTML5 등장 이전에 통용되던 개념은

"인라인 요소 안에 블록을 넣을 수 없다"

였지만,

 

시맨틱 구조의 출현으로, 사실상 우리는 a앵커 태그 안에 블록 요소를 넣는 행위?를 밥먹듯이 하고 있다.

 

하지만 아직까지 전통적으로 인라인 레벨 요소로 불리던 것들 button, input, i, 등등의 요소에는 블록 요소를 집어넣어서는 안된다.. 이건 시맨틱 구조로도 납득되지 않는 부분들이다.

 

이와 더불어 우리가 쉽게 간과하지만 그래서는 안되는 부분이 있다. 바로 P태그다. 

P태그 안에 블록 요소를 넣으면 안된다.

p태그는 블록요소다. 여기서 블록/인라인이 문제될 건 없고, P태그는 문단을 나누는 태그다. 

문단, 말 그대로 문장과 문장 사이를 나누는데, 이 안에 블록요소가 들어간다는 게 말이 안된다.

 

https://www.w3.org/TR/html401/struct/text.html#h-9.3.1

 

안된다고 설명해주고 있다.

P요소는 블록레벨 요소를 포함할 수 없으며(P 자체도 포함), 비어있는 P요소 사용은 지양한다고 나와있다.

 

 

이건 HTML4의 내용이고, 새로 업데이트된 HTML5을 살펴보자.

 

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

P태그는 이제 블록레벨 따위로 분류되지 않는다. Flow content 플로우 콘텐트로 분류된다.

그리고 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>

  안녕하세요

  <div>인사</div>

</p>

이렇게 작성한다면,

 

<p>

  안녕하세요

</p>

  <div>인사</div>

브라우저는 이렇게 읽을 것이다. p태그 다음에 div가 와서 자동으로 p태그가 닫힌 것이다.

 

사실상 HTML4에서의 설명이 좀 더 명확한 느낌이지만..

좌우당간 이런 기본적인 것을 제대로 지키지 못한다면 다른 어떤 고급 기술을 연마해도 소용없다 생각한다. HTML 기본기를 탄탄히 다지자!