데브허브 | DEVHUB | [10분 테코톡] 에리얼의 시맨틱 태그
- 시맨틱 태그는 HTML에서 콘텐츠의 역할과 의미를 명확히 표현하는 태그입니다. 🏷️
div 태그만 사용한 코드와 시맨틱 태그를 사용한 코드는 시각적으로 동일한 결과를 보여줄 수 있지만, 그 내재된 의미는 다릅니다. 🎭
- SEO 관점: 시맨틱 태그는 검색 엔진이 웹페이지의 콘텐츠 구조를 이해하고, 검색 결과에서 더 높은 순위에 노출되도록 돕는 중요한 요소입니다. 📈
- 검색 엔진은 콘텐츠의 질, 키워드 최적화, 제목/메타 정보, 체류 시간, 이탈률 등 다양한 요소를 종합적으로 분석하여 웹페이지 순위를 결정하며, 시맨틱 태그는 이 중 콘텐츠 구조화에 기여합니다. 🧠
- 접근성 관점: 시맨틱 태그는 스크린 리더 사용자가 페이지의 구조와 콘텐츠의 의미를 더 쉽게 파악할 수 있도록 음성 안내를 제공하여 사용자 경험을 향상시킵니다. 🗣️
- 예를 들어,
h2 태그는 "Heading level 2"로, nav 태그는 "Navigation landmark"로 읽히며, ul 태그는 목록의 항목 수와 각 항목을 "Bullet"으로 안내합니다. 🎧
- 협업 및 유지보수 관점: 시맨틱 태그를 사용하면 코드 구조가 명확해져 다른 개발자나 미래의 자신이 코드를 빠르게 이해하고, CSS 셀렉터를 간결하게 유지하며, 유지보수를 용이하게 합니다. 🤝
- 결론적으로 시맨틱 태그는 SEO에게는 '길잡이', 스크린 리더 사용자에게는 '나침반', 그리고 미래의 개발자에게는 '미래를 위한 메모'와 같습니다. 🧭