네이버클라우드 캠프 5기/학습내용 정리

28. HTML - 시맨틱 태그

박세류 2023. 5. 26. 11:10

1. 시맨틱 태그

1. 시맨틱 태그란

  1. 시맨틱(semantic) 의미의, 의미적 뜻을 가진 형용사로 기능은 없고 의미적인 부분만 표현하는 태그
  2. 시맨틱 태그는 HTML 웹문서 구조를 잡는데 도움을 주는 태그. HTML5에 최초로 등장.
  3. 시맨틱 태그가 나오기 전에는 웹 문서 구조를 잡을 때 div 태그만 주로 사용.
  4. header, main, footer, nav, aside ... 등 아무기능 없이 위치를 표시하거나 영역을 나눌 때 사용한다.
  5. 시맨틱 태그의 종류
    • header : 사이트의 헤더 영역을 담당하는 태그
           로고, 네브바(메뉴바), 검색창등이 포함
    • main : 사이트의 메인 콘텐츠를 표출하는 영역
         section, article, aside 등의 시맨틱 태그로 다시 한 번 영역을 나눌 수 있다.
    • footer : 사이트의 푸터 영역을 담당하는 태그
           일반적으로 전화번호, 팩스번호, 회사 주소 등의 내용을 포함한다.
    • nav : 네비게이션(메뉴들)을 만들어주는 태그
    • section : 메인 콘텐츠 영역에서 주제별로
            영역을 분리하는 역할을 담당하는 태그
    • article : 메인 콘텐츠 영역에서 각각의 개별
            콘텐츠를 감싸는 태그
    • aside : 좌우측 사이드 영역을 표시하는 태그
          주로 사이드 메뉴나, 추가정보 등을 표출.
728x90