Front-End의 모든것/HTML

HTML 이란? - nav 태그에 대해서 -6

모두다레벨업 2024. 10. 16. 22:31
728x90
반응형

안녕하십니까 !?

 

오늘 하루는 어떠셨을지 궁금하지만

이렇게 제 블로그에 방문해주셔서

 

오늘이 어떻든 내일은 즐거운 하루가 되실거예요

(꼭!)

 

 

 

 

ⓒ Photography by pexels - https://www.pexels.com/

 

오늘 하루는 <nav>태그에 대해서 알아볼 예정인데요,

시작하기전

 

태그이름을 보고 조금씩 느끼시겠지만

역할에 따라 이름이 지정되어있어요!

 

<head> 태그는 머리에 위치해있는 사이트에 대한 정보 등을 제공하고,

<body> 태그는 말그대로 페이지의 몸통! 콘텐츠부분을 담당하는데

그 콘텐츠중 <header>, <footer>등

역할 및 특성에 맞는 네이밍을 가지고 있다는점을 알고 지나가시면

좀 더 수월히 교육이 되실것 같아요 !!

 

자 그럼 오늘의 주제 <nav>태그에 대해서 알아보고 가시죠!

 

 

 

 

1️⃣ nav 태그란?

<nav> 태그는 HTML5에서 도입된 시맨틱 태그 중 하나로, 웹 페이지 내에서 주요 내비게이션 링크 그룹을 정의할 때 사용됩니다. 내비게이션 링크란 웹사이트나 문서의 다른 부분으로 이동할 수 있는 링크를 의미합니다. <nav> 태그는 이러한 링크들을 구조적으로 묶어주기 때문에, 사용자뿐만 아니라 검색 엔진과 같은 소프트웨어도 쉽게 인식할 수 있습니다.

 

 

2️⃣ 주요 특징

 

  • 주요 내비게이션을 정의:
    <nav> 태그는 웹 페이지나 애플리케이션에서 주요 내비게이션 링크(탐색 메뉴, 사이드바, 하단 링크 등)를 그룹화하는 데 사용됩니다. 이는 일반적으로 사용자가 다른 페이지로 이동하는 링크들을 포함합니다.
  • 시맨틱 의미:
    <nav> 태그는 단순히 링크를 감싸는 것이 아니라, 이 링크들이 내비게이션 목적이라는 의미를 부여합니다. 이는 시맨틱 마크업의 중요한 부분으로, 스크린 리더나 검색 엔진이 페이지 구조를 이해하는 데 도움을 줍니다.
  • 위치와 용도:
    <nav> 태그는 웹 페이지 어디에나 배치할 수 있지만, 주로 페이지 상단 또는 사이드바에 위치하여 사용자들이 사이트의 주요 섹션으로 쉽게 이동할 수 있도록 합니다. 웹 페이지에 여러 개의 <nav> 태그를 사용할 수 있으며, 예를 들어 하나는 상단 내비게이션, 다른 하나는 페이지 하단의 보조 내비게이션에 사용될 수 있습니다.

 

 

3️⃣ 포함되는 요소들

 

  • <a> 태그: 주로 사용되는 요소로, 각각의 링크를 정의합니다.
  • <ul>, <ol>, <li> 태그: 내비게이션 메뉴를 목록 형태로 표현할 때 사용합니다.
  • 기타 HTML 요소들: 버튼, 아이콘 등을 추가하여 디자인을 향상시킬 수 있습니다.

 

 

4️⃣ 사용 예시 

<nav>
  <ul>
    <li><a href="/home">홈</a></li>
    <li><a href="/about">소개</a></li>
    <li><a href="/services">서비스</a></li>
    <li><a href="/contact">연락처</a></li>
  </ul>
</nav>

 

 

위 예시는 가장 일반적인 <nav> 사용 방법으로, <ul> 목록 안에 <li> 요소로 링크를 나열하여 내비게이션 메뉴를 만듭니다.

 

여러개의 nav태그를 사용시 아래 예시를 참조하시면 될 것 같습니다!

<header>
  <nav>
    <ul>
      <li><a href="/home">홈</a></li>
      <li><a href="/products">제품</a></li>
    </ul>
  </nav>
</header>

<aside>
  <nav>
    <ul>
      <li><a href="/help">도움말</a></li>
      <li><a href="/support">고객 지원</a></li>
    </ul>
  </nav>
</aside>

위 예시는 웹 페이지 상단에 있는 주 내비게이션과, 페이지 측면에 위치한 보조 내비게이션을 보여줍니다.

 

 

5️⃣ 잘못된 사용 예시

내비게이션 목적이 아닌 경우에 <nav> 태그를 사용하지 않아야 합니다. 예를 들어, 본문 내용에서 몇 가지 참고 링크가 있을 때, 이를 <nav>로 감싸는 것은 부적절합니다. 대신 <nav>는 사용자가 문서 내 다른 주요 섹션으로 이동하기 위한 링크에 사용되어야 합니다.

<!-- 잘못된 사용 예시 -->
<nav>
  <a href="#section1">섹션 1로 가기</a>
  <a href="#section2">섹션 2로 가기</a>
</nav>

이 경우는 문서 내의 단순한 이동 링크로, <nav>보다는 <div>나 단순한 <a> 태그가 더 적합합니다.

 

 

6️⃣ 시맨틱 및 접근성 

 

  • 스크린 리더: <nav> 태그는 시맨틱 구조 덕분에 스크린 리더에서 사용자에게 "이 부분이 탐색 섹션"임을 알립니다. 이것은 시각 장애가 있는 사용자들이 웹 페이지를 탐색하는 데 도움을 줍니다.
  • SEO: 검색 엔진도 <nav> 태그의 의미를 인식하여 페이지 내비게이션 구조를 파악하고, 이를 통해 검색 순위를 개선할 수 있습니다.

 

 

<nav> 태그는 웹 페이지의 주요 내비게이션을 정의하는 시맨틱 태그로,

이를 사용하면 웹 페이지의 탐색 구조를 명확하게 나타내고,

사용자 및 검색 엔진이 페이지를 이해하는 데 도움을 줍니다.

 

어떠셨나요?

<nav>태그에 대해서 이해하시기에

제 글이 조금이나마 도움이 되셨길 바라겠습니다

(제발...)

 

 

 

다음시간에는 <main>, <article>, <section>, <aside> 순으로 태그에 대해서 알아보고,

그 후 계속 얘기한 시맨틱 마크업이란 무엇인지에 대해서 알아보도록 할게요!

 

기본적인 구조 및 태그들의 가지고있는 속성들을 이해하고

실전 예제를 통해서 함께 공부하는 시간이 되었으면 좋겠습니다!

 

오늘도 정말 고생많으셨어요!

전 그럼 이만

728x90
반응형