HTML/CSS - Semantic Web & Semantic Tag

🤔 Semantic 의미론적인..?

웹이 발전하면서 정보의 가치는 점점 중요해지고 사람에게도 의미가 있고 기계들에게도 활용하기 좋은 형태의 정보를 전달하려고하는 개발자들의 노력이 있었다.

이러한 노력의 트랜드중 하나가 Semantic Web이다.

🤔 Semantic Web이란?

Semantic Web(의미론적인 웹)은 사람들이 주고 받는 의미나 정보를 컴퓨터가 처리할 수 있는 '온톨로지' 형태로 표현하고 컴퓨터가 처리할 수 있게 하는 기술 - wiki

🤘 온톨로지 란 사람들이 세상을 느끼고 생각하는것을 컴퓨터가 다룰 수있는 데이터 형태로 표현한 모델.

🤔 Semantic tag란 ?

html5 가 등장하면서 특별한 기능은 없지만 어떤 정보들이 표시되는지 의미를 명확하게 담은 태그들이 등장하기 시작한다.

예를 들어 header를 살펴보자면 아무 기능이 없다. 크기를 조절하지도 않고 레이아웃을 바꾸지도 않는다. 단지 이 웹페이지 전체에서 중요한 요약 정보들은 여기에 위치한다라는 표현을 위해 존재한다.

실제 웹페이지에 표시에는 어떠한 변화도 없다.

🕹 Semantic tag 종류

논외로 같은 맥략에서 비슷한 수위(level)거나 연관된 의미가 있다면 그것을 ul 태그로 묶어준다면 의미론적으로 좋은 코딩을 할 수 있다.

⚡️ img 태그와 background-image

의미론적 관점에서...🧐
img태그를 사용해서 이미지를 삽입하면 해당 태그가 감싸고 있는 컨탠츠가 이미지 정보라는 것을 의미론적으로 표현할 수 있다. 이러한 데이터는 이미지 정보가 필요한 사용자의 접근성을 높히고 크롤링을 통한 정보 가공에 용이하다.

🕹 네트워크 연결장애시 alt 속성을 통한 이미지의미전달, 시각장애인을 위한 screen reader, 크롤링을 통한 데이터 수집

만약 background-image 속성을 통해 이미지를 삽입한다면 중요한 정보를 포함하지 않고 이미지의 의미를 전달할 필요없는 배경화면이나 반복되는 아이콘 등이 적합하다.