Semantic Web, Semantic Tags
먼저 개념을 알아보자-
> 시맨틱 웹
웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페에지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자하는 발상
오잉? 무슨말이지? 싶을텐데, 아래의 두 텍스트를 비교해보자.
Hello
Hello
두개의 텍스트는 브라우저에서 봤을 때, 동일한 외형을 갖는다.
하지만, 코드를 보면..?
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>오잉! 완전 다르냄!
첫번째 Hello는 폰트크기와 볼드체를 지정한 텍스트고,
두번째 Hello는 제목 중 가장 상위레벨임을 알 수 있다.
이게 왜 중요하냐면,
검색엔진이 여기저기 쏘다니면서 정보를 수집할 때 두가지의 Hello 중 하나는 의미없는 Hello로, 나머지 하나는 웹문서의 중요한 제목인 Hello로 인식하게 된다.
이 때 사용한 h1태그가 바로바로바로 시맨틱 태그인것!
잡설이지만.. 잼민이때 뭣모르고 장미가족의 태그교실에서 대충 태그 뽀려와서 쓸때가 생각났다거 한다...
시맨틱 태그고 뭐고 싹다 무시하고, 외형만 보고 태그 뽀려오던 시절이 있었찌...* 지금와서 생각해보니 아주그냥 잡탕 그잡채
> 시맨틱 태그
브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 하는 태그
이해가 안된다구여..?!
그럼 예를 하나 더 들어봅시다.
- img 태그를 사용
- div 태그에 background-image 속성을 추가
이것도 아까의 Hello마냥 결과물은 똑같을것이다.
< img 태그를 사용한 경우 >
- 누군가 검색해서 내 사진을 컨텐츠로 찾길 원할 때
- 의미가 있는 웹페이지를 제작할 때
< div 태그에 background-image 속성을 추가한 경우 >
- 해당 사진이 컨텐츠로 노출되기 싫을 때
- 컨텐츠의 의미를 명확하게 설명하지 않아도 될 때
- 검색엔진과 개발자의 가독성을 해치고 싶을 때
이런 차이점이 있다는점!
시맨틱 태그는 table, img, header...등등이 있는데,
자세한 내용은 아래 참고 페이지를 참고합시다 ^.~
