HTML 다시 배우기 - 1. 시맨틱 웹(Semantic Web)

웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 "의미" 와 "관련성" 을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

 

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

 

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element) 를 해석하게 된다.

 

※ 시맨틱 요소(Semantic element) 는 개발자가 의도한 요소의 명확한 의미 전달하기 때문에 코드의 가독성을 높이고 유지보수를 쉽게한다. 결국 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

 

브라우저에서 특정시맨틱 요소(Semantic element)는 스크린 리더 등의 보조 기술을 사용하는 사용자에게도 의미 있는 정보를 전달하는 데 도움이 됩니다.

 

기본적인 시멘틱 태그만 잘 활용하는 것으로도 충분하고 SEO 알고리즘이 진화되고 AI와 머신러닝이 도입되면서 좋은 콘텐츠의 중요성이 커지고 있다.

 

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

• non-semantic 요소
• div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
• semantic 요소
• form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

 

주요 시맨틱 태그 예시

header: 헤더를 의미한다
nav: 내비게이션을 의미한다
main : 웹 페이지의 주요 콘텐츠를 감싸는 공간을 의미한다
article: 분문의 주내용이 들어가는 공간을 의미한다
aside: 사이드에 위치하는 공간을 의미한다
section: 본문의 여러 내용(article)을 포함하는 공간을 의미한다. 제목이 있는 것이 일반적
footer: 푸터를 의미한다

 

※ article 와 section 차이

 

article 은 그 자체로도 독자적으로 완성된 내용이고 section 은 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.

 

예를 들어 기사 및 블로그 글 목록처럼 독립적인 내용을 구분지을 때 article을 사용하고 한 기사 본문 중 요약 문단이 있다면 그 부분을 section 으로 분리해서 사용 할 수 있다.

 

대부분의 스크린리더는 따로 접근 가능 이름 (accessible name) 이 부여되지 않은 이상 section 요소를 언급하지 않는다. 이 경우에는 aria-label 을 이용해서 접근 가능한 이름을 부여할 수 있다.

---

참고

https://poiemaweb.com/html5-semantic-web

https://webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/

https://smoothiecoding.kr/html-%EC%8B%9C%EB%A9%98%ED%8B%B1%ED%83%9C%EA%B7%B8-%EA%B8%B0%EB%B3%B8/