How To Add A Logo Into The Nav Tag

HTML <nav> Tag

The <nav> tag is ane of the HTML5 elements. It is used to specify a cake of navigation links, either within the current certificate or to other documents. Examples of navigation blocks are tables of contents, menus, and indexes.

nat tag example

One HTML document may contain several <nav> tags, for example, one for site navigation and one for intra-page navigation.

Annotation that not all links in the HTML document are placed inside the <nav> element, information technology includes major navigation blocks. The <nav> tag can be placed for defining links in the footer of the website, but the <footer> tag is usually used in such cases.

The <nav> tag cannot be nested in the <accost> chemical element.

The <nav> tag comes in pairs. The content is written between the opening (<nav>) and closing (</nav>) tags.

Example of using the HTML <nav> tag:

                              <!DOCTYPE                  html>                <html>                <head>                <title>Title of the document</championship>                </caput>                <body>                <header>                <h1>Programming Courses</h1>                </header>                <nav>                <a                  href="/acquire-html.html">HTML</a>                |                <a                  href="/larn-css.html">CSS</a>                |                <a                  href="/acquire-javascript.html">JavaScript</a>                |                <a                  href="/larn-php.html">PHP</a>                |                </nav>                <h2>Welcome to W3Docs!</h2>                </trunk>                </html>

Example of the <nav> tag:

                              <!DOCTYPE                  html>                <html>                <caput>                <manner>                                  nav                  {                  display: flex;                  flex-wrap: wrap;       }                  nav                  a                  {                  text-decoration: none;                  brandish: block;                  padding:                  15px                  25px;                  text-marshal: centre;                  groundwork-color:                  rgb(189,                  185,                  185);                  color:                  #464141;                  margin:                  0;                  font-family: sans-serif;       }                  nav                  a                  :hover                  {                  background-colour:                  #777777;                  color:                  #ffffff;       }                                </style>                </head>                <torso>                <h1>Example of the HTML nav tag:</h1>                <nav>                <a                  href="https://world wide web.w3docs.com/">Habitation</a>                <a                  href="https://world wide web.w3docs.com/quiz/">Quizzes</a>                <a                  href="https://www.w3docs.com/snippets">Snippets</a>                <a                  href="https://www.w3docs.com/tool/">Tools</a>                <a                  href="https://www.w3docs.com/string-functions/">String Functions</a>                </nav>                </torso>                </html>

                              <!DOCTYPE                  html>                <html>                <caput>                <mode>                                  nav                  ul                  ul                  {                  display: none;       }                  nav                  ul                  li                  :hover                  >                  ul                  {                  display: block;       }                  nav                  ul:after {         content:                  "";                  clear: both;                  display: block;       }                  nav                  ul                  li                  {                  bladder: left;                  position: relative;                  list-style-type: none;       }                  nav                  ul                  li                  :hover                  {                  background:                  rgba(xix,                  20,                  123,                  0.67);       }                  nav                  ul                  li                  :hover                  a                  {                  colour:                  #fff;       }                  nav                  ul                  li                  a                  {                  display: cake;                  padding:                  20px                  30px;                  colour:                  #ffffff;                  text-ornamentation: none;                  background-color:                  rgba(35,                  17,                  134,                  0.8);                  font-family: sans-serif;       }                  nav                  ul                  ul                  {                  background:                  #5f6975;                  padding:                  0;                  position: accented;                  top:                  100%;       }                  nav                  ul                  ul                  li                  {                  float: none;                  position: relative;       }                  nav                  ul                  ul                  li                  a                  {                  padding:                  15px                  10px;                  color:                  #ffffff;                  text-transform: uppercase;       }                  nav                  ul                  ul                  li                  a                  :hover                  {                  background:                  rgba(19,                  20,                  123,                  0.67);       }                                </style>                </head>                <body>                <h1>Dropdown menu with the HTML nav tag:</h1>                <nav>                <ul>                <li>                <a                  href="https://www.w3docs.com/">Home</a>                </li>                <li>                <a                  href="https://world wide web.w3docs.com/quiz/">Quizzes</a>                <ul>                <li>                <a                  href="https://www.w3docs.com/quiz-kickoff/html-basic">HTML Bacis</a>                </li>                <li>                <a                  href="https://www.w3docs.com/quiz-start/css-basic">CSS Bacis</a>                </li>                <li>                <a                  href="https://world wide web.w3docs.com/quiz-start/javascript-basic">JavaScript Bacis</a>                </li>                <li>                <a                  href="https://www.w3docs.com/quiz-offset/php-basic">PHP Bacis</a>                </li>                <li>                <a                  href="https://www.w3docs.com/quiz-showtime/es6-bones">ES6 Bacis</a>                </li>                </ul>                </li>                <li>                <a                  href="https://www.w3docs.com/snippets">Snippets</a>                <ul>                <li>                <a                  href="https://www.w3docs.com/snippets/angularjs.html">Angular JS</a>                </li>                <li>                <a                  href="https://www.w3docs.com/snippets/apache.html">Apache</a>                </li>                <li>                <a                  href="https://world wide web.w3docs.com/snippets/git.html">Git</a>                </li>                <li>                <a                  href="https://www.w3docs.com/snippets/linux.html">Linux</a>                </li>                <li>                <a                  href="https://www.w3docs.com/snippets/nodejs.html">Node.Js</a>                </li>                <li>                <a                  href="https://world wide web.w3docs.com/snippets/symfony.html">Symfony</a>                </li>                </ul>                </li>                <li>                <a                  href="https://world wide web.w3docs.com/tool/">Tools</a>                <ul>                <li>                <a                  href="https://www.w3docs.com/tools/html-encoder/">HTML ENCODER/DECODER</a>                </li>                <li>                <a                  href="https://www.w3docs.com/css3-maker/border-radius">CSS MAKER</a>                </li>                <li>                <a                  href="https://world wide web.w3docs.com/tools/countersign-generator">PASSWORD GENERATOR</a>                </li>                <li>                <a                  href="https://www.w3docs.com/tools/image-base64">Base of operations 64</a>                </li>                <li>                <a                  href="https://www.w3docs.com/tools/code-unequal/">Lawmaking DIFF</a>                </li>                </ul>                </li>                <li>                <a                  href="https://www.w3docs.com/cord-functions/">String Functions</a>                <ul>                <li>                <a                  href="https://www.w3docs.com/tools/cord-revers">Cord Contrary</a>                </li>                <li>                <a                  href="https://world wide web.w3docs.com/tools/string-discussion-count">String Discussion COUNT</a>                </li>                <li>                <a                  href="https://www.w3docs.com/tools/cord-remove-empty-lines">EMPTY LINES REMOVER</a>                </li>                </ul>                </li>                </ul>                </nav>                </body>                </html>

The <nav> tag supports the Global Attributes and the Event Attributes.

How to style <nav> tag?

Common properties to alter the visual weight/emphasis/size of text in <nav> tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family belongings specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalization.
CSS text-decoration property specifies the ornament added to text, and is a shorthand property for text-decoration-line, text-ornament-color, text-decoration-style.

Coloring text in <nav> tag:

CSS color property describes the color of the text content and text decorations.
CSS background-color property sets the background colour of an element.

Text layout styles for <nav> tag:

CSS text-indent property specifies the indentation of the starting time line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should exist signalled to the user.
CSS white-infinite property specifies how white-space within an element is handled.
CSS word-break holding specifies where the lines should be cleaved.

Other properties worth looking at for <nav> tag:

CSS text-shadow property adds shadow to text.
CSS text-marshal-final property sets the alignment of the terminal line of the text.
CSS line-meridian property specifies the height of a line.
CSS alphabetic character-spacing property defines the spaces betwixt messages/characters in a text.
CSS discussion-spacing property sets the spacing between words.