Article element: Difference between revisions
Comatmebro (talk | contribs) removed leftover syntax |
Andy Dingley (talk | contribs) rv unconstructive edit Undid revision 1184686965 by 91.186.236.140 (talk) |
||
(45 intermediate revisions by 25 users not shown) | |||
Line 1: | Line 1: | ||
{{HTML}} |
|||
<!--- Don't mess with this line! --->{{Unreviewed}} |
|||
⚫ | |||
==Features and usage== |
|||
== HTML5 Article == |
|||
⚫ | The [[HTML5]] {{tag|article|o}} element represents a complete composition in a [[web page]] or [[web application]] that is 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.<ref>{{cite web|url=http://www.w3.org/TR/html5/sections.html#the-article-element |title=HTML5 article element - W3C |publisher=W3.org |date= |accessdate=2014-05-08}}</ref> |
||
⚫ | |||
==<article> element== |
|||
⚫ | The [[HTML5]] |
||
=== |
===Examples=== |
||
⚫ | |||
<ref>http://caniuse.com/#search=article</ref> |
|||
<syntaxhighlight lang="html"> |
|||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
===<article> element examples=== |
|||
⚫ | |||
<source lang="html5"> |
|||
<article> |
<article> |
||
<h2>Insert Title Here</h2> |
<h2>Insert Title Here</h2> |
||
<p>Insert a paragraph of text here</p> |
<p>Insert a paragraph of text here</p> |
||
</article> |
</article> |
||
</syntaxhighlight> |
|||
</source> |
|||
Forum entries and comments are typically implemented by nesting |
Forum entries and comments are typically implemented by nesting {{tag|article|o}} tags: |
||
< |
<syntaxhighlight lang="html"> |
||
<article> |
<article> |
||
<header> |
<header> |
||
Line 54: | Line 38: | ||
</article> |
</article> |
||
</syntaxhighlight> |
|||
</source> |
|||
===Attributes |
===Attributes=== |
||
The |
The {{tag|article|o}} element only includes the global [[HTML attribute]]s such as ''contenteditable'', ''id'', and ''title.''<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article|title=The Article Contents element|website=MDN Web Docs|language=en-US|access-date=2018-07-09}}</ref> However, ''pubdate'', an optional [[boolean data type|boolean]] attribute of the {{tag|time|o}} element, is often used in conjunction with {{tag|article|o}}. If present, it indicates that the {{tag|time|o}} element is the date the {{tag|article|o}} was published. Note that ''pubdate'' applies only to the parent {{tag|article|o}} element, or to the document as a whole.<ref name=":0">{{Cite web|url=http://html5doctor.com/the-article-element/|title=The article element|website=html5doctor.com|language=en|access-date=2018-07-09}}</ref> |
||
==Comparison |
==Comparison with ''<section>''== |
||
HTML5 introduced both {{tag|article|o}} and {{tag|section|o}}; both are semantic tags, defining sections in a document, such as chapters, headers, footers.<ref>{{cite web |
|||
It is often difficult to determine when to use the ''<article>'' tag versus the ''<section>'' tag.<ref>{{cite web|url=http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article |title=HTML5: Section or Article? |publisher=Iandevlin.com |date=2013-08-19 |accessdate=2014-05-08}}</ref> Much like ''<article>'', ''<section>'' is a semantic HTML tag introduced in HTML5. The ''<section>'' tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.<ref>{{cite web|url=http://www.w3schools.com/tags/tag_section.asp |title=The section tag |publisher=W3Schools |date=2014-04-30 |accessdate=2014-05-08}}</ref> |
|||
|url=https://www.w3schools.com/tags/tag_section.asp |
|||
⚫ | |||
|title=The section tag |
|||
⚫ | |||
|website=W3Schools |
|||
''<section>'' tags can be nested inside ''<article>'' tags to better organize independent content: |
|||
|date=2014-04-30 |
|||
<source lang="html5"> |
|||
|accessdate=2014-05-08 |
|||
⚫ | |||
|url=http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article |
|||
|title=HTML5: Section or Article? |
|||
|website=Iandevlin.com |
|||
|date=2013-08-19 |
|||
|accessdate=2014-05-08 |
|||
}}</ref> |
|||
⚫ | |||
To better organize independent content {{tag|section|o}} tags can be nested inside {{tag|article|o}} tags: |
|||
<syntaxhighlight lang="html"> |
|||
<article> |
<article> |
||
<h2>Names of Shapes</h2> |
<h2>Names of Shapes</h2> |
||
<p>There are several different types of shapes...</p> |
<p>There are several different types of shapes...</p> |
||
<section> |
<section> |
||
<h4>Triangles</h4> |
<h4>Triangles</h4> |
||
<p>Here is some info about triangles</p> |
<p>Here is some info about triangles</p> |
||
</section> |
</section> |
||
<section |
<section> |
||
<h4>Circles</h4> |
<h4>Circles</h4> |
||
<p>These Pi-shaped wonders are mesmerizing and...</p> |
<p>These Pi-shaped wonders are mesmerizing and...</p> |
||
</section> |
</section> |
||
</article> |
</article> |
||
</syntaxhighlight> |
|||
</source> |
|||
Conversely, it may sometime be appropriate to nest an {{tag|article|o}} element inside a {{tag|section|o}} element. For example, in a web page containing several articles on varying subjects: |
|||
< |
<syntaxhighlight lang="html"> |
||
<section> |
<section> |
||
<h1>Articles about Paris Tourism</h1> |
<h1>Articles about Paris Tourism</h1> |
||
Line 93: | Line 88: | ||
</article> |
</article> |
||
</section> |
</section> |
||
</syntaxhighlight> |
|||
</source> |
|||
==Browser support== |
|||
The following browsers have support for this element:<ref>{{Cite web|url=http://caniuse.com/#search=article|title=Can I use... Support tables for HTML5, CSS3, etc|website=caniuse.com|language=en-US|access-date=2018-07-09}}</ref> |
|||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
==References== |
==References== |
||
{{reflist}} |
|||
==External links== |
|||
*[https://designgrande.com/best-rich-snippets-wordpress-plugins/ Rich Snippet Wordpress Plugins] |
|||
[[Category:HTML5]] |
|||
<references /> |
|||
[[Category:HTML tags|Article]] |
Latest revision as of 13:53, 12 November 2023
HTML |
---|
Comparisons |
HTML5 Article is a HTML5 semantic element, similar to <section>
and <header>
. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.
Features and usage[edit]
The HTML5 <article>
element represents a complete composition in a web page or web application that is 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.[1]
Examples[edit]
At its most basic, <article>
can be used to encapsulate a body of text and a corresponding title like so:
<article>
<h2>Insert Title Here</h2>
<p>Insert a paragraph of text here</p>
</article>
Forum entries and comments are typically implemented by nesting <article>
tags:
<article>
<header>
<h1>Entry Title</h1>
<p>Header Info</p>
</header>
<p>Content of entry...</p>
<article>
<header>
<h2>Author: John Smith</h2>
<p>Comment Info</p>
</header>
<p>Comment text...</p>
</article>
<article>
<header>
<h2>Author: Jane Johnson</h2>
<p>2nd Comment's Info</p>
</header>
<p>Comment text...</p>
</article>
</article>
Attributes[edit]
The <article>
element only includes the global HTML attributes such as contenteditable, id, and title.[2] However, pubdate, an optional boolean attribute of the <time>
element, is often used in conjunction with <article>
. If present, it indicates that the <time>
element is the date the <article>
was published. Note that pubdate applies only to the parent <article>
element, or to the document as a whole.[3]
Comparison with <section>[edit]
HTML5 introduced both <article>
and <section>
; both are semantic tags, defining sections in a document, such as chapters, headers, footers.[4][unreliable source?] The <article>
element is effectively a specialized kind of <section>
and it has a more specific meaning, referring to an independent, self-contained block of related content.[3][5]
Nesting examples[edit]
To better organize independent content <section>
tags can be nested inside <article>
tags:
<article>
<h2>Names of Shapes</h2>
<p>There are several different types of shapes...</p>
<section>
<h4>Triangles</h4>
<p>Here is some info about triangles</p>
</section>
<section>
<h4>Circles</h4>
<p>These Pi-shaped wonders are mesmerizing and...</p>
</section>
</article>
Conversely, it may sometime be appropriate to nest an <article>
element inside a <section>
element. For example, in a web page containing several articles on varying subjects:
<section>
<h1>Articles about Paris Tourism</h1>
<article>
<h3>The Eiffel Tower</h3>
<p>Standing at over 12 inches high...</p>
</article>
<article>
<h3>The Louvre</h3>
<p>A must-see in Paris tourism...</p>
</article>
</section>
Browser support[edit]
The following browsers have support for this element:[6]
- Desktop
- Google Chrome 5.0 and higher
- Firefox 4.0 and higher
- Internet Explorer 9.0 and higher
- Safari 4.1 and higher
- Opera 11.1 and higher
- Mobile
- Android 2.2 and higher
- Firefox Mobile (Gecko) 4.0 and higher
- IE Mobile 9.0 and higher
- Safari Mobile 5.0 and higher
- Opera Mobile 11.0 and higher
References[edit]
- ^ "HTML5 article element - W3C". W3.org. Retrieved 2014-05-08.
- ^ "The Article Contents element". MDN Web Docs. Retrieved 2018-07-09.
- ^ a b "The article element". html5doctor.com. Retrieved 2018-07-09.
- ^ "The section tag". W3Schools. 2014-04-30. Retrieved 2014-05-08.
- ^ "HTML5: Section or Article?". Iandevlin.com. 2013-08-19. Retrieved 2014-05-08.
- ^ "Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2018-07-09.