HTML의 <nav> 태그는 오직 내비게이션(navigation) 링크만을 포함하는 섹션을 정의할 때 사용합니다. 웹 페이지에서 주요 메뉴나 목차처럼 다른 페이지로 이동하는 링크들을 묶어주는 역할을 하며, 검색 엔진과 스크린 리더가 문서 구조를 더 잘 이해하도록 돕는 시맨틱(semantic) 요소입니다.
<nav> 태그 사용 예제
아래 코드를 실행하면 HTML5에서 <nav> 태그가 어떻게 동작하는지 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Nav Tag</title> </head> <body> <p>데이터베이스 튜토리얼:</p> <nav> <a href = "dbms/index.htm">DBMS</a> | <a href = "mongodb/index.htm">MongoDB</a> | <a href = "mysql/index.htm">MySQL</a> | <a href = "plsql/index.htm">PL/SQL</a> | <a href = "sql/index.htm">SQL</a> </nav> </body> </html>
참고 사항
<nav> 태그는 반드시 모든 링크에 사용해야 하는 것은 아닙니다. 사이트의 주요 탐색 영역, 즉 상단 메뉴 바, 사이드바 목차, 푸터의 주요 링크 그룹 등 '중요한 내비게이션 블록'에만 적용하는 것이 좋습니다. 하나의 페이지 안에 여러 개의 <nav> 요소를 사용할 수도 있으며, 각각에 aria-label 속성을 추가하면 접근성을 한층 높일 수 있습니다.