¿Sabes cómo hacer una barra de navegación en HTML? Las barras de navegación o navbar son un elemento clave para la usabilidad de cualquier página web y funcionan como una barra de búsqueda HTML.
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.
Insertar una barra de navegación en HTML
Para insertar una barra de navegación en HTML o nav 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:
//Insertar una barra de navegación en HTML
<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 en el proceso de insertar una barra de navegación en HTML, 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.
Cabe aclarar que las barras de navegación no son lo mismo que el navegador en HTML.
Después de aprender cómo insertar una barra de navegación en HTML usando los atributos de ID, es el momento de seguir aprendiendo acerca de este poderoso lenguaje y de su complemento CSS, como realizar el botón de buscar en HTML.
Te contamos que, en KeepCoding, tenemos el bootcamp intensivo perfecto para ti. En el Bootcamp Desarrollo Web 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!
