HTML Article 과 Section의 차이

 

랜딩페이지를 제작하기 위해서 HTML 구조를 잡다가 문득 Article 과 Section중 무엇을 선택해야 할까 의문이 들었다. 

 

두 태그 모두 HTML 5의 시맨틱 태그이다. <article> 과 <section> 태그는 출력에 변경 사항이 없기 때문에 서로를 대체할 수 있지만 구분하면 개발자와 브라우저가 해당 콘텐츠의 종류를 이해하기 쉽게 만들어준다. 

 

<article> 태그:

다른 컨텐츠가 필요하지 않은 독립적인 내용을 다른다. 

여러 <article> 태그를 메인 콘텐츠 안에 넣을 수 있지만, 각 기사는 독립적인 내용을 포함한다. 

예로 유튜브에서 한 페이지에 다른 종류의 비디오를 포함시키는것을 생각하면 된다. 

 

 

<section> 태그:

이 태그는 페이지를 소개, 연락처 정보, 세부 정보 등과 같은 세부적인 섹션으로 분할하는 데 사용된다. 

<section>은 다른 <section>태그 안에 포함될 수 있다.

일반 블록을 그룹화 하는 식.