Semantic web , semantic tag
2022. 3. 30. 17:08
Semantic web
- 의도나 목적을 담고있는 의미론적인 웹
- 의도나 목적이 기계가 해석할 수 있는 체계안에서 담기므로, 기계가 사람의 개입없이도 정보를 해석하고 처리할 수 있음
- 무절제하게 폭발적으로 쌓이는 정보들이 체계속에서 분류되고 정보들간의 관련성이 도출될 수 있도록 함
Semantic Tag
- 의미론적인 웹의 관점을 고수하는 의미론적인 html Tag
- 무분별한 태그의 사용 >> 정보를 찾기 위해서는 사람의 노력이 반드시 필요
- 이러한 사람의 노력과 수고를 최소화하고자 의미있는 태그, 즉 semantic tag가 개발되었다.
- 때때로 동일한 기능을 충분히 수행할 수 있을 것 같음에도 구별되는 몇몇 tag들이 있다
- <header>,<footer>,<article>... 사실은 이들 모두 <div>와 동일한 기능을 수행한다.
- 이러한 tag들은 기능보다는 의미에 중점을 두고 구별도되는 Tag로, 사람의 관점에서는 동일한 기능을 수행할 수도 있지만 기계의 관점에서 정보를 분류하고 체계를 구성하는 근거가 될 수 있다.
Semantic tag의 사용사례 : img vs background-image
- html에서 img를 표시하는 대표적인 두가지 방법으로는 <img>태그를 사용하는 것과 특정 element의 css 즉 background-image property를 활용하는 방법이 있다.
- 둘다 동일한 기능을 수행할 수 있지만, <img>태그를 사용하는 것은 semantic tag의 사용방법에 부합하는 것으로써 해당 태그를 읽어내는 기계도 이것이 이미지라는 것을 해석할 수 있다. 특히 img태그에 부여되는 alt속성은 해당 태그의 meta정보가 되어, 컴퓨터는 alt속성에 지정된 문자열을 기반으로 이미지를 인식하고 판별한다.
- 반대로 background-image property를 사용하는 방법은 의미론적인 관점을 배제한 것으로 단순히 웹 디자인과 같은 기능적요소만을 위한 것이다.
- 이러한 점을 고려할 때, 내 이미지가 검색에 더 잘노출되어야 한다면 img태그를 사용하는 것이 바람직하다. 기계(검색엔진)이 훨씬 쉽게 해당 이미지를 인식할 수 있기 때문
- 반대로 순수하게 사이트의 장식이라는 기능적인 목적만 가지고 있다면 background-image를 사용하는 것이 바람직하다.(정말 사이트의 장식만을 목적으로 한다면, img태그를 쓰지 않는 것도 semantic web의 관점에서 적절할 수 있다.)
- 결론적으로는 가능한 semantic web의 관점에서 사용하는 것이 바람직하다. 결국 정보가 있어도 그 정보를 전달하는 매체가 기계이므로, 해당 매체에게 가장 적합한 방식으로 코드를 작성하여 정보를 잘 전달하는 것까지 '훌륭한 정보전달'에 포함되기 때문
Semantic tag의 종류
- <h1>태그나 <img>태그처럼 의미론적인 측면과 기능적인 측면(가운데 정렬, 글자크기커짐)을 동시에 가지고 있는 것이 일반적이다. 즉, 일반적인 tag를 용도에 맞게 tag로 작성하는 것 자체가 semantic하게 코드를 작성하는 것임!
- 그러나 HTML5에서 오로지 의미론적인 기능만을 위해 추가된 태그들이 있다.
- 모두 기능적으로는 그냥 <div>와 동일하나, 의미론적으로 다른 내용을 함의하고 있다.
- header,nav,aside,section,article,footer
- header : 헤더
- nav : 네비게이션
- aside : 사이드 공간
- section : 본문의 여러내용을 포함하는 공간을 의미
- article : 본문의 주 내용이 들어가는 공간
- footer : 맨 아래 부분
참고사이트
'frontend > html&css' 카테고리의 다른 글
| Position(absolute,relative,fixed) (0) | 2022.03.29 |
|---|---|
| List, Table, Input/textarea (0) | 2022.03.29 |
| CSS : display 속성(block, inline,inline-block) (0) | 2022.03.29 |
| Padding , border, Margin (0) | 2022.03.28 |
