Skip to main content
Practice

Configuring Menu Items

The <li> tag is used to compose each item in a list.

Configuring Menu Items
<ul class="nav-menu">
  <li><a class="nav-link" href="#about">About</a></li>
  <li><a class="nav-link" href="#hobbies">Hobbies</a></li>
  <li><a class="nav-link" href="#memories">Memories</a></li>
</ul>

List items are composed within list tags such as <ul> or <ol> by using the <li> tag.

Inside the menu list, menu items are configured.

Menu items are created using the <li> tag.

And within each <li>-created menu item, a link is set up using the <a> tag.

The <a> tag is used to set up links, which can navigate to external addresses or to different positions within the same page.

Here, the goal is to navigate to different sections within the same page.

To navigate to a specific position within the internal page, input # in the href attribute, followed by the ID of the element you want to navigate to.

In future code, elements with IDs such as #about, #hobbies, and #memories will be created, to which navigation will occur.

#about will navigate to the About section, #hobbies will navigate to the Hobbies section, and #memories will navigate to the Memories section.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.