Am I using <sections> the right way?


#1

Dear staff and community,
Thanks for taking your time to check out my first ever post on this board.

I just completed my first ever webpage and decided to look into structuring HTML, the right way using sections instead of divs. This is where I got confused just a bit about when to use divs and when to use sections, Help! :wink:

intro to html


#2

We cannot really see how you are using the <section> element so find ourselves at a roadblock. Please bring more light to the situation with a code example.


#3

My apologies MTF,

Iโ€™m looking for my code but can not seem to find it since I continued with the course.
I am also struggling with uploading code examples to the board in general. I tried this the first time around by just copy pasting my code from the exercise but it turned into the webpage I was creating.
For now I think it is best for me to close this topic but thank you for your time and I am sure I will come across divs and sections again and Iโ€™ll be sure to ask for help then!:wink:


#4

Never mind MTF I found it!:

<body>
  <h1>The Brown Bear</h1>
  <section id="introduction">
    <section>
      <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
    </section>
    <section>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    </section>
    <section>
    <h3>Features</h3>
    <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
    </section>
</section>
  <section id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
    </ol>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </section>
  <section id="media">
    <h2>Media</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
    <video src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>
      Video not supported
    
    </video>
      
  </section>
</body>

#5

In the old days we used to write,

<div class="section">

until the WG came along with <section>.

Think along those lines and donโ€™t complicate things. We are only outlining documents, here. Nothing more.