Semantic!

Semantic은 직역하면 위와 같이 '의미론적인' 이라는 뜻입니다.

즉 Semantic Web/Tag는 무언가 의미를 가지고 있는 웹, 또는 태그라고 설명할 수 있습니다.

Semantic Web이란?

빅데이터... 인공지능.... 핀테크.... 등 화두에 올라와있는 키워드의 가운데에는

'데이터'라는 주제가 있습니다.

여기서 정의하는 데이터는 그저 어떠한 자료에 그치지 않고

해석하거나, 또는 통계적인 부분에 있어서 의미를 가지는 자료를 의미합니다.

그것과 같이 Semantic Web은 사람이 잘 이해할 수 있는 구조이며, 동시에 기계 또한 잘 이해할 수 있도록 돕습니다.

Semantic Tag

header
img
nav
article
section
footer ....

img는 딱 보자마자 그림이 출력될 것을 알 수 있습니다.
nav는 메뉴바 등등, 네비게이션 바일 것을 추측할 수 있고
footer 또한 아랫글, 예를 들면 저작권 표시 등이 출력될 부분임을 알 수 있습니다.

그렇듯 Semantic Tag는 개발자가 의도한 것을 의미론적으로 명확히 가리키고 있습니다.

물론, 사람 뿐만 아니라 기계도 이 태그들이 어떠한 의미를 가지는지 알 수 있습니다.

그래서 Semantic의 장점이 뭔데?

non-semantic code

<style>
	#imgDiv{
    		background:url('blah~.com')
    	}
</style>
<div id='imgDiv'>
</div>
<div id='footerDiv'>
</div>

semantic code

<img src='url(blah~.com)' alt='~'/>
<footer>
	blahblah~
</footer>

간단한 두 가지 코드를 작성해보았습니다.

상위에 있는 코드는 id를 통해 어떤 의미인지 파악할 수 있지만,
작명하는 기준에 따라 이해에 어려움이 발생할 수 있습니다.

style 코드를 통해 imgDiv에 이미지가 있다는 것을 알 수 있으나
css 파일이 분리되어있는 경우, 그것을 바로 알아볼 수 없습니다.

하위에 있는 코드는 img, footer 라는 키워드를 통해 어떤 css가 적용되어있는지 알 수는 없더라도 빠른 이해가 가능합니다.

정리하면, non-semantic은 content에 대한 아무 설명도 없지만

semantic은 content에 대한 설명을 내포하고 있습니다.

마무리

가장 큰 차이점을 예시로 정리해보면

img 태그는 src와 alt 속성을 통해 웹에 정보를 노출시키지만

background-image가 적용된 div 태그는 그렇지 않습니다.

만약 단순한 배경으로, 또는 일부분만 따서 decoration 용도로만 쓴다면
non-semantic을 작성해도 되겠지만

쇼핑몰 등, 빈번히 노출되어야하는 서비스를 가진 페이지라면

src, alt 속성을 웹에 노출시키는 게 필요하지 않을까? 라고 정리하고 싶습니다.