semantic
프로그래밍에서 semantic은 코드 조각을 의미합니다.
Semantic Web
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.
위와 같은 사전적 정의를 가지고 있습니다. html에서 예를 들면, 같은 li 태그를 사용할 때, 어떤 li 태그는 nav의 역할을 하며 다른 태그는 단순 나열을 의미합니다. 이 때 사용하는 semantic tag가 nav 태그입니다.
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ol>
<nav>
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ol>
</nav>
ol 태그를 이용한 코드를 작성했을 때, nav 태그는 어떠한 기능적 역할을 하지 않습니다. 하지만, 상단의 ol 태그는 단순 나열을 의미하고, 하단의 태그는 navigation 역할을 하는 코드라는 정보를 컴퓨터가 처리할 수 있는 형태로 표현한 것 입니다. 코드의 기능에 따라 다양한 Semantic Tag를 사용할 수 있고, 같은 기능을 Section별로 나누어 컴퓨터뿐만 아니라 코드의 독해력 또한 높일 수 있습니다.
tag and attribute
태그와 속성은 어떠한 차이가 있을까?
배경에 그림을 사용하기 위해서는 두 가지 방법이 있습니다. img 태그와 background-image 속성입니다. 두 방식에는 코드에 차이가 있을 뿐, 비슷한 기능을 가지고 있습니다. 하지만 위에서 언급한 Semantic Web처럼, img 태그에도 역할에 따른 section을 부여할 수 있습니다.
어떤 상황에서 사용하면 좋을까?
img 태그는 역할에 따른 부가 설명이 필요한 경우에 사용하면 적절합니다. error 발생으로 인해 이미지가 표시되지 않는 경우 Semantic Tag를 보면 코드의 흐름을 비교적 적게 보고 기능을 확인할 수 있습니다. background-image의 경우 단순 배경으로 사용될 때 사용하면 적절할 것 같습니다.
Ref.
