HTML5 | article tag - Tutorialspoint.dev

<article> tag is one of the new sectioning element in HTML₅.

The HTML <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content of the site (even though it can be related).

In other words, The article element represent of component of a page that consist of self-contained composition in a document, page or a site. For Ex. in syndication.
Potential source for Article Element are :

A magazine/newspaper article
A blog entry
A forum post
A user submitted comment

This tag is most often used in two contexts:

On a page with a single piece of content, a single <article> element can be used to contain the main content and set it off from the rest of the page.
On a page with multiple pieces of content (a blog index page, a search results page, a category page, a news feed), multiple <article> elements can be used to contain each individual piece of content.

Either way it is similar to <div> element, and display the stylish work same. However, using the <article> element instead of <div> provides more semantic information to screen readers, search engines, and third-party applications

Default CSS setting : Most browsers will display the Article element with following values.

<article>  { 
                display:block; 
            } 

Example :

<!DOCTYPE html> 
<html> 
<head> 
       <title>Demo of article</title> 
  
</head> 
<body> 
<article style="width: 300px; border: 2px solid gray;  
padding: 10px; border-radius: 10px; margin:10px;"> 
 <img src="https://cdncontribute.geeksforgeeks.org/wp-content 
/uploads/image-of-a-computer-300x300.png"  
alt="" width="300" height="300" class=" 
alignnone size-medium wp-image-560930" /> 
      <h1> Computer</h1> 
      <p> 
computer is a device, which can be instructed to carry out 
any set of arbitrary arithmetic or  
logical operation automatically. 
The ability of computer to follow a  
sequence of operation, is known as program 
  
     </p> 
</article> 
</body> 
</html> 

Example: This is the image of a blog and Here, the red circle contain an article, it has its own image which make it separate from the other content of the site.
Example :

HTML5 | article tag

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books