[html]article, section, div 대체 차이가 뭐야?

코딩하면서 한번쯤은 궁금했던 사람들이 있지 않을까해서 찾아봤습니다.
실제로 같이 일하는 작업자들 중에 아직도 혼용해서 쓰는 사람들도 있고, div만 쓰는 사람들도 봤습니다. 이런 이유는 현재 html표준문서도 Not found로 나오고, 그리고 정작 바꿔 사용해봐도 전혀 차이도 없고, 에러도 안나옵니다.

그렇다고 잘하는 네카라쿠 형들을 따라하면 될수도 있겠지만 그 형들이 또 다르게 적었을경우 어떻게 하실래요?

그러니 한번쯤은 정리가 필요하지 않을까요?
제 나름대로의 해석이니 보시고 틀린 부분이 있다면 댓글로 남겨주세요. 수정하겠습니다.

사전정의

아래 내용은 번역기 돌려서 가져온겁니다.

article

문서 또는 사이트의 독립적 인 부분. 즉, '독립형'이 가능해야하며 다른 곳 (예 : RSS 피드에서)에 해당하는 경우에도 여전히 의미가 있습니다. 예를 들어 웹 로그 기사 (duh), 포럼 게시물 또는 댓글이 있습니다. 마찬가지로 section이 일반적 어쩌면 헤더 및 바닥 글이있다.

section

일반 문서 또는 애플리케이션 섹션. A에는 ``일반적으로 제목 (제목)과 바닥 글도 있습니다. 긴 기사의 하위 섹션, 페이지의 주요 부분 (예 : 홈페이지의 뉴스 섹션) 또는 웹앱의 탭 인터페이스에있는 페이지와 같은 관련 콘텐츠의 덩어리입니다.

div

우리 모두가 알고 사랑하는 일반적인 흐름 컨테이너. 추가 의미 론적 의미가없는 블록 수준 요소입니다

역사

원래 block 요소로는 div만으로 다 제작되던 시절이 있었습니다. 하지만, 코딩이 복잡해지다 보니 어느 맥락이 어디까지 한 묶음인지를 알기가 어려워졌습니다. 그래서 새로 추가된것이 article, section 입니다.
즉, 어떤 영역에 태그를 사용한다면 그 태그는 외형적으로는 별 차이 없어보여도 의미가 맞아야 한다는 뜻입니다.

어떻게 써야하지?

그럼 이제 어떻게 쓸까요? 외형은 모두 똑갑습니다.
하지만, html5에서 위 태그들이 생겨난 이유는 각 목적에 맞게 시멘틱한 태그를 써라 입니다.
다른 사용자들이 이 코딩을 봤을때, 맥락을 잘 이해시킬 수 있게끔 코딩하면 됩니다.

각 영역에 맞게 header, main, footer 등 정확한 구분을 해주고,
공지사항, FAQ, 고객센터 같은 게시판 영역이라면 해당 영역에 article을 써주고,
그 외 논리적인 구분은 모두 section으로 처리하면 될것 같습니다.
굳이 구분이 필요없고, 블럭요소가 필요하다면 div 를 쓰면 되겠구요.

참고문서

https://developer.mozilla.org/ko/docs/Glossary/Semantics