시멘틱( Semantic Tag ) 태그 정리

의미론적 div 태그를 복습하기 용이하게 정리해 보았습니다.

매번 구글링 해서 하나하나 찾고 복습하는게 매우 효율적이지 못하다고 생각해서 작성한 포스트입니다.

<>

<header> <!-- 문서나 섹션의 머릿글을 지정, 로고, 탐색, 제목 및 기타 소개 정보 그리고
			메타 태그 정보, 키웓, 심지어 가져온 CSS 파일이나 스타일 시트도 포함되기도 함.-->
    <nav> <!-- 웹 사이트의 메뉴, 탭, 탐색경로 등 탐색 링크를 포함-->
      <ul> <!-- nav 태그의 내부 구조 패턴-->
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </header>

<main> <!-- 문서에서 유일해야 함-->
    <section> <!-- 문서의 부분을 의미, 주제별 콘텐츠 그룹을 정의-->
      <figure></figure> <!-- 일러스트, 다이어그램, 사진, 코드 목록 등 자체 포함 콘텐츠.-->
      <figcaption></figcaption> <!-- figure를 정의하는 설명을 추가하기 위한 태그.-->
      <picture>
        <img src="" alt="">
      </picture>
    </section>
    <section>
      <article> <!--독립적인 글을 다루는데 사용. Blog 게시물, 뉴스 기사, 제품 리뷰-->
        <p>
          <span></span>
          <b></b>
          <strong>강조할 문자열</strong>
          <i></i>
          <em></em>
        </p>
      </article>
    </section>
    <section>
      <aside></aside> <!-- 옆에 위치하는 콘텐츠를 담는 태그.-->
      <details></details> <!-- 사용자가 보거나 숨길 수 있는 추가 세부 정보. 토글 정보.-->
    </section>
    <section></section>
    <section></section>
  </main>

<footer>
	<!-- 연락처, 사이트 맵, 웹사이트를 하나로 묶고 SEO를 강화하는데 도움이 되는 사이트 링크 포함-->
</footer>

</>