<section> 버리고 <article> 써야 하는 이유
버리고 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에 대한 절대 원칙: 언제나 기본 정보를 쓰는 것이 부가 정보를 더하는 것보다 훨씬 낫다"
'Programming' 카테고리의 다른 글
식별자를 지정하는 4가지 방법 (0) | 2021.03.08 |
---|---|
[CSS] Position의 모든것★ (0) | 2021.03.01 |
[CSS] HTML에 CSS를 적용하는 3가지 방법 (0) | 2021.02.10 |
Google clone - 구글 홈페이지 따라하기 (0) | 2021.02.06 |
마크다운이란? 마크다운 문법 / 사용법 총 정리 (0) | 2021.02.04 |