[TIL] Semantic Web과 Semantic Tag

Semantic Web

시멘틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로,기계가 이해할 수 있는 형태로 제작된 웹을 의미한다. -wikipdia

인터넷이 발전함에 따라 방대한 양의 웹 문서가 생산되어, 정보는 매우 다양해 졌지만 원하는 정보를 찾기 어려워졌다. 그리하여 나온것이 Semantic Web이다. 정보를 컴퓨터가 이해할 수 있는 형태로 표현하고 이를 컴퓨터가 처리하는 기술이다.

Semantic Tag

기존의 HTML에서 웹 문서를 작성할떄 div, span 태그를 이용하여 의미를 명확하게 내지 못하고 애매 모호한 표현과 일관되지 않는 특징을 가지고 있었고, 단순히 컨테이너 역할만 수핼할 수 있었다. 이후 등장한 HTML5에서 부터는 시맨틱 요소를 정의해 구조적인 부분을 정의할 수있는 태그를 사용할 수 있게 되었다.

Sementic 구조 Tag

<article>,<aside>,<details>,<figcaption>,<figure>,<footer>,<header>,<main>,<mark>,<nav>,<section><summary>,<time>

=================================================

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

<img src="Error.src" onerror="this.style.display='none'"/>

위에 코드를 보면 img 태그에 src="" 와 사용하여 대체할 이미지를 불러올수있다.
이렇듯, img 태그를 사용할시에 에러가 나도 화면상 노출이된다.

반대로 background-image에 넣는 이미지가 에러가나면 arl와 같은 설명을 할수 없다.
결과적으로 어떠한 텍스트도 노출되지 않는다.

이미지가 사용자에게 컨텐츠 이해에 도움을 주면 img태그를 사용하고, 아니면 background-image를 쓰면 될것같다.