: 웹 페이지는 주로 header, main, footer 로 구분한다.
그중에 메인의 내용을 구분하기 위한 시메틱 태그로 section, acticle, div 등을 사용하게 되는데 그 차이를 알아보자.

1. section

: 서로 관련 있는 문서를 분류하는 일을 한다

• 주로 문서를 다른 주제로 구분 짓기 위해 사용한다.
• 홈 페이지는 소개, 뉴스 항목 및 연락처 정보 등으로 나눌 수 있습니다.

<section>
  <h2>Fun Facts About Cricket</h2> 
</section>

2. article

: 기사, 블로그, 댓글 등과 같은 콘텐츠를 포함 할 수 있습니다

• 블로그 글, 포럼 글, 뉴스 기사 등을 묶는 것에 사용한다.

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

3. div

: 나머지 의미적인 관계가 없다면 div를 사용하도록 한다.

4. aside

: 추가적인 정보를 표기할때 사용된다.

<section>
   <article>
       <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>
   </article>
   <aside>
          <p>A study was conducted on dogs being away from their owners for varying hours and the studies show that dogs who were away from their owners the longest showed the greatest amount of affection!
          </p> 
   </aside>
</section>   

• 참고 문헌
• 미주
• 코멘트
• 인용문 가져 오기
• 편집 사이드 바
• 추가 정보

5. figure

: aside를 이용하여 부가적인 설명을 하였는데 그림이나 일러스트는 어떻게 구분할까?

<figure>
  <img src="overwatch.jpg">
  <figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>

• figure로 묶어서 img태그를 넣어준다.
• 이미지에 대한 부가적인 설명은 figure 내부에 figcaption을 이용하여 작성한다.

5. audio

<audio autoplay>
   <source src="주소" type="audio/mp3">
</audio>

• controls : 콘트롤러가 생긴다
• autoplay : 배경음악으로 깔린다.

6. vidio

<video controls loop src="주소"></video>
<embed src=""/>

• 둘 중 하나를 쓰면 된다.
• embed는 gif까지 지원한다.