시맨틱 웹 (Semantic Web)
시맨틱 태그 (Semantic Tag)
시맨틱 웹 (Semantic Web)
의미
시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 한다.
* 메타데이터의 목적은 정보검색의 처리과정을 줄여주고, 사용자가 원하지 않는 데이터를 미리 걸러주며, 관련성이 많은 정보의 발견 가능성은 높여줌으로써 정보검색을 향상 시키기 위한 것이다.
시맨틱 웹의 사용
많은 사용자들이 필요한 정보를 얻기 위해 Goolgle 이나 Naver과 같은 검색엔진을 이용한다. 즉, 웹사이트들은 이러한 검색엔진에 노출되어야만 외부로부터의 유입을 일으킬 수 있다. 검색엔진 로봇은 매일 전세계의 웹사이트 정보를 수집하고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어 둔다. 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보, 웹사이트의 HTML 코드에서의 시맨틱 요소를 해석하게 된다.
HTML 요소
- non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
- semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다
시맨틱 태그 (Semantic tag)
시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있으며 태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다.
시맨틱 태그의 종류
| 태그 | 내용 |
| aside | 광고와 같이 페이지의 내용과는 관계가 적은 내용들 |
| details | 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 |
| figure | 삽화나 다이어그램과 같은 부가적인 요소를 정의 |
| footer | 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
| header | 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
| main | 문서에서 가장 중심이 되는 컨텐츠를 정의 |
| mark | 참조나 하이라이트 표시를 필요로 하는 문자를 정의 |
| nav | 문서의 네비게이션 항목을 정의 |
| section | 문서의 구획들을 정의 |
| time | 시간을 정의 |
img태그 vs background이미지
HTML 태그인 <img>를 사용하는 것과 <div> 태그에 CSS 속성인 background-image 를 추가하는 것은 웹 브라우저에서는 같은 모습을 보여준다.
내가 의미있는 이미지의 정보를 보여주고자 하거나 검색엔진에서 이미지가 표출되기를 원한다면 <img> 태그를 사용해야하며, 단순히 배경에 이미지를 보여주고자 하는 의미라면 CSS속성을 사용하면 된다.
'Web > HTML&CSS' 카테고리의 다른 글
| css | 부모의 너비를 무시하고 자식의 요소를 화면 전체 너비로 설정하기 (0) | 2023.05.15 |
|---|---|
| CSS | display 속성 (inline, block, inline-block) 과 float (0) | 2021.10.07 |
| CSS | position 속성 (static, relative, absolute, fixed) (0) | 2021.10.07 |
| CSS | 자주 쓰는 Tag들의 CSS 속성 (0) | 2021.09.06 |
| CSS | CSS파일 연결하기 / 선택자 / Inline-Block (0) | 2021.09.05 |