W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


article ... ⁄article


Share it

article intro article browser display article parents - children article syntax

HTML5 article element

The article element allows you to mark up a section of content that can be independently distributable or reusable. »video

It may refer to an article in the literal sense (article of a newspaper or magazine) or an independent item (an independent section of content) like the comments of a user to a post, or a video...

Note: The article element creates a section (potentially has a heading = its own outline).

About article

Display & support article

Firefox iconChrome iconIE icon9+Opera iconSafari icon

Parents, children article

Attributes article

Warning

Use article element to mark up sections of content that can be independently distributable or reusable
and section element to mark up sections of content part of a thematic group.

Syntax article

1<article> ... </article> »video

Attributes and Values article (comma separated)

<articleattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<article accesskey="h"> ... </article>
2.class=class name»html »img<article class="class_name"> ... </article>
3.contenteditable="",  , true, false »html<article contenteditable="true"> ... </article>
4.contextmenu=menu id value»html<article contextmenu="menu_id_value"> ... </article>
5.data-*= value -<article data-http-error="404"> ... </article>
6.dir=ltr, rtl, auto»html<article dir="ltr"> ... </article>
7.draggable= true,  , false»img<article draggable="false"> ... </article>
8.dropzone= copy, move, link, string:, file: -<article dropzone="copy"> ... </article>
9.hidden= "",  , hidden»html »img<article hidden="hidden"> ... </article>
10.id=id name»html »img<article id="unique_id_name"> ... </article>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<article lang="en"> ... </article>
17.spellcheck="",  , true, false»html<article spellcheck="true"> ... </article>
18.style=CSS property:value»html »img<article style="color:red"> ... </article>
19.tabindex= integer »img<article tabindex="3"> ... </article>
20.title=text»html »link»style »abbr»dfn
»img »meter
<article title="html page"> ... </article>
21.translate="", yes, no»html »img<article translate="yes"> ... </article>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration article element

HTML5 article element: content independently distributable

min video details
00:00 video tutorial article element HTML5
00:05 article element allows you to mark up a section of content that can be independently distributable or reusable
00:23 we have 2 independent sections of content on the page that can be marked up using article element
00:54 the 2 articles in page
01:01 any of these 2 independent sections of content (articles) should still make sense if we get them out of this current context
01:14 example: we will take the 2nd article from the first page and add it to this new page that contains different articles about Clouds=> the article, as independent item, still makes sense
01:39 the second article integrated perfectly into the new page,article which makes sense on its own
01:43 this demo presented the content of the article element as an article in the literal sense, but it could've been a video, a comment of a user or... any other section of content that can be independently distributable or reusable

For more information about the article element, please see the specs: W3CWHATWG