Article element: Difference between revisions
m Dudel250 moved page HTML5 article to Article element(HTML5): Moveing page to better name |
Cnwilliams (talk | contribs) Disambiguated: boolean → boolean data type |
||
Line 1: | Line 1: | ||
'''HTML5 Article''' is a [[HTML5]] [[semantic HTML|semantic]] element, similar to {{tag|section|o}} and {{tag|header|o}}. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in. |
'''HTML5 Article''' is a [[HTML5]] [[semantic HTML|semantic]] element, similar to {{tag|section|o}} and {{tag|header|o}}. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in. |
||
Line 56: | Line 55: | ||
===Attributes of {{tag|article|o}} === |
===Attributes of {{tag|article|o}} === |
||
The {{tag|article|o}} element only includes the global HTML attributes such as ''contenteditable'', ''id'', and ''title.''<ref >https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article Mozilla Developer Network</ref> However, ''pubdate'', an optional [[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="doctor" >http://html5doctor.com/the-article-element/ The article element - HTML5 Doctor</ref> |
The {{tag|article|o}} element only includes the global HTML attributes such as ''contenteditable'', ''id'', and ''title.''<ref >https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article Mozilla Developer Network</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="doctor" >http://html5doctor.com/the-article-element/ The article element - HTML5 Doctor</ref> |
||
==Comparison of ''<article>'' and ''<section>''== |
==Comparison of ''<article>'' and ''<section>''== |
Revision as of 12:02, 16 June 2014
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.
<article> element
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]
Supported Browsers
- 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
<article>
element examples
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 of <article>
The <article>
element only includes the global HTML attributes such as contenteditable, id, and title.[3] 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. [4]
Comparison of <article> and <section>
It is often difficult to determine when to use the <article>
tag versus the <section>
tag.[5] 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.[6]
The <article>
element is a specialized kind of <section>
; it has more specific semantic meaning than <section>
in that it is an independent, self-contained block of related content.[4]
Nesting examples
<section>
tags can be nested inside <article>
tags to better organize independent content:
<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>
In certain cases, it may be appropriate to nest an <article>
element inside a <section>
element. Consider 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>
References
- ^ "HTML5 article element - W3C". W3.org. Retrieved 2014-05-08.
- ^ http://caniuse.com/#search=article
- ^ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article Mozilla Developer Network
- ^ a b http://html5doctor.com/the-article-element/ The article element - HTML5 Doctor
- ^ "HTML5: Section or Article?". Iandevlin.com. 2013-08-19. Retrieved 2014-05-08.
- ^ "The section tag". W3Schools. 2014-04-30. Retrieved 2014-05-08.[unreliable source?]