🤷‍♂️Semantic?

semantic tag, semantic web에 공통으로 사용된 단어인 semantic은
의미론적 이라는 뜻을 가지고 있다.

이 뜻으로 미루어 보아 semantic tag는 의미론적인 태그 semantic web은 의미론적인 웹으로 1차원적인 정의를 내릴 수 있다.
쬐끔 더 자세히 살펴보자

✔Semantic Tag

HTML에서 사용되는 Tag는 Semantic Tag와 Non-Semantic Tag로 나뉘어진다.

직역하자면 의미있는 태그와 의미 없는 태그 정도로 나눌 수 있다.

semantic tag

h1 태그처럼 제목으로 사용되거나 구역의 머리글을 의미하는 header등 그 태그가 가진 의미를 개발자 또는 브라우저가 바로 해석할 수 있는 태그들을 semantic tag 즉 의미있는 태그라고 한다.

non-semantic tag

div 또는 span처럼 필요해서 생겨난 태그이나 여러 용도로 사용되며, 태그만 봤을 때는 어떤 의미를 가지고 있는지 알 수 없는 태그들을 non-semantic tag라고 한다.

❓정확히 무슨 차이가 있을까?

검색엔진 최적화

semantic tag는 브라우저가 해당 tag가 가진 의미와 데이터를 해석하여 검색엔진에 유의미한 결과로 노출 시켜줄 수 있다.

반면에 의미없는 non-semantic tag들이 주로 이루어져있다면 브라우저는 그 태그가 가진 의미를 해석할 수 없으며 자연스럽게 검색엔진에 유의미한 결과를 노출 시킬 수 없게 된다.

가독성 문제

semantic tag는 브라우저 뿐만이 아니라 개발자도 그 의미를 명확히 이해할 수 있다고 했다.

만약 내 html 문서가 non-semantic tag들로 도배가 되어있다면 협업하는 동료개발자 입장에서 문서가 가진 명확한 의미를 이해하기가 어려울 가능성이 높다.

❓그럼 Semantic web은 뭐지?

semantic web은 컴퓨터가 수많은 정보 중 어떤 정보를 추려서 사용자에게 보여줘야할 지 판단하지 못하자 탄생한 방법이다.

즉 개발자가 의미있는 tag인 semantic tag를 적절히 사용하여 컴퓨터가 쉽게 해석하고 사용자에게 노출 시켜줄 수 있도록 구성된 web을 semantic web이라고 부를 수 있다.

img tag vs background img 속성

이미지 삽입하는데는 img 태그 방법과 background img 속성을 사용하는 방법이 있는데

이 사례는 semantic tag와 non-semantic tag의 사용 사례라고 볼 수 있다.

img 태그는 alt속성을 이용하여 이미지에 meta 정보를 입력하여 검색엔진에 노출될 수 있게 해주며, backgroud img의 경우 div로 영역을 지정한 후 css를 사용해 이미지를 꾸며주기 때문에 검색엔진에 노출되지 않는다.

기획의도에 따라 어떤 이미지와 정보들은 외부 사용자에게 자주 노출될 필요가 있을 수 있고 또 의도적으로 노출을 자제해야할 수 있다.

무분별한 non-semantic tag의 사용은 검색엔진 및 가독성 부분에 비효율 성을 가져다 줄 수 있지만 사용 자체를 무조건 비효율 적으로 볼 순 없다