시맨틱 웹
HTML/CSS를 활용하여 웹상의 텍스트, 이미지 등 여러 요소를 배치하는 방법은 여러가지이다. 웹사이트 유저에게 동일하게 보이더라도 뒤에서 실제 이를 구현하는 코드는 제각각이며 코드 구현 방식에 따라 컴퓨터가 이해하는 방식도 달라진다. 그리고 컴퓨터가 웹을 구현하는 코드를 이해하는 방식에 따라 다음과 같은 현상이 발생할 수 있다.
- 웹사이트 상에서 중요한 키워드와 덜 중요한 키워드를 구분하지 못함
- 이미지의 의미를 이해하지 못함
2011-03-15가 날짜인지 이해하지 못함
위와 같은 부작용을 방지하는 차원에서 컴퓨터가 웹 상에 표현된 컨텐츠를 의미론적으로 이해하도록 구성하는 측면에서 시맨틱 웹이라는 개념을 활용한다.
위키백과에서는 시맨틱 웹에 대해 아래와 같이 정의한다.
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.
즉 시맨틱 웹이란 '컴퓨터가 읽고 처리할 수 있는 웹'이라고 이해할 수 있다. 웹 사이트를 구현할 때 시멘틱 웹 개념을 잘 활용한다면 의미적 메타데이터 체계를 구축하고, 컴퓨터가 웹 사이트 상의 컨텐츠에 관련된 정보를 텍스트화하고 정리하여 각종 서비스를 구현하거나, 검색엔진 최적화(Search Engine Optimization) 등을 효율적으로 이룰 수 있다.
시멘틱 웹 개념을 구현하기 위해 컨텐츠의 의미를 설명하는 시맨틱 태그를 활용한다.
시맨틱 태그
HTML의 시맨틱 태그의 종류로는 header, section, article, aside, footer 등이 있으며, 이들은 각각 컨텐츠가 웹 사이트 상에서 구조적, 상대적인 의미를 나타낸다.
| tag | 설명 |
|---|---|
| header | 헤더 |
| nav | 내비게이션 |
| aside | 사이드 공간 |
| section | 본문의 내용들을 포괄하는 공간 |
| article | 본문의 주내용 |
| footer | 푸터 |
시맨틱 태그에는 위와 같은 웹페이지 구조 상의 상대적 위치를 표시하는 태그 외에도
time: date/time 표현figure: 멀티미디어 컨텐츠(그림, 비디오 등) 표시mark: 중요도 (형광펜) 표시
등이 있으며, 이미지를 표시하는 img 등도 이미지라는 의미로써 시맨틱 태그로 볼 수 있다.
[HTML]<img> vs. [CSS]background-image
웹 사이트 상에 이미지를 올리는 방법으로는 HTML의 <img>를 활용하거나 CSS의 background-image를 활용하는 방법이 있으며, 유저 입장에서는 위 둘의 방식에 따른 차이를 웹 페이지 상 보이는 화면으로 구분할 수 없다.
하지만 시멘틱 웹 구현 측면에서 보면 HTML의 <img>를 활용하는 것이 해당 요소가 이미지 요소이며, alt 속성 값을 통해 이미지에 대해 부가적 설명 등을 담을 수 있어 유리하다.
하지만 이미지 파일이 단순 웹 페이지를 부가적으로 꾸며주는 요소로써 활용되는 등 굳이 의미를 부여하지 않아도 되는 경우라면 CSS의 background-image를 활용할 수 있으며, 불필요한 의미를 더해서 컴퓨터가 웹 페이지를 해석하는데 있어 혼선을 겪는 것을 방지하는 측면에서 유리할 수 있다.
참고:
https://velog.io/@chris/the-css-background-image-property-as-an-anti-pattern
