HTML.05.Semantic(시맨틱)

시맨틱 (Semantic) 태그

semantic은 의미의,의미론적인 이란 뜻을 가진 단어이다

태그의 이름을 만들때, 막 만드는것이 아니라,

태그 이름을 보고 어떤 역할을 하는지(어떤 의미인지) 알 수 있는 태그를 사용

ex) header, nav, main, scetion, footer 등등

 

시멘틱 태그의 필요성

HTML의 소스 코드만 보고도 어느 부분이 어떤 내용이고 어디에 표시되는지 쉽게 알 수 있음

문서 구조가 정확히 나눠지므로 다른 매체의 화면에 맞춰서 수정하기 편리함

 

웹 문서 구조의 주요 시맨틱 태그

 

header

>>헤더 영역. 주로 맨 위나 왼쪽에 위치. 검색창이나 사이트 메뉴를 삽입

 

nav

>>네비게이션 영역. 웹 문서 에서 다른 위치로 연결하는 링크를 포함

 

main

>>메인 콘텐츠 영역.웹 문서의 가장 핵심적인 정보를 담은 부분. 웹 문서에서 한 번만 사용

 

section

>>컨텐츠 영역. 단순 컨텐츠 영역. div를 사용해도 무방함

 

aside

>>사이드바 영역. 본문 내용 외에 외곽에 위치. 웹 사이트의 필수 요소가 아니다

 

footer

>>푸터 영역. 웹 문서 맨 아래에 위치. 사이트 정보, 저작권 정보, 연락처 등 입력

 

div

>>division(구분, 분할). 문서의 구조를 지정(영역을 구별), 스타일을 적용할 범위를 지정