가능세계
[HTML] 시맨틱 태그(Semantic Tag)란 무엇인가요? 본문
HTML 페이지를 구성하는 HTML 요소는 태그(tag)로 이루어집니다.
<div> 또는 <span> 태그처럼 의미가 없는 태그가 있는 반면, 시맨틱 태그처럼 콘텐츠의 역할을 명확하게 나타내는 "의미 있는 태그"도 있습니다.
시맨틱 태그란 무엇이며 왜 사용하는지 알아봅시다.
1. 시맨틱 태그란?
시맨틱 태그란, 콘텐츠의 의미를 설명하는 태그라고 할 수 있습니다.
시맨틱 태그는 <header>, <nav>, <main>, <footer>, <aside>처럼 해당 요소의 의미를 명시함으로써, 콘텐츠를 논리적으로 그룹화하고, 각 부분에 어떤 유형의 정보가 포함될 것인지 쉽게 파악할 수 있도록 도와줍니다.
2. 시맨틱 태그를 사용하는 이유는?
시맨틱 태그를 활용하면 코드를 읽기 쉽게 만들 뿐만 아니라, SEO에 유리하며 웹 접근성에도 이점을 가집니다.
2-1. 웹 접근성
시맨틱 태그를 사용하면 웹 접근성이 향상됩니다. 사용자가 웹 페이지를 탐색할 때 이용하는 스크린 리더(Screen Reader)와 같은 보조 기술에 유용한 정보를 제공할 수 있습니다.
스크린 리더는 시각 장애가 있는 사용자에게 화면을 읽어주는 역할을 합니다. 예를 들어 <nav> 태그의 경우 콘텐츠에 탐색 링크가 포함되어 있음을 알려주고, <strong>나 <em> 태그 내의 콘텐츠는 좀 더 강조하여 읽어줍니다.
이처럼 시맨틱 태그를 적절히 사용하면, 스크린 리더가 콘텐츠를 더욱 정확하게 전달하여 사용자의 이해를 도울 수 있습니다.
[Web] 웹 표준 & 웹 접근성 & 웹 호환성(크로스 브라우징) 정리하기
웹의 창시자 팀 버너스 리(Tim Berners-Lee)는 다음과 같이 말했습니다. "웹의 힘은 그 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것은 중요한 측면이다." 이번 포스팅에서는 웹의
co-natus.tistory.com
2-2. SEO
SEO(검색 엔진 최적화, Search Engine Optimization)는 웹 사이트가 검색 엔진에서 잘 인식되도록 최적화하는 작업입니다.
시맨틱 마크업은 검색 엔진이 웹 페이지의 구조와 콘텐츠를 더 잘 파악하도록 도와주며, 무엇을 색인화할지 알려줍니다. 이를 통해 검색 결과에서 웹 사이트의 노출 순위를 높이고, 더 많은 트래픽을 유도할 수 있습니다.
3. 시맨틱 태그 종류
주요 태그는 다음과 같습니다.
<header>: 페이지나 섹션의 도입부 또는 소개 정보를 나타냅니다. 로고, 검색창, 로그인 등이 포함되는 경우가 많습니다.<nav>: 내비게이션 표현을 위한 태그로서, 링크 목록이 포함됩니다.<main>: 페이지의 주요 콘텐츠(본문)가 포함됩니다. 페이지당 한 번만 사용되어야 합니다.<article>: 해당 페이지나 사이트에서 독립적으로 존재할 수 있는 콘텐츠를 의미하며, 태그 내의 콘텐츠를 배포하거나 재사용할 수 있습니다.<section>: 비슷한 주제의 콘텐츠를 그룹화하는 방법입니다.<aside>: 부수적인 콘텐츠를 나타냅니다. 주로 사이드바에 사용됩니다.<footer>: 페이지 하단에 사용합니다. 일반적으로 연락처 정보, 저작권 정보 및 일부 사이트 탐색이 포함됩니다.