구조요소, 시멘틱요소

1. 컨테이너 (div vs span)

지난 블록요소와 인라인 요소에서 살펴보았듯이 div 태그와 span태그는 모두 아무런 의미도 가지고 있지 않는 요소라는 점에서는 공통점이 있습니다. 또한 전역 특성만 포함합니다.

하지만 div태그는 block요소, span태그는 inline요소라는 점에서 큰 차이가 있습니다.

1-1 <div>: 콘텐츠 분할 요소 (block요소)

<div> 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. 아무런 의미도 가지고 있지 않아 CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.

<div> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있습니다.

1-2 <span> : (Inline요소)

<span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다.

2. 시멘틱 웹(Semantic Web)

HTML5에서는 시맨틱 웹을 쉽게 구성할수 있도록 만들어주는 요소들이 추가되었는데, 기존에

<div id="header"> 내용 </div>

로만 나타낼수 있던 head 부분을

<header> 내용 </header>

로 쉽게 더 의미론적으로 나타낼수 있게 되었습니다.

이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이라고 볼수 있습니다.

의미론적인 마크업을 사용했을 때의 이점