<div> 태그와 <section> 태그

<div> 태그

• 의미: <div> (Division) 태그는 의미적인 가치가 없는 범용 컨테이너. 주로 스타일링이나 레이아웃 목적으로 사용
• 사용 사례: CSS를 사용하여 스타일을 적용하거나 JavaScript를 사용하여 동적 요소를 조작할 때, 관련 요소들을 그룹화하는 데 주로 사용
• 접근성: 스크린 리더와 같은 보조 기술에게 특별한 의미를 제공하지 않음

 

<section> 태그

• 의미: <section> 태그는 문서나 애플리케이션의 독립적인 섹션을 나타냄. 이 태그는 의미론적으로 중요하며, 문서의 구조를 더 명확하게 표현하는 데 사용됨
• 사용 사례: 웹 페이지 내에서 독립적으로 구분되는 섹션(예: 챕터, 탭, 주제별 그룹 등)을 나타낼 때 사용. 각 <section>은 보통 제목(<h1>, <h2>, <h3> 등)을 포함
• 접근성: 스크린 리더와 같은 보조 기술은 <section> 태그를 사용하여 문서의 구조를 사용자에게 더 잘 전달할 수 있음

 

결론

• <div>는 주로 스타일링과 레이아웃을 위한 범용 컨테이너
• <section>은 문서의 독립적인 영역을 의미론적으로 구분하는 데 사용되며, 접근성과 문서 구조에 중요.
• 적절한 HTML5 의미론적 태그(예: <article>, <aside>, <header>, <footer>, <section>)의 사용은 웹 접근성을 향상시키고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미침