웹서비스에서 굉장히 중요한것중 하나가 많은 사람들이 내 사이트에 방문할 수 있도록 하는것이다.
그래야 회사의 매출에도 큰 기여를 하기 때문에 프론트엔드 개발자한테 가장 중요한 능력중 하나이지 않을까 생각된다.
그러기 위해서 웹접근성을 최대한 많이 높여야한다. 이것은 SEO와 관계가 있고, 즉 구글이나 네이버 같은 웹페이지에서 검색을 했을때 우리 서비스가 잘 나올 수 있게한다.
즉, 브라우저가 우리 웹서비스가 무엇에 대한것이고, 무슨 내용을 가지고 있고, 어떠한 내용이 중요한지등 여러 정보를 이해 시켜줘야한다. 그래야 스크린리더기를 사용할때도 눈이 안보이시는 유저분들에게 큰 도움을 줄 수가 있다.
그중에서 가장 일반적으로 사용할 수 있는 방법중 하나가 Semantic tags를 이용하는 것이다.
말그대로 의미있는 요소를 사용하자는 것이다
흔하게 사용되는 div는 의미가 전혀 없는 element이다. 때문에 브라우저는 중요한 컨텐츠에 div를 사용할 경우 이 컨텐츠가 중요한건지에 대한 정보를 알 수가 없다.
즉, SEO를 개선하기 위해서는 div와 span과 같은 의미없는 태그들을 과하게 사용하면 안될 것이다.
대표적으로 사용되는 semantic tag에는 무엇이 있을까?
article - 독립적으로 사용될 수 있는, 즉 자족적인 요소이다. 대표적으로 블로그 포스트, 뉴스 기사등과 같은 아이템에서 사용될 수 있다.section - 컨텐츠를 테마성으로 그룹화 할 수 있으며, 즉 어떠한 컨텐츠의 구역을 나눌때 사용하게 된다. 예를들어, “오늘의 인기 상품!” 이런 테마성 section같은 곳에서 사용이 가능하다.header - 서두 및 소개용 컨텐츠를 만들때 사용한다. 홈페이지에서 로고가 들어있는 부분에 사용한다거나, 예를들어, 어떠한 게시글의 페이지 제목이 있는 부분에서 사용이 된다.mian - 웹서비스에서 메인이 될만한 컨텐츠에 사용한다. 한페이지에 하나로 제한이된다.nav - 링크의 역할을 하는 요소들의 section에 해당이 된다. 주로 페이지별 주요 네비게이션 요소들이 들어있는 section 대용으로 사용이 된다aside - 메인컨텐츠에 간접적으로 관련이 있으며, 그렇게 엄청 필수적이지는 않는 컨텐츠들을 넣는다. footer - 주로 하단에 저작권과 같은 추가 정보들을 넣는 요소이다.결론
semantic tag들에는 내부적으로 role이라는 속성이 존재하며, 이 role들에 의해 브라우저가 어떠한 역할을 하는지 이해하는 것이다즉, 각 요소들의 role를 잘 파악하며, 브라우저가 잘 이해할 수 있는 웹서비스를 만드는것이 핵심이다