시맨틱 마크업

시맨틱 마크업이란 무엇인가 ?

 

먼저 시맨틱(semantic) 이라는 단어는 '의미론의' 혹은 '의미의' 라는 뜻을 가진 형용사다. 

 

여러 구글링 결과 POSH(Plain Old Semantic HTML)라고도 불리운다고 하는데,

직역하면 평범하고 오래된 의미론적인 HTML 이라는 말이다.

자바 배울때 많이 들어본 POJO(Plain Old Java Object)와 비슷한 개념인듯 ????

 

결국 시멘틱 마크업이란, 의미에 알맞게 HTML요소를 올바르게 사용하는 것을 말한다.

 

프로그래밍 언어는 사람과 사람간의 약속임과 동시에 사람과 기계와의 약속이기도 하다.

프로그래밍에서 이러한 약속을 잘 지키는 것에 대한 중요성이 대두되면서 나온 개념으로 보인다.

 

시맨틱 마크업을 하기 위해서는 ?

 

의미에 맞는 태그와 요소를 사용하고, 문서를 표현할 때 구조화를 잘 해주는 것이 중요하다.

정해진 약속대로 코드를 작성하게 되면, 컴퓨터와 사람 모두 이해하기 쉬운 코드가 되며, 유지보수도 용이해진다는 장점이 있다.

 

<div id="heading" style="font-size: 200%"> 시맨틱 마크업에 대하여 </div>

위의 요소는 다분히 제목같아 보이지만 의미와 용도면에서 제목으로서의 기능은 없다.

이러한 코딩은 검색엔진의 최적화와 개발면에서 부정적인 효과를 가지고 있다. 

 

 - 최적화 : 검색엔진을 최적화하는데는 headings 요소 내부에 키워드가 매우 중요하다. 

 - 개발 : 적절한 시맨틱 마크업을 사용하지 않을 시, 스크립트와 css로 스타일을 설정하기 까다롭고, 협업시나 유지보수 면에서도 좋지 않다.

 

 

또한 아래 요소들은 같은 모양으로 표현되지만 의미는 같지 않다.

<b>굵은</b> / <string> 중요한 </string>
<i>이탤릭</i> / <em> 강조하는 </em>
<u>밑줄</u> / <ins> 새롭게 추가된 </ins>
<s>중간선이 있는</s> / <del>삭제된</del>

의미에 맞는 요소들을 선택하여 코딩해야 한다.

시맨틱 마크업은 가능한 가벼워야 하고, 중첩되는 div요소들과 같은 스파게티 코드는 지양되어야 한다.