Cómo insertar una barra de navegación en HTML

Autor: | Última modificación: 8 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Las barras de navegación son un elemento clave para la usabilidad de cualquier página web. En este post te enseñaremos cómo insertar una barra de navegación en HTML para que los usuarios puedan navegar con facilidad por tu sitio web.

Nav bar

Para insertar una barra de navegación en HTML debemos utilizar la etiqueta <nav>. Esta etiqueta tendrá dos hijos: el nombre de la página web o logotipo y los enlaces a cada sección. Te recomendamos insertar una barra de navegación en HTML justo después de la etiqueta <body>, es decir, encima del <header>. De esta forma será más fácil entender que es un elemento independiente.

Logotipo

El logotipo es un bloque esencial a la hora de insertar una barra de navegación en HTML. Este no solo posicionará el nombre de la página web, sino que también funcionará como un enlace a la página principal. ¿Has visto que cuando le das clic al logo de YouTube vuelves a la página de inicio sin importar dónde te encontraras antes? Pues esto es lo que queremos hacer con el logotipo de nuestra página web.

Para insertar el logotipo hay múltiples opciones. En este post, pensaremos en el logotipo como un texto con una tipografía diferente. En ese caso, podríamos insertarlo bajo la etiqueta <H1>. Sin embargo, esto podría crear confusión si tenemos varias páginas con sus propios H1. Recordemos que la barra de navegación permanecerá estática a lo largo de la página web. Por eso, las etiquetas que definamos para ella siempre estarán presentes y podrán confundirse con las etiquetas del cuerpo. Como no hay una etiqueta que nos diga semánticamente que esto es un logo, te recomendamos utilizar la etiqueta <div>.

Para conocer más sobre cómo funciona esta etiqueta, te invitamos a leer nuestro post sobre etiquetas div y span en HTML. Una vez insertada la etiqueta <div>, podemos añadirle un atributo de clase que se llame «logo». Esto nos permitirá jugar con las propiedades y estilos del logo y, así, diferenciarlo de los demás elementos de la página. Aunque no es necesario para la lógica HTML, es bueno mantener el hábito de pensar en el diseño desde la creación de nuestro código.

Como mencionamos en el caso de YouTube, nuestro logotipo también puede usarse como un href o enlace. Para hacer esto, basta con insertar una propiedad href a tu logotipo que enlace al header, pues este es el inicio de la página web. Esto se puede hacer fácilmente agregándole un atributo ID al header y, después, insertándolo en nuestro enlace de la siguiente manera:

<div class=»logo»> <a href =»#header»>

Secciones

Insertar una barra de navegación en HTML es realmente insertar una lista de enlaces. En el bloque de secciones necesitaremos un enlace para cada sección que tenga nuestra página web. Para crear esta lista de enlaces podemos insertar el elemento <ul> o «unordered list» con el número de <li> o «list item» que necesitemos. Dentro de cada <li> habrá un enlace (<a>).

Sabemos que escribir manualmente cada ítem puede ser tedioso, pero tenemos buenas noticias. No hay necesidad de que escribas manualmente cada sección; gracias a las abreviaturas de tu software de programación, podemos crear esta lista fácilmente con solo una frase. Al escribir «ul>(li>a)*4» estaremos creando una lista de enlaces con cuatro secciones. En el caso de Visual Studio, esta herramienta se llama Emmet abbreviation. En este artículo, puedes conocer más sobre la herramienta Emmet abbreviation.

Al igual que en el caso del enlace del logotipo, una vez creada esta lista solo debemos enlazar a cada sección usando su atributo ID. Todos estos enlaces serán de tipo local, pues son enlaces que nos guían a un identificador de elemento y no a un recurso externo. Te recomendamos darle un nombre reconocible y corto al atributo ID de cada sección, preferiblemente el mismo nombre de la sección. Para evitar errores en la creación del enlace, te sugerimos también copiar y pegar el atributo ID en vez de escribirlo manualmente.

¿Cuál es el siguiente paso?

Después de aprender cómo insertar una barra de navegación en HTML usando los atributos de ID, es el momento de que sigas aprendiendo acerca de este poderoso lenguaje y de su complemento CSS. Te contamos que, en KeepCoding, tenemos el bootcamp intensivo perfecto para ti. En el Desarrollo Web Full Stack Bootcamp combinarás los aspectos teóricos de HTML y CSS con la práctica. Al final, sabrás todo lo necesario para crear y diseñar tu propia página web. No esperes más para cumplir tu sueño de ser un desarrollador web. ¡Solicita información e inscríbete ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!