..

Search

<nav>

HTML <nav> 태그


정의 및 특징

<nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.

 

<nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.

글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 <nav> 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정합니다.


예제
<nav>
    <a href="/html/intro">HTML</a> |
    <a href="/css/intro">CSS</a> |
    <a href="/javascript/intro">JavaScript</a>
</nav>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<nav> 5.0 지원함 9.0 4.0 4.1 11.1

HTML5 미지원 브라우저에서의 사용 방법

인터넷 익스플로러 8 또는 그 이하 버전처럼 HTML5를 지원하지 않는 브라우저이거나 해당 브라우저의 스크립팅 기능이 꺼져있을 경우에는 HTML5의 섹션과 제목 요소를 제대로 지원하기 위해 다음과 같은 코드를 추가해야 합니다.

<!--[if lt IE 9]>
<script>
  document.createElement("article");
  document.createElement("aside"  );
  document.createElement("footer" );
  document.createElement("header" );
  document.createElement("hgroup" );
  document.createElement("nav"    );
  document.createElement("section");
  document.createElement("time"   );
</script>
<noscript>
  여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다.
  하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다.
</noscript>
<![endif]-->

HTML5에서 변경된 사항

<nav> 태그는 HTML5에서 새롭게 추가된 요소입니다.


CSS 기본값

nav { 
  display: block;
}

DOM 인터페이스


연관 페이지

HTML 의미 요소 수업 ⇒


연습문제