Why Semantic?
왜 시맨틱하게 코딩해야하는지에 대해선 나의 github에 올려두었다. 이미지를 여러가지 찾아보았으나 기본적인 구조는 비슷하고 article과 section의 차이만 있을 뿐이었음. 그래서 그 둘의 차이점을 알아보겠다.
Section과 Article의 차이점
section과 article이 헷갈렸다. HTML5 시멘틱 구조로 제시된 구조들을 살펴보니 article과 section을 독립적으로 쓰기도 하고, section 속에 article 여러개를 넣기도 하고, section 없이 article을 독립적으로 쓰거나, article없이 section 여러개가 메인 안에 구성되어있는 경우도 있었다.
정의를 보았을 때, article의 경우 독립적으로 사용할 수 있어야하고 재사용할 수 있다. section에 비해 구체적임.
section은 논리적으로 관계있는 요소 또는 문서를 분리 하여 묶어줄 수 있는 기능을 한다.
Section 보다 Article?
또한 찾다보니 section 태그를 사용하는 것보다 h1~h6으로 depth를 설정해주는 것이 훨씬 좋고 article을 애용하자는 글도 있어 맺음말을 들고왔다.
- 글의 특정 영역이 시작하고 끝나는 지점을 스크린리더 사용자가 알아챌 수 있게 하려면
<section>과aria-label을 사용하라.- 그런 목적이 아니라면 그냥 다른 태그를 쓰도록 하자. 이를테면
<aside aria-label=“간단 요약”>이라고 한다거나, 굳이<div>태그를 써야 할 이유가 있다면<div role=“region” aria-label=“간단 요약”>이라고 쓸 수도 있겠다.
- 그런 목적이 아니라면 그냥 다른 태그를 쓰도록 하자. 이를테면
<main>,<header>,<footer>,<nav>등은 스크린리더 사용자에게 매우 유용한 태그이며, 보조 기술을 사용하지 않는 사람들에게는 아무 영향을 주지 않는다. 적극적으로 활용하자.<article>은 블로그 글만을 위해서 만들어지지 않았으며, 독자적으로 완성된 콘텐츠는 무엇이든 담을 수 있다. 특히 watchOS에 콘텐츠가 제대로 표시될 수 있게 하는 데 큰 도움이 된다.
✅ 참조
이미지 출처 - Semrush
[HTML/CSS] Section태그와 Article태그 차이, 이미지최적화, UIUX에 대해
section 버리고 HTML5 article 써야 하는 이유
