HTML semantics: sections & articles

HTML semantics: sections & articles


There are two elements inside of HTML that
are a little bit difficult to understand, and those are the section element and the
article element. The semantics for them are wishy-washy. But I want to sort of help you understand. So let’s say we have a website here, we
have our main. Then within that, let’s say this website
is selling products. So we have Product 1, maybe that’s an h2. And maybe it has a paragraph here. Let’s put a short paragraph like that. And then maybe we have another product. So this is Product 2. So here’s our sort of e-commerce website
or whatever. Since these two products can stand alone
in the sense that you could take these two products from this website and put
them on another website that sells similar products, and they would still make sense,
they can actually be wrapped in a article. [BLANK_AUDIO] So the article element is used to denote a
chunk of content that can stand alone by itself. A chunk of content that could be removed
from this website and still make sense. The section element is slightly different. It’s for grouping things together. So it can go either inside of an article,
or outside of an article. Let’s say we, let’s adjust our website a
little bit, I’ll put an h1 here. [BLANK_AUDIO] Let’s say, we have an h2 for Big Products. And then we have another h2 down here for
Small Products. [BLANK_AUDIO]. So these should be changed now to h3’s. Just to be appropriate here. So I’m going to copy and paste these here, so we now have a total
of four products on our website. We have big products and we have small
products. So, if we’re thinking about the section,
then, a section can be used to group things
together thematically. So since these are all big products here,
these two, I could group them with a section like
that. Make sure to watch my indentation. And I could group these into another
section. [BLANK_AUDIO] So now I have articles that represent
unique pieces of content that could be taken off this
website and put on another one. So, like, a product or a blog post or an
email message, something like that. And then we have a section element that
can be used to sort of group thematically related things
together. Now, the confusing thing about this is
that right now I’ve got section outside of article, but I could
also put a section inside of an article. So let’s do another example here. Let’s say I create an article like this,
and this is maybe a recipe. So, let’s call it Bean Soup. So here’s my recipe here. A recipe can stand alone by itself. But a recipe could also have different
components to it. So it could have the ingredients. So that could go into a section. [BLANK_AUDIO] And then we could also have the
directions. [BLANK_AUDIO]. So the sections by themselves cannot stand
alone, they’re just denoting thematically similar
things. But the article all together can stand
alone by itself. The important thing when you’re using an
article in a section is they should have a, a heading immediately inside them. So if you’re not planning on putting a
heading immediately inside it, then an article in a section are probably
not appropriate for you. And one more thing about articles and
sections, so what I’m going to show you now applies to both of them, is,
they can also have headers and footers. So, we looked at header and footer before
and we looked at how they could be used to denote the header and footer of your
website, but you can also have a header and a footer
for your article, or, your section. [BLANK_AUDIO] And you can even have a main in here, too. So, the header, let’s say this is a blog
post. The header could be the name of the blog
post, like that. And then the footer would be something
like the author of the post, and maybe the publish time. [BLANK_AUDIO] And then inside of the main, we’d have all
of the sort of text content. Whoop, I cannot type. [BLANK_AUDIO] So inside of here, we’d have all the
paragraphs for the text of the content. So we have a header here inside of our
section. We have a main inside of our section. And we have a footer inside of our
section. So previously, the, I mentioned that the header was denoting
the header of our website. But really the header is the header of a
piece of content. Main is the main piece of content. Footer is the footer part of the content,
like a secondary information. When I’m speaking about secondary
information, there’s one more element that I’m going to throw at you in this video,
and that’s the aside element. [BLANK_AUDIO] Aside is used to denote extra information. So it could be used for related links, or a sidebar, or a pull quote, something like
that. That’s really what the aside is for. So the aside will be ref, will associate
itself either with the neighboring main or the section that
it’s inside or the neighboring article. So there’s lots of different ways we can
organize our content using sections and articles and asides and mains and headers
and footers. And it’s all dependent upon what your
content is and what the purpose of it is. And how you want it to be organized.

20 Comments

  1. I don't get why you need a section or article though? Like whats the purpose in the first place… What happens if you don't have them?

  2. Thank you for your video and its really helpful for the beginners like me to learn and understand the section and article concepts much deeper.

  3. At 4:54 you said that you can have a main in the section but according to w3schools.com(https://www.w3schools.com/tags/tag_main.asp) it says "note:There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element."

  4. Finally I understand article and section. Thank you! But contact or registration form would it be aside element? Or could I put them in div?

  5. Thank your for the great lectures. One question, at 5:00 should be better so use the <article> element instead of the <section> element for a blog post? as the blog post can stand alone by itself? 🙂

  6. The best! I tried to understand the differences between these two tags a long time and with your video that happens. I got it now )

Leave a Reply

Your email address will not be published.


*