HTML5 시멘틱태그

HTML5 시멘틱태그

HTML5이전에는 의미가 없는 div와 같은 태그들로 레이아웃을 구성하며 코딩을 해왔는데, 

이것은 검색엔진의 효율적인 데이터 추출을 저해합니다.

HTML5로 넘어오면서 새로 등장한, 그 자체로 의미를 가지는 태그를 시맨틱태그라 합니다.  

이 시맨틱태그들은 검색엔진이 태그를 분별하고 효율적으로 데이터를 추출할 수 있도록 해줍니다.

또한, 한눈에 파악하기 쉬운 마크업이 될 수 있습니다.

이 시맨틱태그들을 적절히 사용할 줄 아는게 HTML5 웹표준에 다가서는 첫 걸음입니다.

 

대표적인 시맨틱태그로는 

- header

상단 요소

 

- footer

하단 요소

 

- nav

메뉴

 

- section

여러개의 중심 내용을 감싸는 공간, *h태그가 속해야 합니다.

 

- article

신문기사처럼 내용물이 많은 하나의 독립된 컨텐츠

 

- aside

페이지 본문 내용과 직접적 연관이 없는 부분, *퀵메뉴,광고,서브메뉴 등

 

시맨틱태그는 div와 같이 컨테이너 구성에 사용되는 태그입니다.

허나 ie9 이하로는 시멘틱 태그를 지원하지 않기때문에 크로스브라우징을 잘 생각해서 사용해야합니다.

그렇지 않을경우 엄청난 재앙이...