article ... ⁄article
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
- is an optional element
- multiple article elements allowed per HTML5 document
Display & support article
- display in browser »video
- display type: block
9+
Parents, children article
- article nested within elements »article parents
- elements nested within article »article children
»examples
Attributes article
- required: none
- optional: global attributes, event attributes
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 | <> ... </> »video |
Attributes and Values article (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 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 | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| 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 element, please see the specs: W3C ⁄ WHATWG