TIL 01. Semantic Web VS Semantic Tag

hmm...·2021년 5월 11일

Semantic Web VS Semantic Tag

기계가 사람을 대신하여 읽고 처리할수 있는 웹을 말한다

인터넷의 발전으로 방대한 양의 데이터가 생겨났는데, 너무 방대한 나머지 컴퓨터가 정보를 해석하고 가공할수 없는 상황이 와서 사람이 개입을 하게 되었는데 이는 비효율적이다. 따라서 기계가 스스로 처리할수 있는 웹이 필요하고, Semantic Web이 도움이 된다.

"자신의 의미를 개발자와 브라우저 모두에게 설명한다" -w3schools

필요 이상의 Tag 사용은 복잡하고 사람이 직접 개입해야하는 결과를 초래하므로 무언가 통일되고 공통된 Tag만을 사용해서 기계가 스스로 처리하게 해줘야 할 필요가 있었다.

Non-Semantic Tag에는 div 와 span 등이 있는데, 이들은 아무런 의미를 설명해 주지 않는다. HTML5 이전에 사용된 기술이다.

Semantic Tag에는 form, table, article, nav, footer 등이 있는데, 이들은 이름 자체만으로 본인들의 의미와 역활을 설명해주므로 HTML5의 핵심 기술들이라고 할 수 있다.

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

img 태그를 사용하게 되면, html 파일 자체에서 작업을 하게 된다.
alt (alternative)와 src (source) 속성을 사용하게 된다.
alt 속성에선 이미지가 로드 실패하였을때는 alt속성에 있는 텍스트가 표시된다.
src 속성에선 웹 페이지 URL 정보가 나와있다.
검색 엔진에서 이미지 검색을 할때 alt와 src정보를 바탕으로 검색이 되기 때문에 사이트를 검색결과에 나타나게 하는데 도움이 된다! 사이트 운영자나 소비자 모두에게 윈윈이 된다.
따라서 중요한 핵심 이미지 등을 보여줄때 img 태그를 사용한다

이 경우 CSS 파일에서 작업을 하게 된다
img 태그와는 반대로 alt와 src속성을 사용하지 않게 되므로 검색 엔진에서 해당 속성들은 검색결과에 별 영향이 없다.
이미지가 로드 실패를 할 경우 alt 텍스트가 없으므로 사용자가 알 방법이 없다
주로 비핵심 이미지, 즉 해당 사이트의 디자인 요소라던가 아이콘등 보조적인 이미지는 CSS에 background-image 속성을 추가하게 된다.

위코드 21기