FAQ: Semantic HTML - Article and Section

This community-built FAQ covers the “Article and Section” exercise from the lesson “Semantic HTML”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to HTML

FAQs on the exercise Article and Section

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

3 posts were split to a new topic: Why would a section element be placed inside an article element?

I have no question about the html in this lesson, but I needed to correct the mistake about the Cricket match example.
There are no Cricket games that go for 15 days, the longest type of game is Test Cricket and usually goes for 5 days. The longest Test Cricket game in history (between England and South Africa) went for 9 days.

3 Likes

8 posts were split to a new topic: How should multiple sections be used?

Looking at the example provided in the project 4/9 in “Learning Semantic HTML”:

Fun Facts About Cricket

A single match of cricket can last up to 15 days.

why is the h2 title “Fun Facts About Crickets” outside the article tag, when in the actual project and from hear on after titles are located inside the article tag??? It is tripping me out lol.

3 Likes

hii, please can i have more than one section on a page and if yes, how do i differntiate it particularly in css, would i have to give it an id or class{i m not through with css though}

Of course you can, and yes you’d style them using a specific class.

HTML

<section class="favorite-cats">
  // Everything about your favorite cats
</section>
<section class="favorite-dogs">
  // Everything about your favorite dogs
</section>

CSS

.favorite-cats {
  background-color: blue;
}
.favorite-dogs {
  background-color: yellow;
}

If anyone still confused with the diffences between article and section tag, I invite you to visit this topic:

Cheers!

The reality is that there is no restriction where we use section. ARTICLE is more semantically specific, whereas section is generic. An article can be one of any number of topics inside a section, and may contain any number of sections relating to the subject matter.

<main>
  <h1>Page Title</h1>
  <section>
    <h2>Section Title</h2>
    <article>
      <h3>Article Title</h3>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
    </article>
    <article>
      <h3>Article Title</h3>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
    </article>
    <article>
      <h3>Article Title</h3>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
      <section>
        <h4>Section Title</h4>
        <p>Topic thesis</p>
        <p>Topic statements</p>
        <p>Topic summary</p>
      </section>
    </article>
  </section>
</main>

It all screams of outlining which is the basic structure of the document.

2 Likes

should I put all of my videos inside article tags since they make sense on their own?

It follows there might be several articles, each with their own video. It doesn’t follow there would be more than one video on that page (unless you’re Facebook). If the page contains several articles, each with a video, then the articles should link to the video. That way the page can load without having to bring them down, too. Use thumbnails.

1 Like

I’m still confused byu why some of these elements are closed and some are not. In this lesson, we were told to close the , but not close the . Is this true all the time, or are we supposed to close both?

Make and keep a list of all the elements that are so called, void elements. They are the ones that have no enclosed text node.

<p>text node</p>

<section>
  <!-- child elements -->
</section>

The above are not void elements since they are containers.

There are not that many void elements, though. Most are containers of one sort or another. Keep in mind that HTML is text, that’s how we can occupy the text node of an element with other HTML elements.

The void elements most common are,

<br>
<hr>
<img>
<input>
<link>
<meta>

among a few others.

HTML syntax - HTML5

Can section element be use to encapsulate navigational links containing
header tag and nav tag?

I was also confused about this - I assumed the article tag would only include the p element within it, not the h2 element as well. This may be a mistake by Codecademy?

Not a mistake. Look up the ARTICLE element for HTML5 and go over the specs. It is a full fledged sectioning element that can have pretty much any child elements that the BODY can have.

<article>: The Article Contents element - HTML: HyperText Markup Language | MDN

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

1 Like