인터넷의 활성화를 시작으로 웹의 사용은 폭발적으로 늘어났고, 그에 따라 웹상에 축적된 정보의 지나친 비대로 인해 많은 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보접근만을 허용하고 있어, 정보 검색 시 무수히 많은 불필요한 정보가 처리되어 정보의 홍수를 가중시켰습니다. 또한 검색 시 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리해야 하는 문제가 발생했습니다.
시맨틱웹의 개념에서 나온바와 같이 웹상의 검색엔진의 최적화를 위해서 입니다. 구글 네이버와 같은 검색사이트들은 정보를 찾기위해서 검색엔진을 사용하는데, 개발자들이 프로덕트를 만들 때 사용자들의 검색어에 많은 노출을 할 수 있어야 하기 때문에 검색엔진 최적화(SEO : Search Engine Optimization)를 고려 해줘야합니다. 따라서 검색엔진에 잘 노출이 되려면 시맨틱 웹을 따라야합니다!
시맨틱은 "의미가 있는"이란 뜻이다. 즉 시맨틱 태그는 HTML태그 중에서 의미가 있는 태그라는 뜻이다.div나 span처럼 의미가 없는 태그가 있는 반면에 form, table, article등 의미가 있는 태그는 내용을 명확하게 정의한다. 그렇다면 어떤 필요가 있을까?
검색엔진최적화(SEO): 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그르 사용하는 것이 중요하다.
시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.
시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽다.
W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"고 한다. (의미가 있는 요소는 개발자 모두에게 명확한 의미를 전달한다)
header : 제목, 웹사이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
nav : header 안에 여러가지 메뉴들이 모여있다면, div로 나누지 말고 nav 태그를 사용할 수 있다.
footer : 웹사이트 아래에 부가적인 정보를 포함할 때 사용한다.
main : 웹사이트의 컨텐츠 중에 가장 중요한 컨텐츠를 넣는다
aside : main 안에서도 페이지의 컨텐츠와 직접적인 상관이 없는 내용들을 집어넣는다. (광고, 페이지와 연관된 다른 링크들 등)
article, section : main 안에서도 div로만 구성하기보다는 용도에 따라서 이 두개의 tag를 사용해볼 수있다.
strong, em : 강조되는 텍스트에 사용된다.
보통 브라우저에서 em은 기울기체, strong은 볼드체로 나타난다.
ref : 시맨틱_웹