Semantic HTML

시맨틱 HTML은 단순히 표현이나 모양을 정의하기 보다는 웹 페이지와 웹 애플리케이션에 있는 정보의 의미 또는 의미를 강화하기 위해 HTML 마크업을 사용하는 것입니다. 시맨틱 HTML은 기존의 웹 브라우저와 다른 많은 사용자 에이전트에서 처리됩니다.

시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻입니다. 의미론적 웹은 HTML 상에 존재하는 요소들이 컨텐츠의 의미를 브라우저와 개발자에게 알려주는 작성 방식입니다.

더 쉽게 풀어쓰자면, 태그명에 의미(용도)가 나타나있는 태그를 이용한 것이 시맨틱 웹입니다.

시맨틱 HTML을 작성해야하는 이유

시맨틱 HTML을 작성하면, 개발자는 물론 브라우저까지도 태그의 의미를 알게됩니다. 이는 웹 접근성 측면에서 큰 이점이 있으며 동시에 웹페이지에 담긴 정보를 브라우저가 분석할 수 있게 해줍니다.

그리고 검색 엔진 최적화(Search Engine Optimization)에 유리합니다. 검색 엔진은 웹페이지의 여러 정보들을 수집해서 검색 키워드에 알맞게 노출시킵니다. 시맨틱 웹을 작성하면 이런 검색 엔진에 노출되기 좋아 사이트 이용자들을 끌어오기 좋습니다.

마지막으로, 유지 보수가 쉬워집니다. 단순한 div와 span의 나열로 작성된 HTML은 시맨틱한 문서에 비해 가독성이 떨어집니다. 태그에 적절한 id, class명을 부여하는 것도 일일 뿐더러, 부여하더라도 구조와 의미를 한 눈에 파악하기 어려운 경우도 흔합니다.

시맨틱 태그를 사용하면 태그명 그 자체가 용도를 나타내기에, 유지보수 측면에서 비교적 유리하다고 할 수 있습니다.

의미론적인 HTML 작성 방법 중, 태그 명 그 자체가 영역의 의미를 나타내는 태그들이 있습니다. 이를 시맨틱 태그라고 합니다.

시맨틱 태그를 이용한 레이아웃 예시:

Semantic_HTML_Layout_Sample.png

사용가능한 백 여개 정도의 요소(elements)들이 있습니다.

article 요소: article 요소는 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담습니다.; 블로그 글, 포럼 글, 뉴스 기사 등을 article로 묶을 수 있습니다.

:

<article>
   사람
    <section>뚱뚱한 사람</section>
    <section>마른 사람</section>
</article>

:

<section id="content">
    <article>블로그 글1</article>
    <article>블로그 글2</article>
    <article>블로그 글3</article>
</section>