개발자라면 Sementic tags를 사용하라.
근데 Sementic tags 왜 써야 하는데?
div, span 이런 건 non-sementic tag고,
sementic tag에는 header, main, section, aside, footer 등이 있고...
아니 근데, 있는 건 알겠는데, sementic tag 그거 왜 있는데?
그냥 div만 써도 웹에서 보이는 건 똑같은데?
semantic tags 안의 정보와 div태그 안의 정보는, 같은 정보라도 의미를 달리한다.
여러 정보를 담고 있는 사이트에서도 가장 중요한 정보가 있는 반면, 알아도 그만 몰라도 그만인 정보도 있기 마련이다. 나는 꼭 필요한 정보를 알고 싶은데, 멍청한 컴퓨터가 자꾸 쓸데없는 정보만 보여준다면 얼마나 짜증이 나겠는가.
하지만 정보가 각각의 의미를 담고 있는 아주 유용한 '라벨'을 달고 있다면, 보다 쉽게 정보를 분류할 수 있을 것이다.
sementic tags는 마치 상품의 라벨처럼, 개발자가 정보를 sementic tag에 넣는 것만으로도 이 정보가 어떠한 의미를 가지고 있는지를 컴퓨터에게 아주 직관적으로 알려줄 수 있다. 우리의 컴퓨터가 마치 인공지능처럼 동작하도록!
sementic tags가 sementic web을 만났을 때
웹은 발전에 발전을 거듭해, 현대에 와서는 인간이 해야만 했던 일을 대신 해 줄 정도로 똑똑해졌다.
현대의 sementic web은 웹 상의 수많은 정보들을 컴퓨터가 이해하고 처리하기 쉬운 형태로 만들어주어, 인간이 복잡하게 던져주는 자연어 정보들을 1과 0밖에 모르는 바보같은 우리의 컴퓨터도 이해할수 있도록 해 준다.
또한 정보들의 관계를 파악하여 보다 의미있는, 고객이 정말 원하는 정보들을 찾아서 보여주니 아주 똑똑한 웹이 아닐 수 없다.
이 똑똑한 웹에게, sementic tag를 통해 정보의 의미를 더욱 명확하게 알려준다면, sementic web은 더욱 빠르고 쉽게 정보를 처리할 것이고, 사용자가 원하는 정보를 얻어내기까지 많은 시간을 단축할 수 있을 것이다.
이렇게 정보에 sementic tag라는 라벨만 붙여주면 찰떡같이 알아듣는 똑똑한 웹이 있는데, 개발자라면 sementic web을 사용하지 않을 이유가 있을까?
그렇다면 아래의 질문에 답해보자.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
img 태그라면 누가 봐도 이미지 정보를 담고 있을 것 같다.
하지만 div 태그라면?
태그만 봐서는 무슨 정보를 담고 있는지 알 수 없다.
코드를 살펴보거나 웹 상에서 확인해보아야만 한다.
즉, 우리가 태그를 읽는 즉시 이미지 정보라는 것을 확인할 수가 없다.
img 태그 안의 정보는 div보다 빠르게 '이미지 정보'라는 의미를 담은 정보로 분류되어, 이미지 정보를 원하는 고객에게 높은 우선순위로 노출될 것이다.
따라서 우리의 정보가 이미지 자체로써 중요하고, 이미지 정보로써의 의미를 가지길 원한다면 당연히 img태그를 활용하는 것이 효율적이다.
반면 이미지 자체가 중요하지 않거나, 이미지를 디자인적인 요소로 활용할 경우라면, 시도때도 없이 불필요한 정보로 고객에게 노출되지 않도록 non-sementic tag인 div태그를 사용해야 한다.
