시맨틱 태그

시맨틱 태그란 해당 영역이 그 자체로 의미를 가지며 어떠한 의미를 가지고 있는지 명확하게 표현하는 태그를 말한다

이를 통해 검색 엔진이 콘텐츠를 이해하는 데 도움이 되고, 웹 접근성을 높이는데도 중요한 역할을 하게 된다

시맨틱 태그 특징

1. 의미론적 표현 : 시맨틱 태그는 그 자체로 의미를 가지고 있다 예를 들어 <header>태그는 페이지의 상단, <section>태그는 문서의 구역을 의미하고 있다.
2. 검색 엔진 최적화 (SEO) : 검색 엔진은 시맨틱 태그를 통해 페이지의 주요 콘텐츠를 더 쉽게 파악할 수 있다.
3. 웹 접근성 향상 : 스크린 리더와 같은 보조 기술은 시맨틱 태그를 사용하여 콘텐츠를 더 정확하게 이해하고 사용자에게 전달할 수 있다. 이렇게 스크린 리더와 같은 부분을 개선시키게 된다면 시각 장애인과 같은 사용자들이 웹 사이트를 더 쉽게 이해하고 이용할 수 있게 된다
4. 코드의 가독성 향상 : 개발자들이 HTML코드를 더 쉽게 이해할 수 있으며 유지보수 작업에 용이하고 개발시 프로젝트 팀원 간 의사소통을 더욱 원활하게 해 줄 수 있다

자주 사용하는 시맨틱 태그

1. <header>: 웹 페이지의 헤더(머리말) 부분에 사용하며 사이트의 로고 이미지 또는 사이트의 대표적인 메뉴 등을 넣는다
2. <nav>: 내비게이션 링크를 담는 데 사용합니다. 주로 메뉴를 표시하는 데 쓰인다.
3. <main>: 웹 페이지의 주 내용을 나타냅니다. 페이지 별로 고유한 콘텐츠를 표현하는데 사용되며 하나의 페이지에서 단 하나만 존재해야 한다.
4. <article>: 독립적으로 구분되거나 재사용 가능한 영역을 나타냅니다. 블로그 게시물, 뉴스 스토리, 포럼 게시물 등을 나타낼 때 사용됩니다.
5. <section>: HTML 문서의 독립적인 구역을 나타내며, 보통 헤더(<header>)나 푸터(<footer>)를 동반합니다.
6. <footer>: 웹 페이지의 푸터(꼬리말) 부분에 사용합니다. 보통 회사 정보, 저작권 정보, 연락처 등을 넣습니다.
7. <figure>와 <figcaption>: 독립적인 콘텐츠, 주로 이미지나 그림, 도표 등을 표시하는데 사용하며, <figcaption>을 사용해서 그림의 설명을 추가할 수 있습니다.

WAI-ARIA

웹 접근성을 향상시키는데 중요한 역할을 하는 기술 사양

시각적인 방식으로 웹사이트를 탐색하거나, 마우스와 같은 표준 포인팅 장치를 사용할 수 없는 사용자들에게 많은 도움을 준다.

스크린 리더를 이용하는 사용자는 ARIA 속성의 역할, 상태를 통해 해당 기능이 어떠한 기능인지 의미와 목적을 알 수 있게 된다

주의해야 할 점

WAI-ARIA는 시맨틱 태그를 대체하는 것이 아니라 보완하는 것이기 때문에 우선적으로 시맨틱 태그를 적절하게 사용을 하고 필요한 경우에 따라 WAI-ARIA를 추가적으로 사용해야 한다