시맨틱 태그란?
Semantic Tags (Semantic Markup)
시맨틱 마크업이라고도 한다. 이 단어의 뜻은 의미의, 의미가 있는 것을 말한다. 즉, 의미가 있는 태그인것이다.
시맨틱 태그가 중요한 이유 세 가지!
🔸 SEO (Search Engine Optimization) 검색 엔진 최적화
구글과 같은 검색 엔진으로부터 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정.
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하므로 우리가 검색을 최적화하기 위해서 적절한 시맨틱 태그들을 잘 활용한다면 검색만으로 효과적인 마케팅 효과를 볼 수 있다.
🔸 웹 접근성 (Accessibility)
웹페이지를 시각적인 것이 아닌 음성으로 읽어주는 스크린 리더를 이용하거나 또는 키보드만을 이용해서 우리 웹사이트를 사용하는 경우 적절한 시맨틱 태그로 잘 만들어진 웹 사이트라면 스크린 리더든 키보드만으로도 문제 없이 잘 동작할 수 있어야 한다.
🔸 개발자들을 위해! (Maintainability)
보통 개발자들은 혼자 하기보다 팀으로 협업이 이루어지는 경우가 많다. 다른 개발자가 HTML 코드를 바라봤을 때 한눈에 알아볼 수 있어야 하고 그렇다면 코드를 재활용하기 편하기 때문에 유지 보수성도 더 높여서 개발을 할 수 있다.
웹사이트 구조를 이루는 태그
1. header
: 웹사이트의 브랜드를 나타내줄 수 있는 로고나 메뉴 아이템들이 있다면 헤더 사용
2. nav
: 헤더 안에 여러 가지 메뉴들이 있다면 묶어서 nav를 쓴다
3. main
: 현재 웹사이트의 페이지에서 중요한 컨텐츠를 갖고 있는 부분은 메인으로 사용하는 것이 좋다
4. aside
: 메인 안에서도 페이지에 컨텐츠와 직접적으로 연관이 없는 부가적인 내용이 담겨있는 곳
5. article
: 독립적으로 구분해 배포하거나 재사용할 수 있는 구획. 예를 들면 블로그 글 뉴스 기사에서 기사 하나 그 자체를 묶어줄 때 사용한다. 그래서 독립적으로 다른 페이지에 보여줬을 때 고유한 정보를 나타내면서 전혀 문제가 없을 때 사용한다.
5. section
: 섹션은 아티클 안이나 메인 안이나 아무 곳에서나 연관이 있는 내용들을 하나로 묶어줄 때 사용할 수 있다. 그래서 한 페이지 안에 여러 가지의 내용을 보여준다면 섹션 별로 나누고 하나의 섹션 안에 또 다른 블로그 포스트를 보여 준다면 아티클을 사용해 볼 수 있다
6. footer
: 웹페이지 정보, 연관된 사이트, 홈페이지를 만든 단체, 기업 사이트 연락처 주소 등을 알 수 있고 저작권 정보도 표시한다.
(참고 사이트)
https://developer.mozilla.org/ko/docs/Glossary/Semantics
https://developer.mozilla.org/ko/docs/Glossary/SEO
https://ko.wikipedia.org/wiki/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94
https://seo.tbwakorea.com/blog/seo-guide-2022/
https://youtu.be/T7h8O7dpJIg?si=SZ11syM6oxoBxAhJ
