Example of HTML article tag

: The Article Contents element

The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Try it

A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an element, possibly with one or more s within.

Content categories	Flow content, sectioning content, palpable content
Permitted content	Flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content. Note that an element must not be a descendant of an element.
Implicit ARIA role	article
Permitted ARIA roles	application , document , feed , main , none , presentation , region
DOM interface	HTMLElement

Attributes

This element only includes the global attributes.

Usage notes

• Each should be identified, typically by including a heading ( — element) as a child of the element.
• When an element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be elements nested in the representing the blog post.
• Author information of an element can be provided through the element, but it doesn’t apply to nested elements.
• The publication date and time of an element can be described using the datetime attribute of a element.

Examples

article class="film_review"> h2>Jurassic Parkh2> section class="main_review"> h3>Reviewh3> p>Dinos were great!p> section> section class="user_reviews"> h3>User reviewsh3> article class="user_review"> h4>Too scary!h4> p>Way too scary for me.p> footer> p> Posted on time datetime="2015-05-16 19:00">May 16time> by Lisa. p> footer> article> article class="user_review"> h4>Love the dinos!h4> p>I agree, dinos are my favorite.p> footer> p> Posted on time datetime="2015-05-17 19:00">May 17time> by Tom. p> footer> article> section> footer> p> Posted on time datetime="2015-05-15 19:00">May 15time> by Staff. p> footer> article> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

HTML Article Tag

The HTML tag describes the primary content in a web page. Generally, this tag includes content, such as blog posts, article posts, news, stories, etc.

What is HTML Article Tag?

The tag is one of the latest sectioning tags in HTML5. This tag defines articles in an HTML document. Multiple tags can be added to an HTML document where the inner element in a nested element defines an article corresponding to the outer element.

Advantages of Using Article Tag

The tag usually includes the main content on a webpage or the snippet content of the main content. Users can consistently use a tag to specify the sections or divisions on a web page. But handling the tag is beneficial because when a web browser or web crawler accesses a web page and sees a section of content within the tag, it will immediately understand that it is the main content. In this, the author information of an element can be provided using the element, but keep in mind that this may not apply to nested elements. Headers from to can be nested inside tags. If the user does not apply the tag first, its placement is allowed.

How Does the Article Tag Work?

A single defines the primary content that is also unique. In contrast, a web page with multiple tags may include various contents, and in other ways, these elements are equivalent to tags. Here the primary purpose of the tag is to clean up the content by reducing the function of the tag in the HTML code.

The tag has special meaning for web browsers and search engines; Otherwise, It does nothing different. This tag can also be styled using CSS, similar to the tag.

An article with independent, self-contained content:

     
This is the main content of this HTML document. And this content is contained within the article tag.
  

Источник

HTML5 — Элемент article

Элемент article предназначен для создания секции в документе, контент которой представляет собой некоторое завершённое или автономное содержимое. Другими словами, с помощью данного элемента можно добавить смысл в документ, который будет говорить о том, что данный контент является некоторой вещью, и может быть рассмотрен и понят пользователем отдельно от остального содержимого страницы.

Обычно этот элемент применяется для создания секции на странице, содержимое которой представляет собой статью, пост блога, запись на форуме, комментарий пользователя, интерактивный виджет, гаджет, или любой другой независимый контент.

Применение элемента article

Например, рассмотрим использование элемента article для разметки поста блога:

   
Тема поста
 
 Дата публикации 
 
 
.
 

Вложенные элементы article

При создании структуры документа спецификация HTML 5 позволяет помещать одни элементы article в другие. Это используется для того, чтобы показать то, как контенты этих элементов относятся друг к другу. А именно передать то, что содержимое дочерних элементов article связано с содержимым родительского элемента article .

Например, рассмотрим фрагмент кода, содержащий статью с комментариями.

 
  
Тема статьи
 
 Дата публикации 
 
 
.
  
 
Комментарии
  
    
Текст комментария.
 
  
    
Содержимое комментария.
 
 
 

Вышеприведенный пример будет иметь следующую структуру (outline):

[article] Тема статьи [section] Комментарии [article] Untitled [article] Untitled

Примечание: Согласно спецификации HTML5, элемент article не может иметь элемент main в качестве своего потомка.

Источник

HTML5 Article Element Tutorial

In this page, we have discussed Description, Usage, Attributes, Example, Result, and Compatibility of HTML5 article element.

The HTML Article element () represents independent (w.r.t a web document, page, site or application) content, for example a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget.

The HTML Article Element contains either actual content or contains several different section elements or one or more article elements within it.

If it contains article element within it, the content of the inner articles supposed to be related to the outer article’s content.

If it is necessary to provide author information of the article, that can be done using .

Using pubdate attribute of time element, date and time of publication of an article can be described.

Usage

 
Tutorial of HTML5 article element
 
HTML5 article element represents independent item like a blog entry in an web document.
 
 

Whether start and end tag are required

Both start and end tag are required.

What an article element can contain

Which elements can contain article element

Any element except the elements which can contain text or embedded content.

Attributes

article element does not have any other attributes than the global attributes (accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style. tabindex, title), common to all elements.

Example

       
Tutorial of HTML5 article element
 
HTML5 article element represents independent item like a blog entry in an web document.
 
   

Result

Browser Compatibility

We have successfully tested the above example with following browser versions.

Test your Programming skills with w3resource’s quiz.

Follow us on Facebook and Twitter for latest update.

• Weekly Trends
• Java Basic Programming Exercises
• SQL Subqueries
• Adventureworks Database Exercises
• C# Sharp Basic Exercises
• SQL COUNT() with distinct
• JavaScript String Exercises
• JavaScript HTML Form Validation
• Java Collection Exercises
• SQL COUNT() function
• SQL Inner Join
• JavaScript functions Exercises
• Python Tutorial
• Python Array Exercises
• SQL Cross Join
• C# Sharp Array Exercises

We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook

Источник