article<\/strong><\/p>\n\n\n\nThe <article> element is even more specific than a <section>. It is also applied to a section of content that is semantically related, and should also have a heading. However, this section of content should additionally be \u201cself-contained\u201d. This means that the contents of an <article> should be able to be isolated from the rest of the page and still be meaningful.<\/p>\n\n\n\n
One common purpose for an <article> is in marking content for syndication. For example, marking a blog post.<\/p>\n\n\n\n
<article class=\u201dblog\u201d><\/p>\n\n\n\n
<h1>Blog Detail<\/h1><\/p>\n\n\n\n
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit\u2026<\/p><\/p>\n\n\n\n
<p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam\u2026<\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
div or article or section?<\/strong><\/p>\n\n\n\nSo which should you use and when?<\/p>\n\n\n\n
If the content within the element is not semantically related<\/strong>, then use a <div>. If the semantically related content is also able to be self-contained<\/strong>, then use an <article>. Otherwise, use a <section>.<\/p>\n\n\n\nCombining the Elements<\/strong><\/h2>\n\n\n\nWhere things can get a bit complicated is when we try to combine the different elements together.<\/p>\n\n\n\n
Articles within an Article<\/strong><\/h3>\n\n\n\nWe can nest <article> elements within each other. Although still self-contained, inner <article>s are assumed to be related to the contents of the outer <article>.<\/p>\n\n\n\n
For example, if there is a long excerpt within a blog post that is written by another person, it could be contained in its own <article>.<\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h1>Article Title<\/h1><\/p>\n\n\n\n
<p class=\u201dauthor\u201d>John Smith<\/p><\/p>\n\n\n\n
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2>Another Article<\/h2><\/p>\n\n\n\n
<p class=\u201dauthor\u201d>Jane Doe<\/p><\/p>\n\n\n\n
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
Articles within a Section<\/strong><\/h3>\n\n\n\nWe can also have multiple <article> elements within a <section> element. A good example of this is a blog homepage showing the latest posts. The container for all the latest posts would be a <section>, whereas each individual post excerpt could be an <article>.<\/p>\n\n\n\n
<section><\/p>\n\n\n\n
<h1>Latest Blog Posts<\/h1><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2>Blog Post Title<\/h2><\/p>\n\n\n\n
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2>Blog Post Title<\/h2><\/p>\n\n\n\n
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/section><\/p>\n\n\n\n
Sections within an Article<\/strong><\/h3>\n\n\n\nEach individual <article> may also have <section> elements within it. For example, this particular post could be written like this \u2013<\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h1>Sectioning Content in HTML5 \u2013 div or section or article?<\/h1><\/p>\n\n\n\n
<section><\/p>\n\n\n\n
<h2>Overview of the Elements<\/h2><\/p>\n\n\n\n
<section><\/p>\n\n\n\n
<h3>div<\/h3><\/p>\n\n\n\n
<p>The div element is the most general purpose element.<\/p><\/p>\n\n\n\n
<\/section><\/p>\n\n\n\n
<section><\/p>\n\n\n\n
<h3>section<\/h3><\/p>\n\n\n\n
<p>The section element is slightly more specific that a div<\/p><\/p>\n\n\n\n
<\/section><\/p>\n\n\n\n
<section><\/p>\n\n\n\n
<h3>article<\/h3><\/p>\n\n\n\n
<p>The article element is even more specific than a section<\/p><\/p>\n\n\n\n
<\/section><\/p>\n\n\n\n
<\/section><\/p>\n\n\n\n
<section><\/p>\n\n\n\n
<h2>div or section or article?<\/h2><\/p>\n\n\n\n
<!\u2013 \u2026 \u2013><\/p>\n\n\n\n
<\/section><\/p>\n\n\n\n
<section><\/p>\n\n\n\n
<h2>Combining the Elements<\/h2><\/p>\n\n\n\n
<!\u2013 \u2026 \u2013><\/p>\n\n\n\n
<\/section><\/p>\n\n\n\n
<\/article>
HTML5 was a stepping stone to follow the usage of semantic code. It became a […]<\/p>\n","protected":false},"author":2,"featured_media":171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-78","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"_links":{"self":[{"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/posts\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":3,"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions\/172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/media\/171"}],"wp:attachment":[{"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.swaragh.com\/blog\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"html5](\"https:\/\/lh5.googleusercontent.com\/TX3_VeYYuLPbeML5m9AopFLf0qoWTuBjbw9OpwlmGM6c7pKUEPXIVIhv0YWZaUUA8dNUJIe6oQeYLH2atFJ2UatdK_c7h43pk7-0XK192lhnaBEdMSi8MZUrR0UEeUX4roIiK6v0\")
<\/figure>\n\n\n\n