HTML div와 span 차이
div와 span은 HTML 요소를 묶을 때 가장 자주 보게 되는 태그다.
둘 다 자체로는 특별한 의미를 나타내지 않지만 묶을 수 있는 내용과 기본 배치 방식이 다르다.
페이지의 넓은 영역을 묶으려면 div, 문장 안의 일부를 묶으려면 span을 먼저 떠올리면 된다.
다만 의미가 있는 태그를 쓸 수 있다면 div나 span보다 그 태그를 우선하는 편이 좋다.
div의 역할
div는 flow content를 묶는 범용 컨테이너다.
제목, 문단, 목록, 이미지, 다른 div 등 페이지의 여러 요소를 하나의 영역으로 묶을 수 있다.
<div class="profile-card">
<img src="/profile.jpg" alt="김현록 프로필" />
<div class="profile-card__body">
<h2>김현록</h2>
<p>프론트엔드 개발자</p>
</div>
</div>이 예시에서 바깥 div는 프로필 카드 전체를 묶고, 안쪽 div는 텍스트 영역을 묶는다.
div는 스타일을 주지 않으면 내용의 의미나 동작을 바꾸지 않는다.
CSS로 배치하거나 JavaScript로 여러 요소를 한 번에 찾기 위한 구조로 주로 사용한다.
span의 역할
span은 phrasing content, 즉 문장 안에 자연스럽게 들어갈 수 있는 내용을 묶는 범용 인라인 컨테이너다.
문장 전체가 아닌 특정 단어, 숫자, 상태 텍스트만 구분해서 스타일이나 동작을 적용할 때 잘 어울린다.
<p>
주문 상태는
<span class="order-status">배송 중</span>
입니다.
</p>.order-status {
color: #087f5b;
font-weight: 700;
}span이 없다면 문장 전체에 스타일을 주거나 원하는 단어를 다른 태그로 나눠야 한다.
span은 문장의 흐름을 유지하면서 필요한 부분만 선택하는 역할을 한다.
기본 display의 차이
브라우저의 기본 스타일에서 div는 보통 display: block, span은 display: inline으로 배치된다.
div는 기본적으로 새 줄에서 시작하고 사용 가능한 가로 너비를 차지한다.
<div>첫 번째 영역</div>
<div>두 번째 영역</div>두 div는 기본 상태에서 서로 다른 줄에 배치된다.
span은 글자처럼 같은 줄에 배치되고, 내용에 필요한 너비만 차지한다.
<span>첫 번째</span>
<span>두 번째</span>가로 공간이 남아 있다면 두 span은 같은 줄에 나타난다.
이 차이는 HTML 태그에 영원히 고정된 규칙은 아니다.
CSS로 div { display: inline; }이나 span { display: block; }처럼 바꿀 수 있다.
그래도 HTML을 읽을 때 예상 가능한 구조를 만들기 위해 넓은 영역은 div, 문장 안의 일부는 span으로 시작하는 편이 자연스럽다.
block과 inline의 세부 동작은 CSS display block inline inline-block 차이에서 이어서 볼 수 있다.
담을 수 있는 내용의 차이
div는 일반적인 flow content를 담으므로 제목, 문단, 목록과 같은 다양한 구조를 자식으로 둘 수 있다.
span은 phrasing content를 담는 용도라서 일반적으로 텍스트와 문장 안에 들어갈 수 있는 요소를 담는다.
다음처럼 p 안에 div를 넣는 구조는 피해야 한다.
<p>
주문 상태:
<div>배송 중</div>
</p>p는 phrasing content를 담는 요소인데 block 수준의 div가 들어왔다.
브라우저는 HTML을 파싱하면서 p를 예상보다 먼저 닫을 수 있고, 개발자가 생각한 DOM 구조와 다른 결과가 생긴다.
문장 안의 텍스트를 묶으려면 span이 맞다.
<p>
주문 상태:
<span>배송 중</span>
</p>시맨틱 태그의 우선순위
div와 span은 범용 컨테이너라서 내용의 역할을 설명하지 않는다.
내용의 의미에 맞는 HTML 요소가 있다면 그 요소를 먼저 고르는 편이 좋다.
<div class="header">...</div>
<div class="navigation">...</div>
<div class="main">...</div>
<div class="footer">...</div>위 구조는 스타일만 보면 영역을 구분할 수 있지만 HTML 자체는 각 영역의 역할을 말해 주지 않는다.
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>시맨틱 태그를 쓰면 브라우저, 검색 엔진, 보조 기술과 개발자가 구조를 더 쉽게 이해할 수 있다.
span도 같은 기준을 적용한다.
강조라면 strong이나 em, 시간이라면 time, 코드라면 code, 링크라면 a가 span보다 내용을 잘 설명한다.
<p>마감일은 <time datetime="2026-07-18">7월 18일</time>입니다.</p>맞는 의미 요소가 없고 CSS나 JavaScript를 위해 그룹화만 필요할 때 div나 span을 쓴다.
CSS를 적용하는 기준
여러 요소를 하나의 레이아웃으로 묶으려면 div가 편하다.
<div class="actions">
<button type="button">취소</button>
<button type="submit">저장</button>
</div>.actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}글 일부의 색상이나 굵기만 바꾸려면 span이 적합하다.
<p>총 <span class="price">29,000원</span>입니다.</p>.price {
color: #d9480f;
font-weight: 700;
}span은 기본이 inline이므로 width 또는 세로 방향의 margin과 padding을 예상한 방식으로 적용하기 어려울 수 있다.
크기를 지정하면서 같은 줄에 두고 싶다면 display: inline-block이나 inline-flex를 검토한다.
.badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
}JavaScript로 선택하는 기준
div와 span 자체보다 class, id, data-* 속성으로 역할을 표현하는 편이 낫다.
<div class="cart-summary" data-cart-summary>
총액: <span data-cart-total>0원</span>
</div>const total = document.querySelector('[data-cart-total]')
total.textContent = '29,000원'document.querySelector('div')처럼 태그 이름만으로 찾으면 페이지의 구조가 조금만 바뀌어도 원하지 않는 요소를 선택할 수 있다.
스타일은 class, JavaScript 훅은 data-* 속성처럼 용도를 드러내는 선택자를 쓰면 수정 영향을 줄일 수 있다.
class와 id의 사용 기준은 HTML id와 class 차이에서 정리했다.
대체하면 안 되는 요소
div나 span에 click 이벤트를 붙이면 마우스로는 버튼처럼 동작하게 만들 수 있다.
<span class="save" onclick="save()">저장</span>하지만 이 요소는 기본 키보드 조작, 포커스, 버튼 역할을 갖지 않는다.
사용자가 누르는 동작을 만들려면 원래부터 그 의미와 동작을 가진 button을 쓰는 편이 맞다.
<button type="button" class="save">저장</button>페이지 이동은 a, 사용자 동작은 button을 우선한다.
두 요소의 차이는 HTML button과 a 태그 차이에서 볼 수 있다.
선택 기준
선택할 때는 먼저 내용에 맞는 시맨틱 태그가 있는지 확인한다.
있다면 header, nav, main, section, article, button, a, strong, time 같은 요소를 쓴다.
맞는 의미 요소가 없다면 그룹화할 범위를 본다.
복수의 요소나 레이아웃 영역을 묶으려면 div를 쓴다.
문장 안의 글자나 작은 인라인 내용을 묶으려면 span을 쓴다.
마지막으로 CSS로 기본 display를 바꿀 필요가 있는지 확인한다.
div와 span의 핵심 차이는 단순히 줄바꿈에만 있지 않다.
어떤 내용을 어떤 범위로 묶는지가 HTML 구조를 선택하는 기준이다.
참고 자료
