[HTML] <article>과 <section>, <div>는 어떤식으로 써야할까?

시맨틱 태그를 잘 활용하고 싶은데

section과 article이 너무 헷갈려서 정리를 해본다.

 

왜 시맨틱 태그로 레이아웃을 만들어야 할까?

---

시맨틱 태그로 작성된 소스를 보면 태그만 보고도 어느 부분이 제목인지 메뉴인지 본문인지 알 수 있다.

그래서 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리하다.

 

또한 "어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편함이 있어서는 안된다"라는 웹접근성 시각에서 볼 때도 중요하다.

시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 보조 기구를 사용하는데 시맨틱 태그를 통해 어느 부분이 제목이고 내용인지 구별할 수 있기 때문에 사이트 내용을 정확히 전달할 수 있다.

 

또한 태그에 대한 역할이 정확히 정해져 있기 때문에 어떤 장치에서든 문서를 똑같이 해석할 수 있다.

 

<section> - 주제별 콘텐츠 영역을 나타내기

---

문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용한다.

논리적으로 관계 있는 문서 or 요소를 분리할 때 사용한다.

주로 자식요소로 <hn>태그와 일반적인 콘텐츠가 포함된다.

<section>태그 안에 또 다른 <section> 태그를 넣을 수도 있다.

<section>
	<h1>상품소개</h1>
    <ul>
    	<li>상품1</li>
        <li>상품2</li>
        <li>상품3</li>
    </ul>
    <p>상품의 실제 이미지와 다를 수 있습니다.</p>
</section>

 

 

<article> - 콘텐츠 내용 넣기

---

웹 상의 실제 내용을 넣는다.

독립적으로 배포하거나

재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 사용하면 된다.

즉, 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.

 

- 블로그의 포스트

- 웹 사이트의 내용

- 사용자가 등록한 코멘트

- 독립적인 웹 콘텐츠 항목

- 뉴스 기사

- 신문 논평

등에서 사용한다.

<article>
	<h3>브랜드 페이스북</h3>
    <ul>
    	<li>포스팅1</li>
        <li>포스팅2</li>
        <li>포스팅3</li>
    </ul>
</article>

 

<div>

---

콘텐츠를 묶어 시각적 효과를 적용할 때,

즉 콘텐츠에 CSS를 적용할 때 <div> 태그를 사용한다.

 

 

참고

[html 태그] section, article 태그 (사용, 비교)