Semantics

언어학 및 논리학의 기본 분야 중의 하나로 말이나 글의 의미 또는 뜻을 연구하는 분야.
단어의 의미들 사이의 관계에만 적용되는 것이 아니라 구 (언어), 절 (언어), 문장, 텍스트의 의미를 논하는 데 적용됨

프로그래밍 언어를 이루는 요소들 (e.g. Tags in HTML)에도 동일하게 적용할수 있다.

Bad-semantics

HTML을 구성하는 tag의 비효율적인 사용은 컨텐츠의 생산, 소비 모두에 악영향을 끼침.
비효율적인 tag 구성은 컨텐츠 생산과정에서 각 요소들의 중요도, 상관관계를 올바르게 파악하기 어렵게한다.
이는 소비자의 컨텐츠 활용성을 떨어뜨리며 심하게는 컨텐츠의 접근 가능성을 떨어뜨릴 수 있다.

Good-semantics

효율적인 tag의 사용(e.g. size, color, position)은 hierarchy를 구성하여 생산자가 전달하고자 하는 바를 보다 명확히 할 수 있다.
이는 Semantic Web의 바탕이 된다.

Accessibility

적절한 tag의 사용은 SEO를 향상시켜 소비자들이 해당 컨텐츠에 접근 할 수 있는 가능성을 높인다.
또 컨텐츠 자체 가독성을 높여 효용성을 증대시키는 효과도 가진다.

img tag와 background-image(bgi)

img tag는 웹페이지에서 text와 함께 배치하기가 bgi에 비해 상대적으로 용이하다. 이는 컨텐츠를 보다 유기적으로 구성할 수 있어 가독성을 높인다.
또한 tag가 가진 attribute를 컨텐츠 접근성을 높일 수 있다.(e.g. alt-이미지 미표시 대비, 음성출력가능, SEO향상)

bgi는 이미지 자체의 의미보다 디자인적 요소로서 가치가 있다.
bgi위에 올라가는 컨텐츠르 더 돋보이게 할 수 있으며 이미지를 장식적 요소로 사용하기 용이하다.(e.g. cover, repeat)
반응형 웹에서 이미지 사이즈에 대해 비교적 자유로운 편이기도하다.
bgi는 다량의 이미지 사용시 로딩시간을 줄이기 위해 sprites를 활용 할 수 있으며, 페이지 프린트 시에 출력 여부를 설정 할 수 있다.