Article element: Difference between revisions
Article Created |
Andy Dingley (talk | contribs) rv unconstructive edit Undid revision 1184686965 by 91.186.236.140 (talk) |
||
(48 intermediate revisions by 26 users not shown) | |||
Line 1: | Line 1: | ||
{{HTML}} |
|||
<!--- Don't mess with this line! --->{{Unreviewed}} |
|||
⚫ | |||
<!--- Replace Subject of my article with the subject, and the ... after is with whatever your subject is. ---> |
|||
'''Subject of my article''' is ... |
|||
<!--- Write your article below this line ---> |
|||
== HTML5 Article == |
|||
⚫ | |||
==<article> element== |
|||
⚫ | The [[HTML5]] |
||
== |
==Features and usage== |
||
⚫ | 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> |
||
<ref>http://caniuse.com/#search=article</ref> |
|||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
===<article> element examples=== |
|||
At its most basic, |
At its most basic, {{tag|article|o}} can be used to encapsulate a body of text and a corresponding title like so: |
||
< |
<syntaxhighlight lang="html"> |
||
<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 56: | 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>http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article HTML5: Section or Article?</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>http://www.w3schools.com/tags/tag_section.asp W3Schools - The section tag</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> |
|||
===Nesting examples=== |
|||
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 95: | 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}} |
|||
<references /> |
|||
<!--- After listing your sources please cite them using inline citations and place them after the information they cite. Please see http://en.wikipedia.org/wiki/Wikipedia:REFB for instructions on how to add citations. ---> |
|||
==External links== |
|||
* |
|||
*[https://designgrande.com/best-rich-snippets-wordpress-plugins/ Rich Snippet Wordpress Plugins] |
|||
* |
|||
* |
|||
* |
|||
[[Category:HTML5]] |
|||
<!--- STOP! Be warned that by using this process instead of Articles for Creation, this article is subject to scrutiny. As an article in "mainspace", it will be DELETED if there are problems, not just declined. If you wish to use AfC, please return to the Wizard and continue from there. ---> |
|||
[[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.