Section vs Article HTML5

Question

I have a page made up of various  sections  like videos  a newsfeed etc   I am a bit confused how to represent these with HTML5  Currently I have them as HTML5  lt section gt s  but on further inspection it looks they the more correct tag would be  lt article gt   Could anyone shed some light on this for me    None of these things are blog posts or  documents  in the true sense of the word so it s kind of hard to see which element to apply   Cheers  EDIT  I have opted to use the article tag since it seems to be a container tag for unrelated elements which I guess my  sections  are  The actual tagname article however seems to be rather misleading and although they are saying HTML5 has been developed with greater consideration for web applications  I find a lot of the tags to be more blog-centric   document based   Anyway thanks for your answers it appears to be fairly subjective

User · Answer

I like to stick with the standard meaning of the words used: An article would apply to, well, articles. I would define blog posts, documents, and news articles as articles. Sections on the other hand, would refer to layout/ux items: sidebar, header, footer would be sections. However this is all my own personal interpretation -- as you pointed out, the specification for these elements are not well defined.

Supporting this, the w3c defines an article element as a section of content that can independently stand on its own. A blog post could stand on it's own as a valuable and consumable item of content. However, a header would not.

Here is an interesting article about one mans madness in trying to differenciate between the two new elements. The basic point of the article, that I also feel is correct, is to try and use what ever element you feel best actually represents what it contains.

What’s more problematic is that article and section are so very similar. All that separates them is the word “self-contained”. Deciding which element to use would be easy if there were some hard and fast rules. Instead, it’s a matter of interpretation. You can have multiple articles within a section, you can have multiple sections within and article, you can nest sections within sections and articles within sections. It’s up to you to decide which element is the most semantically appropriate in any given situation.

Here is a very good answer to the same question here on SO

User · Answer

Sounds like you should wrap each of the  sections   as you call them  in  lt article gt  tags and entries in the article in  lt section gt  tags   The HTML5 spec says  Section       The section element represents a generic section of a document or   application  A section  in this context  is a thematic grouping of   content  typically with a heading                  Examples of sections would be chapters  the various tabbed pages in     a tabbed dialog box  or the numbered sections of a thesis  A Web     site s home page could be split into sections for an introduction      news items  and contact information          Note  Authors are encouraged to use the article element instead of the   section element when it would make sense to syndicate the contents of   the element    And for Article     The article element represents a self-contained composition in a   document  page  application  or site and that is  in principle    independently distributable or reusable  e g  in syndication  This   could be a forum post  a magazine or newspaper article  a blog entry    a user-submitted comment  an interactive widget or gadget  or any   other independent item of content    I think what you call  sections  in the OP fit the definition of article as I can see them being independently distributable or reusable   Update  Some minor text changes for article in the latest editors draft for HTML 5 1  changes in italic       The article element represents a complete  or self-contained    composition in a document  page  application  or site and that is  in   principle  independently distributable or reusable  e g  in   syndication  This could be a forum post  a magazine or newspaper   article  a blog entry  a user-submitted comment  an interactive widget   or gadget  or any other independent item of content    Also  discussion on the Public HTML mailing list about article in January and February of 2013

User · Answer

Article and Section are both semantic elements of HTML5  Section is block level generic section  of a webpage  but relevant to our webpage content  Article is also block level  but  article refers to an individual blog post  a comment  of a webpage  Both Article and Section should include an heading elements h2-h6  For a blog post  use following syntax for article and section   lt article role  quot main quot  gt            lt h1 gt Heading 1 lt  h1 gt            lt p gt Article Description lt  p gt            lt section id  quot sec1 quot  gt                   lt h2 gt Section Heading lt  h2 gt                   lt p gt Section Description lt  p gt            lt  section gt            lt section id  quot sec2 quot  gt                   lt h2 gt Section Heading lt  h2 gt                   lt p gt Section Description lt  p gt            lt  section gt   lt  article gt

User · Answer

In the W3 wiki page about structuring HTML5  it says       lt section gt   Used to either group different articles into different purposes or   subjects  or to define the different sections of a single article    And then displays an image that I cleaned up     It also describes how to use the  lt article gt  tag  from same W3 link above        lt article gt  is related to  lt section gt   but is distinctly different    Whereas  lt section gt  is for grouping distinct sections of content or   functionality   lt article gt  is for containing related individual   standalone pieces of content  such as individual blog posts  videos    images or news items  Think of it this way - if you have a number of   items of content  each of which would be suitable for reading on their   own  and would make sense to syndicate as separate items in an RSS   feed  then  lt article gt  is suitable for marking them up       In our example   lt section id  main  gt  contains blog entries  Each blog   entry would be suitable for syndicating as an item in an RSS feed  and   would make sense when read on its own  out of context  therefore    lt article gt  is perfect for them     lt section id  main  gt       lt article gt         lt  -- first blog post -- gt       lt  article gt        lt article gt         lt  -- second blog post  -- gt       lt  article gt        lt article gt         lt  -- third blog post -- gt       lt  article gt   lt  section gt       Simple huh  Be aware though that you can also nest sections inside   articles  where it makes sense to do so  For example  if each one of   these blog posts has a consistent structure of distinct sections  then   you could put sections inside your articles as well  It could look   something like this     lt article gt     lt section id  introduction  gt     lt  section gt      lt section id  content  gt     lt  section gt      lt section id  summary  gt     lt  section gt   lt  article gt

User · Answer

also  for syndicated content  Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element

User · Answer

The flowchart below can be of help when choosing one of the various semantic HTML5 elements

User · Answer

Section   Use this for defining a section of your layout  It could be mid left right  etc   This has a meaning of connection with some other element  put simply  it s DEPENDENT    Article   Use this where you have independent content which make sense on its own   Article has its own complete meaning

User · Answer

My interpretation is  I think of YouTube it has a comment-section  and inside the comment-section there are multiple articles  in this case comments    So a section is like a div-container that holds articles

User · Answer

I d use  lt article gt  for a text block that is totally unrelated to the other blocks on the page   lt section gt   on the other hand  would be a divider to separate a document which have are related to each other   Now  i m not sure what you have in your videos  newsfeed etc  but here s an example  there s no REAL right or wrong  just a guideline of how I use these tags     lt article gt       lt h1 gt People lt  h1 gt       lt p gt text about people lt  p gt       lt section gt           lt h1 gt fat people lt  h1 gt           lt p gt text about fat people lt  p gt       lt  section gt       lt section gt           lt h1 gt skinny people lt  p gt           lt p gt text about skinny people lt  p gt       lt  section gt   lt  article gt   lt article gt       lt h1 gt Cars lt  h1 gt       lt p gt text about cars lt  p gt       lt section gt           lt h1 gt Fast Cars lt  h1 gt           lt p gt text about fast cars lt  p gt       lt  section gt   lt  article gt    As you can see  the sections are still relevant to each other  but as long as they re inside a block that groups them  Sections DONT have to be inside articles  They can be in the body of a document  but i use sections in the body  when the whole document is one article    e g    lt body gt       lt h1 gt Cars lt  h1 gt       lt p gt text about cars lt  p gt       lt section gt           lt h1 gt Fast Cars lt  h1 gt           lt p gt text about fast cars lt  p gt       lt  section gt   lt  body gt    Hope this makes sense

User · Answer

A section is basically a wrapper for h1  or other h tags  and the content that corresponds to this  An article is essentially a document within your document that is repeated or paginated   like each blog post on your document can be an article  or each comment on your document can be an article

[html] Section vs Article HTML5

Examples related to html

Examples related to markup