TIL22.Semantic Web과 Semantic Tag

문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야한다. 적절한 도구 sematic tag를 골라 사용해보자.

Semantic Web

'의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

Sementic tag

각각의 정보들의 의미를 명확하게 표현해주는 태그이다.

article 문서내에서 독립적인 컨텐츠를 나타난다.(본문)
aside 페이지 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용이다.(광고)
details 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타낸다.
figure 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도.(404
That page doesn't exist. 공포의 404)
footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의한다.
header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의한다.
main 문서에서 가장 중심이 되는 컨텐츠를 정의한다.
mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의한다.
nav 문서의 네비게이션 항목을 정의한다.
section 문서나 응용프로그램의 일반적인 섹션을 표현한다.어떤 특정한 정의하기 애매한 것들을 주로 섹션으로 묶는다.
time 시간을 정의한다.

img tag vs background-image

이미지 컨텐츠를 표현하는 방법에는 img태그를 활용하는 방법과 css background-image를 사용하는 방법이 있다. 이미지를 표현한다는 공통점이 있지만, 존재용도에는 차이점이 있다.
이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img태그를 쓰고, 순수하게 디자인적 이유로의 사용은 background-image를 사용하는 것을 권장한다.
만약에 예상치않은 에러가생겨서 사진이 제대로 나타나지 않는다해도, img태그는 사용시 기본적으로 텍스트 노출(alt)이 된다. 반면, background-image 에러가 난다면 alt같은 설명을 할 수 없다.

body {
 background-image: url("item.jpg");
 }

<img src={imageUrl} alt="제품사진" />