😊 들어가며
시맨틱 태그와 검색 엔진 최적화 SEO에 중요성을 이해하고 나서 나는 최대한 의미있는 태그들을 사용하며 적절히 사용하려고 노력했다.
뭐 header, nav, footer, aside, main, div... 등 태그들은 태그의 의미를 어느정도 이해하고 나름 잘 의미에 맞게 잘 적용하고 있었지만
section, article 이 두 태그에 대해서는 의미를 봐도 내 기준에서는 너무 모호했다.
비슷한데 다른 것 같기고 하고 이해했다고 생각했는데 article안에 section이 들어갈 수 있다고 하니 이해를 잘 못하는 것 같았고...
그래서 내 나름대로 비유를 통해 이해를 했고 이 이해한 내용들을 정리할 예정이다.
section와 article
section, article는 웹 페이지의 구조를 더 명확하게 표현하기 위해 사용된다. 먼저 CDN 문서에 정의 된 의미를 먼저 살펴보자.
section
HTML section 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 section은 제목을 포함하지만, 항상 그런 것은 아닙니다.
article
HTML article 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
🤔
문서의 내용만 봤을 때 머라하는지 하나도 감이 오질 않는다. 솔직히 둘 다 비슷한 의미를 가진 것 같은데 다른 느낌이다.
그래서 인터넷에 많은 글을 좀 더 찾아 보고 느낀 section, article은
sectiond은 서로 관계있는 문서를 하나의 주제로 묶어 분리하는 역할을 한다. 즉 한 페이지에 여러 주제가 있다면 이 하나의 주제를 section 태그로 분리를 할 수 있다.
article은 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타내는 역할.
그럼 무슨 차이🤔
section과 article의 의미를 계속 봐도 솔직히 어느 상황에 적합할지 아직도 모호하다. 둘의 차이점을 안다면 이런 모호함을 좀 극복할 수 있지 않을까 생각한다.
간단하게 생각하자
setction : 페이지의 여러 콘텐츠를 관련성 있는 구획으로 묶을 때 사용
article : 자체로서 의미를 이해할 수 있는 독립적인 콘텐츠를 표현할 때 사용
아마 section과 article을 구분하기 정확한 표현은 독립성과, 콘텐츠 그룹화 키워드라고 생각한다. 애초에 section과 article은 의미 목적이 다르다는 것을 이해해야한다.
section은 페이지 내 콘텐츠를 그룹화하여 분리하며, article은 독립적인 콘텐츠를 나타내며 해당 콘텐츠가 페이지에서 분리되어도 그 자체로 의미를 가진다.
✅나를 이해하게 해준 비유 표현
의미와 차이점을 알며 이해한 느낌도 받았지만 찝찝한 느낌도 받았다. 확실하게 이해하는 것을 좋아하는 나로써 만족을 못했나 보다.
뭐 section안에 article이 올 수 있고 article안에 section이 올 수 있고 이런 말을 들으니 더 복잡해지긴 했다.
그래서 백화점을 예시로 생각하며 section과 article을 상상해봤다. 우리가 백화점에 갔을 때를 상상해보자.
-
백화점의 각 층은 하나의 section이다. 각 층은 가전 제품, 의류, 시식 코너 등 하나의 주제로 각 층을 분리하고 있다.
-
의류 코너 층에 올라가면 많은 메이커 상점들이 배치되어있다. 이는 하나의 상점이 article이다. 상점들은 각각 독립적이며 그냥 해당 층에 배치되어있을 뿐인 것.
-
하나의 메이커 상점안에 또 상의, 하의, 신발 이렇게 주제별로 나뉠 수 있으며 이를 또 article 내부에 section으로 나뉠 수 있다.
👌마치며
나는 백화점 비유를 통해 정말 머리속에 잘 이해가 되었다. 그래서 다른 분들도 이 주제에 대해 혼동을 겪고 있다면 조금이나마 도움이 되었으면 한다.
솔직히 각 의미에 대한 태그를 적용하는 것에 대해 정답은 없는 것 같다. 개발자가 어떻게 생각하는지 너무 추상적이기 때문이다.
그래도 우리는 각 태그들의 의미를 제대로 이해하고 활용하여 의미있고 효율성 있게 문제를 해결하여 서비스를 제공하는 것이 개발자의 역할인 것 같다.
