[HTML] Web 기초2, HTML Tag에도 유형이 있다?!

앞서 '[HTML] Web 기초, HTML? 개념 잡고 가자!' 포스팅에서 우리는 '태그'의 개념을 배웠다.

 

이번 포스팅에서는 태그에 대해 좀 더 자세히 알아보자.

 

태그는 크게 Box와 Item으로,

 

그리고 Block과 Inline으로 분류할 수 있다.

 

Box vs Item / Block vs Inline

1. BOX vs ITEM

---

Item은 실제 사용자에게 보여지는 태그이고,

 

Box는 보이지않지만, Item들을 잘 정리할 수 있도록 도와주는 즉, Sectioning을 도와주는 태그이다.

(물론, 나중에 CSS를 통해 스타일링이 가능하지만, 기본적으로 HTML에서는 사용자에게 보여지지가 않는다. )

 

그럼 실제 어떤 태그들이 있는지 몇가지를 살펴보자.

 

BOX		ITEM
header	section	a	video
nav	article	button	audio
main	div	label	map
aside	span	input	canvas
footer	form	img	table

 

2. Block vs Inline

---

Block level 태그는 한줄에 하나!

 

Inline level 태그는 공간이 허용한다면 다른 태그 옆에 배치가 가능하다!

 

위 그림에서 <b>태그와 <span>태그는 Inline 레벨이지만, <p>태그와 <div>태그는 block 레벨임을 확인 할 수있다.