Can anyone explain what do the <nav>, <ul> and <li> tags do in the case of this?

Tell us what’s happening:
Question in title. I really wonder what do those tags in title do in this code tho
Your code so far


<style>
header {
  background-color: hsl(180, 90%, 35%);
  color: #FFFFFF;
}

nav {

}

h1 {
  text-indent: 10px;
  padding-top: 10px;
}

nav ul {
  margin: 0px;
  padding: 5px 0px 5px 30px;
}

nav li {
  display: inline;
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: inherit;
}
</style>

<header>
<h1>Cooking with FCC!</h1>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Classes</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
</header>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Challenge: Adjust the Tone of a Color

Link to the challenge:

Hi.
<ul> and <li> are tags covered in the “basic HTML andd HTML5” section of Responsive Web Design.
<ul> forms the wrapper for an unordered list, and you can add bullet points inside with <li> see here

<nav> is covered in the “Applied Accessibility” section of Responsive Web Design
<nav> is a semantic element that wraps around a collection of <a>, how it is used is up to the discretion of the coder. It could contain a collection of internal links to various sections, or external links to other relevant pages. There can be more than one <nav> in one page as well. See here

in this specific instance:

  • nav has no styles in CSS.
  • nav ul (the ul elements that are descendents of nav elements) has its margin/padding set
  • nav li (the li elements that are descendents of nav elements) has its display changed from list-item to inline so it will be side by side with its sibling li, also removing the bullet points, and the added margin-right ensures space between the siblings.

Uh… I knew those already, I’m just wondering about the navigation bar, lists and stuff like that in the code. (See the preview in the challenge? I’m asking about the nav bar)

apologies, ive edited my reply. you can also right click, inspect to change the styles and see their effect in the browser.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.