New York City Blog Project: Correct html?

Hello, everyone! Having a slightly difficult time grasping some semantics concepts.

When I run the code for the project everything appears decent, but I’m not sure if the html itself is correct.
For example, I’m not confident about the nav area. I was hoping someone could give it a look and see if there are any errors.

Also, I didn’t know if there was completed version within the course that we can compare our results too?
(so I don’t have to ask here…) :upside_down_face:

Link to the project: https://www.codecademy.com/courses/learn-html/projects/semantic-html-nyc-blog

My HTML:

<html>
   <head>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>   
     <nav>
       <ul>
         <li>
           <a href=""></a>
          </li>
         <li>Blog</li>
         <li>Media</li>
         <li>About</li>
       </ul>
     </nav>
     <header>
       <h1>New York City</h1>
     </header>
     <main>
       <section id="blog">
         <article>
           <p>New York City is made up of five boroughs which include Queens, Manhattan, Brooklyn, the Bronx, and Staten Island. The city is the home of approximately 8 million people. In 1876, France gifted the City of New York what is known as the Statue of Liberty, which is currently located on Ellis Island commonly visited by tourists. However, it took 10 years to assemble and therefore wasn’t unveiled until 1886. Another tourist destination is Times Square. Times Square is commonly known for the big buildings, Broadway shows, and bright neon signs. This famous location was named after The New York Times after the Times moved to that location. Prior to that, it was named Longacre Square. New York City is also known for its bridges that connect the boroughs and allow ease of transportation.</p>
         </article>
       </section>
       <figure>
         <img src="https://content.codecademy.com/courses/Semantic%20HTML/statue-of-liberty.jpeg">
         <figcaption>This is the Statue of Liberty, a popular tourist attraction located on Ellis Island.</figcaption>
       </figure>
       <aside>
         <p>New York City is very popular for the variety of great food it has. Some of the top food items in NYC include:</p>
         <ol>
           <li>Pizza</li>
           <li>Bagels</li>
           <li>Burgers and Sandwiches</li>
           <li>Ramen</li>
           <li>Tacos</li>
           <li>Pasta</li>
           <li>Desserts</li>
         </ol>
       </aside>
      <section id="media">
        <article>
          <h2>The Scenery in NYC</h2>
          <p>While the view in the city is beautiful, the sounds are not as lovely. Below you'll see an example of the view and the sounds you'll deal with in NYC on a daily basis.</p>
        </article>
        <video src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline-timelapse.mp4" controls>
        </video>
        <embed src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline.jpeg">
        <audio controls>
          <source src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-sounds.mov">
        </audio>
        </section>
       </main>
       <footer id="about">
         <p>Posted by: Chae</p>
         <p>xoxo@gmail.com</p>
       </footer>
     </body>
</html

Well done on the project! Semantic wise your <nav> looks correct. <nav> is the semantic tag for a navigation section so that is pretty straight forward, and you already have your <ul> with the different sections of your web page listed.

The one thing that seems off is your use of anchor tags, <a>, to connect each title in the navigation section to a portion of the web page. Currently you only have one, on line 9, and it is not being used as one of the titles:

<li>
  <a href=""></a>
</li>

I don’t recall this project having an example…

2 Likes

Thank you very much! I should have been more specific, I meant the exact section you pointed out.
So, if I’m understanding you correctly, there should be an anchor tag for each list element (Blog, Media, and About)?

1 Like

Yes! You may notice there are three elements with an id matching on of these list elements. You can link to each of these, and clicking the link will scroll the page to that element.

1 Like

Got it, thank you for helping!

1 Like