[HTML]container안에 태그 구분으로 불필요한 class명 줄이기

<div class="square">
  <div></div>
  <div></div>
  <div></div>
  <div>
    <h2>Heading Text</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
      molestias quas dolorum! Itaque quae ex recusandae. Nulla nam enim
      dolorem!
    </p>
    <a href="#none"> Read More </a>
	</div>
</div>

위 코드를 이런 식으로 작성할 경우,
어떤 모양과 역할의 태그인지 의미 파악은 되지만
.square(container) 안에 여러 div 태그가 존재하기 때문에 CSS 작성 시 다소 복잡하고 혼돈을 줄 수 있다.

<div class="square">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <h2>Heading Text</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
      molestias quas dolorum! Itaque quae ex recusandae. Nulla nam enim
      dolorem!
    </p>
    <a href="#none"> Read More </a>
	</div>
</div>

선으로 만들어질(border스타일을 적용해줄) 태그들을 span 태그로 변경해주고,

선 안에 내용이 될 컨텐츠는 클래스명없이 div 태그로 정리해주면,

큰 .square 안에 span 태그와 div 태그로 선과 컨텐츠가 구분이 가능하다.

클래스명을 주지 않고 요소들을 div 태그로만 감싸줄 필요도 없게 된다.