<section>과 <article>의 구분

<section>

일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용한다.

<article>

독립적으로 구분하거나 재사용할 수 있는 구획을 나타낸다.
어떤 페이지에 붙여도 독립적으로 사용 가능하다면 article 요소를 고려해 볼 것

<section> vs <article>

오늘 수업에서 가장 충격적인 소식.
그동안 section을 나눌 때 div에 id 또는 class를 줬었는데 section, article, header, nav 모두 div로 대체할 수 없을 때 최후의 수단 으로 사용하는 것이었다.

앞으로는 section, article을 잘 구분해서 사용해야겠다.

✏️ section vs article
section : 사이트 내 연관 콘텐츠
article : 독립적 콘텐츠

<nav>

nav(네비게이션, 탐색)는 보통 메뉴에 사용된다.

 

<nav>
    <a href="https://www.naver.com">네이버</a>
  	<a href="https://www.daum.net">다음</a>
    <a href="https://www.google.com">구글</a>
</nav>

<aside>

보통 사이드바 혹은 광고 영역으로 활용한다. 해당 콘텐츠와는 별개 콘텐츠

<footer>

작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 구획 요소이다.

<address>

가장 가까운 부모 article 이나 body 요소의 연락처 정보를 나타낸다. 만약 가장 가까운 부모 요소가 body 라면 문서 전체의 연락처 정보를 의미한다.

• 연락처 정보 : 전화번호, 메일 주소, 우편 주소 등

<address>
  <a href="hhttps://github.com/sooyoung97">홈페이지</a>
  <a href="mailto:sooyyyoung@gmail.com">메일 주소</a>
  오시는 길 : 서울특별시 어디어디
</address>

+ 3/30 추가
네이버, 다음 사이트가 <div>를 남발한 이유는 뭘까?
Legacy Code(오래된 코드)이기 때문일 수 있고,
브라우저 호환성 이슈 때문일 수도 있다.(IE 지원이 종료됐으나 아직 존재) 
해당 사이트들은 불특정 다수가 사용하므로 접근성 고려해야 하므로.
그렇다고 해서 <div> 남발은 금지

+ 4/4 추가
article은 작은 html이라고 생각하자!
section은 주제가 있는 컨텐츠를 묶자! heading 필수!

<footer> 
address > dl > dd+dt 로 태그 가능

 

 

section

section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다.

article

article 태그는 문서내에서 그룹화해서 분리하는 역할을 한다.

 

언뜻 설명을 보면 비슷해 보인다.

article과 section 이 두 시맨틱 태그는 div와 같은 블록 속성을 가지고 있기 때문에 div로 대치해도 기능상으로 문제가 없고 두 요소 다 콘텐츠를 구분하는 데 사용되며 서로 바꿔서 사용 가능하다.

그럼 이 유사한 기능 같아 보이는 article과 section을 어떤 상황에 따라서 사용해야 할까?

 

section article 차이

▷ article은 내용이 독립적이다.
article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다.
즉 article이 좀 더 구체적이다.

▷ section은 주제별로 구분한 그룹이다.
논리적으로 관계있는 요소 또는 문서를 분리할 때 사용한다.

 

※ 논리적인 관계가 없는 요소들을 그룹화 할 경우에는 div를 사용한다.

 

 

section과 article 사용예시

<section>
  <h1>HOT TOPIC</h1>
  <section>
     <p>World</p>
     <article>World news 1</article>
     <article>World news 2</article>
     <article>World news 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Sport news 1</article>
    <article>Sport news 2</article>
    <article>Sport news 3</article>
  </section>
</section>

 

 

참조

https://intrepidgeeks.com/tutorial/what-is-the-difference-between-htmlsections

[HTML] Sections / <section>과 <article>의 차이는?

https://moo-you.tistory.com/m/406

section article 차이

 

 

추가

https://developer.mozilla.org/ko/docs/Web/HTML/Element/section

<section>: 일반 구획 요소 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/article

<article> - HTML: Hypertext Markup Language | MDN

https://www.w3schools.com/Tags/tag_article.asp

HTML article Tag

https://www.w3schools.com/Tags/tag_section.asp

HTML section Tag