HTML의 <div> 요소를 제대로 이해하고 사용하는 방법을 알아보겠습니다.
<div> 요소는 콘텐츠를 나누고(divide), 그룹화하고(group), 감싸는(encapsulate) 데 사용되는 범용 컨테이너 요소입니다.
다만 <div>는 맥락에 맞는 시맨틱(의미론적) HTML 요소가 없거나, 어떤 요소를 써야 할지 확실하지 않은 경우에만 사용하는 것이 좋습니다.
시맨틱 마크업이란 무엇일까요?
시맨틱 마크업(Semantic Markup)이란, 담고 있는 콘텐츠의 의미나 기능을 설명해 주는 HTML 요소를 사용하는 것을 말합니다. 반면 <div> 요소는 특정한 의미를 갖지 않는 범용(non-semantic) 요소입니다.
<div> 요소의 대표적인 활용 사례
예를 들어, 방문자에게 뉴스레터 구독을 유도하는 재사용 가능한 모달(modal) 컴포넌트를 만든다고 가정해 보겠습니다.
이런 컴포넌트를 정의할 수 있는 전용 시맨틱 HTML 태그는 따로 존재하지 않습니다. 바로 이럴 때 범용 컨테이너인 <div> 요소를 사용하기에 완벽한 상황입니다.
<div class="subscribe-modal">
<form id="contact" method="post" action="">
<fieldset>
<h3>Subscribe to my Newsletter</h3>
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address here"
required
/>
<input type="submit" name="submit" class="submit" value="Subscribe!" />
</fieldset>
</form>
</div>시맨틱 컨테이너 요소와 비교하기
<div> 태그 외에도 HTML에는 콘텐츠를 담는 컨테이너 역할을 하는 다양한 태그들이 있습니다. 가장 많이 사용되는 컨테이너 요소들은 다음과 같습니다.
<article><section><main><header><footer><form>
위 요소 중 하나라도 콘텐츠의 성격에 맞다면, <div> 대신 해당 요소를 사용하는 것이 좋습니다.
그 이유는 간단합니다. 위 요소들은 모두 시맨틱 요소 태그라서 콘텐츠에 구체적인 의미를 부여하지만, <div>는 어떠한 맥락 정보도 제공하지 않는 non-semantic 태그이기 때문입니다.
<div> 요소를 사용할 때 알아두면 좋은 점
<div> 요소 안에는 어떤 종류의 콘텐츠든 자유롭게 넣을 수 있습니다.
시맨틱 마크업이 일반적으로 권장되기는 하지만, 브라우저가 페이지를 해석하고 사용자에게 렌더링하는 데 필수적인 것은 아닙니다.
그러나 이미 적합한 시맨틱 태그가 존재하는 상황에서 굳이 범용 요소를 사용하면 SEO(검색 엔진 최적화)에 부정적인 영향을 줄 수 있습니다. 검색 엔진은 시맨틱 태그를 통해 페이지의 구조와 의미를 더 잘 파악하기 때문입니다.
실무에서는 어떤 HTML 요소를 사용해야 할지 확신이 서지 않을 때 <div>를 선택하는 편이 좋습니다. 잘못된 의미를 가진 요소를 쓰는 것보다는, 의미 없는 범용 요소를 쓰는 편이 낫기 때문입니다. 게다가 기술적인 관점에서 보면 <div>를 '잘못' 사용하는 경우는 사실상 없습니다. 문제가 된다면 오직 시맨틱 관점에서뿐입니다.