div, section, article 태그 차이 정리

div, section, article 태그 차이에서 먼저 볼 부분

div는 의미 없는 묶음이고, section은 주제별 영역, article은 독립적으로 읽을 수 있는 콘텐츠에 가깝습니다.

div는 스타일을 주거나 레이아웃을 잡기 위한 중립적인 태그입니다. 의미를 전달하지 않기 때문에 남발하면 문서 구조를 읽기 어려워집니다.

section은 하나의 주제를 가진 영역에 어울립니다. 보통 제목과 함께 쓰면 문서의 목차처럼 구조가 선명해집니다.

article은 블로그 글, 뉴스 기사, 카드형 게시물처럼 따로 떼어도 의미가 유지되는 콘텐츠에 적합합니다.

같은 카드 UI 비교

<section class="post-section">
  <h2>최신 글</h2>
  <article class="post-card">
    <h3>HTML 기본 구조</h3>
    <p>문서의 큰 틀을 설명합니다.</p>
  </article>
</section>

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

div, section, article 태그 차이 정리 비교 기준

잘못 작성했을 때 나타나는 흐름

HTML 글은 화면에 보이는 모양보다 문서가 어떤 의미로 읽히는지를 먼저 봅니다.

브라우저 개발자 도구의 Elements 탭에서 실제 태그 구조가 예상대로 만들어졌는지 확인하면 오류를 줄일 수 있습니다.

검색엔진과 보조 기술은 태그의 의미를 참고하므로, 단순히 div로 감싸기보다 상황에 맞는 태그를 선택하는 습관이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 영역에 제목이 있으면 section을 고려하기
• 독립적으로 읽히는 콘텐츠는 article 고려하기
• 단순 스타일용 묶음은 div 사용하기
• 태그 의미보다 디자인만 보고 고르지 않기