[HTML] button 태그 안에는 왜 div를 쓰면 안될까?

컨설팅 진단 업무를 하던 중 여느때와 다름없이 validator를 돌리다가 

갑자기 생소하게 느껴져 포스팅 각을 외치며 티스토리에 들어왔다

 

 

 

바로 버튼 태그 안에 div 태그를 쓸 수 없다는 것..!

 

 

 

 

 

그도 그럴것이 버튼 태그는 인라인 태그다...

뭔가 너무 익숙해져서 인라인 태그라는 사실 자체를 잊어버렸던 것

인라인 태그 안에는 블록 태그를 넣을 수 없다 는 아주 기초적인 사실을 말이다.

 

그래서 다시 한 번 정리해보는 인라인태그와 블록태그

 

 

Inline 태그	Block 태그
a, abbr, b, br, button, code, em, i, img, input, label, map, object, q, script, select, span, sub, sup, textarea, var ...	address, article, aside, canvas, dl, dd, ul, ol, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, noscript, output, p, section, table, video ...

 

[인라인 태그 특징]

1. 내용물의 크기가 태그의 영역이 된다.

 

[블록 태그 특징]

1. 자신의 내용만을 한 라인을 독점해서 출력하는 태그

 

[태그 중첩 규칙]

1. block 태그는 자식을 또다른 block 태그 또는 inline 태그를 가진다
2. inline 태그는 자식으로 또다른 inline 태그만 가질 수 있다 (= block 태그는 올 수 없다.)
    * 예외) block 태그 중 <p> 태그는 자식으로 inline 태그만 가질 수 있다.