[HTML] 시맨틱 태그(Semantic tag) (2) - <section>, <article>, <aside>

<section> 태그

- 제목 또는 동일한 주제를 가진 문서의 영역을 정의

<section>
  <h2>Facts About Dogs</h2>
  <p>
  Dogs have a sense of time. It's been proven that they know the difference between a hour and
  five. If conditioned to, they can predict future events, such as regular walk times.
  </p>
</section>

 

 

 

<article> 태그

- 해당 문서나 페이지와는 완전히 독립적으로 구성할 수 있는 요소를 정의

- 주로 포럼, 블로그 포스트, 보도 기사, 논평 등이 포함

<section>
  <h2>Fun Facts About Cricket</h2>
  <article>
    <p>A single match of cricket can last up to 5 days.</p>
  </article>
</section>

 

 

 

<aside> 태그

- 페이지의 다른 콘텐츠들과 연관이 있지만 중요하지는 않은 추가 정보를 정의

- 주로 참고문헌, 미주, 코멘트, 인용문, 편집 사이드바 등이 포함

<article>
  <p>The first World Series was played between Pittsburgh and Boston in 1903 
  and was a nine-game series.</p>
</article>
<aside>
  <p>
   Babe Ruth once stated, “Heroes get remembered, but legends never die.” 
  </p>
</aside>