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

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

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!

Why would anyone place the section element inside the article element?

Now the question becomes, “Why not?” They are both sectioning elements, and it would seem natural for an article to have multiple sections. Sections are akin to an outline within a document or article.

2 Likes

Thank you very much. Now I see the point.

On the other hand, I have read some of your replies (to other newbie users like me) that have been really helpful to me. Thanks for that, too.

2 Likes

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.

1 Like

So Section Tag is to enclose h1, h2, h3, etc with paragraphs that are related to the same theme.

So what about media tags or other types of HTML tags, works fine with the Section Tag?

When I know I need to use Div instead of Section?

Great Day.

All media tags work well with section. I’d recommend using section when ever you (like you stated) when you have a section. So put all your images, text, and videos related to that one section inside of the section tag. Then, inside the section, use things like aside, main, nav, and header. All these segments can be reused as long as they aren’t a part of the main html body.

I use div for sectioning off parts of the web page that don’t really have a name. So I’ll put it around a square block that I’m going to edit with JavaScript because the only reason I’m using it is to edit it with the id name.

That’s just my opinion though, honestly, it’s mostly just the way you decide to do it. I feel that everyone has a different way to incorporate semantic and the div tag, but I feel that is good practice to use semantic html tags as much as you can.

1 Like

What I understood I need to join all the images, text and videos that are related to a topic, for example, let’s say Cats, all my images about cats, statements in form of text about why the cats are mammals, videos about cats playing with wool go into a <section> tag because is the same theme that’s right?

What you mean about this is: "<section> can not be interchangeable with <body> and can not have all the space of <body>?

For Example:

<body>
   <section>
      this is wrong because use all the space of the body
   </sectio>
</body>

This above is right?

Two part answer. Yes, but only if you are talking about multiple animals. So lets say you’re talking about cats and everything about cats. That would be one section. Then you would have another about dogs, another about giraffes, and another about whatever.

But if you’re just talking about cats, I’d separate all your info into different sections. So

<section>
Cats cats cats
</section>
<section>
dogs dogs dogs
</section>
etc. etc. etc.

OR (like I said, the other option)

<section>
Cat brains
</section>
<section>
Cat Heads
</section>
<section>
Cat Size
</section>

That’s what I would do for this.

Yeah, although that’s technically ok, its bad practice.

1 Like

So going off of your example, the html will be split into sections cats and dogs. How would you place articles? do you section off into cat food, health, training like sections of sections? Also, lets say you only had text for the chapters. no images, audio etc. Wouldnt putting articles inside the section be redundant if it only has paragraph elements?

So ok, if you had a page which talked about cats and dogs and it contains about each different animal, I would do something like this:

<section>
    <h1>Cats cats cats</h1>
       <article>
         <h2>cats?</h2>
            <p>Cats > Dogs</p>
       </article>
       <article>
         <h2>cats.</h2>
           <p>Cats eat fish</p>
       </article>
</section>
<section>
    <h1>Dogs dogs dogs</h1>
    <article>
         <h2>dogs?</h2>
         <p>Dogs > Cats</p>
    </article>
    <article>
         <h2>dogs.</h2>
         <p>Dogs eat meat</p>
     </article>
</section>

At least, this how I would build this personally.

Well, we would assume that you would style the different articles, and adding headers and other things to make it different. So hopefully it would just be two articles right next to each other in plain text.

We must bear in mind that sectioning elements are essentially DIVs in sheep’s clothing. Some have default styles like lists and blockquotes, definition lists and paragraphs, etc. SECTION and ARTICLE are nothing more that DIV with a different name. Toss in ASIDE, MAIN, HEADER, FOOTER, etc. and we conclude the names mean something to both user agent and document readers (both human and assistive technology).

The purpose of markup is to document the document. In the past we would use generic containers (eg. DIV) to house the document content and give them IDs or CLASSes to distinguish their role.

id="header"
id="main"
id="footer"

class="article"
class="section"

What’s more, in the past it was fairly assumed that more than one H1 in a page was faux pas. HTML5 opened the flood gates on how many topics could be covered in a single document bringing it more in line with multimedia (as in, magazines) in presentation.

The new paradigm permits multiple unique topics in one page. This means one H1 for each topic. Since it never makes sense to have more than one H1 in a topic, we have sectioning elements to contain them.

<section>
  <h1>topic heading</h1>
</section>
<section>
  <h1>topic heading</h1>
</section>
<section>
  <h1>topic heading</h1>
</section>

We are taught in grade school the importance of an outline when writing an essay. A web document is no less dependent upon the same concept when structuring one. Sectioning elements are the markup we employee to build the document within the given outline.

SEs understand document outlines, and give importance to a page if said outline is discernible.

Bottom line, if one has never written essays, then writing a web document is unbridled. HTML being so forgiving, who knows what kind of GIGO will get past it? A well formed document passes the scrutiny of validation and accessibility grading and (one would hope) can be trusted to render in all devices.

There is no set pattern to follow that will optimize a page. It’s our document, and we have an idea of how we want it to present. Now it’s up to us to create that document outline, and then fill in the pieces. Once the markup is written and validated, then we can move on to presentation. It should be a breeze if we have a well formed document.

Finally, a SECTION can have multiple ARTICLEs, and vice-versa. We are the architects, the publishers. We define the roles.