시만틱 태그

시만틱 테그는 HTML5 문서에서 새롭게 추가된 테그 입니다. 일반적으로 HTML5 태그의 가장 큰 변화를 시멘틱 태그라고 말합니다.

시맨틱의 의미

시멘틱(semantic)은 의미론적인이라는 영어 단어 입니다.

semantic은 의미가 통하는의 뜻으로 문서에서 내용을 보다 명학하게 전달하기 위하여 사용되는 테그 입니다.

기계적인 검색 엔진은 어떠한 태그가 어떠한 기능을 하는지 분별할수 없고 웹 페이지에서 데이터를 효율적으로 추출할 수 없습니다. 이를 해결 하고자 특정한 태그에 의미를부여해서 웹 페이지를 만드는 시도가 시작 되었습니다. 그리고 이를 시멘틱 웹이라고 표현합니다.

기존 코드와의 차이점

시만틱(Semantic) 사전적으로 의미론적이라는 뜻을 가지고 있습니다.

예를들어 웹페이지에서 로고와 메뉴등을 담고 있는 해더영역이 있다면, 이전에는 다음과 같이 코드를 작성하였습니다.

<div class="header">
    <div>
        Logo
    </div>
    <div>
        Menu
    </div>
</div>

이렇게 웹의 구성부분을 보다 쉽게 의미를 전달하기 위해서 새로운 시만틱 테그를 추가하게 된 것입니다.

시만틱 테그의 이점

  • 검색엔진 최적화
  • 웹 접근성 향상
  • 가독성 향상

시만틱 레이아웃

시만틱 테그는 웹페이지의 레이아웃을 구성할때 자주 사용합니다.

과거 HTML4와의 차이점

시만틱 테그는 html5에서 새롭게 추가된 테그입니다. 기존 html4에서는 이러한 태그 없이 <div> 테그를 주로 사용을 하였습니다.

  • 시만틱 태그로 사이트를 만들어야 하는 이유

그외 의미가 부여된 html 테그들

  • 제목테그 : Hn
  • ifram