Semantic Web과 Semantic Tag은 비슷한 의미를 가지고 있다.
Semantic Web이 왜 중요한 것일까?
'semantic하게' 만들어야 하는 이유를 알고 코드를 목적있게 작성할 줄 알아야 한다.
- 사용자가 검색할 때 상위에 표기되도록 SEO(검색 엔진 최적화)를 높일 수 있다.
- 스크린 리더를 사용하는 시각 장애인이 웹을 편하게 접근할 수 있도록 웹 접근성을 높일 수 있다.
- 가독성이 좋고 유지보수하기 쉽다.
- 컴퓨터와 개발자들이 이해하기 쉽게 명확하게 나타낼 수 있다.
의미와 구조에 맞게 잘 작성함으로써 위와 같은 이점을 얻을 수 있다.
여러 전문가와 기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄인 W3C에서 Semantic Web에 대해 설명한 자료와 그 외 참고할만한 사이트이다.
▶ Where is Semantic Web used?
▶ How does the Semantic Web work?
▶ Is Web 3.0 and Semantic Web the same?
Semantic Web을 이루는 Semantic Tag를 한 가지 예시를 통해 이해해보자.
화면에 이미지를 삽입하는데 두 가지 방법이 있다.
• HTML에 img 태그를 이용하는 방법
• CSS에 background-image 속성을 이용하는 방법
처음에는 이미지를 삽입할 때 첫번째 방법을 사용했는데 나중에 HTML이 아니라 CSS만으로 이미지를 삽입할 수 있다는 방법을 익혔다.
그런데 'HTML에 요소를 추가해 쉽게 마크업할 수 있는데 왜 CSS를 사용할까?' 라는 의문이 들 수 있다.
둘의 차이점은 무엇이고, 언제 어떤 것을 사용해야할까?
먼저 HTML과 CSS의 차이를 간단히 알아보면,
HTML에 Mark-up한다는 것은 여러 태그들을 작성해 화면에 보이는 요소를 구성하는 것이다.
브라우저가 알 수 있도록 HTML이라는 백지에 Semantic Tag를 이용해 구조와 틀을 만드는 것이다.
뼈대를 먼저 만들고 나서 우리는 CSS를 이용해 색을 입히고 꾸미는 것이다.
✅ HTML에 img 태그 ⇒ 해당 이미지는 정보 콘텐츠로서 가치가 있는 경우!
✅ CSS에 background-image 속성 ⇒ 요소가 정보로서 의미 없이 단지 꾸미는 용도인 경우! (ex. 배경 이미지, 좋아요(👍) 같은 단순 요소)
CSS 속성을 이용하면 img 태그를 사용하지 않음으로써 브라우저가 렌더링하는 것을 줄일 수 있다.
우리는 Semantic Web을 만들기 위해 각각의 요소의 목적에 맞게, 의미있게 화면을 만들어야 한다.
Semantic Tag는 화면을 보기만해도 의미를 짐작할 수 있는 태그이다. (ex. header, main, footer, navigation, aside, section)
div, span 태그와 같은 non-semantic tag도 화면을 구성한다.
우리는 html 마크업할 때 요소를 그룹화하기 위해 div 태그를 자주 사용한다.
모든 요소를 div 태그로 작성해 화면을 만드는 것과 semantic tag를 사용해서 만든 결과는 같을 수 있다.
그럼 div만 알면 되는데 왜 다른 태그들을 배운 것일까?
하지만 우리는 코드를 보고 빠르게 이해할 수 있도록 semantic하게 작성해야 한다.
div 천국이라면 특정 요소가 어떤 것을 가리키는 것인지 오랜 고민이 필요할 수 있기 때문이다.😂
콘텐츠 구획 요소를 사용하면 빠른 탐색과 콘텐츠 판별을 통해 문서의 콘텐츠를 논리적으로 체계화할 수 있다.
