Semantic web이란?

semantic한 웹사이트는 단순 div로만 나누어진 웹사이트가 아닌, Header, navigation, article, figure, footer 등 구조적으로 나누어진 HTML을 말한다.
div 안에 요소를 넣는 방법으로도 똑같은 결과물을 만들어낼 수 있지만, semantic한 태그를 사용해 나누는 것이 여러 장점이 있다.

• 접근성을 높여준다.
• 역할을 바로 알 수 없는 div를 사용하는 것보다 문서에 직관적인 의미를 부여하여 유지보수가 더 쉬워진다.
• 검색 엔진 최적화(SEO) : 내 웹사이트가 검색 엔진에 걸려 더 많이 노출될 수 있게 해준다.

Semantic tags

나는 그동안 html을 만들 때 div를 엄청나게 많이! 사용해서 웹사이트를 만드는 편이었는데, 사전 스터디 기간에 공부하던 중에 어떤 블로그에서 div를 남발하며 사용하는 것이 좋지 않다는 글을 본 적이 있다. 그래서 사전 스터디 조원들과 결과를 공유하며 '저는 div로만 다 만들었는데, div로만 만드는 것이 좋지 않다는 글을 봤어요.' 라고 말하니 한 조원분이 semantic html을 찾아보라고 말씀해주셨던 기억이 있다.
아무튼 이 때의 기억 덕분에 div는 non-semantic tag라는 것을 확실히 각인할 수 있게 되었다.

semantic tags의 종류

• header
• section
• article
• aside
• footer
• nav
• h1 ~ h6
• p

등과 같이 태그 이름 자체에서 어떤 의미를 갖고 어떤 역할을 수행하는지 알 수 있는 태그들이 semantic tag이다.

non-semantic tags의 종류

• div
• span

div나 span은 태그 이름만을 갖고는 이 태그가 어떤 의미인지 전혀 알 수 없다. 따라서, non-semantic한 태그이다.

즉 이런 semantic tags들을 사용해 유지보수가 용이하게 만들며 컴퓨터가 파악하기 쉽게 만들어 접근성을 높여주는 html을 semantic web이라고 한다.

img 태그와 background-image

우리는 웹사이트에 이미지를 나타내기 위해 img 태그를 사용하거나 div에 background-image 속성을 넣어 사용한다. 우리는 위의 내용을 통해 img 태그는 semantic한 태그고, div에 background-image를 넣는 것은 덜 직관적이라는 것을 추측할 수 있다. 그렇다면 무조건 img 태그를 사용하는 것이 좋은 방법일까?
정답은 '아니다'이다. 각각 경우 어떤 경우에 보다 효율적으로 쓰이는지 알아보자.

img 태그

img 태그는 div 안에 background-image 속성을 사용하는 것보다 semantic해 접근성을 높여준다.
또한, img 태그를 사용해 이미지를 나타내는 경우 이미지가 제대로 나타나지 않을 경우에 대비해 우리는 alt를 사용해 그 이미지에 대한 설명을 추가할 수 있다.

따라서, 이미지의 접근성을 높여주고 싶거나 그 이미지가 컨텐츠의 일부라서 이미지가 제대로 로드되지 않을 경우 사용자의 이해에 방해가 될 수 있다면 img 태그를 사용하는 것이 좋다.

background-image

background-image의 경우, 이미지가 제대로 나타나지 않아도 아무런 표시가 없으며, background-image로 넣은 이미지는 프린트를 했을 때 나타나지 않는다.
또한, background-size: cover;처럼 원하는 영역에 백그라운드로써 이미지를 꽉 채워 넣고 싶은 경우 img 태그보다 더 쉽게 제어할 수 있다.

그렇기 때문에 img 태그와는 반대로, 단순히 디자인적인 요소로 넣은 경우처럼 이미지가 컨텐츠와 무관할 때 사용하는 것이 좋다.