[HTML] - 시맨틱하게 HTML 짠다는 의미란 무엇인가?

우선 시맨틱하게 HTML을 짜야하는 이유에 대해서 알아보자.

이를 위해서 시맨틱 웹의 목적과 사용이유를 짚고넘어가면 검색사이트들은 웹사이트를 검색하기 위해 검색엔진을 사용한다 이때 개발자들은 프로적트를 만들때 검색어에 많은 노출을 할 수 있어야하기 때문에 검색엔진 최적화(SEO :Search Engine Optimization)을 고려해줘야한다.

 

즉, 검색엔진에 잘 노출 되려면 시멘틱 웹을 따라야 한다는 뜻이기도하다.

 

그렇다면 계속 시멘틱 시멘특 거리는데 이 시멘틱이란 의미는 무엇인가?

Semantics(의미론) 이라는 영어단어에서 알 수 있듯이 HTML 문서를 의미에 맞도록  작성하는 것을

Semantic HTML이라고 부르는 것이다. 

 

HTML에는 정답이 없기에 HTML을 각 요소의 의미에 맞게 HTML을 작성하는 것이 중요하다.

 

다음과 같은 예시를 보자.

1. <div> 이것은 소리없는 아우성 </div>

2. <p> 이것은 소리없는 아우성 <p>

 

1번과 2번중 어떤 것이 좀 더 의미가 잘 전달되는가? 바로 2번이다. 

2번으로 작성했을 때는 태그만 보고도 아 이건 문장이구나 라는 것을 알 수 있기 때문이다.

 

HTML의 요소

 

• none-semantic 요소  div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.
• semantic 요소  for, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.

아래의 태그들은 지금은 너무나 당연하게 사용해야하는 태그들이지만 2014년도 HTML5가 출시되기전에는 그렇지 못했다.

 

• header  헤더를 의미합니다.
• nav  네비게이션을 의미합니다.
• aside  사이드에 위치하는 공간을 의미합니다.
• section  본문의 여러 내용(article)을 포함하는 공간을 의미한다.
• article  본문의 주내용이 들어가는 공간을 의미합니다.
• footer  푸터를 의미합니다.