[HTML] article, section

HTML 태그 중에서 article 과 section 이라는 태그가 있다.

 

조금만 검색해보면 

 

article의 경우 블로그 글, 포럼 글, 뉴스 기사 등 이라고 정리되어있고,

section의 경우 문서 등 주제를 구분짓기 위해 사용된다고 정리되어 있는데

 

저 정리만 보고 항상 드는 생각이 "아니 그래서.. 어떻게 활용하는데...???"

 

나만 저 정리된 블로그들을 보면서 이해를 못하는 것일 수도 있다.

그래서 제대로 공부하지 않고 시맨틱 태그를 활용해보자 하고 사이드 프로젝트에 적용 시킨 코드는 아래와 같다.

 

<section class="dotto-detail-wrapper">
      <article class="dotto-detail-section">
        <div>이 작업이 마음에 드시나요?</div>
       <button type="button" id="dotto-detail-like-btn">찜하기</button>
      </article>
      <article class="dotto-detail-flex-row">
        <div id="dotto-detail-img">아래 3장의 이미지 확대해서 보기 default 첫번째 이미지</div>
        <div class="dotto-detail-flex" id="dotto-detail-information">
          <h4>꽃과 레터링 할인 이벤트</h4>
          <div class="dotto-detail-flex-row">
            <div>조회수</div>
            <div>56회</div>
          </div>
          <div class="dotto-detail-flex-row">
            <div>50,000</div>
            <div>100,000</div>
          </div>
          <hr />
          <div class="dotto-detail-flex-row">
            <div>위치</div>
            <div>서울 마포구 (홍대)</div>
          </div>
          <div class="dotto-detail-flex-row">
            <div>장르</div>
            <div>블랙워크</div>
          </div>
          <div class="dotto-detail-flex-row">
            <div>소요시간</div>
            <div>2~3 시간</div>
          </div>
          <hr />
          <div>
            두달동안 할인가에 진행되고 있는 인기 최고 꽃과 레터링 입니다. 꽃은 손님의 탄생화로 수정해 드렸고 레터링은 기존 글씨체에 좋아 하시는 글귀를 넣어 작업했습니다 꽃, 글씨체 수정 등 요청사항다 반영해드립니다! 편하게 메세지 주세요!
          </div>
          <div>
            <span class="tag-area">태그들</span>
          </div>
          <hr />
          <article class="dotto-detail-section">
            <div class="dotto-detail-flex-row">
              <div>유저프로필</div>
              <div>
                <div>아이디</div>
                <div class="dotto-detail-flex-row">
                  <div>팔로워</div>
                  <div>158.8만명</div>
                </div>
              </div>
            </div>
            <button type="button" id="dotto-detail-follow-btn">팔로우</button>
          </article>
          <hr />
        </div>
      </article>

      <article class="dotto-detail-flex-row">
        <div class="dotto-detail-img-lists">이미지1</div>
        <div class="dotto-detail-img-lists">이미지2</div>
        <div class="dotto-detail-img-lists">이미지2</div>
      </article>
    </section>

* 명확한 구분도 없고 div 가 난무하는 문서가 되었습니다.. *

 

 

article 요소와 section 요소를 사용하는 기준

콘텐츠의 독립성을 기준 으로 어떤 요소를 사용할지 결정할 수 있다.

 

article : article 내부 요소들을 다른 곳에서 사용하여도 전혀 어색한 부분이 없을 경우, (즉, 콘텐츠가 독립적일 때)

section : 콘텐츠가 다른 콘텐츠와 연관이 있을 경우 또는 요소를 분리할 경우

 

section은 범용적인 범위 내에서 사용하고, article의 경우는 독립적으로 사용할 때 사용된다 라고 생각하면 된다.

 

div 요소의 경우에는 section 과 article 등 다른 요소들로 표현하기 어려울 경우(Grouping 목적일 때) 사용

그렇기 때문에 가급적 div 요소를 사용하지 말고 다른 HTML 요소들로 표현해야 올바른 시맨틱 태그 활용 이다.

 

<article>
    <h1>HTML, section 요소</h1>
    <p>이 HTML 문서는 Sections 콘텐츠를 설명하기 위한 문서</p>
    <section>
        <h2>HTML, Article 요소</h2>
        <p>이 HTML 문서는 Sections 콘텐츠를 설명하기 위한 문서</p>
    </section>
    <section>
        <h2>HTML, Aside 요소</h2>
        <p>이 HTML 문서는 Sections 콘텐츠를 설명하기 위한 문서</p>
    </section>
 </article>

 

따라서 section 요소 안에 article 요소가 들어가는 것 보다 article 요소 안에 section 요소가 들어가는게 위 논리와 맞게 된다.

 

section 요소 안에는 연관된 내용들이 담겨야 하는데 여러 article이 존재할 경우 article 요소는 독립적이기에 안에 내용이 달라질 수 있기 때문에 부자연스러울 수 있다.

 

aritcle 요소 안에 다른 독립적인 영역이 있을 경우 article - article 과 같이 여러 article 등이 존재할 수 있다.

 

<article>
    <article>
        <h1>HTML, section 요소</h1>
        <p>이 HTML 문서는 Sections 콘텐츠를 설명하기 위한 문서</p>
        <section>
            <h2>HTML, Article 요소</h2>
            <p>이 HTML 문서는 Sections 콘텐츠를 설명하기 위한 문서</p>
        </section>
        <section>
            <h2>HTML, Aside 요소</h2>
            <p>이 HTML 문서는 Sections 콘텐츠를 설명하기 위한 문서</p>
        </section>
    </article>
 </article>

 

또한 article 요소와 section 요소 내에서는 heading 요소 사용을 권장하고 있다.

 

(heading 요소를 사용하여야 명확한 영역 구분이 되기 때문에 CSS를 통하여 heading 요소의 스타일을 없애는 한이 있더라고 사용해야 한다.)

 

 

---