HTML: 시맨틱태그

시맨틱태그

이름만 봐도 알 수 있는 HTML 태그입니다.

웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있습니다.

 

 

헤더 영역을 나타내는 <header> 태그

  - 헤더 영역

  사이트 전체의 헤더 or 특정 영역의 헤더

  검색 창이나 사이트 메뉴 삽입

 

 

내비게이션 영역을 나타내는 <nav> 태그

  - 내비게이션 영역

웹 문서 위치에 영향을 받지 않음

문서 안에 여러 개 만들 수 있음(id로 구분)

 

 

핵심 콘텐츠를 담는 <main> 태그

  - 웹 문서에서 핵심이 되는 내용

웹 문서마다 다르게 보여주는 내용으로 구성

웹 문서에서 한 번만 사용

 

 

독립적인 콘텐츠를 담는 <article> 태그

  - 독립된 웹 콘텐츠 항목
    (따로 떼어도 콘텐츠가 되는 내용)

<section> 태그를 포함할 수 있음

 

 

콘텐츠 영역을 나타내는 <section> 태그

  - 콘텐츠 영역

몇 개의 콘텐츠를 묶는 용도로 사용

css 적용을 위해 묶는 용도로 쓰지 말 것

 

사이드 바 영역을 나타내는 <aside>

본문 내용 외에 왼쪽이나 오른쪽,
    혹은 아래쪽에 사이드 바 표시

필수 요소가 아니므로 필요할 경우에만 사용

 

 

푸터 영역을 나타내는 <footer>

사이트 제작 정보나 저작권 정보, 연락처 등

다른 시맨틱 태그 사용해 다양한 정보 포함 

 

 

여러 소스를 묶는 <div>

소스를 묶는 용도

영역을 구별하거나 스타일 적용하기 위해