본문 바로가기

Programming

[HTML] section태그와 article 태그의 차이점

<section> 버리고 <article> 써야 하는 이유

 

webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/

 

버리고 HTML5 써야 하는 이유 - Webactually

각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 〈h1〉, 〈h2〉··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 〈h〉 태그에 〈section〉을 둘러싸서 제목 크기를

webactually.com

위 게시물에서 article과 section의 차이점을 비롯해 <section>태그가 왜 유용하지 않은지, 또 그런 <section>태그를 사용해야 하는 경우는 어떤 경우가 있는지에 대해 아주 잘 설명해주셨다.

 

내 나름대로 정리해보자면,

 

<article>은 문서, 페이지, 애플리케이션에 포함되며 그 자체로도 독자적으로 완성된 내용을 담고 있다.

 

즉, 블로그의 문서를 <article>태그에 감싸 하나씩 나열하여 페이지를 구성하는 데 쓰일 수 있다. 

 

블로그에서는 문서가 될 것이고, 유투브에서는 영상, 아마존에서는 상품 하나하나를 감싸는 데 쓰일 수 있다.

 

말하자면 <article>은 다른 형식으로 추출해서 제공할 수 있는 콘텐츠다.

 

또는 다른 페이지를 차지하는 광고가 될 수도 있고 뉴스레터 기사, 나열된 상품 중 하나가 될 수 있다.

 

 

<section>태그는 HTML 문서에 포함된 독립적인 섹선을 정의할 때 사용한다. 

 

보통 제목요소 (<h1>~<h6>)를 자식 요소로 포함하고 있는 경우가 많다.

 

웹브라우저가 HTML5문서의 목차를 정할 수 있도록, 각각의 제목과 그에 따른 내용을 담기 위한 보편적인 용도의 컨테이너로 만들어졌다.

 

그래서 똑같이 <h1>태그를 사용하더라도 <section>태그에 얼마나 깊이 둘러싸여 있는지에 따라 올바른 단계(<h2>, 또는 <h3>)의 제목이 되도록 자동으로 조절된다는 것이다.

 

그러나 <h1>태그를 <section>태그를 이용해 서로 다른 깊이로 둘러싸는 것보다 <h2>,<h3>태그를 통해 코드에서부터 그 목차의 단계를 밝히는 것이 더욱 유용하다.

 

그렇다면 <section>태그는 아예 쓸모가 없는 것일까?

 

<section>태그가 유용하게 쓰일 수 있는 경우도 있다!

 

바로 기사의 상단에 "간단 요약" 부분이다.

 

<section>태그를 통해 스크린리더는 사용자가 "간단 요약" 부분에 들어간다는 사실을 안내해주고 끝나는 부분도 알려준다. 

 

이를 이용해 사용자는 이 "간단 요약"영역을 건너뛸 수 있게 된다.

 

물론 <div>태그의 aria-label속성을 이용해 이름을 붙일 수도 있다.

 

하지만 이렇게 부가적인 속성을 사용하는 방법보다는 이미 내재되어있는 문서의 단계(깊이)를 나눌 수 있는 태그를 쓰는 것이 더 옳다고 할 수 있다.

 

이 부분에 대해 이 필자는 이렇게 말했다.

 

" ARIA에 대한 절대 원칙: 언제나 기본 정보를 쓰는 것이 부가 정보를 더하는 것보다 훨씬 낫다"