Semantic Web & Tags

의미론적인 웹, 태그들
화면에 단순하게 전시하는 문자가 아닌 의미까지 부여를 해서 웹 접근성 및 검색엔진에 영향을 줄 수 있다.

웹 접근성

누구나 웹 페이지에 접근하기 쉽게 하는 것이다.
겉으로는 똑같은 웹 페이지가 있고 다른 하나는 웹 접근성을 쉽게 만들었다고 하자 일반인들은 2개의 웹 페이지가 똑같다고 생각할 것이다.
하지만 시각적으로 볼 수 없는 시각장애인은 시각이 아닌 스크린리더나 소리로 정보를 듣기 때문에 웹 접근성을 높게 만든 웹페이지에서 더 많은 정보를 얻을 수 있다. 그렇기 때문에 누구나 평등하게 차별 없이 정보를 얻을 수 있도록 웹 접근성을 고려해야 한다.

검색엔진 최적화 SEO

정보들을 그냥 나열했을 때 검색엔진이 어느 부분이 중요한지 파악하지 어렵기 때문에
의미를 구분할 수 있는 Semantic Tag를 사용해야 한다.
Semantic Tag를 사용해서 의미적으로 구분하여 웹 페이지를 구성하게 되면 검색엔진이 콘텐츠를 보다 명확하게 분석하여 사용자가 어떤 키워드를 검색했을 경우 검색 결과의 상위에 노출될 수 있게 해준다. 그렇기 때문에 Semantic Tag로 의미를 구분하여 사용자에게 정확한 정보를 주어야 한다.

Semantic Tags

header : 머리말, 제목에 사용하는 태그
nav : 메뉴바를 묶거나 포함시킬때 사용하는 태그
section : 콘텐츠, 단락 분리 시 사용하는 태그
article : 독립적으로 사용하거나 재사용 시 사용하는 태그
aside : 부가적인 내용을 메인 근처에 배치할때 사용하는 태그
footer : 저작권,작성자 정보등 작성할떄 사용하는 태그

img tag vs background img 차이점

웹페이지에 이미지를 넣는 방법은 두 가지가 있는데 <img>태그를 사용해서 넣을 수도 있고 background img태그를 사용해서 넣을 수도 있다.
결과적으로는 웹페이지에 똑같은 이미지를 전시할 수 있다. 하지만 서로 의미는 다르다.
<img>태그를 사용할 경우 alt 속성을 사용하여 이미지를 볼 수 없는 시각장애인에게도 정보를 전달해 줄 수 있고 이미지가 에러가 나서 전시가 안될 경우 텍스트로 부가 설명을 할 수 있다.
그러나 background img태그를 사용 할 경우 아무런 의미없는 <div>태그를 사용하기 때문에 검색엔진에 노출되기 힘들고 텍스트로 이미지를 대체 하기도 어렵다. 그렇다고 무분별하게 사용할 경우 웹페이지의 주제와 맞기 않게 노출되기 때문에 적절히 사용해야 할 것이다.