시맨틱 요소란?
HTML 현 최신버전 HTML5에선 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱요소(semantic element)가 새롭게 만들어 졌다
시맨틱이란 의미론적인 단어로 해석할 수 있으며
의미를 가진 요소로 사용하는 방식을 만들어 나갔다
이러한 시멘틱 요소를 사용하기전에는 단순히 div요소로 주로 사용했으나 웹 페이지 하나에 수십 수백개의 div가 중첩되어 div지옥으로 불리며 이를 해결하기 위해 시맨틱 요소를 사용했다
시맨틱 요소를 사용해야 하는 이유
검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게하고, 궁극적으로 시각장애인에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다
기존 태그는 일부분을 제외하고는 HTML 4.01에서 사용되던 태그가 거의 그대로 사용된다 원래 HTML을 표준에 맞게 사용했다면 큰 어려움 없이 HTML5에도 적응할 수 있다
시맨틱 요소의 종류
<header>
일반적으로 맨위에 사용되는 경우이며 상단바, 검색창, 사이트제목 등등이 들어갈 수 있다
<footer>
일반적으로 맨아래에 사용되는 경우이며 사이트의 라이선스, 주소, 연락처 등을 넣을때 사용한다
<section>
웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 사용하는 태그로 사용된다
<nav>
네비게이션의 약자로 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다 보통은 ul태그로 목록형태로 많이 사용함
<main>
문서의 주된 콘텐츠를 표시한다 main태그는 두개이상 보여져서는 안된다.
<article>
독립적이고 자체 포함된 콘텐츠를 지정할때 사용한다
<aside>
사이드바, 광고창 등 중요하지 않은 정보를 담을 때 사용한다
