HTML의 그룹 요소는 웹 페이지 구조를 좀 더 체계적으로 만들어 줍니다. 이를 통해 코드의 가독성을 높이고, 관련된 요소들을 묶어서 일관된 스타일을 적용할 수 있습니다. HTML의 그룹 요소를 사용하면 페이지의 구조를 명확하게 표현할 수 있으며, 웹 페이지의 유지 보수와 개발 과정을 용이하게 만들어 줍니다. 그룹 요소를 활용하여 헤더, 본문, 사이드 바 등을 구분할 수 있어 웹 페이지의 내용을 분류하고 조직화할 수 있습니다.
- div태그 (블록 요소와 인라인 요소를 그룹으로 묶을 때 사용함)
- span태그 (인라인 요소를 그룹으로 묶을 때 사용)
<예제코드> – div태그
<!-- 형식 <div></div> -->
<p>영화 소개</p>
<p>영화를 소개하는 페이지 입니다.</p>
<p>TV 프로그램 소개</p>
<p>TV 프로그램을 소개하는 페이지 입니다.</p>
<!-- 바디태그 안에 영역 구분 없이 표시하려는 텍스트만 작성하면 코드가 복잡해질수록 텍스트를 구분하기 힘들어짐 -->
<div class = "movie">
<p>영화 소개</p>
<p>영화를 소개하는 페이지 입니다.</p>
</div>
<div class = "tv">
<p>TV 프로그램 소개</p>
<p>TV 프로그램을 소개하는 페이지 입니다.</p>
</div>
<!-- 그룹별로 묶여 있는게 훨씬 가독성이 좋고 텍스트 구분하기에도 좋다 -->