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.
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.
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.
Thanks for your thorough replies. This one and the many others that I’ve found very useful and clarifying during my fist week with Codecademy. 
well explained, i was thinking about the Div, Section , Article… because these things when comes together may be complicated to distinguish between them. Thank you.
Even though I didn’t ask the question…
Thanks so much. That made a lot of sense.
Thank you so much for your explanation…
so confused about
Hey, @jacobabrams213337208 welcome to the forums.
Basically what Steven is saying is just is the section tag to group-related data. For example, you were writing an article about the history of programming and you were going to put it on a site. You would use the section tag to group together the early days and huge innovations to programing like javascript.
You can use JS in web development for a lot of things. Its skill level is way past HTML thought, it will come with time.
Hi All,
Can we use id tags in sections ? I am guessing this would make styling easier for css when we have multiple sections ?
Yup, you can! 
, as far as I know you can give any element an id attribute, which as you said can make styling a lot easier:
<section id="gallery">
// Stuff here
</section>One would venture that this is not a be-all and end-all. Global ids have a purpose, and styling is not at the top of that list. Overuse only indicates the author’s lack of awareness of the DOM, and inheritance. It can seem to make styling easier, but in the end the style sheet and markup become cumbersome and difficult to maintain.
class is better suited, and document tree traversal is the ideal.
Just to add, you would want to change the <h1> tags to <h2>, and the existing <h2> tags to <h3>. It is best practice to only use one <h1> tag per page. But otherwise an excellent way to showcase the use of <section> and <article>.
Sir, can you please explain this in detail? I am quite confused.
Can you give a short example, please?
That was poetic, thank you very much for the insight.