Why wouldn't you nest <figure> and <aside> in a <section>

Hey everybody!

Currently I am working on the NYC-NewsBlog Project semantic HTML Module:
https://www.codecademy.com/courses/learn-html/projects/semantic-html-nyc-blog

In Step 6/17 we are “adding media to enhance our blog”. We use a figure-Tag to insert a picture of the Staue of Liberty and a figcaption.

      <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>

I don’t understand why we end the Blog-section before the figure… Can someone explain?

Later in the same excercise we emed other media - a video - within the section. I can’t wrap my head around when to do what :smiley:

<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>
       </section>

Would be great if anybody could enlighten me :smiley:

Thanks guys!

Best
Felix

The <section> element is used as a container for a “section” of your page and not as a specific container for other elements. Because of this its contents are decided by the programmer as deemed fit.
In other words it is not a question of when to put media in a <section> but whether or not the medias content fit in with the content of a particular <section>.


I am guessing whoever wrote the lesson felt that, in the first case, the <section> element is used to hold the text based blog, and should be a sepperate section from the rest of the page.

But in the second case, <section> has a class of "media" indicating it is supposed to hold media in general, which could include pictures, video, text, or audio.


Here is the Modzilla Web Documentation of <section>:

1 Like

Hey 8-bit-gaming,

thanks for your reply, that helped me understand the section-tag!

Have a good one!
Felix

1 Like