freeCodeCamp/curriculum/challenges/espanol/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md

---
id: 587d7788367417b2b2512aa2
title: Haz que la navegación del lector de pantalla sea más fácil con el nav Landmark
challengeType: 0
videoUrl: 'https://scrimba.com/c/czVwWSv'
forumTopicId: 301024
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
---

# --description--

El elemento `nav` es otro elemento de HTML5 con la función de punto de referencia insertado para facilitar la navegación del lector de pantalla. Esta etiqueta esta destinada a envolver los principales enlaces de navegación en tu página.

Si hay enlaces internos repetidos en la parte de la página, no es necesario usar el lenguaje de marcado con aquellos con una etiqueta `nav` también. Usando una etiqueta `footer` (cubierto en el próximo desafío) es suficiente.

# --instructions--

Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un `div`. Cambia la etiqueta `div` a una etiqueta `nav` para mejorar la accesibilidad en su página.

# --hints--

Tu código debe tener una etiqueta `nav`.

```js
assert($('nav').length == 1);
```

Tus etiquetas `nav` deben envolver la etiqueta `ul` y sus elementos de la lista.

```js
assert($('nav').children('ul').length == 1);
```

Tu código no debe tener ninguna etiqueta `div`.

```js
assert($('div').length == 0);
```

Tu elemento `nav` debería tener un cierre.

```js
assert(
  code.match(/<\/nav>/g) &&
    code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
);
```

# --seed--

## --seed-contents--

```html
<body>
  <header>
    <h1>Training with Camper Cat</h1>

    <div>
      <ul>
        <li><a href="#stealth">Stealth &amp; Agility</a></li>
        <li><a href="#combat">Combat</a></li>
        <li><a href="#weapons">Weapons</a></li>
      </ul>
    </div>

  </header>
  <main>
    <section id="stealth">
      <h2>Stealth &amp; Agility Training</h2>
      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
      <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
    <section id="combat">
      <h2>Combat Training</h2>
      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
    </section>
    <section id="weapons">
      <h2>Weapons Training</h2>
      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
    </section>
  </main>
</body>
```

# --solutions--

```html
<body>
  <header>
    <h1>Training with Camper Cat</h1>

    <nav>
      <ul>
        <li><a href="#stealth">Stealth &amp; Agility</a></li>
        <li><a href="#combat">Combat</a></li>
        <li><a href="#weapons">Weapons</a></li>
      </ul>
    </nav>

  </header>
  <main>
    <section id="stealth">
      <h2>Stealth &amp; Agility Training</h2>
      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
      <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
    <section id="combat">
      <h2>Combat Training</h2>
      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
    </section>
    <section id="weapons">
      <h2>Weapons Training</h2>
      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
    </section>
  </main>
</body>
```
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00			`---`
			`id: 587d7788367417b2b2512aa2`
chore(i8n,learn): processed translations (#41061) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> 2021-02-16 13:01:20 -08:00			`title: Haz que la navegación del lector de pantalla sea más fácil con el nav Landmark`
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00			`challengeType: 0`
			`videoUrl: 'https://scrimba.com/c/czVwWSv'`
			`forumTopicId: 301024`
			`dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark`
			`---`

			`# --description--`

			El elemento `nav` es otro elemento de HTML5 con la función de punto de referencia insertado para facilitar la navegación del lector de pantalla. Esta etiqueta esta destinada a envolver los principales enlaces de navegación en tu página.

			Si hay enlaces internos repetidos en la parte de la página, no es necesario usar el lenguaje de marcado con aquellos con una etiqueta `nav` también. Usando una etiqueta `footer` (cubierto en el próximo desafío) es suficiente.

			`# --instructions--`

			Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un `div`. Cambia la etiqueta `div` a una etiqueta `nav` para mejorar la accesibilidad en su página.

			`# --hints--`

			Tu código debe tener una etiqueta `nav`.

			```js
			`assert($('nav').length == 1);`
			```

			Tus etiquetas `nav` deben envolver la etiqueta `ul` y sus elementos de la lista.

			```js
			`assert($('nav').children('ul').length == 1);`
			```

			Tu código no debe tener ninguna etiqueta `div`.

			```js
			`assert($('div').length == 0);`
			```

			Tu elemento `nav` debería tener un cierre.

			```js
			`assert(`
			`code.match(/<\/nav>/g) &&`
			`code.match(/<\/nav>/g).length === code.match(/<nav>/g).length`
			`);`
			```

			`# --seed--`

			`## --seed-contents--`

			```html
			`<body>`
			`<header>`
			`<h1>Training with Camper Cat</h1>`

			`<div>`
			`<ul>`
			`<li><a href="#stealth">Stealth & Agility</a></li>`
			`<li><a href="#combat">Combat</a></li>`
			`<li><a href="#weapons">Weapons</a></li>`
			`</ul>`
			`</div>`

			`</header>`
			`<main>`
			`<section id="stealth">`
			`<h2>Stealth & Agility Training</h2>`
			`<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>`
			`<article><h3>No training is NP-complete without parkour</h3></article>`
			`</section>`
			`<section id="combat">`
			`<h2>Combat Training</h2>`
			`<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>`
			`<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>`
			`</section>`
			`<section id="weapons">`
			`<h2>Weapons Training</h2>`
			`<article><h3>Swords: the best tool to literally divide and conquer</h3></article>`
			`<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>`
			`</section>`
			`</main>`
			`</body>`
			```

			`# --solutions--`

			```html
			`<body>`
			`<header>`
			`<h1>Training with Camper Cat</h1>`

			`<nav>`
			`<ul>`
			`<li><a href="#stealth">Stealth & Agility</a></li>`
			`<li><a href="#combat">Combat</a></li>`
			`<li><a href="#weapons">Weapons</a></li>`
			`</ul>`
			`</nav>`

			`</header>`
			`<main>`
			`<section id="stealth">`
			`<h2>Stealth & Agility Training</h2>`
			`<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>`
			`<article><h3>No training is NP-complete without parkour</h3></article>`
			`</section>`
			`<section id="combat">`
			`<h2>Combat Training</h2>`
			`<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>`
			`<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>`
			`</section>`
			`<section id="weapons">`
			`<h2>Weapons Training</h2>`
			`<article><h3>Swords: the best tool to literally divide and conquer</h3></article>`
			`<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>`
			`</section>`
			`</main>`
			`</body>`
			```