Semantic Web?

Semantic Web은 의미론적인 웹 이라는 뜻으로, 웹 상의 각종 정보와 자원들을 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 기계(컴퓨터)가 처리하도록 하는 기술이다. 결과적으로 컴퓨터가 인간이 정보를 처리하는 방식과 유사하게 의미있는 해석을 할 수 있도록 한다.

• 온톨로지 : 사람들이 세상에 대하여 보고 듣고 느끼고 생각하는 것에 대하여 토론을 통해 합의를 이룬 바를 개념적이고 컴퓨터에서 다룰 수 있는 형태로 표현한 모델

Semantic Tag?

Semantic Tag는 의미론적인 태그로, 브라우저와 개발자 둘 다에게 분명한 의미를 전달한다.

non-semantic :<div>,<span> (해당 콘텐츠에 대해서 아무의미를 갖지 않는 태그, 순수 컨테이너 역할)
semantic : <form>, <table> 등 (해당 콘텐츠에 대해 분명하게 묘사하고있는 태그)

HTML5 : Semantic Tag

과거 html4에서는 non-semantic tag에 단순히 id나 class를 부여해 임의로 구역을 나누는 방식을 사용했다면, html5에서는 semantic tag를 사용하여 해당 콘텐츠가 어떤 내용을 담고있는지 브라우저와 컴퓨터 둘 다 이해할 수 있도록 한다.

예를들어, html5의 <section>요소는 다음과 같이 사용할 수 있다.

• Chapters
• Introduction
• News items
• Contact information

여기를 클릭하면 많은 레퍼런스를 확인할 수 있다.

왜 Semantic을 사용해야 하나?

1. Semantic Tag는 의미를 부여한다.

의미요소(Semantic Element)는 HTML로 만든 문서에 추가적으로 의미를 부여해 사용자가 빠르게 파악할 수 있다.

2. 검색엔진 최적화

검색엔진은 결과를 보여줄때 페이지의 html태그를 분석하여 사용한다. 기계(컴퓨터)가 페이지의 내용을 빠르게 파악해 유의미한 결과를 도출해 낼 수 있다.

img vs background-image

1. <img> tag를 사용해야하는 경우

-> <img>태그를 alt속성과 함께 사용할 경우 해당 이미지는 로드에 실패하더라도 alt속성에 대입된 텍스트를 통해 대략적인 의미 파악이 가능하다.

• background 애니메이션 성능을 크게 향상시킬 수 있다.
• 여러 이미지를 오버레이 하는 경우
• 웹 페이지 인쇄시 기본으로 이미지를 포함하고 싶은 경우

2. <div> 의 background-image속성을 사용하는 경우

-> 해당 이미지로드에 실패할 경우 아무것도 노출되지 않는다.

• 이미지가 해당 콘텐츠와 아무런 상관이 없는경우 (단순한 디자인적 요소인 경우)
• 웹 페이지 인쇄시 이미지를 포함하고싶지 않은 경우